/* ===================== DESIGN TOKENS ===================== */
:root{
  --ink-950:#12161c; --ink-900:#181d24; --ink-800:#20262e;
  --stone-050:#f1f3ef; --stone-100:#e8eae4; --stone-200:#dadcd4;
  --paper:#ffffff;
  --accent:#b5791f; --accent-strong:#96630f; --accent-soft:#f3e3c6;
  --pine:#2f6b5b; --pine-soft:#e0ede7;
  --brick:#a8452f; --brick-soft:#f3ddd6;
  --text-1:#1b1f23; --text-2:#4a5158; --text-3:#767d84;
  --line:#dddfda; --line-strong:#c7cabf;
  --surface:#ffffff; --surface-raised:#ffffff; --bg:var(--stone-050);
  --hover-surface:var(--stone-100); --track:var(--stone-100); --bubble:var(--stone-100);
  --shadow: 0 1px 2px rgba(20,20,15,.05), 0 6px 20px -8px rgba(20,20,15,.12);
  --radius-s:6px; --radius-m:10px; --radius-l:16px;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --focus: 0 0 0 3px rgba(181,121,31,.35);
}
/* Dark palette. Vanilla CSS has no mixins, so the token block is repeated for
   the OS preference and for the explicit toggle. Keep the two blocks in sync —
   every component styles through the tokens, never inside the media query. */
:root[data-theme="dark"]{
  --bg:var(--ink-950); --surface:var(--ink-900); --surface-raised:#242b34;
  --hover-surface:#242b34; --track:var(--ink-800); --bubble:#242b34;
  --text-1:#eceae3; --text-2:#b7bcc2; --text-3:#8b929a;
  --line:#2b323c; --line-strong:#3a4350;
  --accent:#d9a24c; --accent-strong:#e8b86c; --accent-soft:#3a2f18;
  --pine:#5aa08e; --pine-soft:#172b25;
  --brick:#d17a63; --brick-soft:#31201c;
  --focus: 0 0 0 3px rgba(217,162,76,.4);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--ink-950); --surface:var(--ink-900); --surface-raised:#242b34;
    --hover-surface:#242b34; --track:var(--ink-800); --bubble:#242b34;
    --text-1:#eceae3; --text-2:#b7bcc2; --text-3:#8b929a;
    --line:#2b323c; --line-strong:#3a4350;
    --accent:#d9a24c; --accent-strong:#e8b86c; --accent-soft:#3a2f18;
    --pine:#5aa08e; --pine-soft:#172b25;
    --brick:#d17a63; --brick-soft:#31201c;
    --focus: 0 0 0 3px rgba(217,162,76,.4);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text-1); font-family:var(--font-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
/* Inline icons are sized by their own width/height attributes. They must NOT
   inherit max-width:100% — inside a flex parent that resolves against a content
   box the icon itself is sizing, which collapses the icon to nothing. */
svg{display:block;flex:0 0 auto;}
button{font-family:inherit;}
::selection{background:var(--accent-soft);}
a{color:var(--accent-strong);}
.tabular{font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:4px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
.reduce-motion *{animation:none !important; transition:none !important;}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0; color:var(--text-1);}
p{margin:0;}

/* ===================== LAYOUT SHELL ===================== */
#root{min-height:100vh;display:flex;flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:24px;
  padding:0 20px; height:56px; background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:8px; font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:.2px; color:var(--text-1); cursor:pointer; white-space:nowrap;}
.brand .dot{color:var(--accent);}
.brand-mascot{width:34px; height:34px; object-fit:contain; align-self:center; flex-shrink:0;}
/* Below this width the wordmark text alone is already tight against the
   level pill and streak chip -- see the mobile topbar overlap this fixed
   during testing. No room left for an icon too. */
@media (max-width: 460px){ .brand-mascot{display:none;} }

