/*
 * CertaRounds — Question / Session screen (src/screens/session.js). Owned by its M3 screen agent.
 * Semantic tokens only (docs/COMPONENTS.md §2). Rules are scoped to this screen's own classes
 * (session-*); components are composed and placed, never restyled.
 *
 *   phone      stem · options · confidence · hint row · sticky action bar (Submit → Teach Me · Next)
 *   768–1099   single column; the action bar is pinned to the viewport bottom (fine-pointer ≥1024: key hints)
 *   ≥1100      .reader--split + .reader--split-1100 (layout.css owns widths and the sticky panel): the right
 *              column is the round navigator before an answer and the explanation after it (no
 *              nested scroll); why-missed + tools and the action bar stay under the options, so
 *              Submit becomes Next in the same place
 */

/* ============ Frame ============ */
.session-reader { align-items: start; }
.session-main { display: flex; flex-direction: column; min-width: 0; }

/* ============ Meta row: specialty · topic · timer ============ */
/* phone (R3): [specialty][topic] share a row when they fit, else the topic wraps under; the timer
   sits under the title in the top bar.      ≥768: [specialty][topic ········][timer] */
.session-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "spec topic timer";
  align-items: start;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-1) 0 var(--sp-4);
}
.session-meta__spec { grid-area: spec; justify-self: start; }
.session-meta__topic { grid-area: topic; min-width: 0; display: flex; }
.session-meta__timer { grid-area: timer; justify-self: end; min-height: 32px; white-space: nowrap; }
.session-meta--phone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.session-meta--phone > .session-meta__topic { flex: 0 1 auto; max-width: 100%; }

/* (R4: a long chapter title stays a tinted chip that wraps — the DS chip--wrap, 16px radius.) */

/* Phone top bar: "Question 18 / 40" with the timer under it (R3 P2) */
.session-headtitle { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.2; }
.session-headtitle .topbar__title { line-height: 1.2; }
.session-headtimer.timer { gap: 4px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-2); }
.session-headtimer.timer svg { width: 14px; height: 14px; }
/* Paced round: the per-question target after the clock ("0:42 / 1:30") */
.session-pace { margin-left: 2px; font-weight: var(--fw-medium); color: var(--text-3); }

/* ============ Stem ============ */
.session-stem {
  max-width: var(--measure);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-stem);
  line-height: var(--lh-stem);
  color: var(--text);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
/* R1: ≈68 characters a line at 18px (68ch measures the wide "0" glyph and gave ~85); options keep 720 */
@media (min-width: 768px) { .session-stem { max-width: 56ch; } }

/* ============ Options, confidence, hint ============ */
.session-options { margin-bottom: var(--sp-6); }
.session-reader.is-answered .session-options { margin-bottom: 0; }
/* (Option hyphenation and the dimmed-letter colour are the design system's now — F3.) */
/* Ion charges and formula subscripts from readable() sit inside the line, not above it */
.session-stem sup, .session-stem sub, .session-options sup, .session-options sub, .session-result sup, .session-result sub {
  font-size: .7em; line-height: 0;
}
.session-confidence { margin-bottom: var(--sp-2); }
/* Phones: "Not sure · Somewhat sure · Very sure" (R4: the reference's full labels). A label never
   wraps inside itself (R2 P1): the pills size to their labels and share the row; only a whole pill
   moves to a second row, on the narrowest screens or at very large text. */
@media (max-width: 767px) {
  .session-confidence .confidence__opts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
  .session-confidence .confidence__opt { flex: 0 0 auto; }
  .session-confidence .confidence__pill { white-space: nowrap; padding-left: 6px; padding-right: 8px; }
}
/* 360: a touch tighter so the three still share one row (they measure ~323 of 328px) */
@media (max-width: 379px) {
  .session-confidence .confidence__opts { column-gap: var(--sp-1); }
  .session-confidence .confidence__pill { gap: 5px; padding-left: 4px; padding-right: 6px; }
}
.session-main > .hint-row { margin-top: var(--sp-4); }
/* Laptops: a slightly tighter rhythm keeps the confidence row in the first screen more often */
@media (min-width: 1024px) {
  .session-reader.is-open .session-options { margin-bottom: var(--sp-5); }
  .session-main > .hint-row { margin-top: var(--sp-3); }
}

