/* ==========================================================================
   Renshu — Core layout & components
   Built on top of css/themes.css tokens. No framework, no build step.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink); overflow-x:auto;
  font-family:var(--font-body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
a{ color:var(--primary); }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .4em; font-weight:600; line-height:1.2; }
p{ margin:0 0 1em; color:var(--muted); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none !important; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
  font:600 .92rem var(--font-body); padding:.7em 1.3em; border-radius:var(--radius-md);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-ink); border-color:var(--primary-ink); }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#241705; }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-sm{ padding:.45em .9em; font-size:.82rem; border-radius:var(--radius-sm); }
.btn-icon{ width:2.4em; height:2.4em; padding:0; border-radius:50%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--border); backdrop-filter:blur(6px);
}
.topbar-inner{ display:flex; align-items:center; gap:18px; padding:12px 20px; }
.brand{ display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); text-decoration:none; margin-right:auto; }
.brand-mark{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex:none;
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; }
.nav-links{ display:flex; gap:4px; }
.nav-link{
  border:none; background:transparent; color:var(--muted); font:600 .88rem var(--font-body);
  padding:.6em 1em; border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
}
.nav-link:hover{ background:var(--surface-2); color:var(--ink); }
.nav-link.is-active{ background:var(--t-quant-bg); color:var(--t-quant); }
.streak-pill{
  display:flex; align-items:center; gap:.4em; background:var(--accent-bg); color:var(--accent);
  font:700 .82rem var(--font-mono); padding:.4em .8em; border-radius:999px; white-space:nowrap;
}
.theme-switch{ display:flex; align-items:center; gap:6px; }
.theme-dot{
  width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong); cursor:pointer; padding:0;
}
.theme-dot[data-t="blue"]{ background:linear-gradient(135deg,#1F3A93,#EEF1F6); }
.theme-dot[data-t="navy"]{ background:linear-gradient(135deg,#0B1020,#7C8DF0); }
.theme-dot[data-t="amber"]{ background:linear-gradient(135deg,#B5541F,#FBF4E9); }
.theme-dot.is-active{ border-color:var(--primary); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--t-vocab-bg); color:var(--t-vocab);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display);
  border:none; cursor:pointer; flex:none;
}
.nav-mobile-toggle{ display:none; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-mobile-toggle{ display:inline-flex; }
}

/* ---------- SSO nudge (shown only when running on an anonymous, no
   shared-regencyops-session identity) ---------- */
.sso-banner{
  background:var(--t-quant-bg); color:var(--t-quant); font-size:.82rem; font-weight:600;
  padding:.6em 20px; text-align:center; border-top:1px solid var(--border);
}
.sso-banner a{ color:inherit; text-decoration:underline; font-weight:700; }
.sso-banner .btn{ vertical-align:baseline; margin-left:4px; }

/* ---------- Intro slides overlay ---------- */
/* Meet Dons — embedded, auto-advancing intro carousel at the top of the
   Dashboard (not a modal overlay — it lives permanently in the page flow). */
.slides-embed{ margin-bottom:18px; position:relative; }
.slides-stage{ display:flex; align-items:center; justify-content:center; min-height:300px; padding:8px 4px 4px; overflow:hidden; }

/* Maximise / minimise the intro carousel, top-right of the card. Minimised
   keeps it narrating in a single line; maximised fills the viewport. */
.slides-size{ position:absolute; top:10px; right:12px; display:flex; gap:6px; z-index:3; }
.slides-size-btn{ width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--card);
  color:var(--ink-2); font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.slides-size-btn:hover{ color:var(--ink); border-color:var(--ink-3); }
.slides-embed.is-min .slides-stage{ min-height:0; max-height:44px; padding:2px 60px 2px 4px; }
.slides-embed.is-min .slides-footer{ display:none; }
.slides-embed.is-min .slide-figure, .slides-embed.is-min .slide-body,
.slides-embed.is-min .slide-stages, .slides-embed.is-min .slide-actions{ display:none; }
.slides-embed.is-max{ position:fixed; inset:16px; margin:0; z-index:80; overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.34); }
.slides-embed.is-max .slides-stage{ min-height:calc(100vh - 190px); }
.slide{
  max-width:760px; width:100%; text-align:center; display:none;
}
.slide.is-active{ display:block; animation:slideIn .35s ease; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.slide-kicker{ font:700 .78rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:.8em; }
.slide h2{ font-size:clamp(1.5rem,4vw,2.3rem); }
.slide-visual{ margin:1.2em auto; max-width:520px; }
.slide-body{ font-size:1.02rem; max-width:560px; margin:0 auto; }
.slide-stagelist{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:1.2em; list-style:none; padding:0; }
.slide-stagelist li{
  background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.5em 1em;
  font:600 .82rem var(--font-body); color:var(--ink);
}
.slides-footer{ display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 4px 4px; }
.slide-dots{ display:flex; gap:8px; }
.slide-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); border:none; cursor:pointer; padding:0; }
.slide-dot.is-active{ background:var(--primary); width:22px; border-radius:5px; transition:width .2s ease; }
.slide-avatar{ display:block; margin:0 auto .6em; }
.voice-choice{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:.6em; }
.voice-opt, .plan-opt{ width:auto; }
.voice-opt.is-active{ background:var(--good-bg); border-color:var(--good); color:var(--good); }
.stat-bars{ max-width:640px; margin:1em auto 0; text-align:left; }
.slide .bar-row, #placementStatsGrid .bar-row, .market-grid .bar-row{ grid-template-columns:minmax(120px,190px) 1fr 88px; }
#placementStatsGrid{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
#placementStatsGrid .stat-list, #placementStatsGrid .stat-bars{ margin-top:.6em; max-width:none; }
#placementStatsGrid .stat-list li{ font-size:.84rem; }
.stat-list{ max-width:600px; margin:1em auto 0; text-align:left; list-style:none; padding:0; }
.stat-list li{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6em .9em; margin-bottom:8px; font-size:.9rem; }
.stat-source{ font-size:.74rem; color:var(--faint); margin-top:10px; }
.stat-source a{ color:var(--faint); }

/* ---------- Animated tutor avatar ---------- */
.avatar-wrap{ position:relative; display:inline-block; line-height:0; flex:none; }
.avatar-wrap.is-listening::before{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--good);
  animation:avatarListen 1.3s ease-in-out infinite;
}
@keyframes avatarListen{ 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.1); } }
.avatar-face{ width:100%; height:100%; display:block; }

/* Real supplied photo of the coach. A photograph can't mouth along the way
   the drawn face did, so "Dons is speaking" is shown as a pulsing ring
   around the avatar instead of fake lip-sync. */
.avatar-photo{
  width:100%; height:100%; display:block; border-radius:50%; object-fit:cover;
  border:3px solid var(--tc-color,var(--accent)); background:var(--tc-bg,var(--accent-bg));
}
.avatar-wrap.is-talking::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; pointer-events:none;
  border:3px solid var(--tc-color,var(--accent));
  animation:avatarTalkRing .95s ease-out infinite;
}
@keyframes avatarTalkRing{ 0%{ opacity:.8; transform:scale(1); } 100%{ opacity:0; transform:scale(1.22); } }

.af-hair-back-f, .af-hair-front-f, .af-earring{ display:none; }
.af-hair-front-m{ display:block; }
.af-hair-back-f, .af-hair-front-f, .af-hair-front-m{ fill:var(--tc-color,var(--accent)); }
.af-earring{ fill:var(--accent); }
.avatar-face.gender-female .af-hair-back-f,
.avatar-face.gender-female .af-hair-front-f,
.avatar-face.gender-female .af-earring{ display:block; }
.avatar-face.gender-female .af-hair-front-m{ display:none; }

.af-brow path{ fill:none; stroke:var(--tc-color,var(--ink)); stroke-width:3; stroke-linecap:round; transform-box:fill-box; transform-origin:center; transition:transform .25s ease; }
.af-eye-white{ fill:var(--surface); stroke:var(--border-strong); stroke-width:1; }
.af-pupil{ fill:var(--ink); }
.af-lid{ fill:var(--surface); opacity:0; transform-box:fill-box; transform-origin:center; }
.avatar-face .af-lid{ animation:avatarBlink 4.6s ease-in-out infinite; }
.avatar-face .af-eye-r .af-lid{ animation-delay:.05s; }
@keyframes avatarBlink{ 0%,92%,100%{ opacity:0; } 95%{ opacity:1; } }

.af-mouth{ display:none; }
.af-mouth-neutral, .af-mouth-smile, .af-mouth-think{ fill:none; stroke:var(--tc-color,var(--ink)); stroke-width:3.4; stroke-linecap:round; }
.af-mouth-o{ fill:var(--tc-color,var(--accent)); opacity:.9; transform-box:fill-box; transform-origin:center; }
.avatar-face.expr-neutral .af-mouth-neutral,
.avatar-face.expr-smile .af-mouth-smile,
.avatar-face.expr-thinking .af-mouth-think{ display:block; }

.avatar-face.expr-thinking .af-brow-l path{ transform:translateY(-3px) rotate(-8deg); }
.avatar-face.expr-thinking .af-brow-r path{ transform:translateY(1px); }
.avatar-face.expr-smile .af-brow-l path,
.avatar-face.expr-smile .af-brow-r path{ transform:translateY(-2px); }

.avatar-face.is-talking .af-mouth-neutral,
.avatar-face.is-talking .af-mouth-smile,
.avatar-face.is-talking .af-mouth-think{ display:none; }
.avatar-face.is-talking .af-mouth-o{ display:block; animation:avatarTalk .24s ease-in-out infinite alternate; }
@keyframes avatarTalk{ from{ transform:scaleY(.35); } to{ transform:scaleY(1); } }

.slide-avatar-mount{ width:132px; height:132px; margin:0 auto .6em; }
.btn.is-listening, .mic-btn.is-listening{ animation:pulse 1.2s infinite; }

/* ---------- Code Lab ---------- */
.codelab-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.codelab-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; text-align:left; cursor:pointer; box-shadow:var(--shadow); position:relative;
}
.codelab-card h4{ margin:0 0 6px; font-size:1rem; padding-right:26px; }
.codelab-card .cat{ font:600 .74rem var(--font-mono); color:var(--faint); text-transform:uppercase; letter-spacing:.04em; }
.codelab-card .solved-tick{ position:absolute; top:14px; right:14px; color:var(--good); font-weight:700; display:none; }
.codelab-card.is-solved .solved-tick{ display:block; }
.codelab-card.is-solved{ border-color:var(--good); }