/* The welcome page's corner lynx: peeking in from bottom-right rather than
   sitting inline with content, so it reads as ambient personality instead
   of competing with the actual call-to-action cards. Hidden below the
   breakpoint where .main-inner's column already fills the available width
   -- there is no corner left for it to lurk in, and it would just cover
   the placement-test card instead. */
.welcome-mascot{
  position:absolute; right:16px; bottom:-18px; width:130px; height:auto;
  pointer-events:none; z-index:0;
}
/* Below this width the card itself is narrow enough that the full-size
   lynx starts covering the paragraph text above the button rather than
   just peeking past the corner -- shrink instead of hiding, since even
   at phone widths a smaller peek reads fine. */
@media (max-width: 640px){ .welcome-mascot{width:88px; right:10px;} }

/* Corectorul's "checking" state, same corner-peek language as the welcome
   lynx: the mascot hangs slightly past the box's own edge rather than
   sitting neatly inside it, which is what makes it read as a character
   glancing in rather than a decorative icon. */
.thinking-mascot{
  position:absolute; right:-4px; bottom:-8px; width:92px; height:auto;
  pointer-events:none;
}
@media (max-width: 380px){ .thinking-mascot{width:64px;} }

/* The Learn page's corner lynx: "Continue where you left off" and its
   button never fill the column's full width (the text itself caps at
   60ch), so there is real whitespace to the right of it on any screen
   wide enough to still be showing the mastery rail -- same reasoning as
   hiding it there once that rail is gone. */
.home-mascot{
  position:absolute; right:0; bottom:-10px; width:190px; height:auto;
  pointer-events:none; z-index:0;
}
@media (max-width: 980px){ .home-mascot{display:none;} }
.topnav{display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none;}
.topnav::-webkit-scrollbar{display:none;}
.topnav button{
  background:none;border:none;color:var(--text-2);font-size:13.5px;font-weight:600;
  padding:8px 12px;border-radius:var(--radius-s);cursor:pointer;white-space:nowrap;
  letter-spacing:.1px;
}
.topnav button:hover{background:var(--hover-surface); color:var(--text-1);}
.topnav button.active{background:var(--accent-soft); color:var(--accent-strong);}
.topbar-right{display:flex; align-items:center; gap:10px;}
/* A quiet, borderless icon rather than a labeled pill like the level/streak
   chips next to it -- feedback is a low-frequency utility action, not
   something that needs equal visual weight with actual progress. Shown at
   every width down to the phone breakpoint below, same as the mascot in
   .brand: the mobile slide-out menu also carries "Send feedback", but
   that redundancy is the fallback for when this icon has to give up its
   spot, not a reason to hide it by default. */
.feedback-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:transparent; border:none; color:var(--text-3); cursor:pointer;
}
.feedback-icon-btn:hover{background:var(--hover-surface); color:var(--text-1);}
/* Below this width the brand mascot already steps aside (see .brand-mascot
   above) because the wordmark alone is tight against the level pill and
   streak chip -- this icon is the next thing to give up its spot rather
   than force a horizontal scrollbar into the topbar. "Send feedback" in
   the slide-out menu (mobileNav in topbar.js) is what's left reachable. */
@media (max-width: 460px){ .feedback-icon-btn{display:none;} }
.level-pill{
  font-size:12px;font-weight:700;letter-spacing:.4px;background:var(--pine-soft);color:var(--pine);
  padding:4px 10px;border-radius:999px;
}
.streak-chip{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-2);font-weight:600;}

.shell{display:flex; flex:1; min-height:0;}
.sidebar{
  width:280px; flex:0 0 auto; border-right:1px solid var(--line); background:var(--surface);
  padding:18px 14px 40px; overflow-y:auto;
}
.main{flex:1; min-width:0; padding:28px 32px 80px; max-width:100%;}
.main-inner{max-width:860px; margin:0 auto;}
.main-wide .main-inner{max-width:1080px;}
.rightrail{width:260px; flex:0 0 auto; border-left:1px solid var(--line); padding:20px 16px; overflow-y:auto; background:var(--surface);}