/* ============ Nudge — lives in the action bar, so it is never under it (R2 P1) ============ */
.session-nudge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--warning);
}
.session-nudge[hidden] { display: none; }
.session-nudge .icon { flex-shrink: 0; }
.session-actions.has-nudge .session-keys,
.session-actions.has-nudge .session-roundline { display: none; }   /* ≥768 the nudge takes their place */
/* Phones (R3 P2): a small pill floating just above the bar — the bar never changes height, so
   nothing on the page jumps when it appears. */
@media (max-width: 767px) {
  .session-actions .session-nudge {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--sp-2));
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--warning-bg);
    box-shadow: inset 0 0 0 1px var(--warning-border), var(--shadow-card);
    white-space: nowrap;
  }
}

/* ============ Right column (phone/tablet: under the options) ============ */
.session-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

/* ============ Result card ============ */
/* Head = the mockup's "✓ Explanation ········ [Correct answer: C]" */
.session-result__head {
  display: flex;
  align-items: center;                  /* R4 P2: the pill centred on the "Not quite" line */
  justify-content: space-between;
  gap: var(--sp-3);
}
.session-result__head > .result { flex: 1 1 auto; min-width: 0; align-items: center; }
.session-result__answer { flex-shrink: 0; }
.session-result__lead,
.session-result__history { margin-left: 40px; }            /* under the title, past the 28px icon + gap */
/* < 380: the pill goes under the verdict, so "Not quite" never breaks over two lines (R3 P2), and
   the sentences below use the card's full width instead of a squeezed indented column (R4 P2). */
@media (max-width: 379px) {
  .session-result__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .session-result__answer { margin: 0 0 0 40px; }
  .session-result__lead, .session-result__history { margin-left: 0; }
}
.session-result__lead {
  margin-top: var(--sp-1);
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--text-2);
}
.session-result__history {
  margin-top: var(--sp-2);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-3);
}
.session-result__explain {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--divider);
}
/* R3 P2: in the single-column layout (768–1099) the explanation ran ~105 characters a line — cap
   it near the stem's measure. The ≥1100 side panel is already narrower than this. */
.session-result__explain .explain__panel > p,
.session-result__explain .explain__panel > .session-whywrong { max-width: 56ch; }   /* ≈70 characters, like the stem */
/* Reference row: "Harrison's 22e · Ch. 265 · p. 2033" inline ≥768; phones stack source over
   location (right-aligned) so no line starts with the separator (R4 P2). */
.session-cite { text-align: right; }
.session-cite__seg { white-space: nowrap; }
@media (max-width: 767px) {
  .session-cite__seg { display: block; }
  .session-cite__dot { display: none; }
}
/* R3 P2: in the ≥1100 side panel the sentence under the verdict uses the card's full width */
@media (min-width: 1100px) {
  .session-panel .session-result__lead,
  .session-panel .session-result__history { margin-left: 0; }
}

/* "Why the other options are wrong" — renders only when the bank has per-option rationales */
.session-whywrong { display: flex; flex-direction: column; gap: var(--sp-3); }
.session-whywrong li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.session-whywrong__letter {
  flex: 0 0 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-strong);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

/* ============ Why did you miss it? (quiet, optional) ============ */
.session-reasons {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.session-reasons__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.session-reasons__title {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.session-reasons__hint { font-size: var(--fs-13); color: var(--text-3); }
.session-reasons__saved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--success);
}
.session-reasons__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
/* Phones (R3 P2): pill chips in a flow, like desktop and the icon sheet. The design system gives
   each chip a 48px hit area (D7); 12px between rows keeps neighbouring hit areas from overlapping. */
@media (max-width: 767px) {
  .session-reasons__chips { row-gap: var(--sp-3); }
}
.session-reasons__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--text-3);
}
/* ≥768 the helper rides in the head ("Optional · feeds …"), one line shorter (R4 P2) */
.session-reasons__hint-more { display: none; }
@media (min-width: 768px) {
  .session-reasons__hint-more { display: inline; }
  .session-reasons__note { display: none; }
}

