/* ICF Practice Simulator — themes and layout */

:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #595f6b;
  --border: #d4d4d8;
  --panel: #f5f5f5;
  --accent: #1e40af;
  --accent-soft: #dbeafe;
  --flag: #b45309;
  --flag-soft: #fef3c7;
  --shadow: 0 1px 2px rgba(0,0,0,.04);
  --radius: 4px;
  /* Latin uses the monospace faces; CJK/Arabic/Cyrillic glyphs absent from those
     fall through (per-glyph) to these script-covering faces, so non-Latin
     languages render instead of tofu. Latin rendering is unchanged. */
  --font: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Malgun Gothic", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", "Noto Sans Arabic", "Geeza Pro", "Noto Sans", monospace;
  --serif: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Malgun Gothic", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", "Noto Sans Arabic", "Geeza Pro", "Noto Sans", monospace;
}

/* Discreet question id + version, so reviewers can cite exactly which item/version
   needs fixing (e.g. "ICF-042 · v3"). Selectable even though the body blocks copy. */
.item-ref {
  font-size: 0.72em;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  user-select: text;
}

/* ─── Themes ─── */
/* Foreground / background only — UI scaffolding stays neutral within each. */

.theme-light          { --bg:#ffffff; --fg:#111111; --panel:#f5f5f5; --border:#d4d4d8; --muted:#595f6b; --accent:#1e40af; --accent-soft:#dbeafe; }
.theme-dark           { --bg:#0b0f14; --fg:#e5e7eb; --panel:#111827; --border:#334155; --muted:#9ca3af; --accent:#60a5fa; --accent-soft:#1e3a8a; }
.theme-cream          { --bg:#fbf5e3; --fg:#1f1a10; --panel:#f4ecd0; --border:#dcd1ad; --muted:#6f6047; --accent:#7c4a1e; --accent-soft:#ead4a8; }
.theme-yellow         { --bg:#fff7c2; --fg:#1a1500; --panel:#fff09e; --border:#d8c97a; --muted:#5b4e16; --accent:#5b4002; --accent-soft:#ffeb84; }
.theme-pink           { --bg:#fde6ee; --fg:#1a0810; --panel:#facdda; --border:#e3a3b8; --muted:#6f3b4c; --accent:#7c1d3f; --accent-soft:#f4b8cb; }
.theme-green          { --bg:#e6f4ea; --fg:#0b1c10; --panel:#cde9d6; --border:#9bc8aa; --muted:#3e6a4d; --accent:#1f5132; --accent-soft:#b6dec3; }
.theme-blue           { --bg:#e3edff; --fg:#06112d; --panel:#cddafd; --border:#a6bcf0; --muted:#3f5478; --accent:#1e3a8a; --accent-soft:#bccdf9; }
.theme-grey           { --bg:#ebebeb; --fg:#1a1a1a; --panel:#dcdcdc; --border:#aeaeae; --muted:#555555; --accent:#0f172a; --accent-soft:#c8c8c8; }
.theme-sepia          { --bg:#f4ecd8; --fg:#3b2f1f; --panel:#ede1c4; --border:#d6c7a3; --muted:#6f6047; --accent:#7c4a1e; --accent-soft:#e8d4ab; }
.theme-yellow-on-black{ --bg:#000000; --fg:#ffeb3b; --panel:#1a1a00; --border:#5a5a18; --muted:#bda74a; --accent:#fde047; --accent-soft:#3a3a08; }
.theme-green-on-black { --bg:#000000; --fg:#7fff7f; --panel:#001a00; --border:#1a5a1a; --muted:#5a9a5a; --accent:#aaffaa; --accent-soft:#063e06; }
.theme-amber          { --bg:#1a1308; --fg:#ffb74d; --panel:#241b0c; --border:#5a431f; --muted:#a68a55; --accent:#ffd180; --accent-soft:#3b2a14; }
.theme-high-contrast  { --bg:#fffae6; --fg:#000000; --panel:#fff4b8; --border:#000000; --muted:#4b3b00; --accent:#1a1a1a; --accent-soft:#ffe89a; }

/* ─── Plain / ASCII theme ─── */
/* Activates a monospaced, low-chrome appearance in addition to colour. */
.theme-plain {
  --bg: #f7f7f0; --fg: #111; --panel: #ecece2; --border: #888; --muted: #555;
  --accent: #111; --accent-soft: #d4d4c8; --radius: 0;
}
.theme-plain .option,
.theme-plain .zone { border-width: 1px; border-style: solid; box-shadow: none; }
.theme-plain .option-letter { border-radius: 0; background: transparent; border: 1px solid var(--fg); }
.theme-plain .clock { border-radius: 0; background: transparent; border: 1px solid var(--fg); }
.theme-plain button { border-radius: 0; box-shadow: none; }
.theme-plain .flag-btn { border-radius: 0; }
.theme-plain h1, .theme-plain h2, .theme-plain h3 { font-weight: 700; }
.theme-plain .topbar { border-bottom: 1px solid var(--fg); }
.theme-plain .actionbar { border-top: 1px solid var(--fg); }

/* ─── Reset / global ─── */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}
body { display: flex; flex-direction: column; }
main { background: var(--bg); }
.topbar, .actionbar { background: var(--panel); color: var(--fg); }

button, select, input, textarea {
  font: inherit;
  color: inherit;
  background: var(--bg);
}

button {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--fg);
}
button:hover { background: var(--accent-soft); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
button.primary:hover { filter: brightness(1.1); background: var(--accent); }

select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
}

a { color: var(--accent); }

/* ─── Watermark bar (above topbar) ─── */
.watermark-bar {
  padding: 4px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 0.92em;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.watermark-bar:empty { display: none; }

/* ─── Tiled diagonal watermark ───
   Repeating SVG background painted across the viewport at -30° with the
   tester's email, IP (when available behind Cloudflare), and the date.
   pointer-events:none so it doesn't intercept drag/drop or clicks; z-index
   sits above page content but below modals (which use higher z-indices).
   The actual `background-image` is set from JS in paintTiledWatermark().
*/
.watermark-tile {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background-repeat: repeat;
  background-position: top left;
  /* Faint by default; theme can tune via the CSS var below. */
}
.watermark-tile:empty { /* will still tile if background-image is set */ }
@media print {
  /* Make sure printouts / Save-As-PDF carry the watermark too. */
  .watermark-tile { z-index: 9999; }
}

/* ─── Floating Report-a-problem button ─── */
/* The action bar is fixed at bottom: 0 with padding 12+12 + button height ~32 ≈ 60px tall.
   We anchor the report button above it with breathing room, plus iOS safe-area insets. */
.report-btn {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 18px));
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.report-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.report-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.report-btn:active { transform: translateY(1px); }
.report-icon { font-size: 1.05em; line-height: 1; }

/* When the action bar is hidden (setup / break / review-after-finalize / results),
   move the button down — no need to clear an action bar that isn't there.
   We rely on a body[data-actionbar-visible] flag set by app.js. */
body[data-actionbar-visible="false"] .report-btn {
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 720px) {
  /* Compact pill on narrow screens — just the bug icon, smaller pad. */
  .report-btn { padding: 9px 11px; gap: 0; font-size: 0.85em; }
  .report-btn .report-label { display: none; }
  /* The .actionbar wraps slightly tighter on mobile too; keep extra clearance. */
  .report-btn { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}

/* Report dialog content */
.report-modal h2 { margin-top: 0; }
.report-modal label { display: block; margin: 12px 0; font-size: 0.95em; }
.report-modal label > div:first-child { font-weight: 600; margin-bottom: 4px; }
.report-modal textarea {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  resize: vertical;
}
.report-modal select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  background: var(--bg);
  color: var(--fg);
}
.report-modal .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

/* ─── Per-question content feedback ─── */
.question-feedback-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 8px 0 0;
  min-height: 28px;
  font-size: 0.86em;
}
.question-feedback-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}
.question-feedback-link:hover {
  background: transparent;
  color: var(--accent);
}
.question-feedback-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.question-feedback-status,
.question-feedback-form-status {
  color: var(--muted);
  font-size: 0.92em;
}
.question-feedback-form-status:not(:empty) {
  margin-top: 8px;
}
.question-feedback-question-id {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.84em;
  font-variant-numeric: tabular-nums;
}
.question-feedback-modal label {
  display: block;
  margin: 12px 0;
  font-size: 0.95em;
}
.question-feedback-modal label > div:first-child {
  margin-bottom: 4px;
  font-weight: 600;
}
.question-feedback-modal select,
.question-feedback-modal textarea {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
}
.question-feedback-modal textarea {
  min-height: 88px;
}
.question-feedback-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 720px) {
  .question-feedback-row {
    justify-content: flex-start;
    font-size: 0.84em;
  }
  .question-feedback-modal .modal-actions {
    justify-content: stretch;
  }
  .question-feedback-modal .modal-actions button {
    flex: 1 1 0;
  }
}

/* ─── Disclaimer footer ─── */
.disclaimer-footer {
  padding: 18px 32px 90px 32px;
  font-size: 0.95em;
  color: var(--muted);
  border-top: 1px dotted var(--border);
  width: 100%;
  line-height: 1.5;
}
.disclaimer-footer a { color: var(--accent); text-decoration: underline; }

/* ─── Topbar ─── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-left, .topbar-right, .topbar-center {
  display: flex; align-items: center; gap: 12px;
}
.topbar-left {
  flex: 1 1 0;
  min-width: 0;
}
.topbar-center {
  flex: 0 0 auto;
  min-width: max-content;
  justify-content: center;
}
.topbar-right {
  flex: 0 0 auto;             /* take only the space the buttons need (was 1 1 0 — caused overlap in FR/ES where button labels are longer) */
  min-width: max-content;
  justify-content: flex-end;
}
#brand-home { cursor: pointer; border-radius: var(--radius); padding: 2px 6px; margin-left: -6px; transition: background 0.12s; }
#brand-home:hover { background: var(--accent-soft); }
#brand-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vendor {
  font-size: 0.75em;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.brand {
  font-weight: 700;
  letter-spacing: 0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.muted { color: var(--muted); font-size: 0.95em; }
#progress {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clock {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: 1em;
  color: var(--fg);
  padding: 0;
  background: transparent;
  border: none;
  min-width: 60px;
  text-align: right;
}
.clock.warning { color: var(--flag); }
.clock.danger  { color: var(--flag); font-weight: 700; }

.flag-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 4px 10px;
  font-size: 0.9em;
  border-radius: var(--radius);
  white-space: nowrap;          /* no word-wrap; FR "Marquer pour révision" was wrapping onto 3 lines */
}
.flag-btn:hover { background: var(--flag-soft); border-color: var(--flag); color: var(--flag); }
.flag-btn.flagged {
  background: var(--flag-soft);
  border-color: var(--flag);
  color: var(--flag);
  font-weight: 600;
}
.end-exam-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 10px;
  font-size: 0.9em;
  border-radius: var(--radius);
  white-space: nowrap;
}
.study-sheet-btn {
  white-space: nowrap;
}
.end-exam-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg);
}

/* Universal — keep horizontal overflow off no matter the breakpoint state.
   Without this, on iPhone-Pro-Max-landscape (~932px) the page sat just
   above the mobile breakpoints, the 2-col item grid + long topbar
   overflowed slightly, and the browser thrashed (Next button flickering
   between on-screen and off-screen). Universal overflow-x: hidden costs
   nothing visible and immunises against layout oscillation. */
body { overflow-x: hidden; }

@media (max-width: 960px) {
  /* 720 -> 900 -> 960. Why 960: iPhone Pro Max landscape is ~932 CSS-px;
     the previous 900px boundary left phone-landscape on the desktop
     layout which caused horizontal overflow + flicker. */
  .topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "brand progress tools";
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 6px 8px;
  }
  .topbar-left {
    grid-area: brand;
    width: 44px;
    min-width: 0;
    align-items: center;
    gap: 0;
  }
  .topbar-right {
    grid-area: tools;
    flex: 0 0 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
  }
  .topbar-center {
    grid-area: progress;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    font-size: 0.92em;
    line-height: 1.15;
  }
  #brand-home { margin-left: 0; padding: 0; }
  .vendor {
    width: 38px;
    font-size: 0.58em;
    letter-spacing: 0.08em;
    line-height: 1.05;
  }
  .brand {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #section-label {
    display: none;
  }
  #progress {
    display: block;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .study-sheet-btn,
  .flag-btn,
  .end-exam-btn {
    position: relative;
    width: 36px;
    height: 34px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 120%;
    font-size: 0;
    line-height: 1;
  }
  .study-sheet-btn::before,
  .flag-btn::before,
  .end-exam-btn::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    font-size: 16px;
    line-height: 1;
  }
  .study-sheet-btn::before { content: "📖"; }
  .flag-btn::before { content: "⚑"; }
  .end-exam-btn::before { content: "×"; }
  .flag-btn.flagged::before {
    color: var(--flag);
  }
  #language-select {
    width: 44px;
    min-width: 44px;
    height: 34px;
    padding: 0 16px 0 6px;
    font-size: 0.78em;
    line-height: 1;
  }
  #theme-select {
    width: 38px;
    min-width: 38px;
    height: 34px;
    padding: 0;
    color: transparent;
    font-size: 0;
    background:
      linear-gradient(135deg,
        var(--fg) 0 24%,
        var(--bg) 24% 48%,
        var(--accent) 48% 72%,
        var(--flag) 72% 100%);
    background-color: var(--bg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
    appearance: none;
  }
  #theme-select option {
    color: var(--fg);
    font-size: 16px;
  }
  .clock {
    min-width: 0;
    max-width: 54px;
    overflow: hidden;
    font-size: 0.84em;
    line-height: 1.15;
    white-space: nowrap;
  }
  .clock.no-timer {
    display: none;
  }
  main { padding: 12px 18px 110px 18px; }
  .setup-card { padding: 14px 16px; }
  .setup-start-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-left: -18px;
    margin-right: -18px;
    border-radius: 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.10);
  }
  .setup-start-row .primary {
    width: 100%;
    padding: 12px 14px;
  }
  .setup-start-row .start-meta {
    flex: none;
    font-size: 0.82em;
    line-height: 1.35;
  }
  label {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-right: 0;
  }
}

