/* ============================================================
   prep.css — PREP adaptive ACT training. Calm, minimal, serious.
   One primary action per view; no confetti, no noise.
   ============================================================ */
.prep-shell { padding: 26px 20px 60px; min-height: 70vh; }
.prep-loading { color: var(--muted); padding: 60px 0; text-align: center; }
.prep-gate { max-width: 560px; margin: 60px auto; text-align: center; }
.prep-gate h1 { font-size: 1.9rem; margin: 8px 0 12px; }
.prep-gate-sub { color: var(--ink-soft); margin-bottom: 22px; }

/* sub-nav */
.prep-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.prep-nav[hidden] { display: none !important; } /* hide section tabs until signed in + onboarded (the [hidden] attr alone loses to display:flex) */
.prep-nav button { border: 0; background: transparent; font: 600 .86rem Inter, sans-serif; color: var(--muted); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.prep-nav button:hover { color: var(--ink); background: var(--line-soft); }
.prep-nav .pn-active { background: var(--ink); color: #fff; }

/* command center */
.cc-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.cc-stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.cc-stat span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: block; }
.cc-stat strong { font-family: Poppins, sans-serif; font-size: 1.7rem; }
.cc-stat em { display: block; font-style: normal; font-size: .75rem; color: var(--muted); }
.cc-action { display: flex; align-items: center; justify-content: space-between; gap: 22px; background: #0f1f38; color: #fff; border-radius: 18px; padding: 24px 28px; margin-bottom: 18px; }
.cc-action-eyebrow { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #8fd4c9; margin: 0 0 4px; }
.cc-action h2 { margin: 0 0 6px; font-size: 1.4rem; }
.cc-action-why { margin: 0 0 4px; color: #cdd6e4; font-size: .92rem; }
.cc-action-meta { margin: 0; color: #8b98ad; font-size: .8rem; }
.cc-band { font-size: .66rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }
.cc-band-VERY_HIGH { background: #ffd814; color: #4a3500; }
.cc-band-HIGH { background: #8fd4c9; color: #0d3b36; }
.cc-band-MODERATE { background: #37507a; color: #cdd6e4; }
.cc-action .upsell-continue { flex: 0 0 auto; white-space: nowrap; }
.cc-blockers, .cc-plan, .cc-path { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow); }
.cc-blockers h3, .cc-plan h3, .cc-path h3 { margin: 0 0 12px; font-size: 1rem; }
.cc-blocker { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.cc-blocker div { flex: 1; } .cc-blocker strong { display: block; font-size: .92rem; }
.cc-blocker em, .au-leak em { font-style: normal; font-size: .78rem; color: var(--muted); }
.cc-bn { width: 26px; height: 26px; border-radius: 50%; background: var(--line-soft); color: var(--ink); font-weight: 800; font-size: .8rem; display: grid; place-items: center; flex: 0 0 auto; }
.cc-plan-note { font-weight: 400; font-size: .78rem; color: var(--muted); }
.cc-timeline { display: grid; gap: 6px; }
.cc-block { display: flex; align-items: center; gap: 10px; font-size: .86rem; padding: 8px 12px; border-radius: 10px; background: var(--line-soft); }
.cc-block-time { font-weight: 700; font-size: .76rem; color: var(--muted); min-width: 68px; }
.cc-block-label { flex: 1; }
.cc-block-min { font-size: .72rem; color: var(--muted); }
.cc-block-SLEEP { background: #eef4ff; }
.cc-block-lock { font-size: .66rem; font-weight: 800; text-transform: uppercase; color: #1a4b8f; background: #dbe7fb; border-radius: 999px; padding: 2px 8px; }
.cc-block-BREAK { background: #f6fbf7; }
.cc-block-PRE_TEST { background: #fffbea; }
.cc-fine { color: var(--muted); font-size: .78rem; }

/* onboarding */
.ob-wrap { max-width: 720px; margin: 0 auto; }
.ob-title { font-size: 1.7rem; margin: 6px 0 18px; }
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); }
.ob-grid label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 600; }
.ob-grid input, .ob-grid select { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; }
.ob-grid input:focus, .ob-grid select:focus { outline: none; border-color: var(--teal); }
.ob-span2 { grid-column: 1 / -1; }
.ob-hint { font-weight: 400; font-size: .76rem; color: var(--muted); }
.ob-sections { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; }
.ob-sections legend { font-size: .8rem; font-weight: 700; padding: 0 6px; }
.ob-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; }
@media (max-width: 700px) { .ob-grid { grid-template-columns: 1fr; } .cc-hero { grid-template-columns: 1fr 1fr; } .cc-action { flex-direction: column; align-items: flex-start; } }

/* player */
.pl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.pl-title { font-weight: 800; margin: 0; }
.pl-sub { color: var(--muted); font-size: .8rem; margin: 2px 0 0; }
.pl-meta { display: flex; align-items: center; gap: 10px; }
.pl-count { font-weight: 700; font-size: .84rem; color: var(--muted); }
.pl-timer { font-family: Poppins, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-pace { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.pl-pace-ahead { background: #e9f7ef; color: #1a7a40; }
.pl-pace-on { background: #e6f3f4; color: #116a73; }
.pl-pace-behind { background: #fff3e0; color: #8a5300; }
.pl-pace-action { background: #fdeaea; color: #a02020; }
.pl-teach { background: #f2fbf8; border: 1.5px solid #bfe4dd; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.pl-teach-eyebrow { margin: 0; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #116a73; }
.pl-teach-rule { margin: 4px 0 0; font-size: .95rem; }
.pl-body { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.pl-with-passage { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pl-passage { font-size: .9rem; line-height: 1.65; color: var(--ink-soft); border-right: 1px solid var(--line-soft); padding-right: 22px; max-height: 65vh; overflow-y: auto; }
.pl-passage-title { font-weight: 700; font-size: .78rem; color: var(--muted); }
.pl-stem { font-size: 1.02rem; line-height: 1.55; }
.pl-choices { display: grid; gap: 8px; margin: 14px 0; }
.pl-choice { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 11px 14px; font: inherit; cursor: pointer; display: flex; gap: 10px; }
.pl-choice span { font-weight: 800; }
.pl-choice:hover { border-color: var(--teal); }
.pl-choice-on { border-color: var(--teal); background: #f2fbf8; }
.pl-choice-right { border-color: #1a7a40; background: #e9f7ef; }
.pl-choice-wrong { border-color: #a02020; background: #fdeaea; }
.pl-conf { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); margin-bottom: 12px; }
.pl-conf-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font: 600 .78rem Inter, sans-serif; cursor: pointer; }
.pl-conf-on { border-color: var(--teal); background: #f2fbf8; }
.pl-actions { display: flex; gap: 10px; align-items: center; }
.pl-nudge { margin-top: 12px; background: #fffbea; border: 1.5px solid #ffd814; border-radius: 10px; padding: 9px 13px; font-size: .84rem; color: #5b4a12; }
.pl-fb { margin-top: 16px; border-radius: 12px; padding: 14px 16px; }
.pl-fb-ok { background: #e9f7ef; }
.pl-fb-no { background: #fff7f7; border: 1px solid #f3d3d3; }
.pl-fb-line { margin: 0 0 8px; font-size: .9rem; }
.pl-fb-line strong { font-size: .68rem; letter-spacing: .05em; color: var(--muted); display: inline-block; min-width: 74px; }
.pl-fb-actions { display: flex; gap: 8px; margin-top: 6px; }
.pl-fb-deep { background: #f6f8fa; border-radius: 8px; padding: 8px 10px; }
.pl-fb-ok .btn { margin-left: 10px; }
@media (max-width: 760px) { .pl-with-passage { grid-template-columns: 1fr; } .pl-passage { border-right: 0; padding-right: 0; max-height: 34vh; } }

/* autopsy */
.au-wrap h2 { margin: 6px 0 14px; }
.au-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.au-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.au-stat span { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--muted); display: block; }
.au-stat strong { font-size: 1.2rem; } .au-stat em { display: block; font-style: normal; font-size: .74rem; color: var(--muted); }
.au-leak { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.au-leak div { flex: 1; }
.au-review { margin: 18px 0; }
.au-review summary { cursor: pointer; font-weight: 600; }
.au-rev { border-top: 1px solid var(--line-soft); padding: 10px 0; font-size: .88rem; }
.au-rev-a { color: var(--muted); font-size: .8rem; }
.au-actions { margin-top: 14px; }

/* train map */
.tr-wrap h2 { margin: 6px 0 10px; }
.tr-sec { margin: 20px 0 10px; font-size: .95rem; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.tr-skill { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tr-skill strong { display: block; font-size: .88rem; }
.tr-skill em { display: block; font-style: normal; font-size: .72rem; color: var(--muted); }
.tr-state { font-weight: 800; text-transform: lowercase; }
.tr-state-FRAGILE, .tr-state-UNKNOWN { color: #a02020 !important; }
.tr-state-DEVELOPING, .tr-state-EXPOSED { color: #8a5300 !important; }
.tr-state-RELIABLE, .tr-state-FAST_RELIABLE { color: #1a7a40 !important; }

/* mock test */
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; }
.mt-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.mt-card h3 { margin: 0 0 6px; font-size: 1rem; }
.mt-card p { color: var(--ink-soft); font-size: .86rem; }

/* flashcards */
.fc-wrap { max-width: 560px; margin: 30px auto; text-align: center; }
.fc-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 40px 30px; box-shadow: var(--shadow); margin: 16px 0; min-height: 140px; }
.fc-front { font-size: 1.1rem; font-weight: 600; }
.fc-back { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--ink-soft); }
.fc-actions { display: flex; gap: 10px; justify-content: center; }

/* fingerprint / mistakes */
.fp-filters { display: flex; gap: 6px; margin: 8px 0 14px; }
.fp-f { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font: 600 .76rem Inter, sans-serif; cursor: pointer; }
.fp-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: .84rem; }
.fp-bar span { min-width: 220px; }
.fp-track { flex: 1; height: 10px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.fp-fill { height: 100%; background: var(--teal); border-radius: 999px; }
.mk-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-soft); padding: 9px 0; font-size: .86rem; }
.mk-sec { font-weight: 800; font-size: .7rem; color: var(--muted); min-width: 56px; }
.mk-row div { flex: 1; } .mk-row em { font-style: normal; color: var(--muted); font-size: .78rem; }
.mk-err { font-size: .72rem; color: #8a5300; background: #fff3e0; border-radius: 999px; padding: 2px 9px; }

/* score */
.sc-comp { background: #0f1f38; color: #fff; border-radius: 16px; padding: 20px 24px; display: inline-flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.sc-comp span { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #8fd4c9; }
.sc-comp strong { font-family: Poppins, sans-serif; font-size: 2rem; }
.sc-comp em { font-style: normal; font-size: .76rem; color: #8b98ad; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sc-sec { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.sc-sec span { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); display: block; }
.sc-sec strong { font-size: 1.3rem; }
.sc-sec em { display: block; font-style: normal; font-size: .72rem; color: var(--muted); }
.sc-path { background: #f2fbf8; border-radius: 10px; padding: 10px 14px; font-size: .9rem; }
.sc-hist { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-h { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .8rem; }
.sc-h span { color: var(--muted); margin-right: 8px; }

/* strategy */
.st-wrap details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.st-wrap summary { font-weight: 700; cursor: pointer; }
.st-wrap ol, .st-wrap ul { color: var(--ink-soft); font-size: .9rem; }
.st-wrap p { color: var(--ink-soft); font-size: .9rem; }

/* paper packet printing */
.pp-print { display: none; }
.pp-list { color: var(--ink-soft); font-size: .9rem; }
.pp-entry { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.pp-entry-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.pp-entry-grid label { font-size: .78rem; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
@media print {
  body * { visibility: hidden; }
  .pp-print, .pp-print * { visibility: visible; }
  .pp-print { display: block; position: absolute; left: 0; top: 0; width: 100%; padding: 20px; font-size: 12px; }
  .pp-q { margin-bottom: 14px; page-break-inside: avoid; }
  .pp-choices span { margin-right: 14px; }
  .pp-grid { page-break-before: always; }
  .pp-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
  .pp-row span { width: 24px; font-weight: 700; }
  .pp-row i { width: 18px; height: 18px; border: 1.5px solid #333; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 9px; }
}

/* reduced motion & focus */
@media (prefers-reduced-motion: reduce) { .prep-shell * { transition: none !important; animation: none !important; } }
.prep-shell button:focus-visible, .prep-shell input:focus-visible, .prep-shell select:focus-visible { outline: 3px solid #8fd4c9; outline-offset: 2px; }

/* resume banner + strict cards + essay */
.cc-resume { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fffbea; border: 1.5px solid #ffd814; border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.cc-resume em { display: block; font-style: normal; font-size: .78rem; color: #6b5b1e; }
.mt-strict { border: 1.5px solid #0f1f38; }
.es-prompt { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; font-size: .92rem; color: var(--ink-soft); margin-bottom: 14px; }
.es-persp { background: var(--line-soft); border-radius: 10px; padding: 10px 12px; }
.es-task { margin-bottom: 0; }
.es-text { width: 100%; min-height: 320px; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; font: inherit; line-height: 1.6; resize: vertical; }
.es-text:focus { outline: none; border-color: var(--teal); }
.es-scores { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-top: 16px; }
.es-score { display: flex; justify-content: space-between; border-top: 1px solid var(--line-soft); padding: 8px 0; font-size: .92rem; }
.es-score strong { font-family: Poppins, sans-serif; }
.es-overall { border-top: 2px solid var(--ink); font-weight: 700; }

/* ===================== Lessons ===================== */
.ls-wrap { max-width: 640px; margin: 0 auto; }
.ls-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; box-shadow: var(--shadow); }
.ls-card h2 { margin: 0 0 12px; font-size: 1.25rem; }
.ls-body { color: var(--ink-soft); line-height: 1.65; font-size: .96rem; }
.ls-visual { background: #f6fafb; border-radius: 14px; padding: 10px; margin: 4px 0 14px; }
.ls-ex { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 6px; }
.ls-ex-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.ls-ex-row span { font-weight: 800; flex: 0 0 auto; }
.ls-ex-row p { margin: 0; font-size: .92rem; }
.ls-ex-bad span { color: #a02020; } .ls-ex-bad p { color: #7a4848; text-decoration: line-through rgba(160,32,32,.35); }
.ls-ex-good span { color: #1a7a40; } .ls-ex-good p { color: var(--ink); font-weight: 600; }
.ls-ex-why { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
.ls-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.ls-dots { display: flex; gap: 6px; }
.ls-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ls-dots i.on { background: var(--teal); }

/* lesson SVG primitives */
.lv { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.lv-block { fill: #e6f3f4; stroke: #15808b; stroke-width: 1.5; }
.lv-chip { fill: #eef2f6; stroke: #c6d0da; }
.lv-frame { fill: none; stroke: #15808b; stroke-width: 1.5; stroke-dasharray: 4 3; }
.lv-t { font: 600 9px Inter, sans-serif; fill: #16243a; text-anchor: middle; }
.lv-w { font: 600 11px Inter, sans-serif; fill: #3d4a5c; }
.lv-eq { font: 700 16px Poppins, sans-serif; fill: #16243a; }
.lv-rel { font: 700 11px Inter, sans-serif; fill: #15808b; text-anchor: middle; opacity: 0; }
.lv-strong { font-weight: 800; fill: #116a73; }
.lv-struck { fill: #9aa6b2; }
.lv-bad { font: 800 20px Poppins, sans-serif; fill: #c0392b; text-anchor: middle; }
.lv-good { font: 800 20px Poppins, sans-serif; fill: #1a7a40; text-anchor: middle; }
.lv-slot { fill: #15808b; font-weight: 800; }
.lv-line { stroke: #9fb0c0; stroke-width: 2; }
.lv-strong-line { stroke: #16243a; }
.lv-angle { fill: rgba(21,128,139,.25); stroke: #15808b; }
.lv-textline { fill: #dbe3ea; }
.lv-strikeline { stroke: #c0392b; stroke-width: 2; }
.lv-arrow { stroke: #15808b; stroke-width: 2; marker-end: none; stroke-dasharray: 120; }
.lv-bar { fill: #f0b8b0; } .lv-bar-good { fill: #bfe4dd; } .lv-bar-delta { fill: #ffd814; width: 0; }
.lv-dot { fill: #ffd814; stroke: #b8930a; }
.lv-flask { fill: #eef2f6; stroke: #7d8b99; stroke-width: 1.5; }
.lv-line-pred { fill: none; stroke: #c0392b; stroke-width: 2; stroke-dasharray: 260; }
.lv-line-data { fill: none; stroke: #1a7a40; stroke-width: 2; stroke-dasharray: 260; }
.lv-umbrella { stroke: #15808b; stroke-width: 2; }

/* lesson animations */
@keyframes lvFade { 0%,45% { opacity: 1 } 60%,100% { opacity: 0 } }
@keyframes lvDrop { 0%,55% { opacity: 0; transform: translateY(-14px) } 75%,100% { opacity: 1; transform: translateY(0) } }
@keyframes lvPop { 0% { opacity: 0; transform: scale(.4) } 70% { transform: scale(1.15) } 100% { opacity: 1; transform: scale(1) } }
@keyframes lvGrow { from { stroke-dashoffset: 120 } to { stroke-dashoffset: 0 } }
@keyframes lvDraw { from { stroke-dashoffset: 260 } to { stroke-dashoffset: 0 } }
@keyframes lvShrink { 0%,30% { width: 280px } 70%,100% { width: 130px } }
@keyframes lvGrowX { 0%,40% { width: 0 } 80%,100% { width: 38px } }
@keyframes lvPulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes lvCycle { 0%,28% { opacity: 1 } 33%,100% { opacity: 0 } }
@keyframes lvFadeIn { 0%,40% { opacity: 0 } 70%,100% { opacity: 1 } }
@keyframes lvTravel { 0% { cx: 30px } 45% { cx: 160px } 100% { cx: 285px } }
@keyframes lvSlideIn { 0% { transform: translateX(40px); opacity: 0 } 40%,100% { transform: none; opacity: 1 } }
@keyframes lvBounceOut { 0%,55% { transform: none; opacity: 1 } 90%,100% { transform: translateX(46px); opacity: .25 } }
@keyframes lvSwap1 { 0%,35% { transform: translateX(80px) } 65%,100% { transform: none } }
@keyframes lvSwap2 { 0%,35% { transform: translateX(-80px) } 65%,100% { transform: none } }
@keyframes lvTilt1 { 0%,100% { transform: translateY(0) } 50% { transform: translateY(8px) } }
@keyframes lvTilt2 { 0%,100% { transform: translateY(8px) } 50% { transform: translateY(0) } }
.lv-fade { animation: lvFade 3.4s ease infinite } .lv-drop { animation: lvDrop 3.4s ease infinite }
.lv-pop { animation: lvPop 1.2s ease both } .lv-grow { animation: lvGrow 1.6s ease .5s both }
.lv-draw { animation: lvDraw 1.8s ease both } .lv-shrink { animation: lvShrink 3s ease infinite }
.lv-growx { animation: lvGrowX 3s ease infinite } .lv-pulse { animation: lvPulse 2s ease infinite }
.lv-cycle text { animation: lvCycle 4.5s linear infinite }
.lv-cycle text:nth-child(2) { animation-delay: 1.5s } .lv-cycle text:nth-child(3) { animation-delay: 3s }
.lv-fade-in, .lv-flip { animation: lvFadeIn 2.2s ease both } .lv-travel { animation: lvTravel 2.6s ease both }
.lv-slidein { animation: lvSlideIn 2.4s ease both } .lv-bounce-out { animation: lvBounceOut 3s ease infinite }
.lv-swap1 { animation: lvSwap1 3s ease infinite } .lv-swap2 { animation: lvSwap2 3s ease infinite }
.lv-tilt1 { animation: lvTilt1 3s ease infinite } .lv-tilt2 { animation: lvTilt2 3s ease infinite }
.lv-d1 { animation-delay: .5s } .lv-d2 { animation-delay: 1s } .lv-d3 { animation-delay: 1.5s }
.lv-glow { fill: #ffe89a; animation: lvPulse 2.2s ease infinite }
.lv-glowfill { fill: #ffe89a } .lv-strikeline { animation: lvGrow 1.2s ease .8s both }

/* ===================== Rewards ===================== */
.pl-prog { height: 6px; background: var(--line-soft); border-radius: 999px; margin: 0 0 14px; overflow: hidden; }
.pl-prog-fill { height: 100%; background: linear-gradient(90deg, var(--teal), #8fd4c9); border-radius: 999px; transition: width .5s ease; }
.pl-check-pop { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1a7a40; color: #fff; font-weight: 800; margin-right: 8px; animation: lvPop .45s ease both; }
.pl-streak { color: #116a73; font-weight: 700; font-size: .84rem; margin-left: 6px; }
.cf-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.cf-wrap i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: cfFall linear both; }
@keyframes cfFall { to { transform: translateY(105vh) rotate(720deg); opacity: .9 } }

/* ===================== ACT-style underline ===================== */
.act-u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: #16243a; font-weight: 500; }

/* ===================== Micro-lessons v2 ===================== */
.ls-top { display: flex; justify-content: space-between; align-items: center; }
.ls-micro { text-align: center; padding: 34px 34px 30px; }
.ls-micro h2 { font-size: 1.5rem; line-height: 1.35; margin-bottom: 14px; }
.ls-micro .ls-body { font-size: 1.12rem; line-height: 1.7; color: var(--ink); max-width: 34em; margin: 0 auto; }
.ls-micro .ls-visual { margin: 8px auto 16px; max-width: 460px; }
.ls-micro .ls-ex { text-align: left; max-width: 30em; margin: 10px auto 0; }
.ls-key { background: #e0f4f1; color: #0d5c64; border-radius: 7px; padding: 1px 7px; font-weight: 700; white-space: nowrap; }
.ls-decoy { color: #9aa6b2; }
.calm-toggle { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font: 600 .78rem Inter, sans-serif; cursor: pointer; color: var(--ink-soft); }
.calm-toggle:hover { border-color: var(--teal); }

/* Calm mode: sensory-friendly — no motion, muted color, same content */
.prep-calm .prep-shell *, .prep-calm .cf-wrap i { animation: none !important; transition: none !important; }
.prep-calm .cf-wrap { display: none !important; }
.prep-calm .ls-key { background: transparent; color: var(--ink); padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.prep-calm .ls-visual { filter: grayscale(.55) opacity(.85); }
.prep-calm .pl-streak, .prep-calm .pl-check-pop { display: none; }
.prep-calm .upsell-continue { background: var(--ink); color: #fff; }

/* ===================== Tutor chat ===================== */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; align-items: center; gap: 8px;
  background: #0f1f38; color: #fff; border: 0; border-radius: 999px; padding: 12px 18px; font: 700 .9rem Inter, sans-serif;
  box-shadow: 0 10px 30px rgba(15,31,56,.35); cursor: pointer; }
.chat-fab:hover { transform: translateY(-2px); }
.chat-panel { position: fixed; right: 22px; bottom: 78px; z-index: 901; width: min(360px, calc(100vw - 44px));
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(15,31,56,.28); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #0f1f38; color: #fff; }
.chat-head span { font-size: .72rem; color: #8b98ad; flex: 1; }
.chat-head button { background: none; border: 0; color: #8b98ad; font-size: 1.2rem; cursor: pointer; }
.chat-msgs { max-height: 300px; overflow-y: auto; padding: 14px; display: grid; gap: 8px; }
.chat-m { border-radius: 12px; padding: 9px 12px; font-size: .88rem; line-height: 1.5; max-width: 85%; }
.chat-tutor { background: #f2f5f8; justify-self: start; }
.chat-student { background: #e0f4f1; justify-self: end; }
.chat-wait { color: var(--muted); font-style: italic; }
.chat-suggest { display: flex; gap: 6px; padding: 0 14px 8px; flex-wrap: wrap; }
.chat-suggest button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 11px; font: 600 .74rem Inter, sans-serif; cursor: pointer; }
.chat-suggest button:hover { border-color: var(--teal); }
.chat-input { display: flex; gap: 8px; padding: 10px 14px 14px; }
.chat-input input { flex: 1; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px; font: inherit; }
.chat-input input:focus { outline: none; border-color: var(--teal); }

/* ===================== Whiteboard ===================== */
.wb { background: #fdfdfb; border: 2px solid #d8dde2; border-radius: 14px; margin-top: 16px; padding: 16px 20px 18px;
  box-shadow: inset 0 0 40px rgba(160,170,180,.12), var(--shadow); position: relative; }
.wb::after { content: ""; position: absolute; right: 14px; bottom: 10px; width: 46px; height: 10px;
  background: linear-gradient(90deg, #c0392b 30%, #2b3a8f 30% 60%, #1a7a40 60%); border-radius: 3px; opacity: .7; }
.wb-title { font: 700 .64rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #9aa6b2; }
.wb-line { font-family: Caveat, cursive; font-size: 1.7rem; font-weight: 700; line-height: 1.35;
  clip-path: inset(0 100% 0 0); animation: wbWrite 1.1s steps(24, end) both; }
.wb-blue { color: #2b3a8f; } .wb-red { color: #c0392b; } .wb-green { color: #1a7a40; }
@keyframes wbWrite { to { clip-path: inset(0 0 0 0); } }
.prep-calm .wb-line { animation: none !important; clip-path: none; }
@media (max-width: 700px) { .chat-panel { bottom: 74px; } .chat-fab span { display: none; } }

/* ===================== Overtime edge glow + corner timer ===================== */
#otFrame { position: fixed; inset: 0; pointer-events: none; z-index: 950; border-radius: 0; }
.ot-soft { box-shadow: inset 0 0 0 4px rgba(232,161,60,.55), inset 0 0 42px rgba(232,161,60,.28); animation: otPulseSoft 2.2s ease-in-out infinite; }
.ot-hard { box-shadow: inset 0 0 0 5px rgba(192,57,43,.6), inset 0 0 56px rgba(192,57,43,.3); animation: otPulseHard 1.6s ease-in-out infinite; }
@keyframes otPulseSoft { 50% { box-shadow: inset 0 0 0 4px rgba(232,161,60,.25), inset 0 0 20px rgba(232,161,60,.12); } }
@keyframes otPulseHard { 50% { box-shadow: inset 0 0 0 5px rgba(192,57,43,.28), inset 0 0 26px rgba(192,57,43,.14); } }
.pl-corner { position: fixed; top: 76px; right: 18px; z-index: 951; background: #fff; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font: 700 1rem Poppins, sans-serif; font-variant-numeric: tabular-nums;
  color: var(--ink); box-shadow: var(--shadow); }
.pl-corner-over { border-color: #c0392b; color: #c0392b; }
.pl-timer-over { color: #c0392b; }
/* Calm mode + reduced motion: visible but static (no pulsing) */
.prep-calm .ot-soft, .prep-calm .ot-hard { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ot-soft, .ot-hard { animation: none !important; } }

/* ===================== Purpose labels + first-time orientation ===================== */
.pl-purpose { background: #eef6ff; border: 1.5px solid #bcd6f2; border-radius: 11px; padding: 10px 14px;
  font-size: .86rem; color: #1e3a5c; margin: 0 0 12px; line-height: 1.5; }
.pl-purpose strong { color: #12467e; }
.ls-handoff { font-size: .86rem; color: var(--ink-soft); background: #fffbea; border: 1.5px solid #ffe89a;
  border-radius: 10px; padding: 9px 13px; margin: 14px auto 0; max-width: 30em; }
.or-wrap { max-width: 760px; margin: 30px auto; text-align: center; }
.or-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 24px; }
.or-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; text-align: left; box-shadow: var(--shadow); }
.or-n { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 10px; }
.or-card h3 { margin: 0 0 6px; font-size: 1rem; }
.or-card p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 700px) { .or-cards { grid-template-columns: 1fr; } }

/* ===================== XP bar (readiness points) ===================== */
#xpBar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 940;
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 7px 16px; box-shadow: var(--shadow); }
.xp-lvl { font: 800 .82rem Poppins, sans-serif; color: #fff; background: var(--teal); border-radius: 999px; padding: 3px 10px; }
.xp-track { width: 150px; height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--teal), #ffd814); border-radius: 999px; transition: width .7s cubic-bezier(.2,.9,.3,1.2); }
.xp-num { font: 700 .78rem Inter, sans-serif; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.xp-float { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 941;
  font: 800 .95rem Poppins, sans-serif; padding: 6px 14px; border-radius: 999px;
  animation: xpFloat 1.8s ease both; pointer-events: none; }
.xp-up { background: #e9f7ef; color: #1a7a40; }
.xp-down { background: #fdeaea; color: #a02020; }
@keyframes xpFloat { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.85); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -22px) scale(.95); } }
.prep-calm .xp-float { display: none; }
.prep-calm .xp-fill { transition: none; }

/* ===================== Focus mode (minimal chrome in training) ===================== */
.prep-focus .site-header, .prep-focus .prep-nav, .prep-focus .site-footer,
.prep-focus .member-rail, .prep-focus .mn-toggle, .prep-focus .mn-hamb { display: none !important; }
/* Training/diagnostic/mock focus mode reclaims the full width (no member sidebar). */
body.prep-focus.member-mode { padding-left: 0 !important; }
.prep-focus .prep-shell { padding-top: 64px; }
#focusChip { position: fixed; top: 10px; right: 16px; z-index: 941; display: flex; align-items: center; gap: 8px; }
.fc-avatar { width: 38px; height: 38px; border-radius: 50%; background: #0f1f38; color: #fff;
  font: 800 1rem Poppins, sans-serif; display: grid; place-items: center; box-shadow: var(--shadow); }
.fc-exit { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
  font-size: 1.05rem; cursor: pointer; box-shadow: var(--shadow); color: var(--ink-soft); }
.fc-exit:hover { border-color: var(--teal); color: var(--teal-dark); }
.prep-focus .pl-corner { top: 58px; }

/* ===================== Skill chip + hint ===================== */
.pl-skill-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pl-skill { font: 700 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em;
  color: #116a73; background: #e6f3f4; border-radius: 999px; padding: 4px 12px; }
.pl-hint-btn { border: 1.5px solid #ffd814; background: #fffbea; border-radius: 999px; padding: 5px 13px;
  font: 700 .78rem Inter, sans-serif; color: #6b5b1e; cursor: pointer; }
.pl-hint-btn:hover { background: #ffe89a; }
.pl-hint-btn:disabled { opacity: .55; cursor: default; }
.pl-hint { background: #fffbea; border: 1.5px solid #ffe89a; border-radius: 11px; padding: 10px 14px;
  font-size: .88rem; color: #5b4a12; margin: 0 0 12px; line-height: 1.5; }
.pl-hint strong { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; margin-right: 6px; }
.pl-hint a { color: #116a73; font-weight: 700; }

/* ===================== Break coach ===================== */
.bk-overlay { position: fixed; inset: 0; z-index: 980; background: rgba(15, 31, 56, .45); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px; }
.bk-card { background: #fff; border-radius: 22px; padding: 36px 40px; max-width: 440px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.bk-emoji { font-size: 2.6rem; margin-bottom: 6px; }
.bk-card h2 { margin: 0 0 10px; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.bk-card p { color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; }
.bk-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.prep-calm .bk-overlay { backdrop-filter: none; }

/* Online-ACT presentation: tested portion is HIGHLIGHTED, not underlined */
.prep-online .act-u { text-decoration: none; background: #ffe89a; padding: 0 3px; border-radius: 3px; box-decoration-break: clone; }

/* ===================== XP bar docking (nav row vs focus float) ===================== */
#xpBar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 6px 14px; position: static; transform: none; top: auto; left: auto; margin-left: auto; }
#xpBar.xp-fixed { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 940; box-shadow: var(--shadow); }
.prep-nav { align-items: center; }

/* ===================== Lesson v3: checkpoints + help + walkthrough ===================== */
.ls-nav-left { display: flex; align-items: center; gap: 14px; }
.ls-check { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 4px; }
.ls-check-q { font: 700 1.05rem Poppins, sans-serif; }
.ls-thumb { font-size: 1.6rem; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--line);
  background: #fff; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.ls-thumb:hover { transform: scale(1.12); }
.ls-up:hover { border-color: #1a7a40; background: #e9f7ef; }
.ls-down:hover { border-color: #c0392b; background: #fdeaea; }
.ls-help { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-top: 14px; }
.ls-help-q { font-weight: 700; margin: 0 0 10px; }
.ls-help-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ls-help-chips button { border: 1.5px solid var(--line); background: #f8fafb; border-radius: 999px; padding: 7px 14px;
  font: 600 .82rem Inter, sans-serif; cursor: pointer; }
.ls-help-chips button:hover { border-color: var(--teal); background: #f2fbf8; }
.ls-help-out { display: grid; gap: 8px; margin-top: 10px; }
.ls-ready { text-align: center; margin-top: 14px; }
.ls-deep-btn { display: block; margin: 16px auto 0; border: 1.5px dashed #b9a7e0; background: #f7f3fd; color: #5b3fa8;
  border-radius: 999px; padding: 9px 18px; font: 700 .86rem Inter, sans-serif; cursor: pointer; }
.ls-deep-btn:hover { background: #efe6fb; }
.ls-deep { text-align: left; background: #f7f3fd; border: 1.5px solid #d9ccf2; border-radius: 14px; padding: 16px 20px;
  margin-top: 14px; font-size: 1.05rem; line-height: 1.8; color: #3a2b62; }
.prep-calm .ls-deep, .prep-calm .ls-deep-btn { background: #f6f8fa; border-color: var(--line); color: var(--ink); }

/* ===================== Concept panel (the glue) ===================== */
.ls-concept { border: 2px solid #ffd814; background: linear-gradient(180deg, #fffdf4, #fff); }
.ls-concept-tag { display: inline-block; background: #ffd814; color: #4a3500; font: 800 .68rem Inter, sans-serif;
  letter-spacing: .08em; border-radius: 999px; padding: 4px 14px; margin-bottom: 12px; }
.ls-concept h2 { font-size: 1.3rem; }
.ls-concept .ls-body { font-size: 1.18rem; }
.prep-calm .ls-concept { border-color: var(--line); background: #fff; }

/* ===================== Skill puzzle ===================== */
.pz-section { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin: 16px 0; box-shadow: var(--shadow); }
.pz-section-done { border-color: #ffd814; box-shadow: 0 0 0 3px rgba(255, 216, 20, .25), var(--shadow); }
.pz-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.pz-head h3 { margin: 0; font-size: 1.05rem; }
.pz-readiness { display: flex; align-items: center; gap: 8px; }
.pz-rbar { width: 140px; height: 9px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.pz-rbar div { height: 100%; background: linear-gradient(90deg, var(--teal), #8fd4c9); border-radius: 999px; transition: width .8s ease; }
.pz-readiness strong { font-family: Poppins, sans-serif; font-size: 1.1rem; }
.pz-readiness span { font-size: .74rem; color: var(--muted); }
.pz-svg { width: 100%; max-width: 780px; display: block; }
.pz-piece { cursor: pointer; }
.pz-base { fill: #eef2f6; stroke: #c2cdd8; stroke-width: 1.5; }
.pz-fill { fill: #8fd4c9; opacity: .85; transition: all .6s ease; }
.pz-piece:hover .pz-base { stroke: var(--teal); stroke-width: 2.5; }
.pz-piece:focus-visible { outline: 3px solid #8fd4c9; outline-offset: 2px; }
.pz-label { font: 700 12.5px Inter, sans-serif; fill: #16243a; text-anchor: middle; pointer-events: none; }
.pz-pct { font: 800 16px Poppins, sans-serif; fill: #0d3b36; text-anchor: middle; pointer-events: none; }
.pz-check { font: 800 15px Inter, sans-serif; fill: #0d5c64; pointer-events: none; }
.pz-done .pz-fill { fill: url(#) #15808b; fill: #15808b; opacity: 1; }
.pz-done .pz-base { stroke: #0d5c64; }
.pz-done { filter: drop-shadow(0 0 7px rgba(21, 128, 139, .55)); }
.pz-snap { animation: pzSnap .8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pzSnap { 0% { transform: scale(.7); opacity: .4; } 60% { transform: scale(1.07); } 100% { transform: scale(1); opacity: 1; } }
.pz-complete { text-align: center; color: #6b5b1e; background: #fffbea; border: 1.5px solid #ffd814; border-radius: 10px; padding: 9px 14px; margin: 12px 0 0; font-weight: 600; }
.prep-calm .pz-done { filter: none; }
.prep-calm .pz-snap { animation: none; }

/* ===================== Story-mode walkthrough ===================== */
.ls-story { text-align: center; }
.ls-story-intro { font-size: 1.02rem; color: #5b3fa8; font-weight: 600; margin: 0 0 10px; }
.ls-story-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.ls-story-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ddd2f2; }
.ls-story-dots i.on { background: #5b3fa8; }
.ls-story-card { background: #fff; border: 2px solid #d9ccf2; border-radius: 16px; padding: 26px 24px; animation: lvPop .4s ease both; }
.ls-story-emoji { font-size: 2.6rem; display: block; margin-bottom: 8px; }
.ls-story-card h3 { margin: 0 0 8px; font-size: 1.35rem; font-family: Poppins, sans-serif; }
.ls-story-card p { margin: 0; font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); }
.ls-story-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.ls-story-done { font-size: 1.1rem; font-weight: 700; color: #1a7a40; background: #e9f7ef; border-radius: 12px; padding: 16px; }
.prep-calm .ls-story-card { animation: none; border-color: var(--line); }
.prep-calm .ls-story-intro { color: var(--ink); }

/* Lesson helpfulness vote */
.ls-vote { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px;
  font-size: .88rem; color: var(--muted); }
.ls-vote-btn { font-size: 1.15rem; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; }
.ls-vote-btn:hover { border-color: var(--teal); transform: scale(1.08); }

/* ---- lesson polish v4: hero art, static-safe visuals, richer cards ---- */
.lv-sent { font: 600 13px Inter, sans-serif; fill: #3d4a5c; }
.lv-xout { text-decoration: line-through; }
.lv-badword { fill: #c0392b; font-weight: 800; }
.lv-goodword { fill: #1a7a40; font-weight: 800; }
.lv-arrive { animation: lvFadeIn 2.2s ease both; }
.ls-hero { margin: -34px -34px 18px; border-radius: 18px 18px 0 0; overflow: hidden; max-height: 240px; }
.ls-hero img { display: block; width: 100%; height: 240px; object-fit: cover; }
.ls-concept .ls-hero { border-bottom: 2px solid #ffd814; }
.prep-calm .ls-hero img { filter: grayscale(.4) opacity(.9); }
.ls-micro h2 { font-family: Poppins, sans-serif; }
.ls-micro .ls-body { max-width: 32em; }
.ls-micro .ls-ex { background: #fafcfd; border-radius: 14px; }
.ls-card { transition: box-shadow .25s ease; }
@media (max-width: 700px) { .ls-hero { max-height: 160px; } .ls-hero img { height: 160px; } .ls-micro { padding: 26px 20px 24px; } .ls-hero { margin: -26px -20px 16px; } }

/* ---- listen (read-aloud) ---- */
.say-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff;
  border-radius: 999px; padding: 6px 14px; font: 600 .8rem Inter, sans-serif; color: var(--ink-soft); cursor: pointer; margin-bottom: 10px; }
.say-btn:hover { border-color: var(--teal); color: var(--teal); }
.say-btn.say-on { background: var(--teal); border-color: var(--teal); color: #fff; }
.ls-story-card .say-btn { margin: 12px 0 0; }

/* ---- read gate ---- */
.ls-gated { opacity: .55; cursor: wait !important; font-variant-numeric: tabular-nums; }

/* ---- concept check gate ---- */
.ck-card { border: 2px solid #15808b; }
.ck-tag { display: inline-block; background: #15808b; color: #fff; font: 800 .68rem Inter, sans-serif;
  letter-spacing: .06em; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
.ck-sub { color: var(--muted); font-size: .86rem; margin: 0 0 16px; }
.ck-choices { display: grid; gap: 10px; max-width: 34em; margin: 0 auto; }
.ck-choice { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  padding: 13px 16px; font: 500 .96rem Inter, sans-serif; cursor: pointer; }
.ck-choice:hover:not(:disabled) { border-color: var(--teal); background: #f2fbf8; }
.ck-choice:disabled { cursor: default; }
.ck-right { border-color: #1a7a40 !important; background: #e9f7ef !important; font-weight: 700; }
.ck-wrong { border-color: #a02020 !important; background: #fdeaea !important; }
.ck-why { background: #fffbea; border: 1px solid #f0e2a8; border-radius: 12px; padding: 12px 16px;
  font-size: .92rem; margin: 16px auto 12px; max-width: 34em; }
.prep-calm .ck-card { border-color: var(--line); }

/* ---- Desmos playbook ---- */
.dm-note { background: #eef4ff; border: 1px solid #c9d9f5; border-radius: 14px; padding: 14px 18px;
  font-size: .92rem; line-height: 1.6; margin: 0 0 22px; }
.dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 28px; }
.dm-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; }
.dm-icon { font-size: 1.6rem; }
.dm-card h3 { margin: 8px 0 6px; font-size: 1.05rem; font-family: Poppins, sans-serif; }
.dm-when { font-size: .82rem; color: var(--muted); margin: 0 0 8px; }
.dm-card ol { margin: 0 0 14px; padding-left: 20px; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
.dm-card ol li { margin-bottom: 4px; }
.dm-try { margin-top: auto; align-self: flex-start; }
.dm-play-h { margin: 0 0 12px; font-family: Poppins, sans-serif; }
.dm-calc { width: 100%; height: 460px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 10px; background: #fff; }
@media (max-width: 700px) { .dm-calc { height: 380px; } }

/* ---- Desmos practice mode ---- */
.dm-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 24px; }
/* Full-bleed: practice mode escapes the page container so the calculator
   can use the whole right side of the screen, digital-ACT style. */
.dp-wrap { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 18px; align-items: start;
  width: calc(100vw - 40px); position: relative; left: 50%; transform: translateX(-50%); }
.dp-side { position: sticky; top: 12px; }
.dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dp-q { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); }
.dp-stem { font-size: 1.05rem; line-height: 1.55; font-weight: 600; margin: 0 0 14px; }
.dp-choices { max-width: none; margin: 0 0 14px; }
.dp-calc { height: calc(100vh - 90px); min-height: 480px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.dp-guide { background: #f2fbf8; border: 1.5px solid #bfe4dd; border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
.dp-guide-trick { margin: 0 0 8px; font: 800 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #116a73; }
.dp-guide-step { margin: 8px 0; font-size: .95rem; line-height: 1.55; }
.dp-guide-watch { margin: 0 0 12px; font-size: .8rem; color: var(--muted); }
.dp-next { margin-top: 12px; }
@media (max-width: 900px) { .dp-wrap { grid-template-columns: 1fr; } .dp-side { position: static; } .dp-calc { height: 420px; } }
.prep-calm .dp-guide { background: #f6f8fa; border-color: var(--line); }

/* ---- mascot loader: the thinking owl on every loading state ---- */
.prep-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.prep-loading::before { content: ""; width: 210px; height: 210px; flex: 0 0 auto;
  background: url("../assets/thinking_owl_loader.gif") center/contain no-repeat; }
.prep-calm .prep-loading::before { display: none; }

/* ---- flashcards v2: real 3D card flip ---- */
.fc-wrap { max-width: 640px; }
.fc-count { text-align: center; }
.fc-scene { perspective: 1400px; margin: 14px 0 18px; }
.fc-card3d { position: relative; width: 100%; height: 400px; transform-style: preserve-3d; cursor: pointer;
  transition: transform .65s cubic-bezier(.35,.1,.25,1); }
.fc-card3d.fc-flipped { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 20px; padding: 28px 32px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; text-align: center; overflow-y: auto; }
.fc-face-front { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.fc-face-back { background: #0f1f38; color: #fff; transform: rotateY(180deg); box-shadow: var(--shadow); }
.fc-tag { font: 800 .68rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em;
  color: #116a73; background: #e6f3f4; border-radius: 999px; padding: 4px 12px; flex: 0 0 auto; }
.fc-tag-ans { background: #ffd814; color: #4a3500; }
.fc-text { font: 600 1.04rem/1.65 Inter, sans-serif; white-space: normal; }
.fc-face-back .fc-text { font-weight: 500; color: #e6ecf5; text-align: left; }
.fc-hint { font-size: .74rem; color: var(--muted); flex: 0 0 auto; }
.fc-face-back .fc-hint { color: #8b98ad; }
.fc-grade-q { display: block; font-size: .84rem; color: var(--muted); margin-bottom: 10px; }
.fc-grade-btns { display: flex; gap: 10px; justify-content: center; }
.prep-calm .fc-card3d { transition: none; }
@media (max-width: 700px) { .fc-card3d { height: 440px; } .fc-face { padding: 20px 18px; } }

/* ---- predicted score ---- */
.sc-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-top .sc-comp { margin-bottom: 0; }
.sc-predict-btn { flex: 0 0 auto; }
.sc-pred { background: #fff; border: 2px solid #15808b; border-radius: 18px; padding: 22px 26px; margin: 0 0 20px; box-shadow: var(--shadow); }
.sc-pred-main { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-pred-num span { display: block; font: 700 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sc-pred-num strong { font: 800 3.4rem/1.1 Poppins, sans-serif; color: #116a73; }
.sc-pred-num em { display: block; font-style: normal; font-size: .78rem; color: var(--muted); }
.sc-pred-secs { display: flex; gap: 14px; flex-wrap: wrap; }
.sc-pred-secs > div { background: #f6fafb; border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; text-align: center; }
.sc-pred-secs span { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.sc-pred-secs strong { font: 800 1.4rem Poppins, sans-serif; }
.sc-pred-strength { margin-bottom: 14px; }
.sc-pred-strength span { font: 700 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sc-str-track { height: 8px; background: var(--line-soft); border-radius: 999px; margin: 6px 0 4px; overflow: hidden; }
.sc-str-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #15808b, #8fd4c9); }
.sc-pred-strength em { font-style: normal; font-size: .76rem; color: var(--muted); }
.sc-pred-h { font-weight: 800; margin: 12px 0 8px; font-size: .92rem; }
.sc-pred-drivers { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sc-pred-drivers li { display: flex; align-items: center; gap: 10px; font-size: .9rem; background: var(--line-soft); border-radius: 10px; padding: 8px 12px; }
.sc-pred-drivers i { font-style: normal; font-weight: 800; font-size: .78rem; min-width: 44px; text-align: center; border-radius: 999px; padding: 2px 6px; }
.pd-up i { background: #e9f7ef; color: #1a7a40; }
.pd-down i { background: #fdeaea; color: #a02020; }

/* ---------------- study timer (top-left during training) ---------------- */
.study-timer { position: fixed; top: 10px; left: 16px; z-index: 941; display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; box-shadow: 0 4px 14px rgba(22,36,58,.08);
  font: 600 .8rem Inter, sans-serif; color: var(--ink, #16243a); }
.study-timer .st-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.study-timer .st-item b { font-variant-numeric: tabular-nums; }
.study-timer .st-sep { width: 1px; height: 14px; background: var(--line); }
.study-timer .st-break { color: var(--muted, #7d8b99); }
.study-timer .st-break-due { color: #1a7a40; font-weight: 800; }
@media (max-width: 640px) { .study-timer { font-size: .72rem; padding: 5px 11px; gap: 7px; }
  .prep-focus #focusChip { top: 8px; } }

/* hint locks confidence to Unsure */
.pl-conf-locked .pl-conf-btn { opacity: .55; cursor: default; }
.pl-conf-locked .pl-conf-on { opacity: 1; }
.pl-conf-lock-note { font-size: .72rem; color: var(--muted, #7d8b99); font-style: italic; margin-left: 4px; }

/* "we'll re-ask this" + "missed twice" notices in feedback */
.pl-fb-reask { margin-top: 8px; font: 600 .82rem Inter, sans-serif; color: #0c5f58;
  background: #f2fbf8; border: 1px solid #cdeee6; border-radius: 10px; padding: 8px 12px; }
.pl-fb-no .pl-fb-reask { color: #8a5a00; background: #fff8ec; border-color: #f2dcae; }

/* forced mini-lesson (missed the same idea twice) */
.ml-forced { max-width: 640px; margin: 0 auto; }
.ml-forced .ls-card { margin-top: 10px; }
.ml-forced h3 { font: 800 1.06rem Poppins, sans-serif; margin: 10px 0 4px; }
.ml-forced .ls-sep { border: none; border-top: 1px dashed var(--line); margin: 14px 0; }

/* ---------------- Desmos trial gating ---------------- */
.dm-trial-note { background:#fffbea; border:1px solid #ffe08a; border-radius:12px; padding:12px 16px; margin:10px 0 16px; font-size:.95rem; color:#6b5300; }
.dm-trial-note .dm-unlock-link { background:none; border:none; color:#116a73; font-weight:800; text-decoration:underline; cursor:pointer; padding:0; font-size:inherit; }
.dm-card-locked { position:relative; }
.dm-card-locked .dm-when { opacity:.6; }
.dm-lock { text-align:center; padding:10px 6px 4px; }
.dm-lock .dm-lock-i { font-size:1.8rem; display:block; margin-bottom:6px; }
.dm-lock p { color:var(--muted,#7d8b99); font-size:.9rem; margin-bottom:10px; }

/* ---------------- Onboarding funnel + Start landing ---------------- */
.start-wrap { min-height: 62vh; display: grid; place-items: center; padding: 30px 0; }
.start-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 40px 34px; box-shadow: var(--shadow); text-align: center; }
.start-badge { display: inline-block; font: 700 .7rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, #fff); padding: 5px 12px; border-radius: 999px; margin: 0 0 16px; }
.start-title { font-size: 2rem; line-height: 1.12; margin: 0 0 10px; letter-spacing: -.02em; }
.start-sub { color: var(--muted); font-size: .95rem; margin: 0 0 26px; }
.start-actions { display: flex; flex-direction: column; gap: 12px; }
.start-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; border-radius: 12px; font: 600 .98rem Inter, sans-serif; cursor: pointer; border: 1.5px solid var(--line); text-decoration: none; }
.start-google { background: #fff; color: var(--ink); }
.start-google:hover { background: var(--line-soft); }
.start-g { width: 18px; height: 18px; flex: 0 0 auto; }
.start-email { background: var(--ink); color: #fff; border-color: var(--ink); }
.start-email:hover { opacity: .92; }
.start-fine { margin: 20px 0 0; font-size: .84rem; color: var(--muted); }
.start-fine a { color: var(--teal); font-weight: 600; text-decoration: none; }

.fn-wrap { min-height: 60vh; display: grid; place-items: center; padding: 24px 0; }
.fn-card { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 34px 32px; box-shadow: var(--shadow); text-align: center; }
.fn-dots { display: flex; gap: 8px; justify-content: center; margin: 0 0 18px; }
.fn-dot { width: 30px; height: 5px; border-radius: 999px; background: var(--line); }
.fn-dot.on { background: var(--teal); }
.fn-dot.done { background: color-mix(in srgb, var(--teal) 55%, #fff); }
.fn-eyebrow { font: 700 .72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--teal); margin: 0 0 8px; }
.fn-title { font-size: 1.6rem; line-height: 1.15; margin: 0 0 10px; letter-spacing: -.015em; }
.fn-sub { color: var(--muted); font-size: .92rem; margin: 0 0 22px; }
.fn-list { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; display: flex; flex-direction: column; gap: 11px; }
.fn-list li { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: var(--ink); }
.fn-list li span { color: var(--teal); font-weight: 800; flex: 0 0 auto; }
.fn-cta { width: 100%; }
.fn-fine { margin: 14px 0 0; font-size: .78rem; color: var(--muted); }
.fn-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.fn-input { padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; width: 100%; box-sizing: border-box; }
.fn-input:focus { outline: none; border-color: var(--teal); }
.fn-role { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--line-soft); border-radius: 12px; }
.fn-rolelabel { font-size: .82rem; font-weight: 600; color: var(--muted); }
.fn-dave { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: color-mix(in srgb, var(--teal) 8%, #fff); border: 1px solid color-mix(in srgb, var(--teal) 22%, #fff); border-radius: 16px; padding: 16px 18px; margin: 0 0 20px; }
.fn-dave-av { width: 42px; height: 42px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; font-size: 1.1rem; display: grid; place-items: center; flex: 0 0 auto; }
.fn-dave-msg { font-size: .95rem; line-height: 1.5; color: var(--ink); }
@media (max-width: 520px) { .start-card, .fn-card { padding: 28px 20px; } .start-title { font-size: 1.7rem; } }

/* Sticky footer on prep pages: footer sits at the viewport bottom, no mid-page gap. */
body:has(.prep-shell) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(.prep-shell) .prep-shell { flex: 1 0 auto; }
body:has(.prep-shell) .site-footer { flex-shrink: 0; }

/* Test Profile settings tab shown as a gear, pinned to the right of the section nav. */
.prep-nav .pn-gear { margin-left: auto; font-size: 1.08rem; line-height: 1; padding: 8px 12px; }

/* Small-phone layout: single-column hero, roomier tap targets, and fixed
   chrome (XP bar, timer, question counter) kept out of the content's way. */
@media (max-width: 480px) {
  .cc-hero { grid-template-columns: 1fr; }
  .pl-choices { gap: 10px; }
  .pl-choice { padding: 14px; }
  .pl-actions { flex-wrap: wrap; }
  .prep-shell { padding: 20px 14px 60px; }
  #xpBar, #xpBar.xp-fixed { top: auto; bottom: 8px; left: 8px; right: 8px; transform: none; width: auto; justify-content: center; }
  .study-timer { top: 6px; left: 8px; }
  .pl-corner { top: 56px; }
  #focusChip { right: 8px; }
}