/* Case Ace page-local design system (#1372).
  
   Case Ace's design system lives in ONE page-local sheet that the page
   (public/caseace.html) links after solver-footer.css/glyphs.css. The page also
   loads layout.css for the shared product-page bar (#1936).

     --text-1/2/3      the semantic text tokens (#1121 floors; --text-2/3
                       stay byte-equal to layout.css, pinned by
                       contrast-guard.test.js)
     --ink-NN          the ink-alpha ramp — THE ONE PLACE the raw
                       rgba(13,27,22,…) literals may live (census:
                       server/test/caseace-foundations.test.js)
     --radius-s/m/l    the corner radii (12 / 14 / 22)
     .btn .btn-primary/.btn-secondary/.btn-ghost/.icon-btn
                       the ONE button set (#1313 site system: primary is
                       ink on lime) — Start the case, Send, Begin, guide
                       Next and lesson Next all ride .btn-primary
                       (computed styles pinned by the foundations journey)

   Do NOT re-inline this sheet into the page and do NOT add raw ink
   literals outside the ramp. */
:root{
  --ink:#0d1b16;--moss:#1f3a2e;--leaf:#2f6b4f;--lime:#9be564;--gold:#e7c46b;
  /* readable danger TEXT on the red tints (#c14b3a itself computes 3.95:1 on its own .12 tint — sub-AA); #a03d2e computes 5.34:1 */
  --danger-ink:#a03d2e;
  --cream:#f6f3ea;--paper:#fbfaf4;--mist:#e9efe8;--line:#e3e8e2;--danger:#c14b3a;
  /* Semantic text tokens — byte-equal re-declaration of layout.css
     (#1121): this page also loads layout.css; the contrast guard pins the
     equality; change layout.css and this line together. */
  --text-1:var(--ink);--text-2:rgba(13,27,22,.7);--text-3:rgba(13,27,22,.6);
  /* #1372 ink ramp — the one place the raw ink alphas live. Text uses the
     --text-N tokens (the .55 hand-typed meta lines were 3.91:1 on paper —
     sub-AA — and now read --text-3). */
  --ink-035:rgba(13,27,22,.035);--ink-05:rgba(13,27,22,.05);--ink-06:rgba(13,27,22,.06);
  --ink-07:rgba(13,27,22,.07);--ink-08:rgba(13,27,22,.08);--ink-10:rgba(13,27,22,.1);
  --ink-12:rgba(13,27,22,.12);--ink-14:rgba(13,27,22,.14);--ink-15:rgba(13,27,22,.15);
  --ink-25:rgba(13,27,22,.25);--ink-30:rgba(13,27,22,.3);--ink-32:rgba(13,27,22,.32);
  --ink-35:rgba(13,27,22,.35);--ink-40:rgba(13,27,22,.4);--ink-45:rgba(13,27,22,.45);
  --ink-62:rgba(13,27,22,.62);--ink-65:rgba(13,27,22,.65);--ink-72:rgba(13,27,22,.72);
  --ink-75:rgba(13,27,22,.75);--ink-78:rgba(13,27,22,.78);--ink-80:rgba(13,27,22,.8);
  --ink-82:rgba(13,27,22,.82);--ink-85:rgba(13,27,22,.85);--ink-88:rgba(13,27,22,.88);--ink-95:rgba(13,27,22,.95);
  /* Corner radii. */
  --radius-s:12px;--radius-m:14px;--radius-l:22px;
}

/* ---- Session chrome (minimalist, caseroom-style: white, centered, editorial) ---- */

.sess-status{max-width:720px;margin:0 auto;padding:10px 20px 26px;font-size:12.5px;color:var(--text-2);text-align:center}
.progressbar{height:3px;background:var(--mist)}
.progressbar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--leaf),var(--lime));transition:width .4s}
.exhibit-bar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 22px;background:#fff;border-bottom:1px solid var(--line)}
.exhibit-bar:empty{display:none}
.eb-chip{border:1px solid var(--line);background:#fff;border-radius:99px;font-size:12px;font-weight:600;padding:5px 12px;cursor:pointer;color:var(--moss)}
.eb-chip:hover{border-color:var(--leaf);color:var(--leaf)}

/* Chat — editorial, no heavy bubbles: interviewer speaks in plain serif
   paragraphs like the case prompt; candidate turns are soft indented cards. */
/* Bottom reserve: the measured composer (--composer-h, set by caseace.html) plus 24px
   of air above it; with the composer hidden the property is unset and the 140px
   fallback keeps the intro and report unchanged (#1951). */
.chat{max-width:720px;margin:0 auto;padding:34px 20px calc(var(--composer-h,140px) + 24px);display:flex;flex-direction:column;gap:18px}
.msg{display:flex}
.msg.interviewer{justify-content:flex-start}
.msg.you{justify-content:flex-end}
/* #507: system/infra notices (rate limits, lost connections) — visually
   distinct from the conversation, never styled as the interviewer speaking. */
.msg.system{justify-content:center}
.msg.system .bubble{background:var(--ink-05);border:1px dashed var(--line);border-radius:12px;padding:8px 14px;max-width:86%;font-size:13px;color:var(--ink-75);text-align:center}
.msg.system .bubble .who{font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-2);display:block;margin-bottom:2px}
.bubble{max-width:100%;border-radius:16px;padding:13px 17px;font-size:15px}
.msg.interviewer .bubble{background:transparent;border:none;padding:0;border-radius:0}
.msg.you .bubble{background:var(--mist);color:var(--ink);border-radius:14px 14px 4px 14px;max-width:85%}
.bubble .who{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.bubble h2{margin:4px 0 8px;font-size:22px}
.bubble h3{margin:4px 0 6px;font-size:16px}
.bubble p{margin:0 0 9px;font-size:16.5px;line-height:1.65}
.msg.you .bubble p{font-size:15px}
.msg.interviewer .bubble p{font-family:'Fraunces',Georgia,serif}
.bubble p:last-child{margin-bottom:0}
.cae-li{padding-left:16px;position:relative;margin:2px 0}
.cae-li::before{content:"•";position:absolute;left:2px;color:var(--leaf);font-weight:700}
.typing{display:inline-flex;gap:5px;padding:4px 0}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--leaf);opacity:.35;animation:cae-blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
/* #1828: this keyframe was declared twice back-to-back (transported verbatim
   from the old inline block); same-name keyframes cascade as a whole — the
   LAST declaration won — so the shipped animation was always this one
   (base .35 → .9 → .35). The dropped fuller body ({0%,80%,100%{opacity:.25}…})
   was dead on arrival. */
@keyframes cae-blink{40%{opacity:.9}}

/* Case intro full-screen (pre-session, "audio will start after this screen") */
.case-intro{position:fixed;inset:0;z-index:95;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px}
.case-intro h2{font-size:clamp(28px,4.5vw,40px);margin:0 0 10px;max-width:640px}
.case-intro p{color:var(--text-2);font-size:14.5px}
.btn-begin{margin-top:26px;padding:14px 34px;font-size:15px}
.case-intro[hidden]{display:none}

/* Controls guide overlay (caseroom-style onboarding) */
.cguide{position:fixed;inset:0;z-index:110;background:#fff;display:flex;flex-direction:column;padding:22px 26px;overflow-y:auto}
.cguide[hidden]{display:none}
.cguide-head{display:flex;justify-content:space-between;align-items:center;max-width:720px;width:100%;margin:0 auto}
.cguide-head .cg-title{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-2)}
.cguide-head .cg-close{background:none;border:none;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:1px;color:var(--text-2);cursor:pointer;padding:6px 10px;border-radius:8px}
.cguide-head .cg-close:hover{background:var(--mist);color:var(--ink)}
.cguide-count{max-width:720px;width:100%;margin:18px auto 0;font-size:14px;font-weight:600;color:var(--text-3)}
.cguide-rule{max-width:720px;width:100%;margin:10px auto 0;border:none;border-top:1px solid var(--line)}
.cguide-body{max-width:720px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 0}
.cguide-step h2{font-size:clamp(26px,4vw,36px);margin:0 0 12px}
.cguide-step .cg-sub{font-size:15px;color:var(--text-3);margin:0 0 22px}
.cguide-key{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--ink);border-radius:99px;padding:10px 22px;font-weight:800;font-size:13px;letter-spacing:.8px;background:#fff}
.cguide-key .cg-label{color:var(--text-3);margin-left:10px}
.cguide-note{margin-top:22px;font-size:14px;color:var(--text-2);max-width:520px}
.cguide-foot{max-width:720px;width:100%;margin:0 auto;display:flex;gap:10px;justify-content:space-between;padding:18px 0 8px}
.cguide-foot button{font:inherit;font-size:13.5px;font-weight:700;padding:11px 24px;cursor:pointer}
.cguide-foot .cg-next[disabled]{opacity:.45;cursor:default}