/* ============ Under the explanation: why missed · tools ============ */
.session-after { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Tools: one quiet row (note · flashcard · similar) */
.session-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}
@media (max-width: 767px) {
  .session-tools { justify-content: space-between; }
  .session-tools > .btn--sm { --btn-h: 44px; }                 /* 44px targets on phones (D7) */
}
/* ≥768 answered: the tools sit in the action bar, left of Teach Me / Next (R4 P2) */
.session-tools--bar { flex-wrap: nowrap; gap: var(--sp-1); min-width: 0; }
.session-actions > .session-tools--bar { flex: 0 1 auto; }

/* ============ Round summary: "17 of 40 answered · 13 correct · 4 missed" (R4 P2) ============ */
.session-roundline {
  margin: 0;
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.session-roundline__lead { font-weight: var(--fw-semibold); color: var(--text); }
.session-roundline--bar { display: none; }       /* unanswered, single column (768–1099): in the bar */
.session-roundline--panel { display: none; }     /* answered ≥768: heads the explanation */
@media (min-width: 768px) and (max-width: 1099px) { .session-roundline--bar { display: block; } }
@media (min-width: 768px) { .session-roundline--panel { display: block; padding: 0 var(--sp-1); } }

/* ============ Round navigator (≥1100, before an answer) ============ */
.session-round { display: none; }
.session-round__head { display: flex; align-items: center; gap: var(--sp-3); }
.session-round__title {
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.session-round__sub { margin-top: 2px; font-size: var(--fs-13); color: var(--text-3); }
/* R2 P2: quiet numbers (no tinted tiles) so the question stays the loudest thing on the page */
.session-round__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--sp-4) 0;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.session-round__stat { padding: 2px var(--sp-3); }
.session-round__stat + .session-round__stat { border-left: 1px solid var(--divider); }
.session-round__stat:first-child { padding-left: 0; }
.session-round__stat dt { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-3); }
.session-round__stat dd {
  margin: 2px 0 0;
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--text);
}
.session-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: var(--sp-2);
  justify-items: center;
}
.session-nav__dot {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.session-nav__dot:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); }
.session-nav__dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.session-nav__dot--current,
.session-nav__dot--current:hover { background: var(--primary); color: var(--primary-fg); box-shadow: none; cursor: default; }
.session-nav__dot--correct,
.session-nav__dot--correct:hover { background: var(--success-bg); color: var(--success-strong); box-shadow: inset 0 0 0 1px var(--success-border); }
.session-nav__dot--missed,
.session-nav__dot--missed:hover { background: var(--danger-bg); color: var(--danger-strong); box-shadow: inset 0 0 0 1px var(--danger-border); }
.session-nav__dot--skipped { color: var(--text-3); background: var(--surface-sunken); box-shadow: none; }
.session-round__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-12);
  color: var(--text-3);
}
.session-round__legend li { display: inline-flex; align-items: center; gap: 6px; }
.session-nav__key {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.session-nav__key--correct { background: var(--success-bg); color: var(--success-strong); box-shadow: inset 0 0 0 1px var(--success-border); }
.session-nav__key--missed { background: var(--danger-bg); color: var(--danger-strong); box-shadow: inset 0 0 0 1px var(--danger-border); }
.session-nav__key--current { background: var(--primary); box-shadow: none; }
.session-round__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--text-2);
}
.session-round__note .icon { flex-shrink: 0; margin-top: 1px; color: var(--accent); }

/* ============ Action bar ============ */
.session-actions { align-items: center; }
.session-keys {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}
/* Keyboard hints only where a keyboard is likely: fine pointer and the split layout (≥1100); the
   single-column band shows the round summary there instead (R3/R4 P2 — tablets are touch) */
@media (max-width: 1099px), (pointer: coarse) { .session-keys { display: none; } }

/* R1 P1: the action bar stays in reach on tablet and desktop too, so Submit / Next never fall below
   the fold. (R3: no gradient fade over content any more — the bar's hairline + shadow mark the edge,
   and nothing interactive sits dimmed under a fade at rest.) */