/* Heading that separates the two tracks inside the one course map. */
.course-group{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--accent-strong);padding:16px 10px 6px;margin-top:8px;border-top:1px solid var(--line);}
.level-block:first-of-type + .course-group, .course-group:first-child{border-top:none;margin-top:0;padding-top:0;}

/* The in-sidebar navigation exists only for the mobile layout. */
.mobile-nav{display:none;}
.mobile-nav-item{display:block;width:100%;text-align:left;background:none;border:none;
  padding:9px 10px;border-radius:var(--radius-s);font-size:14.5px;font-weight:600;
  color:var(--text-2);cursor:pointer;}
.mobile-nav-item:hover{background:var(--hover-surface);color:var(--text-1);}
.mobile-nav-item.active{background:var(--accent-soft);color:var(--accent-strong);}

@media (max-width: 980px){
  .sidebar{position:fixed; left:0; top:56px; bottom:0; z-index:30; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); width:min(300px, 86vw);}
  .sidebar.open{transform:translateX(0);}
  .rightrail{display:none;}
  .main{padding:18px 16px 60px;}
  .topnav{display:none;}
  .menu-btn{display:inline-flex !important;}
  .mobile-nav{display:block;}
}
/* Pages with no course map have nothing to show in the sidebar on desktop. */
@media (min-width: 981px){
  .sidebar.nav-only{display:none;}
  .course-switch-body{display:none !important;}   /* the sidebar has one */
}
.menu-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface);cursor:pointer;}

/* ===================== COMPONENTS ===================== */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow);}
/* A .card that is itself a nav target (the reading list rows). Same hover
   language as .unit-node, so “this whole row is clickable” reads the same
   way everywhere it appears. */
.card.row-link{cursor:pointer; transition:background .12s, border-color .12s;}
.card.row-link:hover{background:var(--hover-surface); border-color:var(--line-strong);}
.card.row-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-body); font-weight:700; font-size:13.5px; letter-spacing:.1px;
  padding:10px 18px; border-radius:var(--radius-s); border:1px solid transparent; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s, transform .05s;
  background:var(--accent); color:#fff;
}
.btn:hover{background:var(--accent-strong);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn.secondary{background:transparent; color:var(--text-1); border-color:var(--line-strong);}
.btn.secondary:hover{background:var(--hover-surface); border-color:var(--line-strong);}
.btn.ghost{background:transparent; color:var(--accent-strong); border-color:transparent; padding:8px 10px;}
.btn.ghost:hover{background:var(--accent-soft);}
.btn.sm{padding:6px 12px; font-size:12.5px;}
.btn.block{width:100%;}
.btn.danger{background:var(--brick); color:#fff;}

input[type=text], input[type=search], textarea, select{
  font-family:inherit; font-size:14.5px; padding:10px 12px; border-radius:var(--radius-s);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text-1); width:100%;
}
textarea{resize:vertical; min-height:88px; line-height:1.55;}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus);}
label.field-label{display:block;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--text-3);margin-bottom:6px;}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:999px;}
.badge.pine{background:var(--pine-soft);color:var(--pine);}
.badge.accent{background:var(--accent-soft);color:var(--accent-strong);}
.badge.brick{background:var(--brick-soft);color:var(--brick);}
.badge.neutral{background:var(--hover-surface);color:var(--text-2);}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text-2);cursor:pointer;}
.chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);}