/* ─── Main / layout ─── */
main {
  flex: 1;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding: 22px 28px 120px 28px;
}

h1 { font-size: 1.6em; margin: 0 0 16px 0; }
h2 { font-size: 1.25em; margin: 18px 0 10px 0; }
h3 { font-size: 1.05em; margin: 14px 0 6px 0; }
p { margin: 0 0 10px 0; }
ul, ol { margin: 0 0 10px 0; padding-left: 22px; }
li { margin: 4px 0; }

/* ─── Setup screen ─── */
.setup-main {
  max-width: 760px;
  margin: 14px 0 0 0;
}

/* "Take the tour" link below the Start row */
.tutorial-link-row {
  margin-top: 12px;
  text-align: center;
}
.link-button {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.92em;
  padding: 4px 8px;
  text-decoration: underline;
}
.link-button:hover { color: var(--fg); }

/* Topbar ? button — matches study-sheet-btn shape */
.help-btn {
  font-size: 1em;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  font-weight: 700;
  min-width: 28px;
}
.help-btn:hover { background: var(--accent-soft); }

/* ─── Coachmark tour ─── */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: auto;
}
/* Centred intro/outro steps don't have a spotlight to provide the dim
   (the spotlight's huge box-shadow is what dims the page). When there's
   no spotlight, give the overlay itself a solid dim background. */