@media (min-width: 768px) {
  .session-actions {
    z-index: var(--z-sticky);
    margin-top: 0;
    padding: var(--sp-3) 0 calc(var(--sp-3) + var(--safe-bottom));
    background: var(--bg);
    box-shadow: var(--shadow-bar);
  }
  .session-actions__spacer { flex: 1 1 auto; }
  html:has(.session-actions) { scroll-padding-bottom: 88px; }   /* keyboard focus never hides under it */
  /* R2 P2: at the end of the page the bar rests on the bottom edge, not ~70px above it. */
  .shell[data-mode="focus"] main[data-screen="session"].shell__main { padding-bottom: var(--safe-bottom); }
  main[data-screen="session"] > .page { padding-bottom: 0; }
}
/* Tablets, single column (768–1099): pinned to the viewport bottom like the phone bar (R3 P2 — it
   floated mid-screen under short questions), spanning the reading column. The page reserves the
   bar's measured height (--action-bar-h, written by the design system's watcher). */
@media (min-width: 768px) and (max-width: 1099px) {
  .session-actions {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--reading-max), calc(100vw - 2 * var(--gutter)));
  }
  html.has-action-bar .shell[data-mode="focus"] main[data-screen="session"].shell__main {
    padding-bottom: calc(var(--action-bar-h, 72px) + var(--sp-4));
  }
}
/* Split layout (≥1100): sticky at the bottom of the reading column */
@media (min-width: 1100px) {
  .session-actions { position: sticky; bottom: 0; }
}

/* Desktop focus bar: the product mark labels the round ("Daily Round") beside Back */
.session-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--divider);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  white-space: nowrap;
}
.session-brand__mark { display: inline-flex; }
/* R4 P2: in the split layout the bar spans column + panel, so a centred title floated over the
   gutter. From 1100 the title sits left, right after "Daily Round"; the bookmark stays at the end. */
@media (min-width: 1100px) {
  .shell[data-screen="session"] .app-header .topbar--wide > .topbar__side:first-child,
  .shell[data-screen="session"] .app-header .topbar--wide > .topbar__side--end { flex: 0 0 auto; }
  .shell[data-screen="session"] .app-header .topbar--wide > .topbar__center {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding-left: var(--sp-4);
  }
}

/* ============ Note sheet ============ */
.session-note { display: flex; flex-direction: column; gap: var(--sp-2); }
.session-note__input {
  min-height: 148px;
  padding: var(--sp-3) 14px;
  line-height: 1.5;
  resize: vertical;
}

/* ============ Loading, error, not found ============ */
.session-loading__stem {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.session-loading__options { display: flex; flex-direction: column; gap: 10px; }
.session-state {
  min-height: calc(100vh - var(--topbar-h) - var(--sp-9) * 2);
  min-height: calc(100dvh - var(--topbar-h) - var(--sp-9) * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============ Split reader from 1100 (R3 P2: iPad landscape 1180 gets the panel + navigator) ============
   Widths, the sticky panel, the wide top bar and the progress track come from the design system
   (`.reader--split-1100` over 1100–1279, `.reader--split` ≥1280). This screen only places its rows. */
@media (min-width: 1100px) {
  .session-round { display: flex; }
  /* Left column: question · (answered) why missed + tools · sticky action bar. The last row absorbs
     the panel's extra height, so the bar sits right under the content (and sticks when it's long). */
  .session-reader.reader--split { grid-template-rows: auto 1fr; }
  .session-reader.reader--split.is-answered { grid-template-rows: auto auto 1fr; }
  .session-reader.reader--split > .session-main { grid-column: 1; grid-row: 1; }
  .session-reader.reader--split > .session-after { grid-column: 1; grid-row: 2; }
  .session-reader.reader--split > .session-panel { grid-column: 2; grid-row: 1 / -1; }
  .session-reader.reader--split > .session-actions { grid-column: 1; grid-row: 2; align-self: start; }
  .session-reader.reader--split.is-answered > .session-actions { grid-row: 3; }
  /* R1 P1: no nested scroller — the explanation panel scrolls with the page (still sticky at the top
     while the reading column is longer), so nothing hides inside it. */
  .session-reader.reader--split > .reader__panel.session-panel { max-height: none; overflow: visible; }
}