/* Exhibits */
.ex-head{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px}
.ex-num{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--leaf);background:rgba(47,107,79,.1);padding:2px 9px;border-radius:99px}
.ex-title{font-family:'Fraunces',Georgia,serif;font-size:15px;font-weight:600}
.exhibit{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:8px 0;overflow-x:auto}
.cae-table{border-collapse:collapse;width:100%;font-size:13px}
.cae-table th,.cae-table td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.cae-table thead th{background:var(--mist);font-size:12px}
.cae-table td.num,.cae-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.cae-heat td.num{font-weight:600}
.ex-note{font-size:12px;color:var(--text-2);margin:0 0 8px;font-style:italic}
.ex-empty{color:var(--text-2);font-size:13px;margin:4px 0}
.cae-diagram{overflow-x:auto}
.cae-diagram svg{max-width:100%;height:auto}
/* Drill-lane exhibit (#166): multi-panel table exhibits + alt-text subtitle. */
.drill-exhibit .ex-sub{font-size:12.5px;color:var(--text-3);margin:0 0 10px}
.drill-exhibit .drill-panel{margin:6px 0}
.drill-exhibit .drill-panel .panel-title{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--leaf);margin:0 0 6px}
.drill-exhibit .exhibit{margin:0}

/* #1368: SOLID composer with a top hairline — the translucent white fade band
   used to let chat content ghost through over the status line. The chat's
   scroll-padding-bottom (on #chatRoot) keeps the last line clear of it. */
.composer{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:18px 20px calc(22px + env(safe-area-inset-bottom))}
.composer .inner{max-width:720px;margin:0 auto;display:flex;gap:10px;align-items:flex-end}
/* min-width:0 lets the textarea shrink into the row instead of holding its
   cols-based intrinsic width (~200px) and pushing Send past the composer edge
   at 320px (#1951). */
.composer textarea{flex:1;min-width:0;resize:none;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font-family:inherit;font-size:15px;min-height:72px;max-height:180px;background:#fff;overflow-y:auto}
.btn-send{flex:0 0 auto;padding:0 22px;min-height:52px;font-size:15px}
.composer .btn-send:disabled{opacity:.55;cursor:default}
/* Composer input modes (text / speak / video) — one row above the answer row
   at every width; wraps inside the row only on a very narrow screen (#1951).
   The island (.cm-island) and the classic group (.cm-classic) share the row;
   a resolved island mount hides the classic group (the no-bundle fallback). */
/* (0,2,0): beats .composer .inner's margin shorthand, which would zero the gap below. */
.composer .composer-modes{flex-wrap:wrap;justify-content:center;align-items:center;margin:0 auto 10px}
.cm-classic{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
/* The island host is never display:none (an island is not first-painted inside a
   hidden box); display:contents keeps it box-less until the island is live. */
.cm-island{display:contents}
.composer.modes-island .cm-island{display:block;width:100%}
.composer.modes-island .cm-classic{display:none}
.composer .cmode{flex:0 0 auto;padding:7px 16px;border:1.5px solid var(--line);background:#fff;border-radius:99px;font-weight:600;font-size:12.5px;cursor:pointer;color:var(--ink-65)}
.composer .cmode.active{border-color:var(--leaf);background:rgba(47,107,79,.12);color:var(--ink)}
.composer .cmode:disabled{opacity:.5;cursor:not-allowed}
.rec-panel{width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.rec-panel .rec-count{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:700;text-align:center}
.rec-panel .rec-hint{font-size:12.5px;color:var(--text-3);text-align:center;margin:2px 0 0}
.rec-panel .rec-controls{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.rec-panel .btn-rec{background:var(--ink);color:var(--lime);border:none;border-radius:12px;padding:10px 18px;font-size:13.5px;font-weight:700;cursor:pointer}
.rec-panel .btn-rec:disabled{opacity:.55;cursor:default}
.rec-panel .btn-ghost{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--text-2)}
.rec-panel video,.rec-panel audio{width:100%;border-radius:8px;background:#111;max-height:220px;margin-top:10px}
.rec-panel .rec-selfview{margin:10px auto 0;max-width:260px;border-radius:12px;overflow:hidden;border:2px solid var(--leaf);position:relative}
.rec-panel .rec-selfview video{width:100%;height:160px;object-fit:cover;transform:scaleX(-1);margin:0}
.rec-panel .rec-status{text-align:center;margin-top:8px;font-size:13px;color:var(--text-3)}

/* Gates */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--ink-45);backdrop-filter:blur(4px);padding:18px}
.gate.hidden{display:none}
.gate .card{background:var(--paper);border-radius:22px;padding:34px 32px;max-width:480px;width:100%;text-align:center;box-shadow:0 24px 70px var(--ink-35)}
.gate h2{margin:6px 0 10px;font-size:23px}
.gate p{font-size:14.5px;line-height:1.55}
.gate .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-block;border-radius:var(--radius-s);padding:11px 20px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-family:inherit}
.btn-primary{background:var(--ink);color:var(--lime)}
.btn-primary:hover{filter:brightness(1.15)}
.btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-secondary:hover{border-color:var(--leaf)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-s);cursor:pointer;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--moss);border:1px solid var(--line)}
.btn-sm{font-size:13px}.btn-xs{font-size:12.5px}.btn-cp{font-size:13px;padding:6px 12px}.btn-md{font-size:13.5px}.btn-lg{font-size:15px}
.ccard{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;font-family:inherit;font-size:inherit;transition:border-color .12s,box-shadow .12s}
.ccard:hover{border-color:var(--leaf);box-shadow:0 6px 18px var(--ink-08)}
.ccard h3{margin:0 0 6px;font-size:15.5px}
.ccard .blurb{font-size:12.5px;color:var(--text-3);margin:0 0 10px;line-height:1.45}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge-d{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2.5px 9px;border-radius:99px}
.badge-d.easy{background:rgba(47,107,79,.12);color:var(--leaf)}
.badge-d.medium{background:rgba(231,196,107,.3);color:#7a5b17}
.badge-d.hard{background:rgba(193,75,58,.12);color:var(--danger-ink)}
.badge-t{font-size:10.5px;font-weight:700;padding:2.5px 9px;border-radius:99px;background:var(--mist);color:var(--moss)}

/* Report sheet */
.report-sheet{max-width:860px;margin:0 auto;padding:30px 20px 100px}
.report-sheet h2{font-size:26px;margin:8px 0 4px}
.scoreline{font-size:15px;color:var(--text-2)}
.scoreline .pct{font-family:'Fraunces',Georgia,serif;font-size:30px;font-weight:700;color:var(--leaf)}
.cae-score{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin:16px 0}
.cae-score-top{display:flex;align-items:baseline;gap:6px}
.cae-score-num{font-family:'Fraunces',Georgia,serif;font-size:44px;font-weight:800;color:var(--leaf)}
.cae-score-max{color:var(--text-3);font-size:15px}
.cae-groups{display:grid;gap:10px;margin-top:14px}
.cae-group{display:grid;grid-template-columns:130px 1fr 48px;align-items:center;gap:10px;font-size:13px}
.cae-group-h{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cae-bar{height:8px;background:var(--mist);border-radius:99px;overflow:hidden}
.cae-bar-fill{height:100%;background:linear-gradient(90deg,var(--leaf),var(--lime));border-radius:99px}
.cae-group-pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2)}
.report-loading{text-align:center;padding:34px 0;color:var(--text-3)}
.spin{width:26px;height:26px;margin:0 auto 10px;border:3px solid var(--mist);border-top-color:var(--leaf);border-radius:50%;animation:cae-spin .8s linear infinite}
@keyframes cae-spin{to{transform:rotate(360deg)}}
.report-md{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 26px;margin:16px 0}
.report-md h2{font-size:19px;margin:18px 0 6px}
.report-md h3{font-size:16px;margin:14px 0 4px}
.report-md p{font-size:14.5px;margin:0 0 10px}
.report-md .report-recs{margin:0 0 10px;padding-left:22px;font-size:14.5px}
.report-md .report-recs li{margin:0 0 6px}
.report-md .rec-ties{font-size:12px;color:var(--text-3)}
.qa-grid{display:grid;gap:10px;margin:16px 0}
.qa-card{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--paper);font-size:13.5px}
.qa-grid .q-head{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.pill{font-size:11px;font-weight:800;padding:2px 10px;border-radius:99px}
.pill-ok{background:rgba(47,107,79,.12);color:var(--leaf)}
.pill-part{background:rgba(231,196,107,.3);color:#7a5b17}
.pill-no{background:rgba(193,75,58,.12);color:var(--danger-ink)}
/* Deep-audit dimensions (#606) */
.dim-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.dim-mark{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--mist);color:var(--moss)}
.dim-mark.dim-ok{background:rgba(47,107,79,.12);color:var(--leaf)}
.dim-mark.dim-no{background:rgba(193,75,58,.12);color:var(--danger-ink)}
.dim-note{margin:6px 0 0;font-size:12.5px;line-height:1.5}
.dim-note-ok{color:var(--leaf)}
.dim-note-no{color:var(--ink-65)}

@media (max-width:640px){
  .chat{padding:18px 12px calc(var(--composer-h,140px) + 24px)}
  .msg.you .bubble{max-width:92%}
  .cae-group{grid-template-columns:96px 1fr 42px}
  .composer{padding:12px 12px 16px}
  
  .cguide{padding:16px}
}

/* Drill hub (issue #86): category chips + drill cards. Shares the .ccard
   card anatomy; the attempts pill and out-state are drill-specific. */
.dhub-cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
/* #1955: the hub's two faces. .dhub-pre wraps what rebuilds every render
   (the focus strip + the .dhub-classic fallback hub); .dhub-io is the ONE
   persistent island host — hidden until the caseace bundle mounts, then it
   takes over and the fallback hides. [hidden] beats every classed display
   rule (the #1060 gotcha). */
.dhub-classic[hidden],.dhub-io[hidden]{display:none!important}
/* #1342: the hub chips render through the shared CaseAceHome.chip — the .achip rules above style both lanes (one active colour). */
/* Filters + progress (issue #169): difficulty chips reuse the .dcat look;
   the subtype select rides the same row where the kind authors subtypes;
   the attempted/total line sits between the chips and the filters. */
.dhub-prog{font-size:12.5px;color:var(--text-2);margin:0 0 10px}
.dhub-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
/* #1342: the difficulty chips share the same .achip component (the old gold-active fork is gone). */
.dsub-wrap{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.dsub-label{font-size:12px;font-weight:600;color:var(--text-2)}
.dsub{font:inherit;font-size:12.5px;padding:6px 10px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);max-width:220px}
/* Learn hub practice rows (#169): the chapter's drill-kinds deep-link into
   the drill lane kind-pre-filtered. */
.prow-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--leaf);margin:8px 0 6px}
.prow{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 12px;margin:0 0 4px;text-align:left;border:1.5px solid rgba(47,107,79,.35);border-radius:10px;background:rgba(47,107,79,.06);color:var(--ink);cursor:pointer;font:inherit;font-size:13.5px}
.prow:hover,.prow:focus-visible{border-color:var(--leaf);background:rgba(47,107,79,.12)}
.prow .prow-n{color:var(--text-2);white-space:nowrap;margin-left:10px;font-size:12.5px}
.dhub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.dhub-empty{grid-column:1/-1;text-align:center;padding:20px;color:var(--text-2);font-size:14px}
/* Focus strip (#277): the picker's weakest-skill recommendation — a lime
   callout above the category chips with a jump-to-kind button. */
