/* Practice tab — the idle screen + the (hidden) in-session status row.

   The learner sets nothing: both allowances are constants in
   practice/timer.js. What used to be a setup panel of three inputs is a
   readiness dial and one button now — its own rules are in
   styles/practice/readiness.css. */

/* While no session is running, only the setup panel is visible; once a
   session starts, the setup panel yields to the question split. */
#page-practice.session-idle .practice-split {
  display: none;
}

/* The stage ladder is a sibling of the split, not a child, so hiding the split
   leaves it behind. On the setup screen that stranded the paused session's
   concept, rung and difficulty under the setup card — describing a question
   that is not on screen, on a page where nothing has started yet. It belongs to
   the split, so it goes when the split goes.

   This used to name only `.concept-topbar`, while the difficulty bar beside it
   was a second element with no such rule — so the setup screen still carried a
   0-100 track under the start button before a session existed. One readout now,
   one rule, and the whole thing goes. */
#page-practice.session-idle .stage-ladder {
  display: none;
}

#page-practice:not(.session-idle) .session-setup {
  display: none;
}

/* THE IDLE CARD. Same box the setup panel used, minus everything that was in
   it — see styles/practice/readiness.css for what is. */
.session-setup {
  max-width: 560px;
  margin: 48px auto;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* 🔴 OFF THE SCREEN, NOT GONE. timer.js binds resume, discard and start to
   these, and #session-resume-btn's `disabled` is how a saved question that is
   no longer in the bank refuses to come back. The Continue button on the dial
   forwards a click to whichever applies (practice/session-idle.js). Deleting
   them means moving three handlers, not tidying up markup.

   `position: absolute` rather than `display: none`: a display-none button
   still takes a synthetic click, but it is out of the accessibility tree, and
   the resume path's own error text (#session-resume-summary) has to stay
   readable to a screen reader when it refuses. */
.session-resume-panel,
.session-start-btn {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The one exception to that: `.hidden` on the resume panel is timer.js saying
   there is nothing saved, and then it really is gone. */
.session-resume-panel.hidden {
  display: none;
}

.session-summary {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.session-summary.hidden {
  display: none;
}

/* `.session-setup-title/-note/-fields`, `.session-field(-label)`,
   `.session-time-estimate`, `.session-resume-title`, `.session-resume-actions`
   and `.timer-input` were all DELETED on 2026-08-23 with the setup panel. The
   inputs are the point: the learner does not set the clock, so there is no
   field to style. */

/* In-session status row (replaces the old timed-mode row) */
.session-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.session-status-row.hidden {
  display: none;
}

/* ⚠️ TEMPORARY — the session chrome is off the practice screen.
   2026-08-22, at Seth's request: the strip between the topbar and the question
   is the stage ladder and nothing else, so the question counter, the phase
   word, the countdown, Pause & exit and End session are all hidden here. The
   MARKUP stays (`practice/watch.py` requires `#session-pause-btn` and friends,
   and `timer.js` still writes to every one of them) — the next pass moves the
   two buttons into a three-dot menu on the notch between the panels, and this
   rule goes with it.

   🔴 THE TIMER STILL RUNS. `timer.js` is untouched: answer time still
   auto-submits and review time still advances, with nothing on screen counting
   down. That is the cost of hiding this row and it is the reason the rule is
   marked temporary rather than tidied away. */
.session-status-row {
  display: none;
}

.session-progress,
.session-phase {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-status-row.session-status--review .session-phase {
  color: var(--ok);
}

.session-countdown {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  letter-spacing: 1px;
}

.session-countdown--low {
  color: var(--danger);
  border-color: rgb(var(--danger-rgb) / 0.5);
}

/* .session-end-btn went with #session-end-btn (2026-08-23): a block has no
   length, so there is nothing to end early. */
.session-pause-btn {
  font-size: 12px;
  padding: 6px 10px;
}

.session-pause-btn {
  border-color: rgb(var(--ok-rgb) / 0.35);
}