.audio-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--pine-soft);color:var(--pine);border:1px solid transparent;border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;
}
.audio-btn:hover{filter:brightness(0.96);}
.audio-btn.playing{background:var(--pine);color:#fff;}
/* A play control that could not produce correct Romanian says so, rather than
   looking identical to one that worked. */
.audio-btn.audio-failed{background:var(--brick-soft);color:var(--brick);}
.audio-btn.small{padding:4px 8px;font-size:11.5px;}
/* Both declarations are load-bearing. The global reset's `svg{max-width:100%}`
   resolves against the button's content box, which is itself sized by the icon
   — a circular dependency that collapsed the icon to 0px and rendered the
   control as an empty circle. max-width:none breaks the cycle; flex:0 0 auto
   stops the icon shrinking inside the flex row. */
.audio-btn svg{width:14px;height:14px;flex:0 0 auto;max-width:none;}
.speed-row{display:flex;gap:4px;align-items:center;margin-left:4px;}
.speed-row button{font-size:10.5px;font-weight:700;padding:3px 6px;border-radius:5px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text-3);cursor:pointer;}
.speed-row button.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.progressbar{height:6px;border-radius:99px;background:var(--track);overflow:hidden;}
.progressbar > span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease;}
.progressbar.pine > span{background:var(--pine);}

.mastery-row{display:flex;align-items:center;gap:10px;}
.mastery-row .label{width:96px;flex:0 0 auto;font-size:12.5px;color:var(--text-2);font-weight:600;}
.mastery-row .progressbar{flex:1;}
.mastery-row .pct{width:38px;text-align:right;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--text-2);}

.diacritic-bar{display:flex;gap:6px;margin-top:8px;}
.diacritic-bar button{
  font-family:var(--font-display); font-size:16px; width:34px;height:34px;border-radius:var(--radius-s);
  border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; color:var(--text-1);
}
.diacritic-bar button:hover{background:var(--accent-soft); border-color:var(--accent);}

.section-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-strong);margin-bottom:6px;}

hr.rule{border:none;border-top:1px solid var(--line);margin:0;}

.wordchip{display:inline-flex;align-items:center;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-s);padding:9px 14px;font-size:16px;font-weight:600;cursor:grab;user-select:none;font-family:var(--font-display);}
.wordchip.used{opacity:.35;cursor:default;}
.wordchip.placed{cursor:pointer;}

.feedback-box{border-radius:var(--radius-m); padding:16px 18px; margin-top:14px; border:1px solid;}
.feedback-box.correct{background:var(--pine-soft); border-color:var(--pine); }
.feedback-box.partial{background:var(--accent-soft); border-color:var(--accent);}
.feedback-box.incorrect{background:var(--brick-soft); border-color:var(--brick);}
/* Free writing: nothing verified it as correct, so it does not get the green. */
.feedback-box.neutral{background:var(--hover-surface); border-color:var(--line-strong);}
.feedback-box.neutral .feedback-title{color:var(--text-1);}
.feedback-title{font-weight:800; font-size:14px; margin-bottom:6px; display:flex; align-items:center; gap:7px;}
.feedback-box.correct .feedback-title{color:var(--pine);}
.feedback-box.partial .feedback-title{color:var(--accent-strong);}
.feedback-box.incorrect .feedback-title{color:var(--brick);}
.feedback-explain{font-size:13.8px; color:var(--text-2); line-height:1.55;}
.feedback-explain b, .feedback-explain strong{color:var(--text-1);}
.correct-answer-line{font-family:var(--font-display); font-size:16.5px; margin:8px 0; color:var(--text-1); font-weight:600;}

/* Dictation transcript. Set larger and looser than body copy on purpose: this
   is text meant to be read in time with audio, so the eye has to find the next
   line without hunting. One sentence per row, each independently replayable. */
.transcript-panel{margin-top:14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius-s); background:var(--surface);}
.transcript-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.transcript-label{font-size:11.5px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--text-3);}
.transcript-line{display:flex; gap:10px; align-items:flex-start; padding:7px 0;
  border-bottom:1px solid var(--line);}
.transcript-line:last-of-type{border-bottom:0;}
.transcript-line .audio-btn{margin-top:3px;}
.transcript-text{font-family:var(--font-display); font-size:17.5px; line-height:1.75;
  color:var(--text-1); letter-spacing:.01em;}