.dfocus{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  border:1.5px solid rgba(47,107,79,.35);background:rgba(155,229,100,.14);border-radius:14px;
  padding:12px 16px;margin:0 0 14px}
.dfocus-h{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(47,107,79,.9)}
.dfocus-go{border:1.5px solid var(--leaf);background:#fff;border-radius:99px;padding:8px 14px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink);white-space:nowrap}
.dfocus-go:hover,.dfocus-go:focus-visible{background:rgba(47,107,79,.12)}
.dcard{ text-align:left;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:16px 18px;cursor:pointer;font:inherit;transition:border-color .15s ease, box-shadow .15s ease}
.dcard:hover:not(:disabled),.dcard:focus-visible{border-color:var(--leaf);box-shadow:0 2px 10px rgba(47,107,79,.15)}
.dcard:disabled{opacity:.55;cursor:not-allowed}
.dcard h3{margin:0 0 4px;font-family:'Fraunces',Georgia,serif;font-size:16.5px;color:var(--ink)}
.dcard .blurb{margin:0 0 10px;font-size:12.5px;color:var(--text-3)}
.dcard .badges{display:flex;gap:6px;flex-wrap:wrap}
.dcard .dleft-out{background:rgba(193,75,58,.12);color:var(--danger-ink)}
/* Scorecard transcript (#277): the candidate's own words on the wrap-up. */
.score-transcript{border-left:3px solid rgba(47,107,79,.35);padding:2px 0 2px 12px;margin:0 0 12px}

/* Lesson exhibit cards (caseroom-style brief cards with on-cue treatments) */
.lesson-exhibit{margin-top:14px}
/* #1952: every exhibit family fills the lesson frame's content width. The
   frame (.lp-framebox, 960px) bounds them, so no family carries a fixed cap of
   its own. The narration keeps its separate 680px prose measure (#frameNarration). */
/* Converted v2 lessons (#160) carry taller exhibit stages (multi-card briefs,
   tables, transcripts) — with a pause gate BELOW a tall exhibit the CTA can
   sit past the viewport inside this centered, non-scrolling modal. The lesson
   card scrolls internally so the gate CTA stays reachable. */
#lessonPlayer{padding:0;place-items:stretch}
.lx-card{border:1px solid var(--ink-14);border-radius:14px;background:#fff;overflow:hidden}
.lx-card header{padding:12px 18px 10px;border-bottom:1px solid var(--ink-08)}
.lx-card header h4{margin:0;font-family:'Fraunces',Georgia,serif;font-size:18px;color:var(--ink)}
.lx-card .lx-body{padding:14px 16px}
.lx-card .lx-body p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--ink-82)}
.lx-card .lx-body p:last-child{margin-bottom:0}
.lx-card footer{padding:10px 16px;background:rgba(47,125,79,.07)}
.lx-card footer p{margin:0;font-size:13.5px;font-weight:600;color:var(--leaf,#2f7d4f)}
/* focus spans: hidden until their paragraph is cued */
.lx-focus{border-radius:2px;padding:0 1px;opacity:0;transition:opacity .4s ease, background-color .4s ease}
.lx-focus.lx-on[data-treatment="highlight"]{opacity:1;background:rgba(155,229,100,.55);box-shadow:0 0 0 2px rgba(155,229,100,.55)}
.lx-focus[data-treatment="underline"]{border-bottom:2px solid transparent;transition:border-color .4s ease}
.lx-focus.lx-on[data-treatment="underline"]{border-bottom-color:var(--coral,#e04a4f)}
.lx-para{opacity:.45;transition:opacity .4s ease}
.lx-para.lx-active{opacity:1}
/* Reveal families (issue #156): accumulating cards + quotes. Items carry
   data-tone from the shared palette (plain/green/gold/coral); an item that
   reveals on the current frame gets .lx-in — the entry transition, which
   prefers-reduced-motion disables. */
.lx-stage-title{margin:0 0 8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--text-2)}
.lx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.lx-tile{border:1px solid var(--ink-14);border-left-width:3px;border-radius:12px;background:#fff;padding:12px 14px}
.lx-tile .lx-label{margin:0 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.lx-tile h5{margin:0 0 4px;font-family:'Fraunces',Georgia,serif;font-size:15.5px;color:var(--ink)}
.lx-tile .lx-icon{margin:0 0 4px;font-size:15px;line-height:1}
.lx-tile .lx-value{margin:0 0 4px;font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:800;color:var(--leaf,#2f6b4f)}
.lx-tile p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-78)}
.lx-quotes{display:grid;gap:10px}
.lx-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lx-quote{border:1px solid var(--ink-14);border-left-width:3px;border-radius:0 12px 12px 0;background:#fff;padding:12px 16px}
.lx-quote .lx-said{margin:0 0 8px;font-size:14.5px;line-height:1.55;font-style:italic;color:var(--ink-85)}
.lx-quote .lx-who{margin:0 0 3px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.lx-quote .lx-take{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-65)}
.lx-quote .lx-take b{color:var(--leaf,#2f6b4f)}
/* slots (issue #158): the empty state is the feature — every labelled slot
   sits on stage as a dashed placeholder and its text fills in on cue. */
.lx-slots{display:grid;gap:10px}
.lx-slot{border:1px dashed var(--ink-32);border-radius:12px;background:rgba(255,255,255,.55);padding:11px 14px}
.lx-slot.lx-filled{border-style:solid;border-left-width:3px;background:#fff}
.lx-slot .lx-fill{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-85)}
/* transcript (issue #158): the model dialog reuses the product's turn-bubble
   styling (editorial, no heavy bubbles) — the interviewer speaks in plain
   serif on the left, candidate turns are soft indented cards on the right. */
.lx-turns{display:grid;gap:10px}
.lx-turn{display:flex}
.lx-turn[data-role="candidate"]{justify-content:flex-end}
.lx-turn .lx-bubble{max-width:88%;border-radius:16px;padding:11px 15px}
.lx-turn[data-role="interviewer"] .lx-bubble{background:transparent;border:none;padding:0;border-radius:0}
.lx-turn[data-role="candidate"] .lx-bubble{background:var(--mist,#eef2ec);border-radius:14px 14px 4px 14px}
.lx-turn .lx-who{margin:0 0 3px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3)}
.lx-turn[data-role="interviewer"] .lx-said{margin:0;font-family:'Fraunces',Georgia,serif;font-size:15px;line-height:1.55;color:var(--ink-88)}
.lx-turn[data-role="candidate"] .lx-said{margin:0;font-size:14px;line-height:1.55;color:var(--ink-85)}
/* tone palette (shared by both families; literals are the exhibit palette,
   kept distinct from the page vars on purpose) */
.lx-tile[data-tone="green"],.lx-quote[data-tone="green"],.lx-slot[data-tone="green"]{border-left-color:#2f6b4f;background:rgba(47,107,79,.07)}
.lx-tile[data-tone="gold"],.lx-quote[data-tone="gold"],.lx-slot[data-tone="gold"]{border-left-color:#b9873b;background:rgba(231,196,107,.18)}
.lx-tile[data-tone="coral"],.lx-quote[data-tone="coral"],.lx-slot[data-tone="coral"]{border-left-color:#e04a4f;background:rgba(224,74,79,.06)}
/* a slot's tone belongs to its FILL — the empty placeholder stays neutral */
.lx-slot:not(.lx-filled){background:rgba(255,255,255,.55)}
/* tone palette (shared by the accumulating families; literals are the exhibit
   palette, kept distinct from the page vars on purpose) */
.lx-tile[data-tone="green"],.lx-quote[data-tone="green"],.lx-branch[data-tone="green"],.lx-bucket[data-tone="green"]{border-left-color:#2f6b4f;background:rgba(47,107,79,.07)}
.lx-tile[data-tone="gold"],.lx-quote[data-tone="gold"],.lx-branch[data-tone="gold"],.lx-bucket[data-tone="gold"]{border-left-color:#b9873b;background:rgba(231,196,107,.18)}
.lx-tile[data-tone="coral"],.lx-quote[data-tone="coral"],.lx-branch[data-tone="coral"],.lx-bucket[data-tone="coral"]{border-left-color:#e04a4f;background:rgba(224,74,79,.06)}
@keyframes lx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lx-in{animation:lx-in .35s ease both}
@media (prefers-reduced-motion:reduce){.lx-in{animation:none}}
@media (max-width:640px){.lx-pair{grid-template-columns:1fr}}
/* ---- table family (issue #157): rows build per cue; per-cell / per-row
   tone highlights land on cue on top of the always-legible plain table ---- */
.lx-tablewrap{border:1px solid var(--ink-14);border-radius:12px;background:#fff;overflow-x:auto}
/* table text reads at 14px or larger (#1952): headers and cells alike */
.lx-table{border-collapse:collapse;width:100%;font-size:14px}
.lx-table th{padding:8px 12px;text-align:left;font-size:14px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);background:var(--ink-035);border-bottom:1px solid var(--ink-12)}
.lx-table td{padding:8px 12px;color:var(--ink-82);border-top:1px solid var(--ink-07)}
.lx-table tr:first-child td{border-top:none}
/* row tones (the family's data-tone) — subtle washes over the legible plain
   table; equal specificity with the highlight washes, so source order makes a
   highlight on the same row win */
.lx-table tr[data-tone="green"] td{background:rgba(47,107,79,.1)}
.lx-table tr[data-tone="gold"] td{background:rgba(231,196,107,.18)}
.lx-table tr[data-tone="coral"] td{background:rgba(224,74,79,.07)}
.lx-table tr td[data-hl]{--hl-line:var(--ink-30);--hl-fill:var(--ink-06);background:var(--hl-fill);box-shadow:inset 0 0 0 2px var(--hl-line);font-weight:700;color:var(--ink)}
.lx-table td[data-hl="green"]{--hl-line:rgba(47,107,79,.55);--hl-fill:rgba(47,107,79,.14)}
.lx-table td[data-hl="gold"]{--hl-line:rgba(185,135,59,.6);--hl-fill:rgba(231,196,107,.22)}
.lx-table td[data-hl="coral"]{--hl-line:rgba(224,74,79,.55);--hl-fill:rgba(224,74,79,.1)}
/* row-wide highlight: the wash spans the row, without the per-cell ring */
.lx-table tr[data-hl] td:not([data-hl]){--hl-line:transparent;--hl-fill:var(--ink-06);background:var(--hl-fill);box-shadow:none;font-weight:400;color:var(--ink-82)}
.lx-table tr[data-hl="green"] td:not([data-hl]){--hl-fill:rgba(47,107,79,.12)}
.lx-table tr[data-hl="gold"] td:not([data-hl]){--hl-fill:rgba(231,196,107,.24)}
.lx-table tr[data-hl="coral"] td:not([data-hl]){--hl-fill:rgba(224,74,79,.08)}
/* ---- tree family (issue #157): root pill, branches building one per cue,
   sub-branches riding their branch ---- */
.lx-tree-root{display:inline-block;background:var(--ink,#0d1b16);color:var(--cream,#f6f3ea);font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:10px}
.lx-branches{margin-top:10px;display:grid;gap:8px;margin-left:14px;padding-left:14px;border-left:2px solid var(--ink-15)}
.lx-branch{border:1px solid var(--ink-14);border-left-width:3px;border-radius:12px;background:#fff;padding:10px 14px}
.lx-branch .lx-branch-label{margin:0;font-weight:800;font-size:13.5px;color:var(--ink)}
.lx-branch .lx-sub{margin:6px 0 0;padding-left:16px;display:grid;gap:3px}
.lx-branch .lx-sub li{font-size:12.5px;line-height:1.45;color:var(--ink-75)}
/* ---- buckets family (issue #157): the MECE structure map — the main
   question above a grid of named buckets filling bucket-by-bucket ---- */
.lx-question{margin:0 0 10px;font-family:'Fraunces',Georgia,serif;font-size:15px;font-weight:600;color:var(--ink)}
.lx-buckets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.lx-bucket{border:1px solid var(--ink-14);border-left-width:3px;border-radius:12px;background:#fff;padding:12px 14px}
.lx-bucket h5{margin:0 0 6px;font-family:'Fraunces',Georgia,serif;font-size:14.5px;color:var(--ink)}
.lx-bucket .lx-items{margin:0;padding-left:16px;display:grid;gap:4px}
.lx-bucket .lx-items li{font-size:12.5px;line-height:1.5;color:var(--ink-78)}
/* ---- equation family (#398): the step-revealed formula — labelled lines
   build one per cue on a card-per-line stage; the shared .lx-in entry
   transition (and its reduced-motion freeze) applies to steps as-is ---- */
.lx-equation{display:grid;gap:8px}
.lx-step{border:1px solid var(--ink-14);border-left-width:3px;border-radius:12px;background:#fff;padding:10px 14px}
.lx-step .lx-step-label{margin:0 0 3px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.lx-step .lx-step-expr{margin:0;font-family:'Fraunces',Georgia,serif;font-size:15.5px;line-height:1.5;color:var(--ink)}
.lx-step .lx-step-value{margin:3px 0 0;font-family:'Fraunces',Georgia,serif;font-size:16.5px;font-weight:800;color:var(--leaf,#2f6b4f)}
.lx-step[data-tone="green"]{border-left-color:#2f6b4f;background:rgba(47,107,79,.07)}
.lx-step[data-tone="gold"]{border-left-color:#b9873b;background:rgba(231,196,107,.18)}
.lx-step[data-tone="coral"]{border-left-color:#e04a4f;background:rgba(224,74,79,.06)}
/* ---- v2 phase rail (issue #155) ---- */
.phase-rail{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.phase-rail .ph{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--ink-14);color:var(--text-3);background:rgba(255,255,255,.5)}
.phase-rail .ph.cur{border-color:var(--leaf,#2f7d4f);color:var(--leaf,#2f7d4f);background:rgba(155,229,100,.2)}
.phase-rail .ph.done{border-color:rgba(47,125,79,.4);color:var(--ink-72);background:rgba(47,125,79,.08)}
.phase-rail .ph .tick{font-size:11px;color:var(--leaf,#2f7d4f)}
/* ---- v2 completion treatment: shimmer-green sweep on the final-frame CTA
       (the checkout MBB shine pattern, frozen under reduced motion) ---- */
.btn-shimmer{position:relative;overflow:hidden}
.btn-shimmer::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%);
  background-size:250% 100%;background-repeat:no-repeat;
  animation:btnshimmer 2.8s cubic-bezier(.45,.05,.35,.95) infinite}
@keyframes btnshimmer{0%{background-position:135% 0}100%{background-position:-35% 0}}
@media(prefers-reduced-motion:reduce){.btn-shimmer::after{animation:none;opacity:0}}
/* ---- v2 completion panel (revealed by the completion CTA) ---- */
.ld-panel{border:1px solid rgba(47,125,79,.35);border-radius:14px;padding:20px 22px;background:rgba(155,229,100,.12);text-align:start}
.ld-head{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--ink)}
.ld-sub{margin:0 0 14px;font-size:14px;color:var(--text-2)}
.ld-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* ---- Input font floor (#1118) ----
   iOS Safari zooms the viewport whenever a focused text field renders under
   16px and never zooms back out. Mobile floor: the composer textarea (and
   any other text field) clears 16px at phone widths; desktop is untouched
   (the scope ends at the 760px breakpoint). max(16px, 1em) keeps
   deliberately larger fields; !important beats this page's 15px field
   rules without touching their desktop sizes. Checkbox/radio/range/file
   never open the iOS keyboard and stay outside the floor — pinned by
   server/test/input-font-floor.test.js and
   server/test/e2e/input-font-floor-journey.test.js. This page also
   loads layout.css; this copy stays byte-equal to it (input-font-floor.test.js
   pins both). */
/* Drill wrap-up scorecard (#1366): meters + quiet skills line. */
.dwrap-dims{display:flex;flex-direction:column;gap:12px;margin:0 0 4px}
.dwrap-dim{border:1px solid var(--ink-12);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.55)}
.dwrap-dim-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
.dwrap-meter{margin-top:8px;height:8px;border-radius:99px;background:var(--ink-10);overflow:hidden}
.dwrap-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--leaf,#2f7d4f),#9be564)}
.dwrap-skills{margin:10px 0 0;font-size:12px;color:var(--ink-62)}
/* #1956: the wrap-up reads top-down. The verdict is the one bold header; the
   coaching point and the candidate's response stay open; the model answer
   follows; the detail sections collapse; the actions ride a sticky bar. */
.dwrap-eyebrow{margin:0 0 2px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2)}
.report-sheet .dwrap-verdict{margin:0 0 6px;font-size:28px;line-height:1.2;font-weight:700;color:var(--text-1)}
.dwrap-h{margin:0;font-size:15px;font-weight:500;line-height:1.35;color:var(--text-1)}
.dwrap-section,.dwrap-coach{margin:16px 0 0}
.dwrap-coach{border-left:3px solid var(--leaf);padding:2px 0 2px 14px}
.dwrap-coach p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-85)}
.dwrap-detail{margin-top:18px;border-top:1px solid var(--line)}
.dwrap-sec{border-bottom:1px solid var(--line)}
.dwrap-sec>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;cursor:pointer;list-style:none;color:var(--text-1)}
.dwrap-sec>summary::-webkit-details-marker{display:none}
.dwrap-sec>summary::after{content:"";flex-shrink:0;width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.dwrap-sec[open]>summary::after{transform:rotate(225deg)}
.dwrap-sec>summary:focus-visible{outline:2px solid var(--leaf);outline-offset:2px;border-radius:6px}
.dwrap-sec>.dwrap-body{padding:0 0 14px}
.dwrap-actions{position:sticky;bottom:0;z-index:3;margin:22px -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}
.dwrap-actions .dactions{margin-top:0;justify-content:center}
@media (prefers-reduced-motion:reduce){.dwrap-sec>summary::after{transition:none}}
/* Model answer (#1376) — a teaching reference after the marks. */
.drill-ma{border:1px solid rgba(47,125,79,.35);border-radius:14px;padding:14px 16px;margin-top:14px;background:rgba(47,125,79,.06)}
.ma-intro{margin:0 0 10px;font-size:12.5px;color:var(--ink-65)}
.ma-bucket,.ma-branch{border:1px solid var(--ink-12);border-radius:12px;padding:10px 12px;margin:0 0 8px;background:rgba(255,255,255,.65)}
.ma-missed{border-color:rgba(160,61,46,.45);background:rgba(160,61,46,.05)}
.ma-bucket-h{margin:0 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ma-detail{margin:2px 0 0;font-size:13px;line-height:1.55;color:var(--ink-80)}
.ma-why{margin:2px 0 0;font-size:12.5px;color:var(--ink-65)}
.ma-ideas{margin:4px 0 0;font-size:12.5px;color:var(--text-2)}
.ma-sub{margin:4px 0 0;font-size:13px}
.ma-root{margin:0 0 8px;font-size:14px}
.ma-subhead{margin:12px 0 6px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--leaf,#2f7d4f);font-weight:700}
.ma-qlist,.ma-steps,.ma-brief{margin:0;padding-left:20px}
.ma-qlist li,.ma-steps li{margin:0 0 10px;font-size:13px;line-height:1.55}
.ma-q{margin:0;font-size:13px}
.ma-unlock{margin:2px 0 0;font-size:12.5px;color:var(--ink-65)}
.ma-figure{margin:8px 0 0;font-size:14.5px}
.ma-brief li{margin:0 0 4px;font-size:12.5px;color:var(--ink-75)}
/* Pre-spend drill detail (#1366). */
.ddetail-title{margin:10px 0 0}
/* #1955: the brief renders through the session's markdown renderer (the ONE
   renderer rule), so the container styles block elements — the old
   white-space:pre-wrap escaped-text face is gone. */
.ddetail-brief{border:1px solid var(--ink-12);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.6);font-size:13.5px;line-height:1.6;color:var(--ink-88)}
.ddetail-brief>:first-child{margin-top:0}
.ddetail-brief>:last-child{margin-bottom:0}
.ddetail-brief h2,.ddetail-brief h3{margin:10px 0 4px;font-size:14px;font-family:'Fraunces',Georgia,serif;color:var(--ink)}
.ddetail-brief p{margin:0 0 6px}
.ddetail-count{margin:10px 0 0;font-size:12.5px;color:var(--text-2)}
.ddetail-attempts{margin:10px 0 0;font-size:12.5px;color:var(--text-2)}
.ddetail-history{margin:8px 0 0}
.ddetail-h{margin:0 0 4px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--leaf);font-weight:700}
.ddetail-row{display:flex;gap:14px;margin:0 0 2px;font-size:12.5px;color:var(--ink-75)}
.ddetail-row span:first-child{font-weight:600}
.dinstructions{margin-top:10px}
/* Collapsible drill brief (#1366; #1954 starts it collapsed and unpins it on
   small screens). The one-line head carries the turn ticks + the attempt rule. */
.drill-brief-bar{position:sticky;top:0;z-index:5;margin:0 auto 12px;max-width:720px;width:100%}
.drill-brief-bar .dbb-card{border:1px solid var(--ink-14);border-radius:14px;background:#fff;box-shadow:0 6px 18px var(--ink-08);overflow:hidden}
.drill-brief-bar .dbb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;cursor:pointer;flex-wrap:wrap}
.drill-brief-bar .dbb-title{font-weight:700;font-size:14px;margin:0}
.dbb-ticks{display:flex;gap:3px;align-items:center;flex:0 0 auto}
.dbb-ticks i{width:14px;height:5px;border-radius:3px;background:var(--ink-14)}
.dbb-ticks i.on{background:var(--leaf)}
.dbb-count{font-size:12px;color:var(--text-2);white-space:nowrap}
.drill-brief-bar .dbb-toggle{background:none;border:none;font-size:12.5px;color:var(--leaf);cursor:pointer;padding:4px 8px;font-weight:600}
.drill-brief-bar .dbb-body{padding:0 14px 12px;font-size:13px;line-height:1.6;color:var(--ink-85)}
.drill-brief-bar.collapsed .dbb-body{display:none}
.drill-brief-bar .dbb-meta{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
/* #1954: the brief never crowds the transcript on phones — it scrolls away. */
@media(max-width:760px){.drill-brief-bar{position:static}}
/* Guide overflow links (#1366) — bug/feature move here while a run is live. */
.cg-overflow{display:none;gap:10px;margin-top:10px}
.cg-overflow.show{display:flex}

/* ---- Case Ace home (#1342): the full-page entry surface. One shell,
   three first-class lanes. Sits OUTSIDE .app-surface (the machine's lock
   never hides it) at z-95: above the CSS fail-safe face (z-90), below the
   gate overlays (z-100) that cover it while access is unresolved. ---- */
#caseHome{position:fixed;inset:0;z-index:95;background:var(--paper);overflow-y:auto}
#caseHome[hidden]{display:none}
.home-wrap{max-width:1060px;margin:0 auto;padding:26px 22px 70px;width:100%}
.home-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.home-brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19px}
.home-brand .logo-mark{width:26px;height:26px;border-radius:7px}
#homeRunInfo{font-size:13.5px;font-weight:600;color:var(--text-2)}
.home-buy{font-size:13px;font-weight:700;color:var(--leaf);text-decoration:none;white-space:nowrap}
.home-buy:hover{text-decoration:underline}
.home-tabs{display:flex;gap:6px;margin:20px 0 18px;border-bottom:1px solid var(--line);overflow-x:auto}
.home-tab{display:inline-flex;align-items:center;gap:8px;background:none;border:none;border-bottom:2.5px solid transparent;font:inherit;font-size:14.5px;font-weight:700;color:var(--text-3);cursor:pointer;padding:10px 14px;white-space:nowrap}
.home-tab:hover{color:var(--moss)}
.home-tab[aria-selected="true"]{color:var(--moss);border-bottom-color:var(--leaf)}
.home-tab .glyph{width:19px;height:19px}
.home-panel[hidden]{display:none}
.lane-lede{color:var(--text-2);font-size:14px;line-height:1.55;margin:4px 0 0}
/* The ONE facet chip (#1342): one class, one casing, one active colour across
   the Cases and Drills facets — markup from CaseAceHome.chip. */
.achip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:99px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-72);cursor:pointer;padding:6px 13px}
.achip:hover{border-color:var(--leaf);color:var(--leaf)}
.achip.active{border-color:var(--leaf);background:rgba(47,107,79,.12);color:var(--moss);font-weight:700}
.achip[disabled]{opacity:.45;cursor:default}
.achip .achip-n{font-size:11px;font-weight:700;background:var(--mist);border-radius:99px;padding:1px 7px;color:var(--moss)}
/* Case detail drawer (#1342): rides the .gate family so GateDialog owns the
   Tab trap and focus (#1097 — never re-inline focus management). The gate
   root IS the backdrop; the sheet anchors right on desktop, bottom on mobile. */
#caseDrawerGate{display:flex;justify-content:flex-end;align-items:stretch;background:var(--ink-40);backdrop-filter:none;padding:0}
/* the ID selector outranks .gate.hidden — the off state must win explicitly */
#caseDrawerGate.hidden{display:none}
.cdrawer-card{width:min(460px,94vw);height:100%;background:var(--paper);overflow-y:auto;padding:24px 22px 34px}
.cdrawer-card .cdrawer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cdrawer-card h3{margin:2px 0 8px;font-size:21px}
.cdrawer-card .cdrawer-blurb{font-size:14px;line-height:1.6;color:var(--ink-78);margin:0 0 12px}
.cdrawer-card .cdrawer-skills{font-size:13px;color:var(--ink-75);margin:0 0 4px}
.cdrawer-card .cdrawer-skills .fb-h{display:block;margin-bottom:2px}
@media(max-width:760px){
  #caseDrawerGate{justify-content:flex-end;align-items:flex-end}
  .cdrawer-card{width:100%;height:auto;max-height:84vh;border-radius:18px 18px 0 0}
}
@media(max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:max(16px,1em)!important}
}

/* ---- #1372: the former inline style= attributes and JS-builder styles ----
   The page markup and the Case Ace builders (caseace_drills/home/flow/,
   the page inline blocks) reference these classes; the census in
   server/test/caseace-foundations.test.js keeps the inline presentation
   out of the sources. */

/* [hidden] beats every classed display rule (#1365 §5): a hidden element
   disappears no matter what .btn / .home-panel / flex rules say. */
[hidden]{display:none!important}
/* main's #1365 scoped fix rides beside the global !important rule — same outcome. */
.btn[hidden]{display:none}

/* Session bar */

.flex-spacer{flex:1}

/* Case intro */
.case-intro-kicker{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-2);margin:0 0 14px}
.case-intro-audio{margin-top:18px}

/* Gates (page-built faces; the shared gate card keeps its own inline chrome) */
.gate-msg{color:var(--text-2)}

/* Home lanes */
.lane-h{margin:0}
#learnProgress,#drillNote{font-size:12.5px;color:var(--text-2);margin:10px 0 12px}
#casePractisedNote{font-size:12.5px;color:var(--text-2);margin:10px 0 0}
#caseCount{font-size:12.5px;color:var(--text-2);margin:12px 0 0}
#caseFilterBar{margin:14px 0 0}
#caseSearch{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;font:inherit;font-size:14px;background:#fff;margin-bottom:10px}
#caseFamilyChips,#caseDiffChips{flex-wrap:wrap;display:flex;gap:8px}
#caseFamilyChips{margin-bottom:8px}
#caseGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:6px 0;margin-top:10px}
.lane-note{padding:20px;text-align:center;color:var(--text-2);font-size:14px}
.lane-note.danger{color:var(--danger)}
.lane-span{grid-column:1/-1}

/* Learn lane chapter rows (#160 cards rebuilt on the shared classes) */
.lrow{display:flex;justify-content:space-between;width:100%;font-size:13.5px;padding:9px 12px;margin:0 0 4px;text-align:left}
.lrow-resume{display:block;font-size:11.5px;color:var(--leaf,#2f7d4f);font-weight:600;margin-top:2px}
.lrow-meta{color:var(--text-3);white-space:nowrap;margin-left:10px}
.chap{margin:0 0 14px}
.chap-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 6px}
.chap-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--text-3);margin:0}
.chap-blurb{font-size:12.5px;color:var(--text-2);margin:0 0 8px}
/* the chapter progress chip: done flips to leaf, in-progress stays at the --text-3 floor */
.chap-done{flex-shrink:0;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:999px;background:rgba(47,107,79,.1);color:var(--text-2)}
.chap-done-all{color:var(--leaf)}

/* Lesson player frame rail + head */
.lp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 26px 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.lp-head-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.lp-head-txt{min-width:0}
/* The lesson player header is a light paper strip, not the dark masthead: ui.css
   paints `header .btn-ghost` cream for the masthead, so it must not reach this
   header's Close button (#1936; the axe contrast sweep in caseace-foundations-journey
   pins it). */
.lp-head .btn-ghost{color:var(--moss);border-color:var(--line);background:transparent}
.lp-head .btn-ghost:hover{color:var(--moss);border-color:var(--moss);background:rgba(13,27,22,.04)}
#voiceOrb{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 35% 30%, #9be564, #2f7d4f 70%);box-shadow:0 2px 10px var(--ink-25)}
#lessonChapter{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin:0 0 4px}
#frameCaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf,#2f7d4f);font-weight:700;margin:0 0 8px;text-align:start}
#frameNarration{font-size:15px;line-height:1.65;color:var(--ink-88);margin:0;text-align:start;max-width:680px}
/* #1828: #frameGate was declared twice (the later copy re-stated a subset of
   these declarations without margin-top); ordinary rules cascade per-property,
   so the computed style was the UNION — this line is that union, byte-identical
   to what shipped. The later duplicate is deleted. */
#frameGate{margin-top:12px;align-items:center;gap:10px;flex-wrap:wrap}
#lessonDone{margin-top:14px;max-width:960px;margin-left:auto;margin-right:auto}
#frameControls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}

/* Case brief (interview render surface) */
.brief-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.brief-problem{margin-top:10px}

/* Composer recording panel */
.rec-chip{position:absolute;left:8px;bottom:6px;font-size:10.5px;font-weight:700;color:var(--cream);background:var(--text-3);padding:2px 7px;border-radius:99px}

/* Guide + report odds and ends */
.cg-demo{min-height:1.4em;color:var(--leaf);font-weight:600}
.leaf-link{color:var(--leaf);font-weight:700}
.wrap-note{font-size:13px;color:var(--text-3);margin:0 0 10px}
.badge-ok{background:rgba(47,107,79,.12);color:var(--leaf);font-weight:700}

/* ---- #1538 (Results v2, merged): the report viz + focus-strip rules ---- */
.ca-viz-on .dim-row{display:none}
#caHeat,#caRadar{margin:0 0 18px}
.dfocus-compact>div:first-child{display:none}

/* ---- #1372: the builders’ shared micro-patterns + one-off spacing/type
   (caseace_drills / caseace-home / caseace_flow / caseace-exhibits). One
   source here, so the scorecard/drawer/report surfaces can never fork. */
.fb-h{margin:14px 0 6px}
.d-note{margin:2px 0 8px;font-size:12.5px;color:var(--text-2)}
.d-evi{margin:6px 0 0;font-size:12.5px;color:var(--ink-75)}
.d-row{margin:4px 0}
.d-verbs{margin:6px 0 14px}
.d-summary{margin:0 0 14px;font-size:13px}
.d-tier{font-size:12px;color:var(--text-3)}
.dchip{font-size:12px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.chip-side{margin-left:8px}
.dactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.dactions.dactions-lg{margin-top:18px}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.cdrawer-close{white-space:nowrap;flex-shrink:0}
.drawer-fine{margin:10px 0 0;font-size:12px;color:var(--text-2)}
.dfocus p{margin:2px 0 0;font-size:13px}
.score-basis{font-size:13px;font-weight:600;color:var(--text-3)}
.flow-error{color:var(--danger)}
.flow-note{color:var(--text-3);font-size:13px}
.qa-grid-item{margin:8px 0}
.qa-line{margin:4px 0 0}
.chart-wrap{position:relative;height:280px}
/* one-off spacing/type the former inline strings carried */
.mt2{margin-top:2px}.mt4{margin-top:4px}.mt6{margin-top:6px}.mt8{margin-top:8px}
.m2b0{margin:2px 0 0}.m4t0{margin:4px 0 0}.m6t0{margin:6px 0 0}.m8t0{margin:8px 0 0}
.m0b6{margin:0 0 6px}.m6b14{margin:6px 0 14px}.m0b14{margin:0 0 14px}
.d-sm{font-size:12.5px}.d-mdup{font-size:13.5px}
.ink2{color:var(--text-2)}.ink3{color:var(--text-3)}.ink75{color:var(--ink-75)}.ink85{color:var(--ink-85)}.ink65{color:var(--ink-65)}

/* ==== #1613 merge: origin/main's post-#1372 additions, transported out of
   the page's inline block — the sheet is the one home for page CSS. Ink
   alphas read the ramp tokens; alphas without a ramp entry stay literal
   HERE (the token file is the one place raw literals may live). ==== */

/* base element layer (main's inline block carried it; this sheet is linked
   after solver-footer.css, the same cascade position the inline block had) */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-0.01em;line-height:1.15}
a{color:inherit}
button{font-family:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:12px;z-index:300;background:var(--ink);color:var(--lime);padding:10px 16px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;transform:translateY(-160%);transition:transform .12s}
.skip-link:focus{transform:none;outline:3px solid var(--gold)}
.btn:focus-visible,.ccard:focus-visible,a:focus-visible,button:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* #1541: the answer-mode picker rides the intro card (first-run pre-flight
   is ONE screen); the picker buttons reuse the composer's .cmode family. */
.ci-modes{margin-top:20px;text-align:center}
.ci-modes[hidden]{display:none}
.ci-modes .ci-modes-h{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-2)}
.ci-mode-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.case-intro .cmode{flex:0 0 auto;padding:7px 16px;border:1.5px solid var(--line);background:#fff;border-radius:99px;font-weight:600;font-size:12.5px;cursor:pointer;color:var(--ink-65)}
.case-intro .cmode.active{border-color:var(--leaf);background:rgba(47,107,79,.12);color:var(--ink)}
.case-intro .cmode .glyph{width:15px;height:15px;vertical-align:-2px;margin-right:5px}
.ci-mic{min-height:1.4em;margin:10px 0 0;font-size:13px;color:var(--leaf);font-weight:600}
.ci-facts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--text-2)}
.ci-controls{margin-top:18px;font-size:13px;color:var(--text-2)}
.ci-controls button{background:none;border:none;color:var(--leaf);font:inherit;font-weight:600;cursor:pointer;padding:6px 4px;min-height:32px}
#ciBlurb{max-width:560px}

/* the session chat scroll + composer hint (was inline on main). The page scrolls
   on the document, so the scroll reserve rides the root and tracks the measured
   composer (--composer-h, set by caseace.html's ResizeObserver) — #1951. */
html{scroll-padding-bottom:calc(var(--composer-h,140px) + 24px)}
.exhibit-bar{position:sticky;top:0;z-index:4}
.composer p.hint{display:block;font-size:12.5px;color:var(--text-3);text-align:center;margin:6px auto 0}

/* report glue: gate preview, next steps, per-question folds (#1503/#1538) */
.gate-preview{margin:14px 0 4px;text-align:left;font-size:13.5px;color:var(--text-2)}
.gate-preview .gp-h{font-weight:700;margin:0 0 4px;color:var(--ink)}
.gate-preview ul{margin:0;padding-left:18px}
.gate-preview .gp-links{margin:8px 0 0}
.next-steps{margin:18px 0}
.next-steps h2{margin:0 0 8px;font-size:18px}
.next-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.next-actions .btn{min-height:44px;display:inline-flex;align-items:center}
/* #1700: the report's "Copy link to this report" affordance — a quiet ghost
   button under the report heading; paper has no clipboard, so print hides it. */
.copy-link-row{margin:2px 0 14px}
.q-prompt,.q-answer{margin:8px 0 0;font-size:13.5px}
.q-prompt summary,.q-answer summary{cursor:pointer;color:var(--ink-80)}
.q-prompt p,.q-answer p{margin:6px 0 0;color:var(--text-2)}
.qa-ans{white-space:pre-wrap}
.qa-rubric{margin:6px 0 0;font-size:13px}
.qa-rub{margin:4px 0 0}
.d-src{margin:6px 0 0;color:var(--ink-65)}

/* the report's exhibit side panel (#1503) */
.ex-side{display:none}
.ex-side-x{background:none;border:none;color:var(--leaf);font:inherit;font-weight:600;cursor:pointer;padding:6px 4px;min-height:32px}
.ex-side-title{font-weight:700;margin:4px 0 8px}
@media(min-width:1200px){
  .ex-side:not([hidden]){display:block;position:fixed;right:16px;top:132px;bottom:170px;width:min(520px,38vw);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;z-index:20}
  body.ex-side-open #chatRoot{margin-right:min(540px,40vw)}
}
/* #1370: the trial timer lives IN the session bar (docked below), never floating over the chat. */
nav.nav-product #trialTimer{position:static!important;transform:none!important;margin:0;z-index:auto}
/* #1369: print carries the report sheet ONLY — the session chrome stays off
   the paper, and so do the two fixed overlays that can be open over the
   report (the exhibit side panel, the guide dialog); the exhibit-open margin
   must never shift the sheet, and question cards keep whole on the page. */
@media print{.progressbar,.composer,.mini-foot,.sess-status,#exhibitBar,.ex-side,.cguide,.ca-copy-link,.dwrap-actions{display:none!important}.report-sheet{max-width:none}#chatRoot{margin:0!important}body{background:#fff}.qa-card,.next-steps,.report-md{break-inside:avoid}}

/* #1365/#1607: the player is a FULL-VIEWPORT reading surface — a left rail
   with the chapter's lesson list, a centre reading column, and a sticky
   control bar; the pause gate renders in the bar. (#1613: transported from
   the page's inline block; the retired per-frame strip rules are gone.) */
.lp-shell{display:grid;grid-template-columns:288px 1fr;width:100%;height:100vh;height:100dvh;max-width:none;background:var(--paper);border-radius:0;box-shadow:none;text-align:start;overflow:hidden}
.lp-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding:16px 26px 26px}
.lp-framebox{max-width:960px;min-height:130px;margin:0 auto;border:1px solid var(--ink-12);border-radius:14px;padding:18px 20px;background:rgba(255,255,255,.72)}
.lp-controls{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 26px;background:var(--paper);border-top:1px solid var(--line)}
.lp-controls-left,.lp-controls-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* #1953: the lecture strip — the player's ONE visible control for the
   flowing lesson (play/pause, determinate progress, gate-waiting status).
   It rides the control bar's full-width top row; the caseace island renders
   the rich face into #lectureHost (lazy, at the first lesson open) and the
   classic row stays as the no-bundle fallback. The fill's width IS the
   countdown, so under prefers-reduced-motion its transition is off (the
   bar only ever jumps, never animates). */
.lp-lecture{flex:1 1 100%;order:-1;display:flex;align-items:center;min-height:44px;padding-bottom:2px;border-bottom:1px solid var(--line);margin-bottom:2px}
.lp-lecture-classic{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.lp-lecture.island-live .lp-lecture-classic{display:none}
.lp-lecture .cm-island{flex:1;min-width:0}
#lectureTrack{flex:1;min-width:80px;height:6px;border-radius:99px;background:var(--mist);overflow:hidden}
#lectureFill{height:100%;width:0;border-radius:99px;background:var(--leaf);transition:width .24s linear}
#lectureStatus{font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion: reduce){
  #lectureFill{transition:none!important}
}
.lp-progress{margin:0 0 12px}
.lp-track{position:relative;height:6px;border-radius:3px;background:var(--ink-14)}
.lp-fill{height:100%;width:0;background:var(--leaf,#2f7d4f);border-radius:3px;transition:width .3s ease}
.lp-tick{position:absolute;top:-2px;width:2px;height:10px;background:var(--ink-35);border-radius:1px}
.lp-rail{border-right:1px solid var(--line);background:#fff;overflow-y:auto;padding:18px 14px;min-height:0}
.lp-rail[hidden]{display:none}
.lp-rail-ch{margin:2px 4px 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--text-2)}
.lp-rail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;text-align:left;font:inherit;font-size:13px;padding:8px 10px;margin:0 0 2px;border:none;border-radius:10px;background:none;cursor:pointer;color:var(--ink)}
.lp-rail-row:hover,.lp-rail-row:focus-visible{background:var(--mist)}
.lp-rail-row.cur{background:rgba(155,229,100,.18);font-weight:700}
/* #1374: locked rail rows dim (keyed off the data-locked attr the row builder sets) */
.lp-rail-row[data-locked]{opacity:.65}
.lp-rail-tick{color:var(--leaf,#2f6b4f);font-weight:700}
.lp-rail-min{color:var(--text-3);white-space:nowrap;font-size:11.5px}
.lp-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.lp-head h2{margin:0;text-align:start}
.lp-chapter{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin:0 0 4px;text-align:start}
.ld-chapter{font-size:12.5px;font-weight:700;color:var(--leaf,#2f7d4f);margin:0 0 4px}
/* #1365 typography: running text left-aligns (the .gate .card centring stops
   at the shell); both dialogue voices read at AA contrast. */
.lx-card .lx-body p{text-align:start}
.lx-turn .lx-said{text-align:start}
.lx-quote .lx-said{text-align:start}
.lx-slot .lx-fill{text-align:start}
.lx-tile p{text-align:start}
.lx-turn .lx-who{color:var(--text-2)}
.lx-turn[data-role="interviewer"] .lx-said{color:var(--ink-95)}
.lx-stepcount{margin:8px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--text-2);text-align:start}
@media (max-width:700px){
  .lx-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}
  .lx-buckets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}
  .lx-cards .lx-tile{flex:0 0 84%;scroll-snap-align:center}
  .lx-buckets .lx-bucket{flex:0 0 84%;scroll-snap-align:center}
  .lp-shell{grid-template-columns:1fr}
  .lp-rail{display:none}
  .lp-scroll{padding:14px 16px 20px}
  .lp-head{padding:12px 16px 10px}
  .lp-controls{padding:10px 16px}
}

/* #1375: the trial checklist + the paywall panel both wrap-ups carry. */
.trial-checklist{list-style:none;margin:12px 0 0;padding:14px 18px;border:1.5px solid var(--line);border-radius:14px;background:#fff;display:flex;flex-direction:column;gap:8px;max-width:560px}
.trial-checklist .trial-item{display:flex;align-items:baseline;gap:9px;font-size:13.5px;color:var(--ink-78)}
.trial-checklist .trial-mark{font-weight:800;flex-shrink:0}
.trial-checklist .trial-todo .trial-mark{color:var(--text-3)}
.trial-checklist .trial-done .trial-mark{color:var(--leaf)}
.trial-checklist .trial-done{color:var(--moss)}
.trial-upsell{border:1.5px solid var(--gold);border-radius:14px;background:#fff8e8;padding:16px 18px;margin:0 0 16px}
.trial-upsell .trial-upsell-line{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink)}
.trial-upsell .btn-primary{display:inline-flex;align-items:center;gap:6px}

/* ---- Free lessons (#1374): the capture card, the hand-off cue and the
   locked-lesson sheet. Everything sits INSIDE the player/hub surfaces —
   never a modal over a mid-beat frame. ---- */
.fc-card{border:1.5px solid var(--line,#e3ded2);border-radius:16px;padding:18px 18px 14px;background:var(--paper,#fff);box-shadow:0 10px 30px rgba(13,27,22,.10);max-width:460px;margin:14px auto}
.fc-card .fc-eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--leaf,#2f7d4f);margin:0 0 6px}
.fc-card .fc-headline{font-size:19px;margin:0 0 12px}
.fc-card .fc-form{display:grid;gap:8px}
.fc-card .fc-form input[type=email],.fc-card .fc-form input[type=password]{width:100%;box-sizing:border-box;border:1.5px solid var(--line,#e3ded2);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;background:#fff}
.fc-card .fc-consent{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text-2);text-align:left}
.fc-card .fc-err{font-size:12.5px;color:var(--danger,#c14b3a);margin:0}
.fc-card .fc-oauth{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.fc-card .fc-alt{font-size:12.5px;color:var(--text-2);margin:10px 0 0}
.fc-card .fc-fine{font-size:11.5px;color:var(--text-3);margin:6px 0 0}
.free-cue{border-left:3px solid var(--lime,#9be564);background:rgba(155,229,100,.10);border-radius:0 12px 12px 0;padding:10px 14px;margin:12px auto 0;max-width:760px}
.free-cue .fcu-text{font-size:13.5px;margin:0 0 8px;color:rgba(13,27,22,.85)}
.free-cue .fcu-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.free-cue .fcu-dismiss{background:none;border:none;font:inherit;font-size:12px;color:var(--text-3);cursor:pointer;padding:4px 6px}
.locked-sheet{border:1.5px solid var(--line,#e3ded2);border-radius:16px;padding:16px 18px;background:var(--paper,#fff);margin:0 0 14px}
.locked-sheet .ls-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--text-3);margin:0 0 4px}
.locked-sheet h3{margin:0 0 4px}
.locked-sheet .ls-summary{font-size:13px;color:var(--text-2);margin:0 0 10px}
.locked-sheet .ls-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.locked-sheet .btn{font-size:13.5px}
.ld-free-note{margin:10px 0 0;font-size:12.5px;color:var(--text-2)}
.ld-free-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.ld-free-actions .btn{font-size:13.5px}
/* the #1374 mounts start hidden; the page JS reveals them with an inline
   style.display flip, which beats these defaults both ways */
.free-mount{display:none}
.free-strip{display:none;font-size:12px;color:var(--text-2);margin:4px 0 0;text-align:start}
/* #1374 outline rows: the Free badge on free rows and the locked treatment
   (titles and minutes only, one tap from the outline to the bundle sheet). */
.lrow .free-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:999px;background:rgba(47,107,79,.12);color:var(--leaf,#2f7d4f);vertical-align:middle}
.lrow-locked{opacity:.75}
.lrow-lock{display:block;font-size:11px;color:var(--text-3);font-weight:600;margin-top:2px}
/* #1814: the strip's "See what's inside" CTA — a quiet inline link, not a
   button competing with the player controls. */
.free-strip-link{background:none;border:none;font:inherit;font-size:12px;font-weight:700;color:var(--leaf,#2f7d4f);cursor:pointer;padding:0 0 0 4px;text-decoration:underline;text-underline-offset:2px}
/* #1814: the "See what's inside" peek sheet (#1363 cue 1) — the locked
   sheet's card shape carrying the curriculum outline and the sample report
   crop. Sample marks reuse the report vocabulary (rounded s / m marks). */
.inside-sheet{border:1.5px solid var(--line,#e3ded2);border-radius:16px;padding:16px 18px;background:var(--paper,#fff);margin:0 0 14px}
.inside-sheet .is-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--text-3);margin:0 0 4px}
.inside-sheet h3{margin:0 0 10px}
.inside-sheet .is-outline{list-style:none;margin:0 0 12px;padding:0}
.inside-sheet .is-row{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:5px 0;border-bottom:1px solid var(--line,#e3ded2)}
.inside-sheet .is-row:last-child{border-bottom:none}
.inside-sheet .is-free a{font-weight:600;color:var(--leaf,#2f7d4f)}
.inside-sheet .is-badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:999px;background:rgba(47,107,79,.12);color:var(--leaf,#2f7d4f)}
.inside-sheet .is-lockline{font-size:11.5px;color:var(--text-3);font-weight:600}
.inside-sheet .is-min{font-size:11.5px;color:var(--text-3);margin-left:auto;white-space:nowrap}
.inside-sheet .is-sample{border:1px solid var(--line,#e3ded2);border-radius:10px;padding:12px 14px;background:rgba(47,107,79,.04);margin:0 0 12px}
.inside-sheet .is-sample-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--text-3);margin:0 0 8px}
.inside-sheet .is-bandline{font-size:13px;margin:0 0 6px}
.inside-sheet .is-bar{height:8px;border-radius:999px;background:rgba(13,27,22,.08);overflow:hidden;margin:0 0 10px}
.inside-sheet .is-bar-fill{display:block;height:100%;border-radius:999px;background:var(--leaf,#2f7d4f)}
.inside-sheet .is-rubric{list-style:none;margin:0;padding:0}
.inside-sheet .is-rubric li{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:12.5px}
.inside-sheet .is-rubric b{white-space:nowrap}
.inside-sheet .is-mark{font-weight:700;white-space:nowrap}
.inside-sheet .is-heard{color:var(--text-2)}
.inside-sheet .is-note{font-size:11.5px;color:var(--text-3);margin:8px 0 0}
.inside-sheet .is-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inside-sheet .btn{font-size:13.5px}