.code-detail{ max-width:760px; }
.code-detail .prompt{ white-space:pre-wrap; font-size:.94rem; line-height:1.55; }
.code-detail .brief-reqs{ margin:10px 0 0; padding-left:20px; }
.code-detail .brief-reqs li{ margin-bottom:6px; font-size:.88rem; }
.lang-row{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.lang-chip{
  font:600 .78rem var(--font-mono); color:var(--muted); background:var(--surface-2); border:1px solid var(--border);
  border-radius:99px; padding:5px 13px; cursor:pointer;
}
.lang-chip:hover{ border-color:var(--primary); }
.lang-chip.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.code-editor{
  width:100%; min-height:220px; font:.86rem/1.5 var(--font-mono); background:var(--surface-2);
  color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:12px; resize:vertical; tab-size:2; white-space:pre; overflow-wrap:normal; overflow-x:auto;
}
.code-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.code-results{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.code-result-row{
  display:flex; align-items:center; gap:10px; padding:.6em .9em; border-radius:var(--radius-sm);
  font:600 .82rem var(--font-mono); border:1px solid var(--border);
}
.code-result-row.pass{ background:var(--good-bg); color:var(--good); border-color:var(--good); }
.code-result-row.fail{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad); }
.code-result-row .detail{ font-weight:400; font-family:var(--font-body); font-size:.8rem; opacity:.85; }
.code-summary{ margin-top:10px; font-weight:700; }
.code-summary.pass{ color:var(--good); } .code-summary.fail{ color:var(--bad); }
.code-hint{ margin-top:10px; padding:12px; background:var(--surface-2); border-radius:var(--radius-sm); font-size:.86rem; }

/* ---------- Company patterns ---------- */
.company-group-head{ display:flex; align-items:center; gap:10px; margin:22px 0 12px; }
.company-group-head h3{ margin:0; font-size:1.05rem; }
.company-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow); margin-bottom:16px;
}
.company-card .blurb{ color:var(--muted); font-size:.86rem; margin:2px 0 12px; }
.company-card .totals{ font:700 .78rem var(--font-mono); color:var(--faint); margin-bottom:10px; }
.company-table{ width:100%; border-collapse:collapse; font-size:.84rem; }
.company-table th{ text-align:left; padding:6px 8px; color:var(--faint); font:700 .7rem var(--font-mono); text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border); }
.company-table td{ padding:8px; border-bottom:1px dashed var(--border); vertical-align:top; }
.company-table .note{ color:var(--muted); font-size:.8rem; }
.company-practice-btn{ font-size:.76rem; padding:.4em .8em; white-space:nowrap; }
.company-source{ margin-top:12px; font-size:.76rem; color:var(--faint); }

/* ---------- Section shell ---------- */
.section{ padding:28px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.section-head h2{ font-size:1.3rem; }
.section-sub{ color:var(--faint); font-size:.86rem; margin:0; }

/* ---------- Dashboard ---------- */
.dash-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; }
@media (max-width:900px){ .dash-grid{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); }
.card h3{ font-size:1rem; }
.streak-row{ display:flex; align-items:center; gap:14px; }
.streak-num{ font:700 2.2rem var(--font-display); color:var(--primary); }
.streak-cal-label{ margin:12px 0 4px; font:600 .72rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.streak-cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:4px; }
.streak-cal-weekdays div{ text-align:center; font:600 .66rem var(--font-mono); color:var(--faint); }
.streak-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.streak-cal .d{
  aspect-ratio:1; border-radius:6px; background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  font:600 .68rem var(--font-mono); color:var(--faint);
}
.streak-cal .d.done{ background:var(--good-bg); color:var(--good); }
.streak-cal .d.today{ outline:2px solid var(--primary); }
.streak-cal .d.month-start{ font-weight:700; }
.streak-cal .d.month-start .d-num{ font-size:.6rem; letter-spacing:.02em; }
.qotd-badge{ font:700 .72rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--accent); }
.qotd-q{ font-size:1rem; font-weight:600; color:var(--ink); margin:.5em 0 1em; }
.qotd-opts{ display:grid; gap:8px; }
.qotd-opt{
  text-align:left; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.6em .9em; cursor:pointer; font:600 .86rem var(--font-body); color:var(--ink);
}
.qotd-opt:hover{ border-color:var(--primary); }
.qotd-opt.correct{ background:var(--good-bg); border-color:var(--good); color:var(--good); }
.qotd-opt.wrong{ background:var(--bad-bg); border-color:var(--bad); color:var(--bad); }
.mini-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font:600 .72rem var(--font-mono); text-align:center; }
.mini-cal .lab{ color:var(--faint); padding-bottom:4px; }
.mini-cal .cell{ padding:.4em 0; border-radius:6px; color:var(--muted); }
.mini-cal .cell.active{ background:var(--t-quant-bg); color:var(--t-quant); font-weight:700; }
.stat-row{ display:flex; justify-content:space-between; padding:.5em 0; border-bottom:1px dashed var(--border); font-size:.86rem; }
.stat-row:last-child{ border-bottom:none; }
.stat-row b{ color:var(--ink); }

/* ---------- Practices grid ---------- */
.topic-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.topic-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; text-align:left; cursor:pointer; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.topic-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--tc-color,var(--primary));
}
.topic-card .ic{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:12px; background:var(--tc-bg,var(--t-quant-bg)); color:var(--tc-color,var(--t-quant));
}
.topic-card h4{ font-size:1.02rem; margin-bottom:.25em; }
.topic-card .desc{ font-size:.82rem; color:var(--muted); min-height:2.6em; }
.topic-card .prog{ margin-top:12px; }
.progbar{ height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.progbar > span{ display:block; height:100%; background:var(--tc-color,var(--primary)); border-radius:99px; }
.topic-card .pct{ font:700 .72rem var(--font-mono); color:var(--faint); margin-top:4px; display:block; }

/* ---------- Domain grouping ---------- */
.domain-section{ margin-bottom:28px; }
.domain-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.domain-ic{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; background:color-mix(in srgb, var(--tc-color,var(--primary)) 16%, transparent); color:var(--tc-color,var(--primary));
  flex-shrink:0;
}
.domain-head h3{ margin:0; font-size:1.06rem; }
.domain-grid{ margin-top:0; }
.topic-card.coming-soon{ opacity:.72; }
.topic-card.coming-soon .desc{ min-height:auto; }

/* ---------- Practices: subject rail + areas panel ----------
   The rail hugs the left edge of the WINDOW (not the centred content
   column), so the areas panel gets the full remaining width. The section
   breaks out of .wrap with the standard full-bleed trick; body's
   overflow-x:hidden absorbs the scrollbar overshoot that 100vw causes. */
.practice-browser{
  --rail-w:264px;
  width:100vw; margin-left:calc(50% - 50vw);
  display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); gap:0; align-items:start;
}
.practice-browser.is-collapsed{ --rail-w:60px; }

.domain-rail{
  position:sticky; top:64px; align-self:start; max-height:calc(100vh - 64px); overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
  background:var(--surface); border-right:1px solid var(--border);
  padding:12px 10px 20px; transition:padding .18s ease;
}
.practice-browser.is-collapsed .domain-rail{ padding:12px 6px 20px; align-items:center; }

.rail-toggle{
  align-self:flex-end; width:30px; height:30px; flex:none; margin-bottom:6px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--muted);
  border-radius:8px; cursor:pointer; font-size:.85rem; line-height:1;
}
.rail-toggle:hover{ border-color:var(--primary); color:var(--primary); }
.practice-browser.is-collapsed .rail-toggle{ align-self:center; }
.rail-list{ display:flex; flex-direction:column; gap:6px; }