.tour-overlay.tour-overlay-dimmed {
  background: rgba(0, 0, 0, 0.55);
}
.tour-spotlight {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  pointer-events: none;
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}
.tour-popover {
  position: absolute;
  z-index: 201;
  max-width: 340px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.32);
  padding: 16px 18px;
  font-size: 0.96em;
}
.tour-popover-centred {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
/* Narrow-viewport layout: popover anchored to bottom edge, full-width minus
   margins. Stops the popover from overlapping tall spotlight targets where
   neither "above" nor "below" placement fits in the available space. JS
   scrolls the target into the upper third so the spotlight stays visible. */
.tour-popover-bottom-sheet {
  position: fixed;
  bottom: 14px;
  left: 12px;
  right: 12px;
  top: auto !important;
  max-width: none;
  margin: 0;
}
.tour-popover h3 { margin: 4px 0 6px; font-size: 1.05em; }
.tour-popover p { margin: 0 0 14px; line-height: 1.45; }
.tour-step-indicator {
  font-size: 0.78em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tour-actions-right { display: flex; gap: 8px; }
.tour-skip, .tour-prev {
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: 0.9em;
  color: var(--fg);
}
.tour-skip:hover, .tour-prev:hover { background: var(--accent-soft); }
.tour-next {
  padding: 6px 16px;
  font-size: 0.95em;
}
@media (max-width: 720px) {
  .tour-popover { max-width: calc(100vw - 24px); padding: 14px; font-size: 0.94em; }
  .tour-actions { flex-wrap: wrap; }
}

/* ─── Help drawer cheat sheet ─── */
.help-cheat-sheet h3 { margin: 0 0 14px; font-size: 1.1em; }
.help-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  gap: 10px 16px;
}
.help-list dt {
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}
.help-list dd {
  margin: 0;
  color: var(--fg);
  line-height: 1.45;
}
@media (max-width: 640px) {
  .help-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .help-list dt { margin-top: 12px; }
  .help-list dt:first-child { margin-top: 0; }
}

/* Inline mode config — replaces the old standalone config card */
.mode-config-inline {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.mode-config-inline[hidden] { display: none; }
.mode-config-inline label { margin-right: 0; }

/* Thinner card for accommodation — single inline checkbox */
.setup-card-thin {
  padding: 12px 16px;
}
.accommodation-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.94em;
  margin: 0;
}
.accommodation-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.study-sheet {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.study-sheet > h2 { margin-top: 0; }
.study-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .study-sheet-grid { grid-template-columns: 1fr; }
}
.study-sheet-grid .study-panel {
  margin: 0;
}

/* ─── Study-sheet drawer (slide-in from right; available from any screen) ─── */
.study-sheet-btn {
  font-size: 0.92em;
  padding: 6px 10px;
}
#language-select {
  min-width: 58px;
}
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 110;
  opacity: 0;
  transition: opacity 180ms ease;
}
.drawer-backdrop.open { opacity: 1; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  /* Roughly double the previous 460px so the full study sheet (six panels +
     headline) fits in one viewport on a desktop without scrolling. The 95vw
     cap keeps the drawer narrower than the screen on smaller laptops. */
  width: min(920px, 95vw);
  background: var(--bg);
  color: var(--fg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,0.28);
  z-index: 120;
  transform: translateX(100%);
  transition: transform 220ms ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky; top: 0;
  z-index: 1;
}
.drawer-header h2 { margin: 0; font-size: 1.15em; }
.drawer-close {
  border: 0; background: transparent;
  font-size: 1.6em; line-height: 1;
  cursor: pointer; padding: 2px 8px;
  color: var(--fg);
}
.drawer-body { padding: 16px 20px 28px; }
.drawer-body .study-panel {
  margin: 0 0 14px 0;
}
.drawer-body p.muted {
  font-size: 0.9em;
  margin-bottom: 14px;
}