.transcript-compare{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.transcript-diff{font-family:var(--font-display); font-size:16px; line-height:2; margin-top:6px;}
.transcript-key{font-size:12.5px; color:var(--text-3); line-height:1.6; margin-top:8px;}

/* Verse. Lines are the unit of meaning, so each gets its own block with the
   English tucked under it rather than reflowing as a paragraph. */
.verse-line{margin-bottom:2px;}
.verse-ro{font-family:var(--font-display); font-size:16.5px; line-height:1.6; color:var(--text-1);}
.verse-en{font-size:13px; color:var(--text-3); line-height:1.5; padding:1px 0 7px 14px;
  border-left:2px solid var(--line); margin:2px 0 6px;}

/* Prev/next through the reading list, sitting beside the audio controls. */
/* A play control with nothing behind it — shown inert rather than omitted, so
   the line still reads as a line and the gap is explained once above. */
.audio-none{opacity:.3; cursor:default; pointer-events:none;}
.to-top{position:fixed; left:50%; margin-left:-21px; bottom:20px; z-index:60; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--text-1);
  box-shadow:0 3px 14px rgba(0,0,0,.16); cursor:pointer;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, border-color .12s ease;}
.to-top.show{opacity:1; transform:none; pointer-events:auto;}
.to-top:hover{border-color:var(--accent); color:var(--accent-strong);}
.reduce-motion .to-top{transition:none;}
@media (max-width:640px){ .to-top{bottom:14px;} }
.theme-toggle{position:fixed; right:16px; bottom:16px; z-index:60; display:flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--text-3); font-family:var(--font-body); font-size:12.5px; text-transform:lowercase;
  box-shadow:var(--shadow); cursor:pointer; transition:color .12s ease, border-color .12s ease;}
.theme-toggle:hover{color:var(--text-1); border-color:var(--line-strong);}
.reduce-motion .theme-toggle{transition:none;}
@media (max-width:640px){ .theme-toggle{right:14px; bottom:14px;} }
.teacher-chip{font-size:10.5px; font-weight:800; letter-spacing:.6px; padding:3px 8px;
  border-radius:999px; border:1px solid var(--pine); background:var(--pine-soft);
  color:var(--pine); cursor:pointer;}
.num-word{font-variant-numeric:tabular-nums;}
.reading-nav{display:flex; align-items:center; gap:4px;}
.reading-arrow{width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--text-1);
  border-radius:var(--radius-s); cursor:pointer; font-size:15px; line-height:1;
  transition:background .12s ease, border-color .12s ease;}
.reading-arrow:hover:not(:disabled){background:var(--hover-surface); border-color:var(--accent);}
.reading-arrow:disabled{opacity:.32; cursor:default;}
.reading-count{font-size:11.5px; color:var(--text-3); min-width:44px; text-align:center;}
.unit-nav{display:flex; align-items:center; gap:4px; flex-shrink:0;}
.unit-arrow{width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--text-1);
  border-radius:var(--radius-s); cursor:pointer; font-size:15px; line-height:1;
  transition:background .12s ease, border-color .12s ease;}
.unit-arrow:hover:not(:disabled){background:var(--hover-surface); border-color:var(--accent);}
.unit-arrow:disabled{opacity:.32; cursor:default;}
.unit-count{font-size:11.5px; color:var(--text-3); min-width:44px; text-align:center;}

