/* public/test-mode.css — the persistent test-mode banner (task 07, spec §8, plan D26; rebuilt 2026-09-16 for the
   learner-nav redesign §D, Ken's approved picture screen D: ONE 40px line, sticky under the header, a role pill
   and a ⋯ menu that opens the sheet holding the role switch, the held row, Reset and Leave).
   Tokens only: every var() here is DEFINED in tokens.css or app.css — pinned by __tests__/test-mode-banner.test.js.
   The first banner painted with --warn-bg / --surface / --surface2 / --radius-pill / --radius-2 / --on-accent,
   six names nothing defined, so the bar was transparent and the buttons had no fill (bug #2 on the picture). */

#test-mode-banner[hidden] { display: none; }

/* ⛔ BELOW THE HEADER, NOT UNDER IT (test-mode task 08, plan F5). `.app-header` is position:fixed and `.app-main`
   clears it with its own padding-top — but this host sits BEFORE main, in flow, so the first banner was painted
   UNDER the header at y=0. The host takes the header's height as its margin, and main gives back the header half
   of its padding while the banner shows. On desktop the fixed side rail covers the left --rail-w, so the host
   starts right of it.
   ⭐ AND IT STICKS (2026-09-16): "not real" must never scroll away. Sticky at the header's edge, layered one
   step BELOW the header (var(--z-nav)) and above the page. A sticky element cannot leave its containing block —
   <body> — which is why app.css:10 is `html, body { min-height: 100% }` and not `height` (measured there). */
#test-mode-banner { margin-top: var(--header-h); position: sticky; top: var(--header-h); z-index: calc(var(--z-nav) - 1); }
#test-mode-banner:not([hidden]) ~ .app-main { padding-top: var(--space-5); }
@media (min-width: 768px) { #test-mode-banner { margin-left: var(--rail-w); } }
/* Two other surfaces share the band under the header and must step down by the bar while it shows: the sticky
   back row of the six detail views (.pback-row, app.css — same top, same band, so they overlapped inside test
   mode) and the document's scroll-padding, which every scrollIntoView landing in students / sessions / cases /
   the library relies on to land below what is fixed above it. */
#test-mode-banner:not([hidden]) ~ .app-main .pback-row { top: calc(var(--header-h) + var(--tm-h)); }
html:has(#test-mode-banner:not([hidden])) { scroll-padding-top: calc(var(--header-h) + var(--tm-h)); }

/* ── the line ─────────────────────────────────────────────────────────────────────────────────────── */
.tm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  box-sizing: border-box; height: var(--tm-h); padding: 0 var(--space-5);
  background: var(--orange-tint); border-bottom: 1px solid var(--border);
  color: var(--text); font-size: var(--caption-size);
}
.tm-line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.tm-line svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--orange-ink); }
/* nowrap: at 390 px the JA label broke mid-word, 「テストモ／ード」 (seen in the guide's picture, task 08). */
.tm-strong { font-weight: 700; white-space: nowrap; }
.tm-muted { color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm-muted::before { content: '· '; }
.tm-ctl { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* the role pill: the CURRENT role + chevron-down; a door to the sheet, never a switch of its own (D30 lives once) */
.tm-pill {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1);
  height: 28px; padding: 0 var(--space-3) 0 var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--white); color: var(--text);
  font-family: inherit; font-size: var(--eyebrow-size); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.tm-pill svg { width: 12px; height: 12px; color: var(--text2); }
/* the ⋯ button, with the held count as a red badge when anything is held */
.tm-more {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--white); color: var(--text); cursor: pointer;
}
.tm-more svg { width: 16px; height: 16px; }
.tm-badge {
  position: absolute; top: -6px; right: -6px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 var(--space-1);
  border-radius: var(--radius-full); background: var(--red); color: var(--white); border: 2px solid var(--white);
  font-size: var(--eyebrow-size); font-weight: 700; line-height: 14px; text-align: center;
}
/* 44 on a 40px line: --tap-target is the house minimum and a 28px control cannot reach it by padding inside a
   40px bar, so each grows its HIT box with a ::before — the .btn-sm::before / .lang-seg button::before idiom
   (app.css, phone pass 2026-09-05). ASYMMETRIC, and measured (headless Chrome, 390×844, elementFromPoint walk):
   the fixed header owns every pixel above the bar's top edge, so reaching up past it buys nothing (-6 stops at
   the edge); the walk loses ~2px at the bottom edge (the same loss the phone pass recorded for .btn-sm), so
   ±8 measured 41 and -12 below measures 45. 12px below the bar is main's own top padding at rest. */
.tm-pill::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -12px; }
.tm-more::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -12px; }

/* ── the ⋯ sheet ──────────────────────────────────────────────────────────────────────────────────── */
/* the segmented role control (D30: a tap re-signs the ticket and RELOADS) */
.tm-roles { display: flex; border: 1px solid var(--border); border-radius: var(--radius-full); overflow: hidden; background: var(--white); }
.tm-role {
  flex: 1; min-height: var(--tap-target); border: 0; background: transparent; color: var(--text2);
  font-family: inherit; font-size: var(--body-sm-size); font-weight: 600; cursor: pointer;
}
.tm-role.on { background: var(--accent); color: var(--white); }
/* the rows: held (count chip + chevron) · reset (spinner while it runs) · leave (red) */
.tm-menu { display: flex; flex-direction: column; margin-top: var(--space-5); }
.tm-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 52px; padding: var(--space-3) 0;
  border: 0; border-bottom: 1px solid var(--border-soft); background: transparent;
  color: var(--text); font-family: inherit; font-size: var(--body-size); font-weight: 600; text-align: left; cursor: pointer;
}
.tm-row:last-child { border-bottom: 0; }
.tm-row:disabled { opacity: .6; cursor: default; }
.tm-row-end { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text2); flex-shrink: 0; }
.tm-row-end svg { width: 20px; height: 20px; }
.tm-row-danger { color: var(--red-ink); }
.tm-row-danger .tm-row-end { color: var(--red-ink); }
/* The spinner half of D27: reset takes 5–6 s, so the row has to SAY it is working. */
.tm-row.is-busy svg { animation: tm-spin 1s linear infinite; }
@keyframes tm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tm-row.is-busy svg { animation: none; } }

/* ── the held sheet (D28) ─────────────────────────────────────────────────────────────────────────── */
.tm-held-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tm-held-row { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.tm-held-what { font-weight: 600; }
.tm-held-to { font-size: var(--caption-size); }

/* ── the entry sheet's role picker (D32) ──────────────────────────────────────────────────────────── */
.tm-roles-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.tm-enter-role {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: var(--tap-target); text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); color: var(--text);
  padding: var(--space-2) var(--space-3);
  font-family: inherit; font-size: var(--body-size); font-weight: 600; cursor: pointer;
}