/* Two-column study-sheet layout on wide drawers.
   The .study-cols wrapper holds two .study-col flex-stacks side-by-side.
   Each column packs its panels tightly top-to-bottom — short panels don't
   leave gaps when the neighbouring column is taller, which is the failure
   mode of CSS grid row-flow. The headline panel above the wrapper spans
   the full drawer width. On narrow screens the columns collapse to a
   single vertical flow. */
.drawer-body { padding: 18px 22px 32px; }
.drawer-body .study-cols {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.drawer-body .study-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drawer-body > .study-panel-headline { margin: 0 0 4px 0; }

@media (min-width: 780px) {
  .drawer-body {
    padding: 18px 24px 32px;
  }
  .drawer-body .study-cols {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
  }
  .drawer-body .study-col {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ─── Rationale reveal (drill / study mode only) ─── */
.rationale-reveal {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 0 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.rationale-reveal #btn-reveal-rationale {
  font-weight: 600;
}
.rationale-reveal .muted { font-size: 0.88em; }

.setup-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 14px 0;
}
.setup-card h2 { margin-top: 0; margin-bottom: 10px; }

.mode-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.mode-option {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: var(--bg);
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.mode-option:hover { border-color: var(--accent); }
.mode-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mode-option h3 { margin: 0 0 2px 0; font-size: 1em; }
.mode-option p { margin: 0; font-size: 0.88em; }

.setup-start-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  margin: 14px 0;
}
.setup-start-row .primary {
  font-size: 1.1em;
  padding: 12px 28px;
  font-weight: 700;
}
.setup-start-row .start-meta {
  flex: 1;
  font-size: 0.88em;
  color: var(--muted);
}

label { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; }
input[type="checkbox"], input[type="radio"] { transform: scale(1.1); }

textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
}

/* ─── Exam item ─── */
.item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 28px;
}
@media (max-width: 960px) {
  /* 920 -> 960 to cover iPhone-Pro-Max-landscape; the 2-col grid was
     overflowing horizontally on phone landscape and contributing to
     layout thrash. */
  .item-grid { grid-template-columns: 1fr; }
}

.scenario {
  grid-column: 1 / -1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: var(--serif);
  font-size: 1.05em;
  line-height: 1.65;
  margin-bottom: 4px;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 44px;
  margin-bottom: 22px;
}

.option {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: grab;
  transition: opacity 0.25s ease, background 0.15s, border-color 0.15s;
  user-select: none;
  position: relative;
}
.option:hover { border-color: var(--accent); }
.option:active { cursor: grabbing; }
.option.dragging { opacity: 0.4; }
.option.placed {
  opacity: 0.45;
  background: var(--panel);
}
.option.placed .option-letter {
  background: var(--border);
  color: var(--muted);
}
.option.placed::after {
  content: attr(data-placed-label);
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 0.7em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.option-letter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--fg);
  font-weight: 700;
}

.option-text { padding-top: 4px; }