.domain-tab{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:var(--radius); padding:10px 11px;
}
.domain-tab:hover{ background:var(--surface-2); }
.domain-tab.is-active{ background:var(--tc-bg,var(--surface-2)); border-color:var(--tc-color,var(--primary)); }
.dt-ic{
  width:34px; height:34px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:1rem; background:var(--tc-bg,var(--surface-2)); color:var(--tc-color,var(--primary));
}
.domain-tab.is-active .dt-ic{ background:var(--tc-color,var(--primary)); color:#fff; }
.dt-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dt-name{ font-weight:650; font-size:.92rem; color:var(--ink); }
.domain-tab.is-active .dt-name{ color:var(--tc-color,var(--primary)); }
.dt-count{ font:600 .7rem var(--font-mono); color:var(--faint); }
.practice-browser.is-collapsed .dt-main{ display:none; }
.practice-browser.is-collapsed .domain-tab{ padding:8px; justify-content:center; }

.domain-panel{ padding:4px 24px 0 26px; min-width:0; }
.domain-panel-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.dp-ic{
  width:42px; height:42px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; background:var(--tc-bg,var(--surface-2)); color:var(--tc-color,var(--primary));
}
.domain-panel-head h3{ margin:0 0 2px; font-size:1.1rem; }

.topic-rows{ display:flex; flex-direction:column; gap:8px; }
.topic-row{
  display:grid; grid-template-columns:44px minmax(0,1fr) 150px 20px; align-items:center; gap:14px;
  width:100%; text-align:left; cursor:pointer; padding:13px 15px;
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--tc-color,var(--primary));
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.topic-row:hover{ border-color:var(--tc-color,var(--primary)); transform:translateX(2px); }
.tr-ic{
  width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; background:var(--tc-bg,var(--surface-2)); color:var(--tc-color,var(--primary));
}
.tr-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tr-name{ font-weight:650; font-size:.97rem; color:var(--ink); }
.tr-desc{ font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-meta{ display:flex; flex-direction:column; gap:4px; }
.tr-meta .pct{ font:700 .7rem var(--font-mono); color:var(--faint); }
.tr-go{ color:var(--faint); font-size:1rem; text-align:right; }
.topic-row.coming-soon{ opacity:.7; }
.topic-row.coming-soon .tr-meta{ align-items:flex-start; }
.topic-row.coming-soon .soon-badge{ margin-top:0; }

@media (max-width:860px){
  .practice-browser, .practice-browser.is-collapsed{ grid-template-columns:minmax(0,1fr); }
  .domain-rail{
    position:static; flex-direction:row; overflow-x:auto; max-height:none;
    gap:8px; border-right:none; border-bottom:1px solid var(--border); padding:10px 14px;
  }
  .rail-list{ flex-direction:row; }
  .rail-toggle{ display:none; }
  .practice-browser.is-collapsed .dt-main{ display:flex; }
  .domain-tab{ width:auto; flex:none; }
  .dt-count{ display:none; }
  .domain-panel{ padding:14px 16px 0; }
  .topic-row{ grid-template-columns:40px minmax(0,1fr); gap:11px; }
  .tr-meta, .tr-go{ grid-column:2; }
  .tr-desc{ white-space:normal; }
}

.soon-badge{
  display:inline-block; margin-top:10px; font:700 .68rem var(--font-mono); text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--border); border-radius:99px; padding:3px 10px;
}
.cover-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.cover-chip{
  font:600 .74rem var(--font-mono); color:var(--muted); background:var(--surface-2); border:1px solid var(--border);
  border-radius:99px; padding:4px 10px;
}

/* ---------- Difficulty tiers ---------- */
.difficulty-row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
.diff-chip{
  font:600 .76rem var(--font-body); color:var(--muted); background:var(--surface-2); border:1px solid var(--border);
  border-radius:99px; padding:5px 12px; cursor:pointer;
}
.diff-chip:hover{ border-color:var(--primary); }
.diff-chip.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.diff-badge{
  display:inline-block; vertical-align:middle; font:700 .66rem var(--font-mono); text-transform:uppercase; letter-spacing:.04em;
  border-radius:99px; padding:2px 9px; margin-left:6px;
}
.diff-badge.diff-simple{ background:var(--good-bg); color:var(--good); }
.diff-badge.diff-medium{ background:var(--accent-bg); color:var(--accent); }
.diff-badge.diff-hard{ background:var(--t-quant-bg); color:var(--t-quant); }
.diff-badge.diff-superhard{ background:var(--bad-bg); color:var(--bad); }

/* ---------- Concept-first Learn step ---------- */
.concept-card, .concept-recap{ border-left:3px solid var(--primary); }

/* ---------- Streak calendar month/day-of-week ---------- */
/* (rules for .streak-cal-label / .streak-cal-weekdays live near .streak-cal below) */

/* ---------- Analytics ---------- */
.analytics-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; }
@media (max-width:900px){ .analytics-grid{ grid-template-columns:1fr; } }
.bar-row{ display:grid; grid-template-columns:110px 1fr 40px; align-items:center; gap:10px; margin:10px 0; font-size:.82rem; }
.bar-row .lab{ color:var(--muted); font-weight:600; }
.bar-track{ height:10px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.bar-fill{ display:block; height:100%; border-radius:99px; background:var(--primary); }
.bar-row .val{ white-space:nowrap; font:700 .78rem var(--font-mono); text-align:right; color:var(--ink); }
.trend-svg{ width:100%; height:160px; }
.leaderboard{ list-style:none; margin:0; padding:0; }
.leaderboard li{ display:flex; align-items:center; gap:10px; padding:.5em 0; border-bottom:1px solid var(--border); font-size:.86rem; }
.leaderboard li:last-child{ border-bottom:none; }
.leaderboard .rank{ font:700 .82rem var(--font-mono); color:var(--faint); width:1.6em; }
.leaderboard .name{ flex:1; font-weight:600; }
.leaderboard .pts{ font:700 .8rem var(--font-mono); color:var(--primary); }
.leaderboard li.me{ background:var(--t-quant-bg); border-radius:var(--radius-sm); padding:.5em .6em; }

/* ---------- Topic detail / voice-guided flow ---------- */
.topic-hero{ display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.topic-hero .ic{ width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto; }
.tab{ border:none; background:transparent; padding:.8em 1.1em; font:700 .84rem var(--font-body); color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.tab.is-active{ color:var(--primary); border-color:var(--primary); }
.panel{ min-height:200px; }

.coach-bubble{
  display:flex; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:18px; box-shadow:var(--shadow);
}
.coach-avatar{ width:60px; height:60px; border-radius:50%; flex:none; }
.coach-text{ font-size:.94rem; color:var(--ink); }
.coach-text .speak-btn{ margin-top:8px; }

.flash-stage{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.flashcard{ width:100%; max-width:480px; height:220px; perspective:1200px; cursor:pointer; }
.flashcard-inner{ position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d; }
.flashcard.is-flipped .flashcard-inner{ transform:rotateY(180deg); }
.flashcard-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--radius-lg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; font-weight:600;
  background:var(--surface); box-shadow:var(--shadow);
}
.flashcard-face.back{ transform:rotateY(180deg); background:var(--t-quant-bg); color:var(--t-quant); }

.quiz-q{ font-size:1.05rem; font-weight:600; margin-bottom:14px; }
.quiz-opts{ display:grid; gap:10px; margin-bottom:14px; }
.quiz-opt{ text-align:left; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:.8em 1em; cursor:pointer; font-size:.92rem; color:var(--ink); font-family:inherit; }
.quiz-opt:hover{ border-color:var(--primary); }
.quiz-opt.sel{ border-color:var(--primary); background:var(--t-quant-bg); }
.quiz-opt.correct{ border-color:var(--good); background:var(--good-bg); color:var(--good); }
.quiz-opt.wrong{ border-color:var(--bad); background:var(--bad-bg); color:var(--bad); }
.quiz-reason{ width:100%; border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:.8em; font:inherit; background:var(--surface); color:var(--ink); resize:vertical; min-height:70px; }
.quiz-feedback{ margin-top:14px; padding:14px; border-radius:var(--radius-md); background:var(--surface-2); font-size:.9rem; }

.example-card{ background:var(--surface-2); border-left:3px solid var(--primary); border-radius:var(--radius-sm); padding:12px 14px; margin:10px 0; font-size:.88rem; }

/* ---------- Chat & voice widget ---------- */
.dons-fab{
  position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:50%;
  background:var(--primary); color:#fff; border:none; box-shadow:var(--shadow); cursor:pointer; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
}
.chat-panel{
  position:fixed; right:22px; bottom:92px; z-index:60; width:min(360px,90vw); height:min(520px,70vh);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
}
.chat-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.chat-head .mic-btn{ margin-left:auto; }
.chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ max-width:82%; padding:.6em .9em; border-radius:var(--radius-md); font-size:.86rem; }
.chat-msg.bot{ background:var(--surface-2); align-self:flex-start; }
.chat-msg.user{ background:var(--primary); color:#fff; align-self:flex-end; }
.chat-input-row{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); }
.chat-input-row input{ flex:1; border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:.6em .8em; background:var(--surface); color:var(--ink); font:inherit; }
.mic-btn.is-listening{ animation:pulse 1.2s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(31,58,147,.4); } 50%{ box-shadow:0 0 0 8px rgba(31,58,147,0); } }

/* ---------- Help modal ---------- */
.modal-scrim{ position:fixed; inset:0; background:rgba(10,14,26,.5); z-index:90; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ background:var(--surface); border-radius:var(--radius-lg); max-width:600px; width:100%; max-height:82vh; overflow-y:auto; padding:26px; box-shadow:var(--shadow); }
.modal h3{ margin-top:0; }
.modal-close{ float:right; }
.modal-wide{ max-width:860px; }

/* ---------- Study plan ---------- */
.plan-choice{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.plan-choice .plan-opt{ flex:0 1 auto; }
.plan-choice .plan-opt.is-active{ border-color:var(--primary); background:var(--primary-bg,var(--surface-2)); color:var(--primary); font-weight:650; }
.plan-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }

.plan-summary{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px;
  margin:14px 0 18px; padding:14px; background:var(--surface-2); border-radius:var(--radius);
}
.ps-label{ display:block; font:700 .68rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-bottom:3px; }

.plan-days{ display:flex; flex-direction:column; gap:6px; }
/* Stage divider — prints once per stage (Foundations / Practice & Application
   / Mock & Revision) so a long plan reads as a curriculum, not a flat list. */
.plan-stage-head{
  margin:16px 0 2px; padding:4px 2px 0; font:700 .74rem var(--font-mono); text-transform:uppercase;
  letter-spacing:.05em; color:var(--primary); border-top:1px solid var(--border);
}
.plan-stage-head:first-child{ margin-top:0; border-top:none; padding-top:0; }
.plan-day{
  display:grid; grid-template-columns:120px minmax(0,1fr) 70px 78px 70px; gap:12px; align-items:center;
  padding:10px 12px; border:1px solid var(--border); border-left:4px solid var(--border-strong);
  border-radius:var(--radius); background:var(--surface); font-size:.86rem;
}
.plan-day.is-done{ border-left-color:var(--good); background:color-mix(in srgb, var(--good) 7%, var(--surface)); }
.plan-day.is-today{ border-left-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.plan-day.is-missed{ opacity:.72; border-left-color:var(--warn,var(--border-strong)); }
.pd-day{ font:700 .78rem var(--font-mono); color:var(--ink); display:flex; flex-direction:column; }
.pd-date{ font-weight:500; color:var(--faint); }
.pd-main{ display:flex; flex-direction:column; min-width:0; }
.pd-topic{ font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-focus{ font-size:.78rem; color:var(--muted); }
.pd-special{ display:block; font-size:.76rem; font-weight:700; color:var(--accent); margin-top:2px; }
.pd-mins, .pd-state{ font:600 .76rem var(--font-mono); color:var(--muted); }
.plan-day.is-done .pd-state{ color:var(--good); }
.plan-day.is-today .pd-state{ color:var(--primary); font-weight:700; }

@media (max-width:720px){
  .plan-day{ grid-template-columns:minmax(0,1fr) 70px; row-gap:6px; }
  .pd-day{ grid-column:1/-1; flex-direction:row; gap:8px; }
  .pd-mins{ text-align:right; }
  .pd-state, .pd-go{ grid-column:span 1; }
}
.help-item{ margin-bottom:16px; }
.help-item h4{ font-size:.92rem; margin-bottom:.3em; }
.help-item p{ font-size:.86rem; margin:0; }

/* ---------- Notes ---------- */
.notes-list{ display:grid; gap:12px; }
.note-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; }
.note-card h4{ font-size:.92rem; margin-bottom:.3em; }
.note-card p{ margin:0; font-size:.85rem; }

footer.site-footer{ text-align:center; padding:26px 20px 40px; color:var(--faint); font-size:.78rem; }

/* ---------- Mock Interview ---------- */
.iv-round-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.iv-round{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; text-align:left; cursor:pointer; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.iv-round::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--primary); }
.iv-round:hover{ border-color:var(--primary); }
.iv-round-full::before{ background:var(--accent); }
.iv-ic{ font-size:1.7rem; display:block; margin-bottom:8px; }
.iv-round h3{ margin:0 0 .35em; font-size:1.05rem; }
.iv-round p{ margin:0; font-size:.84rem; color:var(--muted); }
.iv-count{ display:inline-block; margin-top:12px; font:700 .7rem var(--font-mono); color:var(--faint); }

.iv-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.iv-progress{ font:700 .76rem var(--font-mono); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.iv-question-card{ max-width:760px; }
.iv-round-tag{
  display:inline-block; font:700 .68rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em;
  color:var(--primary); background:var(--surface-2); border-radius:99px; padding:3px 10px; margin-bottom:10px;
}
.iv-q{ font-size:1.22rem; margin:0 0 .5em; line-height:1.35; }
.iv-star{
  font-size:.82rem; color:var(--accent-ink,var(--accent)); background:var(--accent-bg);
  border-radius:var(--radius); padding:7px 11px; margin:0 0 10px; display:inline-block;
}
.iv-answer{ min-height:130px; }
.iv-notes{
  margin-top:10px; padding:12px 14px; border-radius:var(--radius);
  background:var(--surface-2); font-size:.86rem; line-height:1.55;
}
.iv-look{ margin-top:14px; padding:14px; border:1px dashed var(--border-strong); border-radius:var(--radius); }
.iv-look h4{ margin:0 0 .5em; font-size:.92rem; }
.iv-look ul{ margin:0; padding-left:20px; }
.iv-look li{ font-size:.86rem; margin-bottom:5px; color:var(--muted); }
.iv-why{ margin:12px 0 0; font-size:.84rem; color:var(--muted); }
.iv-fb-inline{ display:block; margin-top:8px; font-size:.85rem; color:var(--muted); }
.iv-offline{
  margin-top:12px; padding:12px 14px; border-radius:var(--radius); font-size:.86rem; line-height:1.55;
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
}

/* ---------- Worked solution (answer key) ---------- */
.solution-block{ padding:0; background:transparent; border:none; }
.sol-verdict{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-weight:700; padding:10px 14px; border-radius:var(--radius); margin-bottom:12px;
}
.sol-verdict.is-right{ background:var(--good-bg); color:var(--good); }
.sol-verdict.is-wrong{ background:var(--bad-bg,var(--surface-2)); color:var(--bad,var(--ink)); }
.sol-answer{ font:600 .86rem var(--font-mono); opacity:.95; }
.sol-steps, .sol-why, .sol-trap, .sol-dons{
  border:1px solid var(--border); border-radius:var(--radius); padding:12px 15px; margin-bottom:10px; background:var(--surface);
}
.sol-steps h4, .sol-why h4, .sol-trap h4{
  margin:0 0 .5em; font:700 .72rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
}
.sol-steps ol{ margin:0; padding-left:20px; }
.sol-steps li{ margin-bottom:6px; font-size:.92rem; line-height:1.55; color:var(--ink); }
.sol-steps li:last-child{ margin-bottom:0; font-weight:600; }
.sol-why p, .sol-trap p{ margin:0; font-size:.9rem; line-height:1.6; }
.sol-trap{ border-style:dashed; }
.sol-dons{ background:var(--surface-2); font-size:.9rem; }

/* Code inside questions, options, flashcards and worked examples */
.q-prose{ display:block; }
.q-code{
  margin:10px 0 0; padding:12px 14px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--border);
  font:500 .86rem/1.5 var(--font-mono); color:var(--ink);
  white-space:pre; overflow-x:auto;
}
.quiz-opt{ white-space:pre-wrap; }
.example-card .q-code{ background:var(--surface); }
.example-card .sol-steps{ margin-top:10px; border:none; padding:0; background:transparent; }
.example-card .sol-steps li{ font-size:.86rem; }

/* Previous attempt shown above the box when re-answering an interview question */
.iv-prev{
  margin:0 0 12px; padding:12px 14px; border-radius:var(--radius);
  background:var(--surface-2); border:1px dashed var(--border-strong);
}
.iv-prev h4{ margin:0 0 .4em; font:700 .72rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.iv-prev p{ margin:0 0 10px; font-size:.88rem; line-height:1.6; color:var(--muted); }

/* Stage chips light up as Dons narrates them */
.slide-stagelist li{ transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.slide-stagelist li.is-speaking{
  background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-2px);
  box-shadow:0 4px 14px -4px var(--primary);
}
.slide-stagelist li.is-spoken{ border-color:var(--primary); color:var(--primary); }

/* Study-plan start date row */
.plan-date-row{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.plan-date-row label{ font-size:.84rem; color:var(--muted); }
.plan-date-row input[type="date"]{
  font:600 .86rem var(--font-body); padding:.45em .7em; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
}

/* "Practising for: <pattern>" banner when Code Lab is opened from Test Patterns */
.codelab-context{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:16px; padding:12px 15px; border-radius:var(--radius);
  background:var(--accent-bg); border:1px solid var(--accent); font-size:.9rem;
}
.codelab-context .section-sub{ display:inline; }

/* ==========================================================================
   Analytics
   Chart colour follows the job: magnitude bars and the trend line use ONE
   hue (length/position carries the value); status colours are reserved for
   strength/weakness and always ship with an icon and a word.
   ========================================================================== */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
.kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 18px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow);
}
.kpi-label{ font:700 .68rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.kpi-value{ font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--ink); line-height:1.1; }
.kpi-sub{ font-size:.78rem; color:var(--muted); }

.chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.seg{ display:inline-flex; border:1px solid var(--border-strong); border-radius:99px; overflow:hidden; }
.seg-btn{
  border:none; background:transparent; cursor:pointer; padding:.4em 1em;
  font:600 .8rem var(--font-body); color:var(--muted);
}
.seg-btn.is-active{ background:var(--primary); color:#fff; }

.chart-wrap{ position:relative; }
.chart-svg{ width:100%; height:auto; display:block; overflow:visible; }
.grid-line{ stroke:var(--border); stroke-width:1; }
.axis-label{ font:500 10px var(--font-mono); fill:var(--faint); }
.point-label{ font:700 11px var(--font-mono); fill:var(--ink); }
.trend-line{ fill:none; stroke:var(--primary); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.trend-area{ fill:var(--primary); opacity:.10; }
.trend-dot{ fill:var(--primary); stroke:var(--surface); stroke-width:2; }
.trend-dot.is-hover{ r:7; }
.crosshair{ stroke:var(--border-strong); stroke-width:1; stroke-dasharray:3 3; }
.chart-tip{
  position:absolute; pointer-events:none; z-index:5; min-width:120px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:8px 10px; font-size:.8rem; line-height:1.45;
}
.chart-empty{ color:var(--faint); font-size:.88rem; padding:22px 0; text-align:center; margin:0; }
.chart-table{ margin-top:12px; }
.chart-table summary{ cursor:pointer; font:600 .8rem var(--font-body); color:var(--muted); }
.data-table{ width:100%; border-collapse:collapse; margin-top:10px; font-size:.84rem; }
.data-table th, .data-table td{ text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); }
.data-table th{ font:700 .7rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }

/* Magnitude bars — one hue, direct labels */
.hbar{ display:grid; grid-template-columns:minmax(90px,150px) 1fr 74px; align-items:center; gap:12px; margin:11px 0; }
.hbar-label{ font-size:.84rem; font-weight:600; color:var(--ink); }
.hbar-track{ height:12px; border-radius:99px; background:var(--surface-2); display:block; overflow:hidden; }
.hbar-fill{ display:block; height:100%; background:var(--primary); border-radius:0 4px 4px 0; }
.hbar-val{ font:700 .8rem var(--font-mono); color:var(--ink); text-align:right; white-space:nowrap; }
.hbar-n{ display:block; font-weight:500; font-size:.68rem; color:var(--faint); }

/* Strength / weakness — status colour + icon + word, never colour alone */
.sw-head{ font:700 .7rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin:0 0 8px; }
.sw-row{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border-strong);
  border-radius:var(--radius); padding:9px 12px; margin-bottom:6px;
}
.sw-row:hover{ border-color:var(--primary); }
.sw-icon{ font-size:.8rem; width:16px; text-align:center; }
.sw-main{ display:flex; flex-direction:column; min-width:0; flex:1; }
.sw-name{ font-weight:650; font-size:.9rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-word{ font-size:.75rem; color:var(--muted); }
.sw-pct{ font:700 .85rem var(--font-mono); color:var(--ink); }
.sw-row.is-good{ border-left-color:var(--good); } .sw-row.is-good .sw-icon{ color:var(--good); }
.sw-row.is-mid{ border-left-color:var(--accent); } .sw-row.is-mid .sw-icon{ color:var(--accent); }
.sw-row.is-weak{ border-left-color:var(--bad); } .sw-row.is-weak .sw-icon{ color:var(--bad); }

/* Consistency grid — one hue, light → dark */
.heat-grid{ display:grid; grid-template-rows:repeat(7,15px); grid-auto-flow:column; grid-auto-columns:15px; gap:4px; overflow-x:auto; padding-bottom:4px; }
.heat-cell{
  width:15px; height:15px; border-radius:3px; display:inline-block;
  background:var(--surface-2); border:1px solid var(--border);
}
.heat-cell.is-on{ background:var(--primary); border-color:var(--primary); }
.heat-cell.is-today{ outline:2px solid var(--accent); outline-offset:1px; }
.heat-months{ display:grid; grid-auto-flow:column; grid-auto-columns:19px; gap:0; margin-bottom:5px; }
.heat-month{ font:600 .66rem var(--font-mono); color:var(--faint); }
.heat-legend{ display:flex; align-items:center; gap:6px; margin-top:10px; font:600 .72rem var(--font-mono); color:var(--faint); }

/* ---------- Drawn figures for visual-reasoning questions ---------- */
.figure-block{
  --fig-ink: var(--ink); --fig-soft: var(--border-strong);
  margin:14px 0 4px; padding:16px 14px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface);
}
.fig-row{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:14px; }
/* A matrix figure (cols set) lays out as a real grid so a 3x3 stays 3x3. */
.fig-row.is-grid{ display:grid; grid-template-columns:repeat(var(--fig-cols),auto); justify-content:center; }
.fig-row.has-dividers{ gap:8px; }
.fig-cell{ margin:0; display:flex; flex-direction:column; align-items:center; gap:5px; }
.fig-cell-svg{
  width:92px; height:92px; display:block;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.fig-cell figcaption{ font:700 .72rem var(--font-mono); color:var(--muted); }
.fig-arrow{ align-self:center; color:var(--faint); font-size:1.1rem; margin-top:-14px; }
.fig-caption{ margin:12px 0 0; text-align:center; font-size:.8rem; color:var(--muted); }
@media (max-width:560px){ .fig-cell-svg{ width:74px; height:74px; } }

/* ---------- DSA problem index ---------- */
.seg-count{ font:700 .68rem var(--font-mono); opacity:.7; margin-left:5px; }
#dsaLevels{ flex-wrap:wrap; margin-bottom:16px; border-radius:var(--radius); }
.dsa-blurb{ margin-bottom:18px; }
.dsa-group{ margin-bottom:24px; }
.dsa-group h3{ font-size:1rem; margin-bottom:10px; }
.dsa-count{ font:700 .7rem var(--font-mono); color:var(--faint); }
.dsa-list{ display:flex; flex-direction:column; gap:8px; }
.dsa-item{
  display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:11px 14px; background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--border-strong); border-radius:var(--radius);
}
.dsa-item.is-runnable{ border-left-color:var(--t-code); }
.dsa-item.is-solved{ border-left-color:var(--good); background:color-mix(in srgb, var(--good) 5%, var(--surface)); }
.dsa-n{ font:700 .85rem var(--font-mono); color:var(--faint); text-align:right; }
.dsa-main{ min-width:0; }
.dsa-title{ font-weight:650; font-size:.94rem; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dsa-approach{ font-size:.83rem; color:var(--muted); margin-top:3px; }
.dsa-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:5px; }
.dsa-pattern, .dsa-cx{ font:600 .72rem var(--font-mono); color:var(--faint); }
.dsa-pattern{ background:var(--surface-2); border-radius:99px; padding:2px 9px; }
.dsa-solved{ font:700 .7rem var(--font-mono); color:var(--good); }
.dsa-study{ font:600 .72rem var(--font-mono); color:var(--faint); }
.domain-tab.dsa-tab{ border-bottom:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0; margin-bottom:4px; padding-bottom:12px; }
@media (max-width:640px){
  .dsa-item{ grid-template-columns:30px minmax(0,1fr); }
  .dsa-item .btn, .dsa-study{ grid-column:2; justify-self:start; }
}

/* ---------- Rail group headings ---------- */
.rail-group{
  font:700 .64rem var(--font-mono); text-transform:uppercase; letter-spacing:.09em;
  color:var(--faint); padding:12px 11px 4px; border-top:1px solid var(--border); margin-top:6px;
}
.rail-list > .rail-group:first-child{ border-top:none; margin-top:0; padding-top:4px; }
.practice-browser.is-collapsed .rail-group{
  font-size:0; padding:8px 0 4px; height:1px; overflow:hidden;   /* keep the divider, drop the words */
}

/* ---------- Narrated lesson deck ---------- */
.learn-deck{ max-width:760px; }
.deck-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.deck-count{ font:700 .7rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.deck-title{ font-size:1.35rem; margin:0 0 .4em; }
.deck-body{ font-size:1rem; line-height:1.65; margin:0; color:var(--ink); }
.deck-bullets{ margin:14px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.deck-bullets li{
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:.42em .95em; font:600 .8rem var(--font-body); color:var(--ink);
}
.deck-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; padding-top:14px; border-top:1px solid var(--border); }
.deck-dots{ display:flex; gap:6px; flex:1; justify-content:center; }

/* Mid-lesson Q&A — the deck holds while the student's question is answered. */
.deck-qa{ margin-top:14px; }
.deck-qa:empty{ display:none; }
.deck-qa{ border-top:1px solid var(--line); padding-top:14px; }
.qa-answer{ margin-top:10px; }
.qa-answer strong{ color:var(--ink); }

/* Code Lab — worked sample input/output, and the return-vs-print warning. */
.code-examples{ margin:14px 0 16px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
.code-examples h4{ margin:0 0 10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); font-family:var(--mono); }
.code-example{ margin-bottom:12px; }
.code-example:last-of-type{ margin-bottom:0; }
.ce-n{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.06em; margin-bottom:4px; }
.ce-row{ display:flex; gap:10px; align-items:baseline; margin:3px 0; flex-wrap:wrap; }
.ce-k{ font-family:var(--mono); font-size:11px; color:var(--ink-2); min-width:52px; }
.ce-row code{ font-family:var(--mono); font-size:12.5px; background:var(--card); border:1px solid var(--line);
  border-radius:6px; padding:2px 7px; color:var(--ink); word-break:break-all; }
.ce-note{ font-size:12.5px; color:var(--ink-2); margin-top:4px; }
.ce-warn{ margin:12px 0 0; font-size:12.5px; color:var(--ink-2); border-top:1px dashed var(--line); padding-top:10px; }
.ce-warn code{ font-family:var(--mono); font-size:12px; }
.code-result-note{ margin-top:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-2); font-size:13px; color:var(--ink-2); }
.code-result-note code{ font-family:var(--mono); font-size:12px; }
.hint-lang{ display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:6px; padding:1px 6px; margin-right:8px; }

/* ======================================================================
   ATS Resume Builder
   ====================================================================== */
.rb-layout{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:1000px){ .rb-layout{ grid-template-columns:1fr; } }
.rb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
@media (max-width:620px){ .rb-grid{ grid-template-columns:1fr; } }
.rb-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.rb-field.rb-wide{ grid-column:1 / -1; }
.rb-field > span{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.rb-hint{ font-size:11.5px; color:var(--ink-3); font-style:normal; }
.rb-input{ width:100%; box-sizing:border-box; padding:9px 11px; border:1.5px solid var(--muted); border-radius:9px;
  background:var(--card); color:var(--ink); font:inherit; font-size:13.5px; }
.rb-input:focus{ outline:none; border-color:var(--brand); }
textarea.rb-input{ resize:vertical; line-height:1.5; }
.rb-row{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:12px; background:var(--bg-2); }
.rb-row-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.rb-side{ position:sticky; top:14px; display:flex; flex-direction:column; gap:14px; }
.rb-score{ float:right; font-family:var(--mono); font-size:13px; color:var(--ink-2); }
.rb-check-list{ list-style:none; margin:10px 0 0; padding:0; }
.rb-check-list li{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-top:1px solid var(--line); }
.rb-check-list li:first-child{ border-top:0; }
.rb-check-list strong{ display:block; font-size:13px; font-weight:600; }
.rb-check-list em{ display:block; font-style:normal; font-size:12px; color:var(--ink-2); margin-top:3px; }
.rb-mark{ width:20px; height:20px; border-radius:50%; flex:0 0 20px; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; }
.rb-check-list li.ok .rb-mark{ background:var(--ok-bg,#e6f5ec); color:var(--ok,#1c7c46); }
.rb-check-list li.no .rb-mark{ background:var(--warn-bg,#fdf0e3); color:var(--warn,#a4610a); }
.rb-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.rb-preview{ background:#fff; color:#111; padding:18px 20px; border-radius:10px; border:1px solid var(--line);
  max-height:560px; overflow:auto; font-family:Calibri,Arial,sans-serif; }
.rb-preview .rz-name{ font-size:19px; margin:0 0 2px; text-align:center; }
.rb-preview .rz-role, .rb-preview .rz-contact{ text-align:center; font-size:12px; color:#333; }
.rb-preview .rz-contact{ margin-bottom:12px; }
.rb-preview .rz-h{ font-size:12.5px; margin:14px 0 5px; padding-bottom:3px; border-bottom:1px solid #111; letter-spacing:.5px; }
.rb-preview .rz-sub{ font-weight:700; font-size:12.5px; margin-top:7px; }
.rb-preview .rz-meta{ font-size:11.5px; color:#444; }
.rb-preview .rz-li{ font-size:12px; margin:2px 0 2px 16px; }
.rb-preview .rz-li:before{ content:"• "; }
.rb-preview .rz-p{ font-size:12px; margin:0 0 4px; }

/* ======================================================================
   Job search
   ====================================================================== */
.js-form{ display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.js-sliders{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:700px){ .js-sliders{ grid-template-columns:1fr; } }
.js-slider{ display:flex; flex-direction:column; gap:6px; }
.js-slider > span{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.js-slider strong{ color:var(--brand); font-family:var(--mono); }
.js-slider input[type=range]{ width:100%; accent-color:var(--brand); }
.js-lbl{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.js-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 10px; }
.js-chip{ border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:999px;
  padding:5px 12px; font:inherit; font-size:12.5px; cursor:pointer; }
.js-chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.js-chip.is-on{ border-color:var(--brand); color:var(--brand); background:var(--brand-bg,transparent); }
.js-add-row{ display:flex; gap:8px; align-items:center; }
.js-add-row .rb-input{ flex:1; }
.js-chosen{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.js-tag{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:7px;
  padding:3px 8px; font-size:12px; color:var(--ink-2); }
.js-tag.on{ border-color:var(--brand); color:var(--brand); }
.js-tag button{ border:0; background:none; color:inherit; cursor:pointer; font-size:14px; line-height:1; padding:0; }
.js-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .js-row{ grid-template-columns:1fr; } }
.js-portals{ margin-bottom:16px; }
.js-portal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:12px; }
.js-portal{ display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:11px;
  padding:12px 14px; text-decoration:none; color:var(--ink); background:var(--bg-2); }
.js-portal:hover{ border-color:var(--brand); }
.js-portal span{ font-size:12px; color:var(--ink-2); }
.js-results-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:4px 2px 10px; font-size:13px; flex-wrap:wrap; }
.js-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.js-card{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--card); }
.js-card.is-saved{ border-color:var(--brand); }
.js-card-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.js-title{ font-weight:650; font-size:14.5px; color:var(--ink); text-decoration:none; line-height:1.35; }
.js-title:hover{ color:var(--brand); text-decoration:underline; }
.js-save{ border:0; background:none; cursor:pointer; font-size:17px; color:var(--ink-3); line-height:1; padding:0; }
.js-card.is-saved .js-save{ color:var(--brand); }
.js-co{ font-size:12.5px; color:var(--ink-2); margin:4px 0 8px; }
.js-meta{ display:flex; gap:10px; align-items:center; font-size:11.5px; color:var(--ink-3); flex-wrap:wrap; }
.js-src{ font-family:var(--mono); border:1px solid var(--line); border-radius:5px; padding:1px 6px; }
.js-match{ margin-left:auto; color:var(--brand); font-weight:600; font-family:var(--mono); }
.js-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }

/* ======================================================================
   Placement Ready Certificate
   ====================================================================== */
.cx-summary{ margin-bottom:16px; }
.cx-stats{ display:flex; flex-wrap:wrap; gap:22px; margin-top:12px; }
.cx-stats div{ min-width:104px; }
.cx-stats strong{ display:block; font-size:22px; font-family:var(--mono); }
.cx-stats span{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-3); }
.cx-tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin-bottom:16px; }
.cx-tier{ border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:var(--card); }
.cx-tier.is-earned{ border-color:var(--brand); }
.cx-tier-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.cx-tier-head h3{ margin:0; }
.cx-status{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-3); }
.cx-tier.is-earned .cx-status{ color:var(--brand); }
.cx-bronze .cx-tier-head h3{ color:#a2703f; }
.cx-silver .cx-tier-head h3{ color:#7b8794; }
.cx-gold .cx-tier-head h3{ color:#c9992b; }
.cx-reqs{ list-style:none; margin:12px 0 0; padding:0; }
.cx-reqs li{ display:flex; gap:9px; align-items:baseline; padding:6px 0; border-top:1px solid var(--line); font-size:12.5px; }
.cx-reqs li:first-child{ border-top:0; }
.cx-reqs li strong{ margin-left:auto; font-family:var(--mono); font-size:12px; }
.cx-reqs li.ok{ color:var(--ink); }
.cx-reqs li.no{ color:var(--ink-2); }
.cx-mark{ width:14px; }
.cx-actions{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:13px; }
.cx-id{ font-family:var(--mono); font-size:11.5px; border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
.cx-reg{ font-size:11px; color:var(--ok,#1c7c46); }
.cx-unreg{ font-size:11px; color:var(--bad,#a4243b); font-weight:600; }
.cx-warn{ color:var(--bad,#a4243b); }
.cx-verify-card{ margin-bottom:16px; }
.cx-result{ margin:12px 0 8px; padding:10px 13px; border-radius:9px; font-size:13px; font-weight:600; border:1px solid var(--line); }
.cx-result.ok{ color:var(--ok,#1c7c46); }
.cx-result.warn{ color:var(--warn,#a4610a); }
.cx-result.no{ color:var(--bad,#a4243b); }
.cx-li{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:10px 0 0; font-size:13px; }
.cx-li dt{ color:var(--ink-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; }
.cx-li dd{ margin:0; }
.cx-preview{ margin-top:14px; overflow-x:auto; background:#fff; border-radius:10px; padding:10px; }
.cx-preview .cert-sheet{ transform-origin:top left; width:900px; box-sizing:border-box; padding:34px 44px;
  border:3px solid #14213d; color:#14213d; font-family:Georgia,'Times New Roman',serif; text-align:center; }
.cx-preview .cert-rule{ height:4px; background:#c9992b; margin:0 auto 20px; width:120px; }
.cx-preview .cert-brand{ font-size:12px; letter-spacing:4px; text-transform:uppercase; }
.cx-preview .cert-kicker{ font-size:11px; letter-spacing:2.5px; text-transform:uppercase; margin-top:18px; color:#5a5f73; }
.cx-preview .cert-title{ font-size:29px; margin:6px 0 20px; }
.cx-preview .cert-name{ font-size:33px; margin:8px 0 14px; border-bottom:1px solid #c9992b; display:inline-block; padding:0 40px 6px; }
.cx-preview .cert-body{ font-size:14px; max-width:660px; margin:0 auto 20px; line-height:1.55; }
.cx-preview .cert-stats{ display:flex; justify-content:center; gap:30px; margin-bottom:22px; }
.cx-preview .cert-stats strong{ display:block; font-size:19px; font-family:Arial,sans-serif; }
.cx-preview .cert-stats span{ font-size:9px; text-transform:uppercase; letter-spacing:1px; color:#5a5f73; font-family:Arial,sans-serif; }
.cx-preview .cert-foot{ display:flex; justify-content:space-between; font-family:Arial,sans-serif; font-size:11px; margin-bottom:10px; }
.cx-preview .cert-lbl{ display:block; font-size:8.5px; text-transform:uppercase; letter-spacing:1px; color:#5a5f73; }
.cx-preview .cert-verify{ font-family:Arial,sans-serif; font-size:10px; color:#5a5f73; }
.cx-preview .cert-unreg{ color:#a4243b; font-weight:bold; }

/* ======================================================================
   Campus Mock Interview
   ====================================================================== */
.cm-roles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:12px; }
.cm-role{ display:flex; flex-direction:column; gap:4px; text-align:left; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; background:var(--card); color:var(--ink); cursor:pointer; font:inherit; }
.cm-role:hover{ border-color:var(--ink-3); }
.cm-role.is-on{ border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.cm-role-ic{ font-family:var(--mono); font-size:16px; color:var(--brand); }
.cm-role strong{ font-size:13.5px; }
.cm-role span:last-child{ font-size:12px; color:var(--ink-2); }
.cm-diffs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:6px; }
.cm-diff{ display:flex; flex-direction:column; gap:4px; text-align:left; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; background:var(--card); color:var(--ink); cursor:pointer; font:inherit; }
.cm-diff.is-on{ border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.cm-diff span{ font-size:12px; color:var(--ink-2); }
.cm-diff em{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.cm-stage-list{ margin:10px 0 0 18px; padding:0; font-size:13px; color:var(--ink-2); }
.cm-stage-list li{ margin-bottom:4px; }
.cm-stage-list strong{ color:var(--ink); }
.btn-lg{ padding:12px 22px; font-size:15px; }
.cm-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.cm-head h3{ margin:0; }
.cm-stages{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.cm-stage{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; border:1px solid var(--line);
  border-radius:12px; padding:12px 16px; background:var(--card); color:var(--ink); font:inherit; cursor:pointer; }
.cm-stage:disabled{ cursor:not-allowed; opacity:.55; }
.cm-stage.is-current{ box-shadow:inset 0 0 0 1px var(--brand); }
.cm-stage.is-pass{ border-color:var(--ok,#1c7c46); }
.cm-stage.is-fail{ border-color:var(--bad,#a4243b); }
.cm-n{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-family:var(--mono); font-size:12px; flex:0 0 26px; }
.cm-stage.is-pass .cm-n{ border-color:var(--ok,#1c7c46); color:var(--ok,#1c7c46); }
.cm-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cm-main strong{ font-size:14px; }
.cm-main span{ font-size:12px; color:var(--ink-2); }
.cm-score{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--ink-2); white-space:nowrap; }
.cm-stage.is-pass .cm-score{ color:var(--ok,#1c7c46); }
.cm-stage.is-fail .cm-score{ color:var(--bad,#a4243b); }
.cm-q{ border-top:1px solid var(--line); padding:16px 0; }
.cm-q-top{ display:flex; gap:10px; align-items:baseline; margin-bottom:6px; }
.cm-q-n{ font-family:var(--mono); font-size:11px; color:var(--brand); }
.cm-q-src{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; }
.cm-q-text{ font-size:14px; line-height:1.5; margin-bottom:10px; }
.cm-opts{ display:flex; flex-direction:column; gap:6px; }
.cm-opt{ display:flex; gap:9px; align-items:flex-start; border:1px solid var(--line); border-radius:9px;
  padding:8px 11px; font-size:13.5px; cursor:pointer; }
.cm-opt.is-on{ border-color:var(--brand); }
.cm-verdict{ margin-top:10px; font-size:13px; padding:9px 12px; border-radius:9px; border:1px solid var(--line); }
.cm-verdict.ok{ color:var(--ok,#1c7c46); }
.cm-verdict.no{ color:var(--bad,#a4243b); }
.cm-verdict p{ margin:5px 0 0; color:var(--ink-2); }
.cm-code-item{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; border-top:1px solid var(--line); padding:13px 0; }
.cm-code-item strong{ display:block; font-size:14px; margin-top:3px; }
.cm-code-state{ font-size:12px; color:var(--ink-3); margin-left:auto; font-family:var(--mono); }
.cm-code-state.ok{ color:var(--ok,#1c7c46); }
.cm-ans{ width:100%; box-sizing:border-box; }
.cm-wc{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:4px; }
.cm-wc.ok{ color:var(--ok,#1c7c46); }
.cm-grade{ margin-top:12px; border:1px solid var(--line); border-radius:11px; padding:12px 14px; background:var(--bg-2); }
.cm-grade-head{ display:flex; align-items:baseline; gap:12px; }
.cm-grade-head strong{ font-size:19px; font-family:var(--mono); }
.cm-grader{ font-size:11.5px; color:var(--ink-3); }
.cm-comment{ font-size:13px; margin:8px 0 0; }
.cm-parts{ list-style:none; margin:10px 0 0; padding:0; }
.cm-parts li{ display:flex; gap:10px; align-items:baseline; font-size:12.5px; padding:4px 0; border-top:1px solid var(--line); }
.cm-parts li em{ font-style:normal; color:var(--ink-3); font-size:11.5px; }
.cm-parts li strong{ margin-left:auto; font-family:var(--mono); }
.cm-missed{ font-size:12.5px; color:var(--ink-2); margin:9px 0 0; }
.cm-result{ margin-top:16px; }
.cm-result.is-pass{ border-color:var(--ok,#1c7c46); }
.cm-result.is-fail{ border-color:var(--bad,#a4243b); }
.cm-result h3{ margin-top:0; }

/* ======================================================================
   1:1 session
   ====================================================================== */
.bk-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:18px; align-items:start; }
@media (max-width:900px){ .bk-layout{ grid-template-columns:1fr; } }
.bk-about h4{ margin:16px 0 6px; font-size:13px; }
.bk-list{ margin:0 0 0 18px; padding:0; font-size:13px; color:var(--ink-2); }
.bk-list li{ margin-bottom:5px; }
/* Calendly's initInlineWidget() sets its injected iframe to height:100% of
   its parent — a percentage height that only resolves if the parent has an
   explicit (non-auto) height, not just min-height. Without this, the iframe
   collapses to almost nothing and the widget appears cut off after the
   event summary, with the rest of the card just empty background. Setting
   both height and min-height here (and again inline in JS as a belt-and-
   suspenders measure — see app-campus.js) fixes that. */
.bk-widget #bkMount{ height:760px; min-height:760px; }
.bk-frame{ width:100%; height:760px; min-height:760px; border:0; border-radius:10px; }
@media (max-width:600px){
  .bk-widget #bkMount{ height:680px; min-height:680px; }
  .bk-frame{ height:680px; min-height:680px; }
}

/* Figures inside the Dashboard intro carousel — smaller than in a lesson
   deck, since the slide already carries an avatar, a heading and body text. */
.slide .figure-block{ margin:10px auto 4px; max-width:640px; }
.slide .fig-cell svg{ max-height:74px; }
.slide .fig-cell figcaption{ font-size:10.5px; }
.slides-embed.is-min .figure-block{ display:none; }

/* ======================================================================
   Ported from r17: lesson deck maximise control
   ====================================================================== */
.deck-head-right{ display:flex; align-items:center; gap:8px; }
.deck-max-btn{
  border:1px solid var(--border); background:var(--surface); color:var(--faint);
  border-radius:8px; width:30px; height:30px; line-height:1; font-size:15px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; transition:background .15s, color .15s, border-color .15s;
}
.deck-max-btn:hover{ background:var(--surface-2); color:var(--ink); border-color:var(--primary); }

body.deck-maximised{ overflow:hidden; }
.learn-deck.is-max{
  position:fixed; inset:0; z-index:900; margin:0; border-radius:0;
  width:100vw; height:100dvh; max-width:none;
  overflow-y:auto; display:flex; flex-direction:column; justify-content:center;
  padding:24px clamp(18px, 6vw, 80px) 20px;
  box-shadow:none;
}
/* Header and controls are pinned to the edges so the slide's own content can
   take the whole middle and sit optically centred, instead of clinging to the
   top of a large screen. */
.learn-deck.is-max .deck-head{
  position:absolute; top:22px; left:clamp(18px, 6vw, 80px); right:clamp(18px, 6vw, 80px);
  margin:0;
}
.learn-deck.is-max .deck-foot{
  position:absolute; bottom:20px; left:clamp(18px, 6vw, 80px); right:clamp(18px, 6vw, 80px);
  margin:0; padding-top:18px;
}
.learn-deck.is-max .deck-title,
.learn-deck.is-max .deck-body,
.learn-deck.is-max .deck-bullets,
.learn-deck.is-max .figure-block{ width:100%; max-width:900px; margin-inline:auto; }
.learn-deck.is-max .deck-title{
  font-size:clamp(24px, 3.2vw, 40px); line-height:1.2; margin:0 auto 18px;
}
.learn-deck.is-max .deck-body{ font-size:clamp(17px, 1.7vw, 23px); line-height:1.65; }
.learn-deck.is-max .deck-bullets{ font-size:clamp(14px, 1.25vw, 18px); margin-top:18px; }
.learn-deck.is-max .figure-block{ margin-top:26px; }
.learn-deck.is-max .fig-cell-svg{ max-height:34vh; }
.learn-deck.is-max .deck-qa{ width:100%; max-width:900px; margin-inline:auto; position:relative; }

/* ======================================================================
   Ported from r17: answer options drawn as figures (visual / non-verbal)
   ====================================================================== */
.quiz-opts.has-figs, .qotd-opts.has-figs{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px;
}
@media (max-width: 620px){
  .quiz-opts.has-figs, .qotd-opts.has-figs{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.quiz-opts.has-figs .quiz-opt,
.qotd-opts.has-figs .qotd-opt{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; padding:12px 8px 10px; width:auto; min-width:0;
}
.opt-fig{
  display:block; width:100%; max-width:118px; aspect-ratio:1 / 1;
  color:var(--ink); pointer-events:none;
}
.opt-fig .fig-cell-svg{ width:100%; height:100%; display:block; }
.opt-fig-label{
  font-size:12.5px; color:var(--faint); line-height:1.35;
  word-break:break-word; pointer-events:none;
}
.quiz-opts.has-figs .quiz-opt.correct .opt-fig-label,
.quiz-opts.has-figs .quiz-opt.wrong .opt-fig-label{ color:inherit; }
.qotd-opts.has-figs .qotd-opt.correct .opt-fig-label,
.qotd-opts.has-figs .qotd-opt.wrong .opt-fig-label{ color:inherit; }

/* ======================================================================
   Ported from r17: DSA worked examples, code-hint approach line
   ====================================================================== */
.dsa-ex{ margin:8px 0 6px; display:grid; gap:5px; }
.dsa-ex-row{
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  font-size:12.5px; line-height:1.5;
}
.dsa-ex-lab{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); flex:0 0 auto;
}
.dsa-ex-row code{
  background:var(--surface); border:1px solid var(--border); border-radius:5px;
  padding:1px 6px; font-size:12px; word-break:break-word; max-width:100%;
}
.dsa-ex-note{ color:var(--muted); font-style:italic; font-size:12px; flex:1 1 100%; }

.code-hint .hint-approach{ margin:0 0 8px; }

/* ==========================================================================
   Workplace English (english-comm.js) — "English" screen
   ========================================================================== */
#screen-english .card{ margin-bottom:16px; }
.en-hero{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:center; }
.en-meters{ display:grid; gap:14px; }
.en-meter-top{ display:flex; justify-content:space-between; font-size:.84rem; margin-bottom:5px; }
.en-track{ height:9px; background:var(--surface-2); border:1px solid var(--border); border-radius:99px; overflow:hidden; }
.en-fill{ height:100%; border-radius:99px; background:var(--primary); transition:width .35s ease; }
.en-fill.good{ background:var(--good); } .en-fill.ok{ background:var(--accent); } .en-fill.low{ background:var(--bad); }
.en-warn{ margin:.6em 0 0; padding:.6em .8em; background:var(--accent-bg); color:var(--ink); border-radius:var(--radius-sm); font-size:.84rem; }

.en-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.en-tab{ font:inherit; font-weight:600; font-size:.88rem; padding:.6em 1.1em; border-radius:99px; border:1px solid var(--border-strong); background:var(--surface); color:var(--muted); cursor:pointer; }
.en-tab.is-on{ background:var(--primary); border-color:var(--primary); color:#fff; }

.en-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-bottom:16px; }
.en-topic{ position:relative; text-align:left; font:inherit; display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border); color:var(--ink); cursor:pointer; box-shadow:var(--shadow); }
.en-topic:hover{ border-color:var(--primary); transform:translateY(-1px); }
.en-topic-sub{ color:var(--muted); font-size:.82rem; }
.en-topic-ic{ font-size:1.6rem; }
.en-badge{ position:absolute; top:10px; right:10px; font-style:normal; font-size:.68rem; font-weight:700; background:var(--accent-bg); color:var(--accent); padding:.2em .6em; border-radius:99px; }
.en-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* chat */
.en-chat-head{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.en-clock{ text-align:center; min-width:84px; padding:.4em .8em; border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--border); }
.en-clock span{ display:block; font-family:var(--font-mono); font-weight:700; font-size:1.3rem; }
.en-clock small{ color:var(--faint); font-size:.68rem; }
.en-clock .over{ color:var(--bad); }
.en-log{ max-height:52vh; min-height:200px; overflow-y:auto; padding:10px 4px; margin:12px 0; display:flex; flex-direction:column; gap:10px; }
.en-msg{ display:flex; gap:8px; align-items:flex-start; }
.en-msg.user{ justify-content:flex-end; }
.en-av{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.en-bub{ max-width:min(640px,88%); padding:.7em 1em; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); font-size:.94rem; }
.en-msg.user .en-bub{ background:var(--primary); border-color:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.en-msg.ai .en-bub{ border-top-left-radius:4px; }
.en-msg.note{ padding-left:38px; }
.en-msg.note .en-bub{ max-width:100%; width:100%; background:var(--surface); border-style:dashed; font-size:.88rem; }
.en-divider{ text-align:center; font-size:.8rem; color:var(--muted); padding:6px 0; border-top:1px dashed var(--border); border-bottom:1px dashed var(--border); }
.en-replay{ font:inherit; border:none; background:none; cursor:pointer; padding:0 0 0 .3em; }
.en-typing{ color:var(--faint); font-style:italic; }
.en-hint-foot{ display:block; color:var(--muted); font-size:.8rem; margin-top:.3em; }
.en-input textarea, .en-round textarea, .en-details textarea{
  width:100%; font:inherit; padding:.7em .9em; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); resize:vertical; }
.en-input-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.en-live{ color:var(--muted); font-size:.82rem; }
.en-chat-actions{ border-top:1px solid var(--border); padding-top:14px; }

/* score chips, bars, notes */
.en-note-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.en-chip{ font-size:.74rem; padding:.2em .65em; border-radius:99px; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); }
.en-chip b{ margin-left:.2em; }
.en-chip.good{ background:var(--good-bg); color:var(--good); border-color:transparent; }
.en-chip.ok{ background:var(--accent-bg); color:var(--accent); border-color:transparent; }
.en-chip.low{ background:var(--bad-bg); color:var(--bad); border-color:transparent; }
.en-cats{ display:grid; gap:12px; margin:14px 0 6px; }
.en-cat-top{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.en-cat-name{ font-weight:700; font-size:.92rem; }
.en-cat-sub{ color:var(--faint); font-size:.76rem; flex:1; }
.en-cat-val.good{ color:var(--good); } .en-cat-val.ok{ color:var(--accent); } .en-cat-val.low{ color:var(--bad); }
.en-overall{ display:flex; align-items:center; gap:16px; margin:10px 0 4px; }
.en-big{ font-family:var(--font-display); font-size:3rem; font-weight:700; line-height:1; }
.en-big small{ font-size:1.1rem; color:var(--faint); font-weight:500; }
.en-big.good{ color:var(--good); } .en-big.ok{ color:var(--accent); } .en-big.low{ color:var(--bad); }
.en-level{ font-weight:700; font-size:1.05rem; }
.en-meta{ color:var(--muted); font-size:.84rem; }
.en-report h4{ margin:20px 0 8px; font-size:.95rem; }
.en-fix{ padding:.6em .8em; margin:8px 0; border-radius:var(--radius-sm); background:var(--surface-2); border-left:3px solid var(--accent); font-size:.9rem; }
.en-fix-line{ margin:2px 0; }
.en-fix mark{ background:var(--bad-bg); color:var(--bad); text-decoration:line-through; padding:0 .15em; border-radius:3px; }
.en-fix b{ background:var(--good-bg); color:var(--good); padding:0 .15em; border-radius:3px; }
.en-x{ color:var(--bad); font-weight:700; } .en-ok{ color:var(--good); font-weight:700; }
.en-why{ color:var(--muted); font-size:.82rem; margin-top:3px; }
.en-times{ color:var(--faint); font-size:.78rem; }
.en-clean{ color:var(--good); font-size:.9rem; margin:8px 0; }
.en-list{ margin:6px 0; padding-left:1.2em; font-size:.9rem; } .en-list li{ margin:5px 0; } .en-list span{ color:var(--muted); }
.en-list.tight{ margin:4px 0 0; }
.en-tip, .en-note-line, .en-ai-say{ margin:8px 0 0; font-size:.86rem; color:var(--muted); }
.en-details{ margin:14px 0; border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 14px; background:var(--surface); }
.en-details summary{ cursor:pointer; font-weight:600; font-size:.9rem; }
.en-model{ margin:10px 0; padding:.8em 1em; background:var(--surface-2); border-radius:var(--radius-sm); font-size:.92rem; line-height:1.65; }
.en-ans{ padding:10px 0; border-bottom:1px dashed var(--border); } .en-ans:last-child{ border:none; }
.en-ans-q{ font-weight:600; font-size:.86rem; margin:0 0 4px; } .en-ans-a{ color:var(--muted); font-size:.88rem; margin:0 0 6px; }
.en-follow{ margin-top:20px; padding-top:6px; border-top:2px solid var(--border); }

/* one-minute round */
.en-round-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.en-stage{ font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); }
.en-engine{ font-size:.78rem; color:var(--muted); }
.en-orb{ margin:14px auto; width:132px; height:132px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--surface-2); border:4px solid var(--primary); }
.en-orb span{ font-family:var(--font-mono); font-size:2.6rem; font-weight:700; line-height:1; }
.en-orb small{ color:var(--faint); font-size:.7rem; }
.en-orb.live{ border-color:var(--good); animation:pulse 1.6s infinite; }
.en-orb.hurry{ border-color:var(--bad); }
.en-frame{ margin:10px 0; padding:.7em 1em; background:var(--surface-2); border-radius:var(--radius-sm); font-size:.9rem; }

/* progress history */
.en-hist-row{ display:grid; grid-template-columns:90px 26px 1fr auto 46px; gap:8px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border); font-size:.86rem; }
.en-hist-row:last-child{ border:none; }
.en-hist-date{ color:var(--faint); font-size:.78rem; } .en-hist-weak{ color:var(--muted); font-size:.78rem; }
.en-hist-score{ text-align:right; } .en-hist-score.good{ color:var(--good); } .en-hist-score.ok{ color:var(--accent); } .en-hist-score.low{ color:var(--bad); }

@media (max-width:720px){
  .en-hero{ grid-template-columns:1fr; }
  .en-bub{ max-width:94%; }
  .en-hist-row{ grid-template-columns:70px 22px 1fr 40px; } .en-hist-weak{ display:none; }
  .en-tab{ flex:1 1 auto; text-align:center; }
}

/* ==========================================================================
   Left-hand menu (round 24): the full menu was cut off in the top bar, so on
   desktop it now lives in a fixed sidebar at the left; on small screens it
   becomes a scrollable strip under the top bar.
   ========================================================================== */
@media (min-width:861px){
  .topbar{ backdrop-filter:none; margin-left:208px; }
  .nav-links{
    position:fixed; left:0; top:0; bottom:0; width:208px; z-index:45; flex-direction:column; gap:2px;
    padding:20px 10px 24px; overflow-y:auto; background:var(--surface); border-right:1px solid var(--border);
  }
  .nav-links::before{ content:"Menu"; font:700 .7rem var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:0 1em .6em; }
  .nav-link{ text-align:left; width:100%; white-space:normal; }
  .nav-link.is-active{ box-shadow:inset 3px 0 0 var(--primary); }
  #mainRoot, .site-footer{ margin-left:208px; }
  .topbar-inner{ max-width:none; }
}
@media (max-width:860px){
  .topbar-inner{ flex-wrap:wrap; gap:10px 14px; }
  .nav-links{ display:flex; order:10; width:100%; overflow-x:auto; padding-bottom:4px; }
  .nav-link{ flex:none; }
}

/* Ground rules + level test */
.en-rules{ margin:12px 0; padding:10px 14px; border-radius:var(--radius-md); background:var(--accent-bg); border:1px solid var(--border); font-size:.86rem; }
.en-rules summary{ cursor:pointer; font-weight:700; }
.en-rules ol{ margin:8px 0 2px; padding-left:1.3em; } .en-rules li{ margin:4px 0; }
.en-levelbar{ margin:0 0 14px; padding:.6em 1em; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); font-size:.9rem; }
.en-level-card{ border-left:4px solid var(--accent); }


/* ======================================================================
   Round 25: fixed slide size, scaled text when expanded, step highlights,
   key-rule callout, finish slide
   ====================================================================== */
/* Every dashboard slide sits in the same box, whatever it contains. */
.slides-stage{ height:530px; min-height:530px; align-items:flex-start; overflow-y:auto; overflow-x:hidden; }
.slide{ margin:auto 0; }
.slides-embed.is-max .slides-stage{ height:calc(100vh - 150px); min-height:0; align-items:flex-start; }
.slides-embed.is-max .slide{ max-width:980px; }
.slides-embed.is-max .slide h2{ font-size:clamp(2rem,4vw,3.2rem); }
.slides-embed.is-max .slide-kicker{ font-size:1rem; }
.slides-embed.is-max .slide-body{ font-size:clamp(1.15rem,1.9vw,1.6rem); max-width:820px; line-height:1.6; }
.slides-embed.is-max .slide-stagelist li{ font-size:clamp(.95rem,1.5vw,1.3rem); padding:.55em 1.2em; }
.slides-embed.is-max .slide .figure-block{ max-width:900px; }
.slides-embed.is-max .slide .fig-cell svg{ max-height:120px; }
.slides-embed.is-max .slide .fig-cell figcaption{ font-size:clamp(13px,1.3vw,18px); }
.slides-embed.is-max .slide .btn{ font-size:1.1rem; padding:.7em 1.6em; }
.slide-actions{ margin-top:1.4em; }
.slides-embed.is-min .slides-stage{ height:auto; min-height:0; }

/* Lesson deck: same footprint on every slide. */
.learn-deck:not(.is-max){ min-height:540px; display:flex; flex-direction:column; }
.learn-deck:not(.is-max) .deck-foot{ margin-top:auto; }
.learn-deck:not(.is-max) .deck-qa{ margin-top:14px; }
.learn-deck.deck-complete{ align-items:center; justify-content:center; text-align:center; }
.deck-complete-inner{ margin:auto; padding:24px 8px; max-width:640px; }
.deck-complete-emoji{ font-size:64px; line-height:1; margin-bottom:12px; }
.deck-complete .deck-body{ margin-bottom:22px; }
.learn-deck.is-max.deck-complete .deck-title{ font-size:clamp(30px,4.5vw,56px); }
.learn-deck.is-max.deck-complete .deck-body{ font-size:clamp(18px,2vw,26px); }

/* Key-rule callout (replaces the bare "=" plate). */
.deck-callout{ margin:14px 0 0; padding:16px 20px; border-radius:14px; border:1px solid var(--primary);
  background:var(--surface-2); position:relative; }
.deck-callout-tag{ display:inline-block; font:700 .7rem var(--font-mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--primary); margin-bottom:6px; }
.deck-callout p{ margin:0; font-size:1.08rem; line-height:1.6; font-weight:600; color:var(--ink); }
.learn-deck.is-max .deck-callout{ width:100%; max-width:900px; margin-inline:auto; padding:26px 32px; }
.learn-deck.is-max .deck-callout p{ font-size:clamp(20px,2.2vw,30px); }
.learn-deck.is-max .deck-callout-tag{ font-size:clamp(12px,1.1vw,16px); }

/* Bigger step chips when expanded (the base rule pinned them at .8rem). */
.learn-deck.is-max .deck-bullets li{ font-size:inherit; padding:.5em 1.1em; }
.learn-deck.is-max .deck-bullets{ font-size:clamp(16px,1.6vw,24px); gap:12px; }
.learn-deck.is-max .fig-cell figcaption{ font-size:clamp(14px,1.4vw,20px); }

/* Steps light up with the narration. */
.deck-bullets li{ transition:background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.deck-bullets li.is-speaking{ background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 4px 14px rgba(0,0,0,.18); transform:scale(1.04); }
.deck-bullets li.is-spoken{ border-color:var(--primary); }
.figure-block .fig-cell{ transition:opacity .2s, transform .2s, box-shadow .2s; border-radius:12px; }
.figure-block .fig-cell.is-speaking{ outline:3px solid var(--primary); outline-offset:4px; }
.figure-block .fig-cell.is-speaking figcaption{ color:var(--primary); font-weight:700; }
.figure-block .fig-cell.is-spoken{ opacity:.7; }

.deck-complete .deck-title{ font-size:2rem; }

/* Round 26: collapsible menu + slide illustrations */
.menu-toggle{ display:none; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:8px;
  width:36px; height:36px; font-size:18px; line-height:1; cursor:pointer; flex:0 0 auto; }
.menu-toggle:hover{ border-color:var(--primary); color:var(--primary); }
@media (min-width:861px){
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-links, .topbar, #mainRoot, .site-footer{ transition:transform .22s ease, margin-left .22s ease; }
  body.menu-collapsed .nav-links{ transform:translateX(-100%); box-shadow:none; }
  body.menu-collapsed .topbar{ margin-left:0; }
  body.menu-collapsed #mainRoot, body.menu-collapsed .site-footer{ margin-left:0; }
}
.figure-block.is-illus .fig-row{ gap:28px; justify-content:center; }
.figure-block.is-illus .fig-cell{ background:transparent; }
.slide .figure-block.is-illus .fig-cell svg{ width:104px; height:104px; max-height:none; }
.slides-embed.is-max .slide .figure-block.is-illus .fig-cell svg{ width:150px; height:150px; max-height:none; }
.slide .figure-block.is-illus .fig-cell figcaption{ font-size:12px; }
.figure-block.is-illus .fig-arrow{ align-self:center; }

/* Round 27: nothing may be cut off. The Practices browser used a full-bleed
   100vw trick that ignored the left menu's offset and shoved its left edge
   off-screen; it now simply fills the space beside the menu. If a window is
   still too narrow for some content, a horizontal scrollbar appears. */
@media (min-width:861px){
  .practice-browser{ width:100%; margin-left:0; }
}
html, body{ overflow-x:auto; }
body{ min-width:0; }

/* Round 28: external PlacePrep menu link + body-language camera */
.nav-link-ext{ display:block; text-decoration:none; text-align:left; margin-top:10px; padding:.7em .9em; border-radius:10px;
  background:var(--accent-bg); border:1px solid var(--accent); color:var(--ink); font:600 .8rem/1.4 var(--font-body); white-space:normal; }
.nav-link-ext:hover{ filter:brightness(.97); }
@media (max-width:860px){ .nav-link-ext{ margin-top:0; max-width:260px; flex:none; } }
.bv-dock{ margin-bottom:14px; }
.bv-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bv-badge{ font:700 .65rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); border:1px solid var(--border); border-radius:999px; padding:1px 8px; margin-left:6px; }
.bv-sub{ font-size:.82rem; color:var(--muted); margin-top:4px; max-width:620px; }
.bv-body{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-top:12px; }
.bv-body[hidden]{ display:none; }
#bvVideo{ width:240px; max-width:100%; aspect-ratio:4/3; border-radius:12px; background:#111; object-fit:cover; transform:scaleX(-1); border:2px solid var(--border); }
.bv-side{ flex:1; min-width:200px; }
.bv-msg{ font-weight:700; padding:.55em .8em; border-radius:10px; margin-bottom:8px; }
.bv-msg.ok{ background:#e3f4ea; color:#14532d; } .bv-msg.warn{ background:#fdf0d5; color:#7a4a00; }
.bv-tips{ margin:0; padding-left:1.2em; font-size:.84rem; color:var(--muted); }
.bv-status{ font-size:.82rem; color:var(--muted); margin-top:6px; } .bv-status.bad{ color:#b42318; }
.bv-est{ font-weight:400; color:var(--faint); font-size:.72rem; }
.bv-off{ margin-top:10px; }
.bv-dock.is-on{ position:sticky; top:8px; z-index:20; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:10px 14px; }
.bv-dock.is-on .bv-sub{ display:none; }
.bv-dock.is-on #bvVideo{ width:150px; }
.bv-dock.is-on .bv-tips{ display:none; }

/* Round 30: login help + menu links */
.nav-link-help{ margin-top:10px; border:1px dashed var(--border-strong, var(--border)); }
@media (max-width:860px){ .nav-link-help{ margin-top:0; } }
.support-modal{ position:relative; max-width:560px; }
.support-modal h3{ margin-top:0; }
.sp-label{ display:block; font:700 .78rem var(--font-body); margin:12px 0 4px; color:var(--ink); }
.sp-input{ width:100%; box-sizing:border-box; padding:.6em .8em; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; }
.sp-input:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.sp-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .sp-row{ grid-template-columns:1fr; } }
.sp-actions{ display:flex; gap:10px; margin-top:14px; }
.sp-msg{ margin-top:12px; font-size:.9rem; }
.sp-msg.bad{ color:#b42318; } .sp-msg.ok{ color:#14532d; }
.sp-opt{ font-weight:400; color:var(--faint); }
.sp-drop{ border:1px dashed var(--border-strong, var(--border)); border-radius:10px; padding:10px 12px; }
.sp-hint{ font-size:.8rem; color:var(--muted); }
.sp-thumbs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.sp-thumb{ position:relative; width:96px; height:72px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.sp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-thumb button{ position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; border:0; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; line-height:1; }
select.sp-input{ appearance:auto; }

/* Round 33: numbered step lists in lessons, worked-example layout, no truncated captions */
.deck-question{ margin:12px 0 4px; padding:12px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; font-weight:600; line-height:1.55; }
.deck-question-tag{ display:block; font:700 .68rem var(--font-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--primary); margin-bottom:4px; }
.deck-steps{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.deck-steps li{ display:flex; gap:12px; align-items:flex-start; padding:.55em .8em; border:1px solid var(--border); border-radius:12px;
  background:var(--surface); transition:background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.deck-step-n{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; font:700 .8rem var(--font-body); }
.deck-step-t{ line-height:1.5; font-weight:500; overflow-wrap:anywhere; }
.deck-steps li.is-speaking{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.18); transform:translateX(4px); }
.deck-steps li.is-speaking .deck-step-n{ border-color:#fff; }
.deck-steps li.is-spoken{ border-color:var(--primary); }
.deck-steps li.is-spoken .deck-step-n{ background:var(--primary); color:#fff; border-color:var(--primary); }
.deck-trap{ margin-top:12px; padding:10px 14px; border-radius:10px; background:var(--accent-bg); border:1px dashed var(--accent); font-size:.92rem; }
.learn-deck.is-max .deck-question, .learn-deck.is-max .deck-steps, .learn-deck.is-max .deck-trap{ width:100%; max-width:900px; margin-inline:auto; }
.learn-deck.is-max .deck-question{ font-size:clamp(18px,1.9vw,26px); }
.learn-deck.is-max .deck-steps{ font-size:clamp(16px,1.6vw,24px); gap:12px; margin-top:20px; }
.learn-deck.is-max .deck-step-n{ width:clamp(28px,2.4vw,40px); height:clamp(28px,2.4vw,40px); font-size:clamp(.9rem,1.3vw,1.3rem); }
.learn-deck.is-max .deck-trap{ font-size:clamp(15px,1.4vw,21px); margin-top:16px; }
.fig-cell figcaption{ white-space:normal; text-align:center; max-width:150px; overflow-wrap:anywhere; line-height:1.35; }

/* r34 */
.rb-input{ border:2px solid var(--muted) !important; background:var(--surface); color:var(--ink); }
.rb-input:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent); }
.cm-role,.cm-diff,.js-chip{ border:1.5px solid var(--muted); position:relative; }
.cm-role.is-on,.cm-diff.is-on{ border-color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,var(--surface)); box-shadow:0 0 0 2px var(--primary); }
.cm-role.is-on::after,.cm-diff.is-on::after{ content:"✓ Selected"; position:absolute; top:8px; right:10px; font-size:11px; font-weight:700; color:var(--primary); }
.js-chip.is-on{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.js-chip.is-on::before{ content:"✓ "; }
.cm-explain{ border:1.5px dashed var(--muted); border-radius:12px; padding:12px 14px; margin:10px 0; }
.cm-explain table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.cm-explain td,.cm-explain th{ border:1px solid var(--border-strong); padding:6px 8px; text-align:left; }
.cx-tier.is-current{ border:2px solid var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent); }
.cx-badge{ display:inline-block; background:var(--primary); color:var(--primary-ink); border-radius:999px; padding:2px 10px; font-size:11px; font-weight:700; margin-left:8px; }
.cx-now{ border:2px solid var(--primary); border-radius:12px; padding:12px 14px; margin-bottom:12px; font-size:14px; }
.cx-howto{ font-size:13px; line-height:1.55; }

.js-chip.is-on{ color:#fff !important; background:var(--primary); }
.cm-mic-row{ display:flex; align-items:center; gap:10px; margin:8px 0; flex-wrap:wrap; }
.cm-backbar{ position:sticky; top:0; z-index:20; display:flex; gap:12px; align-items:center; padding:10px 14px; margin-bottom:10px; background:var(--surface); border:2px solid var(--primary); border-radius:12px; }
[data-theme="navy"] .js-chip.is-on{ color:#0b1020 !important; }