/* Embedded video keeps its aspect ratio at any width. */
.video-frame{position:relative; width:100%; max-width:640px; aspect-ratio:16/9;
  border-radius:var(--radius-s); overflow:hidden; background:#000;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.tw.ok{color:var(--text-1);}
.tw.near{color:var(--pine); border-bottom:2px solid var(--pine); }
.tw.missed{color:var(--brick); text-decoration:line-through; text-decoration-thickness:1.5px; opacity:.8;}

.unit-node{display:flex; gap:12px; align-items:flex-start; padding:12px 10px; border-radius:var(--radius-s); cursor:pointer;}
.unit-node:hover{background:var(--hover-surface);}
.unit-node.current{background:var(--accent-soft);}
.unit-node .status-dot{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:2px;}
.status-dot.done{background:var(--pine);color:#fff;}
.status-dot.current{background:var(--accent);color:#fff;}
.status-dot.open{border:2px solid var(--line-strong);color:var(--text-3);background:transparent;}
.status-dot.locked{background:var(--hover-surface);color:var(--text-3);}
.unit-node .u-title{font-size:14px;font-weight:700;color:var(--text-1);}
.unit-node .u-sub{font-size:12px;color:var(--text-3);margin-top:1px;}
.unit-node.locked{opacity:.5;cursor:default;}
.unit-node.locked:hover{background:none;}

.level-block + .level-block{margin-top:14px;}
.level-head{display:flex;align-items:center;gap:7px;justify-content:space-between;width:100%;
  padding:7px 10px;border:none;border-bottom:1px solid var(--line);margin-bottom:6px;
  background:none;cursor:pointer;text-align:left;border-radius:var(--radius-s) var(--radius-s) 0 0;}
.level-head:hover{background:var(--hover-surface);}
.level-head h3{font-size:14.5px;flex:1;}
.level-head .lvl-pct{font-family:var(--font-mono);font-size:12px;color:var(--text-3);flex:0 0 auto;}
.level-head .chev{display:inline-block;font-size:16px;line-height:1;color:var(--text-3);
  transition:transform .15s ease;flex:0 0 auto;width:10px;}
.level-head .chev.open{transform:rotate(90deg);}

.exercise-shell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow);padding:28px 30px;}
.exercise-kicker{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.exercise-prompt{font-size:18px;line-height:1.5;margin-bottom:18px;font-weight:500;}
.exercise-prompt .ro{font-family:var(--font-display);}

.mcq-option{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px;border-radius:var(--radius-s);border:1.5px solid var(--line-strong);background:var(--surface);cursor:pointer;font-size:15px;margin-bottom:9px;}
.mcq-option:hover{border-color:var(--accent);}
.mcq-option.selected{border-color:var(--accent);background:var(--accent-soft);}
.mcq-option.show-correct{border-color:var(--pine);background:var(--pine-soft);}
.mcq-option.show-wrong{border-color:var(--brick);background:var(--brick-soft);}
/* Answered options stay fully legible — the learner is meant to read them. */
.mcq-option:disabled{opacity:1;cursor:default;color:var(--text-1);}
.mcq-option:disabled:hover{border-color:var(--line-strong);}
.mcq-option.show-correct:disabled:hover{border-color:var(--pine);}
.mcq-option.show-wrong:disabled:hover{border-color:var(--brick);}
.status-dot.soon{border:2px dashed var(--line-strong);color:var(--text-3);background:transparent;font-size:9px;}
.mcq-letter{width:24px;height:24px;border-radius:50%;background:var(--hover-surface);color:var(--text-2);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}

.sentence-bank{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;padding:12px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-s);margin-bottom:12px;}
.word-pool{display:flex;flex-wrap:wrap;gap:8px;}

/* Paired-sentence contrast table. */
.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;}
.contrast-head{background:var(--hover-surface);padding:8px 12px;font-size:11px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;color:var(--accent-strong);}
.contrast-cell{background:var(--surface);padding:11px 12px;}
.contrast-cell .ro{font-family:var(--font-display);font-size:15.5px;display:flex;gap:7px;align-items:flex-start;}
.contrast-cell .ro > span:first-child{flex:1;}
.contrast-cell .en{font-size:12.5px;color:var(--text-3);margin-top:3px;}
@media (max-width:600px){ .contrast-grid{grid-template-columns:1fr;} .contrast-head:nth-of-type(2){display:none;} }

table.conj-table{border-collapse:collapse;width:100%;font-size:14.5px;}
table.conj-table th, table.conj-table td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;}
table.conj-table th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);font-weight:700;}
table.conj-table td.ro{font-family:var(--font-display);font-size:16px;}