/* Drop zones — right column */
.zones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
}
.zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 130px;
  background: var(--panel);
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
}
.zone.has-answer { border-style: solid; border-color: var(--border); background: var(--bg); }
.zone.drag-over  { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.zone-label {
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.8em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.zone-content { font-family: var(--serif); line-height: 1.45; flex: 1; }

.zone-content .placed-chip {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  cursor: grab;
  opacity: 0.65;
}
.zone-content .placed-chip:hover { opacity: 0.85; }
.zone-content .placed-chip:active { cursor: grabbing; }
.zone-content .placed-chip.dragging { opacity: 0.4; }
.zone-content .placed-chip .option-letter {
  width: 24px; height: 24px; font-size: 0.85em;
}

.zone-empty-hint {
  color: var(--muted);
  font-style: italic;
  font-family: var(--font);
  font-size: 0.92em;
}

.options-list.drag-over {
  background: var(--accent-soft);
  border-radius: var(--radius);
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

/* Custom drag system */
.option, .placed-chip { cursor: grab; }
.option:active, .placed-chip:active { cursor: grabbing; }
.source-dragging {
  opacity: 0.35;
  pointer-events: none;
}
.drag-ghost {
  /* Ghost inherits the visible look of whatever was picked up */
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  cursor: grabbing;
  user-select: none;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
}
.drag-ghost .option-letter {
  display: flex; justify-content: center; align-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--fg); font-weight: 700;
}
.drag-ghost .option-text { padding-top: 4px; }

/* ─── Action bar ─── */
.actionbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 12px 22px;
  z-index: 10;
}
.actionbar button { white-space: nowrap; }
.review-return-btn {
  flex: 0 1 auto;
  font-weight: 600;
}
@media (max-width: 520px) {
  .review-return-btn {
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
    line-height: 1.15;
  }
}

/* Demo sign-up CTA inside the bottom action bar — sits between Previous
   and Next so every question screen carries a low-friction conversion
   path without taking layout space above the buttons. Hidden by default
   (the `hidden` attribute on the element); JS unhides it in demo mode.
   The two label spans (long / short) let the CTA collapse cleanly on
   narrow screens without re-rendering. */
.actionbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.94em;
  white-space: nowrap;
  transition: filter 0.12s;
}
.actionbar-cta:hover { filter: brightness(1.08); }
.actionbar-cta strong { font-weight: 800; }
.actionbar-cta .actionbar-cta-short { display: none; }
@media (max-width: 720px) {
  .actionbar-cta { padding: 8px 12px; font-size: 0.9em; }
  .actionbar-cta .actionbar-cta-long { display: none; }
  .actionbar-cta .actionbar-cta-short { display: inline; }
}
@media (max-width: 420px) {
  /* Very narrow phone screens: collapse to icon-y / very short. */
  .actionbar-cta { padding: 7px 9px; font-size: 0.86em; }
}

/* ─── Review screen ─── */
.review-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 14px 0;
  background: var(--bg);
}
.review-row {
  display: grid;
  grid-template-columns: 56px 1fr 70px 36px 100px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.review-row:last-child { border-bottom: 0; }
.review-row:hover { background: var(--accent-soft); }
.review-row .num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted);
}
.review-row .preview {
  font-family: var(--serif);
  line-height: 1.4;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.review-row .chosen {
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  letter-spacing: 0.04em;
}
.review-row .chosen .dash { color: var(--muted); font-weight: 400; }
.review-row .flag {
  text-align: center;
  color: var(--fg);
  font-weight: 700;
  font-size: 1.1em;
}
.review-row .review-btn {
  padding: 4px 12px;
  font-size: 0.88em;
}
.review-row.unanswered .preview { opacity: 0.75; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
  padding: 16px;
  z-index: 100;
}
.modal {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.modal h2 { margin-top: 0; }
.modal .count {
  font-size: 2.6em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 14px 0;
  color: var(--flag);
}
@media (max-width: 720px) {
  .modal-backdrop { align-items: flex-start; }
  .modal {
    width: 100%;
    padding: 22px;
    text-align: left;
  }
}

/* ─── Break screen ─── */
.break-card {
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 540px;
  margin: 36px auto;
}
.break-clock {
  font-size: 3em;
  font-variant-numeric: tabular-nums;
  margin: 18px 0;
}

/* ─── Results ─── */
.result-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.stat-value { font-size: 1.8em; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 0.85em; }

/* Demo-track picker (shown on demo.exam.boristhecoach.com before track is chosen) */
.demo-track-picker {
  max-width: 720px;
  margin: 8vh auto;
  padding: 0 20px;
}
.demo-track-picker h1 { margin: 0 0 10px; }
.demo-track-picker > p { margin: 0 0 24px; }
.track-pick-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.track-pick-card {
  text-align: left;
  padding: 22px 22px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}
.track-pick-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.track-pick-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.track-pick-title {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.track-pick-sub {
  font-size: 1em;
  margin-bottom: 8px;
}

/* Demo end-of-session lead capture */
.demo-lead-capture {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0 24px;
}
.demo-lead-capture h2 { margin: 0 0 8px; font-size: 1.15em; }
.demo-lead-capture p { margin: 0 0 14px; }
.demo-lead-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.demo-lead-form input[type=email] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
}
.demo-lead-form button {
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
}
.demo-lead-feedback { margin-top: 8px; min-height: 1.3em; }
.lead-ok { color: var(--accent); }
.lead-err { color: var(--flag); }

/* Post-capture discount offer */
.lead-discount {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.lead-discount h3 { margin: 0 0 6px; font-size: 1.05em; color: var(--fg); }
.lead-discount p { margin: 0 0 12px; color: var(--fg); }
.lead-discount-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05em;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px dashed var(--accent);
  border-radius: 4px;
}
.lead-discount-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.lead-discount-cta {
  display: inline-block;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
}
.lead-discount-cta:hover { filter: brightness(1.05); }
.lead-copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
}
.lead-copy-btn:hover { background: var(--bg); }

.competency-row {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.bar-track { height: 10px; background: var(--accent-soft); border-radius: 5px; overflow: hidden; }
.bar-fill  { height: 100%; background: var(--accent); }

.result-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 10px 0;
}
.result-item.correct { border-left: 4px solid var(--accent); }
.result-item.partial { border-left: 4px solid var(--flag); }
.result-item.wrong   { border-left: 4px solid var(--border); }
.result-item summary { cursor: pointer; font-weight: 600; }
.result-item .option-line {
  display: flex; gap: 8px; padding: 4px 0; align-items: flex-start;
}
.result-item .option-line .tag {
  font-size: 0.75em; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--border);
}
.tag-best { background: var(--accent-soft); color: var(--fg); border-color: var(--accent); font-weight: 600; }
.tag-worst{ background: var(--panel); color: var(--fg); border-color: var(--muted); font-weight: 600; }
.tag-you  { background: var(--flag-soft); color: var(--flag); border-color: var(--flag); }

