/* ============================================================
 * Tier 1 interactive features
 *   - Sandbox panel (floating Python scratchpad)
 *   - Predict-the-output widget
 *   - Fix-this-code corrective exercise
 *   - Chapter-end MCQ quiz
 * ============================================================ */

/* ============================================================
 *  Sidebars — only the page scrolls
 *
 *  Material wraps each sidebar in .md-sidebar__scrollwrap with
 *  overflow-y: auto + a fixed height, creating an independent
 *  scroll region.  We unify everything to the page scroll:
 *    - both sidebars are position: sticky, top: just below the
 *      double-row header (3.5rem + 2.75rem = 6.25rem)
 *    - their scrollwraps are overflow: visible, height: auto
 *      → no internal scrollbars
 *    - if the sidebar is taller than viewport, the user keeps
 *      scrolling the page and the sidebar naturally goes with it
 *      (sticky engages until parent's bottom edge)
 *
 *  IMPORTANT: !important is needed because Material applies these
 *  rules inline via JS as you scroll.
 * ============================================================ */

.md-sidebar {
  position: sticky !important;
  top: 6.5rem !important;                 /* header (3.5) + meganav (2.75) + breath */
  height: auto !important;
  max-height: none !important;
  align-self: flex-start !important;
  overflow: visible !important;
}
.md-sidebar__scrollwrap,
.md-sidebar .md-sidebar__scrollwrap {
  overflow: visible !important;
  -webkit-overflow-scrolling: auto;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
}
.md-sidebar__inner { padding-bottom: 1rem; }

/* Material adds JS-driven inline `height` to scrollwraps for its
   "lock" behavior. Override hard. */
.md-sidebar__scrollwrap[style] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Hide any leftover scrollbar in case a UA still shows one. */
.md-sidebar__scrollwrap::-webkit-scrollbar { display: none !important; }
.md-sidebar__scrollwrap { scrollbar-width: none !important; }

@media (max-width: 76.1875em) {
  /* Material switches to a drawer overlay below this width — leave it alone. */
  .md-sidebar { position: fixed !important; top: 0 !important; }
}

/* Shared tokens — fall back if gfg-theme.css hasn't defined them. */
:root {
  --edu-correct:        #16A34A;
  --edu-correct-bg:     rgba(22, 163, 74, 0.10);
  --edu-correct-border: rgba(22, 163, 74, 0.45);
  --edu-wrong:          #DC2626;
  --edu-wrong-bg:       rgba(220, 38, 38, 0.08);
  --edu-wrong-border:   rgba(220, 38, 38, 0.45);
  --edu-neutral-bg:     rgba(99, 102, 241, 0.06);
  --edu-neutral-border: rgba(99, 102, 241, 0.30);
}

/* ============================================================
 *  Footer Prev / Next — sit visually inside the content column
 *
 *  Material wraps prev/next in <footer class="md-footer">, which by
 *  default paints a dark band that stretches edge-to-edge.  We:
 *    1. Strip the dark background from .md-footer (transparent now).
 *    2. Hide the secondary .md-footer-meta (the copyright bar) so the
 *       chapter ends with prev/next, not corporate chrome.
 *    3. Cap .md-footer__inner to 900px and center the two cards.
 *    4. Style each card identically, equal-sized, with subtle hover.
 * ============================================================ */

.md-footer {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border: 0 !important;
}
.md-footer-meta,
.md-footer__inner.md-footer-meta { display: none !important; }

.md-footer__inner.md-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem 1rem 2.4rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  background: transparent;
}

