/* Practice tab — page shell: container, split panels, responsive. */
/* ================================================================
   PRACTICE TAB
   ================================================================ */

/* The page is the column, not `.practice-container`. That started as a
   reserve for `#stage-ladder`, which was a full-width strip between the topbar
   and everything else on the tab and needed its natural height taken off the
   split.

   🪦 THE STRIP IS GONE — 2026-08-23. The ladder moved INTO the left panel, as
   a block inside the question's heading card (index.html,
   styles/practice/question.css). `#page-practice` has one flex child again.
   The column stays because the viewport arithmetic below is real either way,
   and because the next thing that wants to sit above both panels will want
   exactly this shape — but nothing is claiming that space today, so a rule
   here that reserves height is reserving it for nothing. */
/* 🔴 And the id has to re-assert `.hidden`. `#page-practice` is (1,0,0) and
   `.hidden` in components.css is (0,1,0), so the moment this rule set a
   `display` the tab could no longer be switched off and practice showed
   underneath every other page. This is the same trap the note further down
   records for `#practice-submit-area`. */
#page-practice.hidden {
  display: none;
}

/* 🔴 The 40px that used to be subtracted here was a reserve for `.footer`,
   and there is NO FOOTER. `styles/layout.css` still styles one — fixed to the
   bottom, 40px tall — but no `<footer>` has been in index.html for as long as
   this file's history goes back, so the reserve bought a strip of BARE BODY
   BACKGROUND under the practice page. Measured on prod, 2026-08-23: 0
   `.footer, footer` elements, 96px of `--bg` below `#page-practice`.

   ⚠️ `--dd-topbar-h` (styles/layout.css) is the bar's height, not a guess at
   it — but it is still SUBTRACTED here rather than measured, and that is wrong
   in one place: the solo route (`html.dd-solo`, styles/solo-route.css) has no
   topbar at all, so a solo /practice embed takes off a bar that is not on the
   page. Pre-existing, and not what the black band was. Same for
   `#guest-banner`, which is 116px and has never been in this arithmetic. */
#page-practice {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--dd-topbar-h));
  overflow: hidden;
  padding: 0;
}

/* A column. It held the stage-ladder strip above `.practice-split` until the
   ladder moved into the left panel; what the shape is still doing is the
   arithmetic below. With the old `height: 100%` on the split, the topbar's
   height was ADDED to a split that already claimed the full container, and the
   surplus disappeared into `overflow: hidden` — the bottom of both panels was
   simply cut off. */
.practice-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* The anchor for #practice-notch, which hangs from this box's top edge
     (styles/practice/notch-menu.css). It used to hang off `.practice-split`,
     which is `display: none` between sessions — and the notch has to survive
     a session ending, so it anchors to the box that is on screen either way. */
  position: relative;
  /* Was the viewport arithmetic itself; the page owns that now and this takes
     what the strip above it leaves. `min-height: 0` is what lets it shrink
     that far — without it a flex item refuses to go below its content. */
  min-height: 0;
  overflow: hidden;
}

/* 🔴 THE IDLE SURFACE SCROLLS; THE RUNNING ONE DOES NOT. `#page-practice` is a
   fixed `100vh - topbar` box with `overflow: hidden` above, and that is right
   DURING a session: `.practice-split` fills it and each of the two panels has
   its own `overflow-y: auto`, so the prompt and the editor scroll separately
   and neither the topbar nor the notch ever leaves the screen.

   Between blocks there is no such panel. The readiness card is a direct child
   of this box, and it has kept growing — dial, caption, the clock line, the
   Continue button, "What you are learning", the weekly bars — so past roughly
   1000px of content its bottom was simply CLIPPED, with nothing to scroll and
   no scrollbar to say anything had been cut (Seth, 2026-09-09: "it's cut off
   at the bottom ... you can't scroll down on this page"). `overflow: hidden`
   on an element that overflows is not a layout, it is a deletion.

   Scoped to `.session-idle` (1,2,0 — it beats the (0,1,0) rule above) rather
   than relaxed for every state, because a scrolling container during a session
   is the bug this file's history opens with: the split claims the full height,
   the surplus scrolls the WHOLE page, and the two panels' own scrollers never
   engage. */
#page-practice.session-idle .practice-container {
  overflow-y: auto;
}

.practice-split {
  display: flex;
  flex: 1 1 auto;
  /* NOT the notch's anchor any more — that moved to `.practice-container`, so
     the notch outlives a session (see the note there). Still positioned: the
     panels' own overlays measure against it. */
  position: relative;
  /* Without this, a flex item refuses to shrink below its content's height and
     the panels' own `overflow-y: auto` never engages. */
  min-height: 0;
}

/* Left Panel */
.practice-left {
  flex: 1;
  padding: 28px 32px 32px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Right Panel */
.practice-right {
  flex: 1;
  padding: 28px 32px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* `.hidden` (components.css) and these are both single-class selectors, so the
   winner is whichever file loads last — and that is this one. The result was a
   panel that ignored `classList.add("hidden")`: torch routing set the class,
   the editor stayed on screen, and the "binary interface" rule in ui.js was
   quietly not in force. Found on the Colab edition, where the editor is meant
   to be gone entirely; it was never visible on the normal deploy only because
   no bank question carries a notebook path. */
.practice-left.hidden,
.practice-right.hidden {
  display: none;
}
/* ================================================================
   RESPONSIVE — Practice
   ================================================================ */

@media (max-width: 900px) {
  .practice-split {
    flex-direction: column;
  }

  .practice-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 50vh;
  }

  .practice-right {
    max-height: 50vh;
  }

  .practice-container {
    height: auto;
    overflow: visible;
  }
}