@media (max-width: 720px) {
  .review-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "num preview review"
      "num chosen flag";
    gap: 6px 8px;
    padding: 10px;
  }
  .review-row .num { grid-area: num; }
  .review-row .preview {
    grid-area: preview;
    min-width: 0;
  }
  .review-row .chosen {
    grid-area: chosen;
    text-align: left;
  }
  .review-row .flag { grid-area: flag; }
  .review-row .review-btn {
    grid-area: review;
    padding: 4px 8px;
  }
  .competency-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .competency-row .muted { justify-self: start; }
  .result-item summary { overflow-wrap: anywhere; }
  .result-item .option-line {
    flex-wrap: wrap;
    gap: 5px 6px;
  }
  .result-item .option-line > div {
    flex: 1 1 180px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .result-item .option-line .tag {
    white-space: normal;
    align-self: flex-start;
  }
}

.rationale {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: var(--radius);
  margin-top: 8px;
  font-family: var(--serif);
}
.rationale h4 { margin: 8px 0 4px 0; font-size: 0.95em; }
.rationale h4:first-child { margin-top: 0; }

/* ─── Results screen — walk-through entry ─── */
.results-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 22px 0;
  padding: 14px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.results-actions .primary { font-weight: 700; }
.results-actions .muted { flex: 1; font-size: 0.9em; }
@media (max-width: 720px) {
  .results-actions { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ─── Study mode (walkthrough) ─── */
.walkthrough-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.walkthrough-header h1 { margin: 0; }
.walkthrough-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.walkthrough-controls label { display: flex; align-items: center; gap: 6px; }
.walkthrough-controls select { padding: 4px 8px; }

.walkthrough-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 0.9em;
}
.walkthrough-meta .wt-id { font-weight: 700; font-family: ui-monospace, monospace; }
.walkthrough-meta .wt-result { font-weight: 600; }
.walkthrough-meta .wt-correct { color: var(--accent); }
.walkthrough-meta .wt-partial { color: var(--flag); }
.walkthrough-meta .wt-wrong { color: var(--fg); }
.walkthrough-meta .wt-flagged { color: var(--flag); font-weight: 600; }

.wt-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 18px 0;
}
.wt-option {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: var(--bg);
}
.wt-option.is-best { border-color: var(--accent); }
.wt-option.is-worst { border-color: var(--muted); }
.wt-option.is-you { background: var(--accent-soft); }
.wt-option-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.wt-option-tags:empty { display: none; }
.wt-option-body { font-family: var(--serif); line-height: 1.5; }

.walkthrough-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.walkthrough-nav .muted { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .walkthrough-header {
    align-items: stretch;
    gap: 10px;
  }
  .walkthrough-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .walkthrough-controls label {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .walkthrough-controls select,
  .walkthrough-controls button {
    width: 100%;
    max-width: 100%;
  }
  .walkthrough-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .walkthrough-nav .muted {
    order: -1;
    flex: 1 0 100%;
    text-align: center;
  }
  .walkthrough-nav button { flex: 1 1 110px; }
}

/* ─── Study panel ─── */
.study-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 10px 0;
}
.study-panel h3 { margin-top: 0; }
/* The "signature method" headline panel — SCAN for TRUST, reject FIXES.
   Highlighted with an accent-coloured left border + soft accent fill so
   it reads as the load-bearing summary, not just one of many panels. */
.study-panel-headline {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft, var(--panel));
}
.study-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
.study-panel th, .study-panel td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.study-panel th { background: var(--accent-soft); font-weight: 600; }

/* ─── Demo sign-up nudge ───────────────────────────────────────────────
   Three variants rendered by demoSignupCard(variant) in app.js:
   - default ("setup"): bottom of the setup screen, mid-density pitch
   - "between": compact one-liner injected under each question
   - "conversion": full pitch on the demo-conversion end screen
*/
.demo-signup {
  margin: 22px 0 10px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1.5px solid var(--border-strong, var(--border));
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  position: relative;
  z-index: 105;
}
.demo-signup h3 { margin: 0 0 6px; font-size: 1.05em; }
.demo-signup p { margin: 0 0 8px; color: var(--muted); }
.demo-signup .demo-signup-price {
  font-size: 1.05em; color: var(--fg);
  margin: 8px 0 12px; font-variant-numeric: tabular-nums;
}
.demo-signup .demo-signup-price s { color: var(--muted); margin-right: 8px; font-weight: 400; }
.demo-signup .demo-signup-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.demo-signup .demo-signup-actions .primary,
.demo-signup .demo-signup-actions .secondary {
  display: inline-block; padding: 9px 16px; border-radius: 5px;
  text-decoration: none; font-weight: 600; font-size: 0.95em;
  border: 1px solid var(--accent);
}
.demo-signup .demo-signup-actions .primary {
  background: var(--accent); color: #fff;
}
.demo-signup .demo-signup-actions .secondary {
  background: transparent; color: var(--accent);
}
.demo-signup .demo-signup-actions .primary:hover,
.demo-signup .demo-signup-actions .secondary:hover { filter: brightness(1.07); }