.vocab-card{border:1px solid var(--line);border-radius:var(--radius-m);padding:16px 18px;background:var(--surface);}
.vocab-card .headword{font-family:var(--font-display);font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px;}
.vocab-card .pos{font-size:11.5px;color:var(--text-3);font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-top:2px;}
.vocab-card .en{font-size:14.5px;color:var(--text-2);margin-top:6px;}
.vocab-card .ex{font-family:var(--font-display);font-size:14.5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-style:italic;}
.vocab-card .ex-en{font-size:12.8px;color:var(--text-3);margin-top:3px;font-style:normal;}

.mastery-tag{font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:5px;}
.mastery-tag.New{background:var(--hover-surface);color:var(--text-3);}
.mastery-tag.Learning{background:var(--brick-soft);color:var(--brick);}
.mastery-tag.Familiar{background:var(--accent-soft);color:var(--accent-strong);}
.mastery-tag.Strong{background:var(--pine-soft);color:var(--pine);}
.mastery-tag.Mastered{background:var(--pine);color:#fff;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:760px){.grid-2, .grid-3{grid-template-columns:1fr;}}

.stat-tile{border:1px solid var(--line);border-radius:var(--radius-m);padding:16px 18px;background:var(--surface);}
.stat-tile .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;color:var(--text-1);}
.stat-tile .lbl{font-size:12px;color:var(--text-3);font-weight:600;margin-top:2px;}

.tab-row{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.tab-row button{background:none;border:none;padding:10px 4px;margin-right:18px;font-size:13.5px;font-weight:700;color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;}
.tab-row button.active{color:var(--text-1);border-color:var(--accent);}

.dialogue-line{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.dialogue-line .speaker{width:74px;flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.3px;padding-top:10px;}
.dialogue-line .bubble{background:var(--bubble);border-radius:14px;padding:11px 15px;flex:1;}
.dialogue-line.me .bubble{background:var(--accent-soft);}
.dialogue-line .ro-text{font-family:var(--font-display);font-size:16px;}
.dialogue-line .en-text{font-size:12.5px;color:var(--text-3);margin-top:4px;}

.kbd{font-family:var(--font-mono);font-size:11px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:1px 6px;color:var(--text-2);background:var(--hover-surface);}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

.link-word{cursor:pointer;border-bottom:1.5px dotted var(--accent);}
.link-word:hover{background:var(--accent-soft);}
/* No entry behind it — still clickable, but the underline would be a promise
   the gloss cannot keep. */
.link-word-unknown{border-bottom-color:transparent;}
.link-word-unknown:hover{background:var(--hover-surface);}
.gloss-pop b{display:block;font-family:var(--font-display);font-size:14.5px;margin-bottom:3px;}
/* pointer-events must stay ON: the popup now carries a replay control. */
.gloss-pop{position:fixed;z-index:100;background:var(--ink-950);color:#fff;padding:9px 12px;border-radius:8px;font-size:12.5px;max-width:240px;box-shadow:var(--shadow);}
/* currentColor so it reads on both the dark and light popup grounds. */
.gloss-play{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 9px;
  border-radius:999px;border:1px solid currentColor;background:transparent;
  color:inherit;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;opacity:.75;}
.gloss-play:hover{opacity:1;}
.gloss-play svg{width:10px;height:10px;}
:root[data-theme=dark] .gloss-pop{background:#f2f0e9;color:#181d24;}
@media (prefers-color-scheme:dark){.gloss-pop{background:#f2f0e9;color:#181d24;}}
:root[data-theme=light] .gloss-pop{background:var(--ink-950);color:#fff;}

.empty-state{text-align:center;padding:60px 20px;color:var(--text-3);}
.fade-in{animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

.locked-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-3);}

.course-path-line{width:2px;background:var(--line);flex:0 0 auto;margin:0 auto;}