.md-footer__inner .md-footer__link {
  flex: 1 1 0;                 /* equal-width siblings */
  min-width: 0;
  max-width: 26rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  background: #FFFFFF;
  color: var(--color-text-primary, #0F172A) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
[data-md-color-scheme="slate"] .md-footer__inner .md-footer__link {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #E2E8F0 !important;
}
.md-footer__inner .md-footer__link:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.40);
  box-shadow: 0 10px 28px -10px rgba(59, 130, 246, 0.30), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.md-footer__inner .md-footer__link--prev { justify-content: flex-start; }
.md-footer__inner .md-footer__link--next { justify-content: flex-end; }

.md-footer__inner .md-footer__title {
  margin: 0;
  padding: 0;
  flex: 1;
}
.md-footer__inner .md-footer__direction {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary, #64748B);
  display: block;
  margin-bottom: 0.1rem;
}
.md-footer__inner .md-footer__link--prev .md-footer__title > .md-ellipsis,
.md-footer__inner .md-footer__link--next .md-footer__title > .md-ellipsis {
  font-weight: 600;
  color: inherit;
}
.md-footer__inner .md-footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

@media (max-width: 720px) {
  .md-footer__inner.md-grid {
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.85rem 0.85rem 2rem;
  }
  .md-footer__inner .md-footer__link {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* ============================================================
 *  Sandbox panel
 * ============================================================ */

.edu-sandbox-toggle {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  background: #4F46E5;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.40), 0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.edu-sandbox-toggle:hover {
  transform: translateY(-1px);
  background: #4338CA;
}
.edu-sandbox-toggle__icon {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.95em;
  letter-spacing: -0.02em;
}
.edu-sandbox-toggle.is-hidden { display: none; }

.edu-sandbox {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 100;
  width: min(36rem, calc(100vw - 2.4rem));
  max-width: 36rem;
  height: 0;
  background: #0F172A;
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, height 0.22s ease;
}
.edu-sandbox.is-open {
  height: min(28rem, 70vh);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.edu-sandbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55em 0.85em;
  background: #1E293B;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.edu-sandbox__title {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: #F1F5F9;
}
.edu-sandbox__topic {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.95em;
}
.edu-sandbox__dot {
  width: 8px;
  height: 8px;
  background: #4ADE80;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.55);
}
.edu-sandbox__actions {
  display: inline-flex;
  gap: 0.35em;
}
.edu-sandbox__btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #E2E8F0;
  padding: 0.30em 0.70em;
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.edu-sandbox__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.20);
}
.edu-sandbox__btn:disabled { opacity: 0.6; cursor: progress; }
.edu-sandbox__btn--run {
  background: #4F46E5;
  border-color: #4F46E5;
}
.edu-sandbox__btn--run:hover:not(:disabled) {
  background: #4338CA;
  border-color: #4338CA;
}

.edu-sandbox__body {
  display: grid;
  grid-template-rows: 1fr auto;
  flex: 1;
  min-height: 0;
}

.edu-sandbox__editor {
  resize: none;
  border: 0;
  outline: 0;
  width: 100%;
  height: 100%;
  padding: 0.7em 0.95em;
  background: #0B1224;
  color: #E2E8F0;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.80em;
  line-height: 1.55;
  tab-size: 4;
}
.edu-sandbox__output {
  margin: 0;
  padding: 0.6em 0.95em;
  max-height: 11em;
  overflow: auto;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.78em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  background: #060B17;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  white-space: pre-wrap;
}
.edu-sandbox__output.is-error { color: #FCA5A5; background: rgba(220, 38, 38, 0.08); }

.edu-sandbox__foot {
  display: flex;
  justify-content: space-between;
  padding: 0.30em 0.85em;
  background: #1E293B;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.70em;
  color: rgba(255, 255, 255, 0.50);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}
.edu-sandbox__status { font-style: italic; }

@media (max-width: 720px) {
  .edu-sandbox {
    right: 0.6rem;
    bottom: 0.6rem;
    width: calc(100vw - 1.2rem);
  }
  .edu-sandbox.is-open { height: min(70vh, 24rem); }
}

/* ============================================================
 *  Predict-the-output widget
 * ============================================================ */

.edu-predict {
  border: 1px solid var(--edu-neutral-border);
  border-left: 4px solid #4F46E5;
  background: var(--edu-neutral-bg);
  border-radius: 8px;
  padding: 0.9em 1.05em;
  margin: 1em 0 1.3em;
}
.edu-predict__title {
  font-weight: 700;
  font-size: 0.83em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4F46E5;
  margin-bottom: 0.55em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.edu-predict__title::before { content: "🎯"; font-size: 1.05em; }
.edu-predict__question { font-size: 0.93em; margin-bottom: 0.7em; }
.edu-predict__code {
  margin: 0.5em 0 0.7em;
  padding: 0.55em 0.85em;
  background: #0F172A;
  color: #E2E8F0;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.80em;
  line-height: 1.5;
  border-radius: 6px;
  white-space: pre;
  overflow-x: auto;
}
.edu-predict__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55em 0.75em;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.85em;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 6px;
  background: #FFFFFF;
  color: #0F172A;
}
[data-md-color-scheme="slate"] .edu-predict__input {
  background: #0F172A;
  color: #E2E8F0;
  border-color: rgba(255, 255, 255, 0.10);
}
.edu-predict__row {
  display: flex;
  gap: 0.5em;
  margin-top: 0.55em;
  flex-wrap: wrap;
}
.edu-predict__check,
.edu-predict__reveal {
  padding: 0.40em 0.95em;
  font-size: 0.80em;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: 0;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
}
.edu-predict__check { background: #4F46E5; color: #FFFFFF; }
.edu-predict__check:hover { background: #4338CA; }
.edu-predict__reveal {
  background: transparent;
  color: #4F46E5;
  border: 1px solid rgba(79, 70, 229, 0.4);
}
.edu-predict__reveal:hover { background: rgba(79, 70, 229, 0.08); }
.edu-predict__result {
  margin-top: 0.65em;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.80em;
  padding: 0.55em 0.75em;
  border-radius: 6px;
  white-space: pre-wrap;
}
.edu-predict__result.is-correct {
  background: var(--edu-correct-bg);
  border: 1px solid var(--edu-correct-border);
  color: var(--edu-correct);
}
.edu-predict__result.is-wrong {
  background: var(--edu-wrong-bg);
  border: 1px solid var(--edu-wrong-border);
  color: var(--edu-wrong);
}

/* ============================================================
 *  Fix-this-code (corrective)
 * ============================================================ */

.edu-fix {
  border: 1px solid var(--edu-wrong-border);
  border-left: 4px solid #DC2626;
  background: rgba(220, 38, 38, 0.04);
  border-radius: 10px;
  margin: 1em 0 1.3em;
  overflow: hidden;
}
.edu-fix__head {
  display: flex;
  justify-content: space-between;
  padding: 0.55em 0.95em;
  background: rgba(220, 38, 38, 0.08);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B91C1C;
  align-items: center;
}
.edu-fix__head::before { content: "🛠 FIX THE BUG"; }
.edu-fix__expected {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.60);
}
[data-md-color-scheme="slate"] .edu-fix__expected { color: rgba(255, 255, 255, 0.55); }
.edu-fix__editor {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85em 1em;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.82em;
  line-height: 1.55;
  background: #0F172A;
  color: #E2E8F0;
  border: 0;
  outline: 0;
  resize: vertical;
  tab-size: 4;
}
.edu-fix__controls {
  display: flex;
  gap: 0.5em;
  padding: 0.5em 0.85em;
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
}
.edu-fix__btn {
  padding: 0.40em 0.95em;
  font-size: 0.80em;
  font-weight: 600;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
}
.edu-fix__btn--run {
  background: #4F46E5;
  color: #FFFFFF;
}
.edu-fix__btn--run:hover { background: #4338CA; }
.edu-fix__btn--check {
  background: #16A34A;
  color: #FFFFFF;
}
.edu-fix__btn--check:hover { background: #15803D; }
.edu-fix__btn--reset {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.65);
}
[data-md-color-scheme="slate"] .edu-fix__btn--reset {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
}
.edu-fix__btn:disabled { opacity: 0.6; cursor: progress; }
.edu-fix__status {
  margin-left: auto;
  font-size: 0.75em;
  font-style: italic;
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}
[data-md-color-scheme="slate"] .edu-fix__status { color: rgba(255, 255, 255, 0.55); }
.edu-fix__output {
  margin: 0;
  padding: 0.6em 1em;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.80em;
  line-height: 1.55;
  background: #060B17;
  color: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 18em;
  overflow: auto;
  white-space: pre-wrap;
  display: none;
}
.edu-fix__output.is-shown { display: block; }
.edu-fix__verdict {
  padding: 0.55em 1em;
  font-size: 0.85em;
  font-weight: 600;
  display: none;
}
.edu-fix__verdict.is-shown { display: block; }
.edu-fix__verdict.is-correct {
  background: var(--edu-correct-bg);
  color: var(--edu-correct);
  border-top: 1px solid var(--edu-correct-border);
}
.edu-fix__verdict.is-wrong {
  background: var(--edu-wrong-bg);
  color: var(--edu-wrong);
  border-top: 1px solid var(--edu-wrong-border);
}

/* ============================================================
 *  Quiz
 * ============================================================ */

.edu-quiz {
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-left: 4px solid #4F46E5;
  background: rgba(99, 102, 241, 0.04);
  border-radius: 10px;
  padding: 1em 1.2em;
  margin: 1.4em 0;
}
.edu-quiz__title {
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #4F46E5;
  margin-bottom: 0.7em;
}
.edu-quiz__title::before { content: "📝  "; }
.edu-quiz__q {
  margin: 0.85em 0 0.5em;
  padding: 0.7em 0 0;
  border-top: 1px dashed rgba(99, 102, 241, 0.18);
}
.edu-quiz__q:first-of-type { border-top: 0; padding-top: 0; }
.edu-quiz__qtext { font-weight: 600; margin-bottom: 0.45em; font-size: 0.95em; }
.edu-quiz__opts { list-style: none; padding: 0; margin: 0; }
.edu-quiz__opt {
  display: block;
  padding: 0.45em 0.7em;
  margin: 0.25em 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.91em;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-md-color-scheme="slate"] .edu-quiz__opt {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.edu-quiz__opt:hover { background: rgba(99, 102, 241, 0.08); }
.edu-quiz__opt input { margin-right: 0.55em; }
.edu-quiz__opt.is-correct {
  background: var(--edu-correct-bg);
  border-color: var(--edu-correct-border);
  color: var(--edu-correct);
}
.edu-quiz__opt.is-wrong {
  background: var(--edu-wrong-bg);
  border-color: var(--edu-wrong-border);
  color: var(--edu-wrong);
}
.edu-quiz__explain {
  display: none;
  margin-top: 0.55em;
  padding: 0.5em 0.7em;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  font-size: 0.86em;
  color: rgba(0, 0, 0, 0.75);
  font-style: italic;
}
[data-md-color-scheme="slate"] .edu-quiz__explain {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
}
.edu-quiz__explain.is-shown { display: block; }
.edu-quiz__foot {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 0.9em;
  padding-top: 0.7em;
  border-top: 1px solid rgba(99, 102, 241, 0.18);
}
.edu-quiz__submit {
  padding: 0.45em 1.1em;
  font-size: 0.83em;
  font-weight: 600;
  background: #4F46E5;
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.edu-quiz__submit:hover { background: #4338CA; }
.edu-quiz__score {
  font-weight: 600;
  font-size: 0.92em;
  color: #4F46E5;
}