/* Conversion variant — bigger, more prominent on the end screen */
.demo-signup.demo-signup-conversion {
  border-left-width: 4px;
  padding: 22px 24px;
}
.demo-signup.demo-signup-conversion h3 { font-size: 1.25em; }

/* Compact one-liner under each question. Sits below the rationale reveal
   button if any. Single row on desktop; stacks vertically on narrow. */
.demo-signup-compact {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-left-width: 3px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 0.94em;
}
.demo-signup-compact span { color: var(--muted); }
.demo-signup-compact span strong { color: var(--fg); }
.demo-signup-compact .demo-signup-cta {
  flex-shrink: 0;
  display: inline-block; padding: 7px 14px; border-radius: 5px;
  background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 0.92em;
  border: 1px solid var(--accent);
}
.demo-signup-compact .demo-signup-cta:hover { filter: brightness(1.07); }

/* ─── Mobile swipe input ─────────────────────────────────────────────
   On phones, drag-and-drop is awkward — the long-press fights with
   browser scroll. Mobile (≤720px) renders swipe cards instead: flick
   right for BEST, left for WORST. Desktop is unaffected. */

/* Semantic colors for best/worst — kept theme-independent so the
   affordance reads on every backdrop. */
:root {
  --best-mark: #2e7d32;
  --best-mark-soft: #d6efd9;
  --worst-mark: #b22222;
  --worst-mark-soft: #f7d8d6;
}

/* ─── Swipe cards ─── */
.swipe-block { padding: 0; margin: 0 0 22px; }
.swipe-instructions {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px 10px;
  font-size: 0.78em; font-weight: 600; letter-spacing: 0.04em;
  color: var(--muted); text-transform: uppercase;
}
.swipe-hint.left  { color: var(--worst-mark); }
.swipe-hint.right { color: var(--best-mark); }

.swipe-options {
  display: flex; flex-direction: column; gap: 10px;
}
.swipe-option {
  position: relative;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg);
  border: 2px solid var(--border);
  transition: border-color 0.2s, background 0.2s;
  touch-action: pan-y; /* allow vertical scroll, capture horizontal */
}
.swipe-option.is-best  { border-color: var(--best-mark); background: var(--best-mark-soft); }
.swipe-option.is-worst { border-color: var(--worst-mark); background: var(--worst-mark-soft); }

/* Reveal panels behind the card. As .swipe-inner translates, one of
   these becomes visible. Right-swipe → BEST (green, on the left edge);
   left-swipe → WORST (red, on the right edge). */
.swipe-reveal {
  position: absolute; top: 0; bottom: 0; width: 50%;
  display: flex; align-items: center; padding: 0 18px;
  font-weight: 700; font-size: 0.86em; letter-spacing: 0.04em;
  color: white; opacity: 0; transition: opacity 0.1s;
}
.swipe-reveal-left  { left: 0; background: var(--best-mark); justify-content: flex-start; }
.swipe-reveal-right { right: 0; background: var(--worst-mark); justify-content: flex-end; }
.swipe-option.swipe-right .swipe-reveal-left  { opacity: 1; }
.swipe-option.swipe-left  .swipe-reveal-right { opacity: 1; }

.swipe-inner {
  position: relative; z-index: 2;
  background: var(--bg);
  padding: 13px 14px;
  transform: translateX(0);
  transition: transform 0.18s ease-out, background 0.2s;
  cursor: grab; user-select: none;
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--serif);
}
.swipe-option.is-best  .swipe-inner { background: var(--best-mark-soft); }
.swipe-option.is-worst .swipe-inner { background: var(--worst-mark-soft); }
.swipe-inner.dragging { transition: none; cursor: grabbing; }

.swipe-letter {
  flex: 0 0 26px;
  display: inline-block; width: 26px; height: 26px;
  border-radius: 50%; background: var(--panel);
  font-family: var(--font-mono, monospace); font-weight: 700;
  text-align: center; line-height: 26px; font-size: 0.92em;
  color: var(--fg);
}
.swipe-option.is-best  .swipe-letter { background: var(--best-mark); color: white; }
.swipe-option.is-worst .swipe-letter { background: var(--worst-mark); color: white; }
.swipe-text { flex: 1; font-size: 0.95em; line-height: 1.45; }

.swipe-badge {
  flex: 0 0 auto; align-self: center;
  font-size: 0.66em; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 999px; color: white;
  text-transform: uppercase;
}
.swipe-badge:empty { display: none; }
.swipe-option.is-best  .swipe-badge { background: var(--best-mark); }
.swipe-option.is-worst .swipe-badge { background: var(--worst-mark); }

/* Telegraph the swipe gesture on the first card if nothing's been picked. */
@keyframes swipe-peek {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(28px); }
  40%      { transform: translateX(0); }
  60%      { transform: translateX(-22px); }
  80%      { transform: translateX(0); }
}
.swipe-option.peek .swipe-inner {
  animation: swipe-peek 2.4s ease-in-out 0.5s 1;
}

/* Collapse the grid when swipe is active (zones aren't rendered). */
.item-grid.ui-swipe { grid-template-columns: 1fr; }

/* ─── ACC track ────────────────────────────────────────────────────────
   Single-best-answer click-to-pick. One column on every viewport — no
   zones, no drag, just four tap targets. */

.track-pill {
  display: inline-block;
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--accent);
  color: var(--bg);
  white-space: nowrap;
}
.track-pill-acc { background: var(--accent); }
/* Hide the ACC Mode pill on the compact (mobile / phone-landscape / tablet
   portrait) topbar — the brand block lives in a 44px grid column there
   so the pill would overflow into the "1 / 5" cell beside it. The
   "ACC" track is already implied by the items shown; pill is purely a
   desktop convenience indicator. */
@media (max-width: 960px) {
  .track-pill { display: none; }
}

.acc-item-grid { grid-template-columns: 1fr; }

.acc-stem {
  /* Same look as .scenario but no min-height. Stems are short (≤4 sentences). */
}

.acc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.acc-option {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  /* Mobile tap target — Apple HIG / Material both want ≥44px. */
  min-height: 56px;
}
.acc-option:hover { border-color: var(--accent); }
.acc-option:active { transform: scale(0.998); }
.acc-option:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.acc-option.is-picked {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.acc-option.is-picked .acc-option-letter {
  background: var(--accent);
  color: var(--bg);
}

.acc-option-letter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--fg);
  font-weight: 700;
  flex-shrink: 0;
}

.acc-option-text {
  padding-top: 4px;
  line-height: 1.45;
}

/* ─── "What should the coach do?" prompt line between scenario + options ─── */
.prompt-line {
  grid-column: 1 / -1;          /* span full width inside .item-grid */
  font-weight: 600;
  font-size: 1em;
  margin: 12px 0 8px;
  color: var(--fg);
  line-height: 1.35;
}
@media (max-width: 600px) {
  .prompt-line { margin: 10px 0 6px; font-size: 0.98em; }
}

/* ─── Pack + UI version footer (discrete) ───
   Populated by app.js render() — empty divs collapse via :empty. */
.version-footer {
  text-align: center;
  font-size: 0.72em;
  color: var(--muted);
  opacity: 0.65;
  padding: 4px 12px 12px;
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.version-footer:empty { display: none; }
@media (max-width: 600px) {
  .version-footer { font-size: 0.68em; padding: 4px 8px 10px; }
}

/* Conversion-surface refresh proposal — 2026-06-09.
   Applies only to setup/upsell entry points, not item rendering. */
.setup-main {
  max-width: 920px;
  margin: 22px auto 0;
}

.setup-card {
  border-radius: 8px;
  padding: 22px 24px;
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.setup-card h2 {
  font-size: 1.28em;
  line-height: 1.2;
}

.mode-options {
  gap: 10px;
}

.mode-option {
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s, transform 0.06s;
}

.mode-option:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.mode-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--bg));
  box-shadow: inset 4px 0 0 var(--accent), 0 12px 26px rgba(15, 23, 42, 0.08);
}

.mode-option h3 {
  font-size: 1.05em;
  line-height: 1.25;
}

.mode-config-inline {
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.setup-card-thin {
  box-shadow: none;
}

.setup-start-row {
  border-radius: 8px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--bg));
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

.setup-start-row .primary,
.trial-setup .primary,
.trial-conversion-cta,
.demo-signup .demo-signup-actions .primary,
.demo-signup-compact .demo-signup-cta,
.lead-discount-cta,
.actionbar-cta {
  border-radius: 6px;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: filter 0.14s, box-shadow 0.14s, transform 0.06s;
}

.setup-start-row .primary:hover,
.trial-setup .primary:hover,
.trial-conversion-cta:hover,
.demo-signup .demo-signup-actions .primary:hover,
.demo-signup-compact .demo-signup-cta:hover,
.lead-discount-cta:hover,
.actionbar-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  filter: brightness(1.05);
}

.trial-setup {
  max-width: 760px !important;
  margin: 42px auto !important;
  padding: 28px !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09);
}

.trial-setup h1 {
  font-size: 2em !important;
  line-height: 1.16 !important;
}

.trial-setup .primary {
  min-height: 52px;
}

.trial-setup a {
  font-weight: 650;
}

.trial-conversion-card,
.demo-signup,
.lead-discount {
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--panel) 82%, var(--bg)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--accent)) !important;
  border-left: 5px solid var(--accent) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
}

.trial-conversion-card {
  padding: 22px 24px !important;
}

.trial-conversion-cta {
  color: var(--bg) !important;
  background: var(--accent) !important;
}

.demo-signup h3,
.lead-discount h3 {
  color: var(--fg);
  font-size: 1.12em;
  line-height: 1.25;
}

.demo-signup .demo-signup-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.demo-signup.demo-signup-conversion {
  padding: 26px 28px;
}

.demo-signup.demo-signup-conversion h3 {
  font-size: 1.38em;
}

.demo-signup-compact {
  border-left-width: 5px;
}

.actionbar {
  box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
}

.actionbar-cta {
  padding: 10px 18px;
}

@media (max-width: 640px) {
  .setup-main {
    margin-top: 16px;
  }

  .setup-card,
  .trial-setup,
  .trial-conversion-card,
  .demo-signup {
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  }

  .trial-setup {
    margin: 22px auto !important;
    padding: 20px !important;
  }

  .trial-setup h1 {
    font-size: 1.55em !important;
  }

  .demo-signup.demo-signup-conversion {
    padding: 22px;
  }

  .demo-signup-compact {
    align-items: stretch;
  }

  .demo-signup-compact .demo-signup-cta {
    width: 100%;
    text-align: center;
  }
}

/* ─── RTL (Arabic) ────────────────────────────────────────────────────────
   dir="rtl" is set on <html> by updateChromeText() when ACTIVE_LANG === "ar".
   Grid, row-flex and unstyled text auto-mirror under dir="rtl"; these rules
   flip the remaining PHYSICAL (left/right) properties so the exam, review and
   chrome read correctly right-to-left. */
[dir="rtl"] .options-list { padding-left: 0; padding-right: 44px; }
[dir="rtl"] .option.placed::after { right: auto; left: 10px; }
[dir="rtl"] .track-pick-card,
[dir="rtl"] .review-row .chosen,
[dir="rtl"] .study-panel th,
[dir="rtl"] .study-panel td { text-align: right; }
[dir="rtl"] .report-btn { right: auto; left: max(18px, env(safe-area-inset-left, 18px)); }