:root{
  --bg:#0F1E1B; --surface:#16302A; --surface-2:#1E3B33; --surface-3:#264840;
  --border:#2A4A41; --text:#F3EDE1; --text-muted:#9FB8AE;
  /* --text-faint and --accent-soft/--accent-on-tint are nudged from the
     original STYLE_GUIDE.md values (#6E8C82 / #3A2A1E) — the originals read
     fine visually but fail WCAG AA text-contrast (3.3–3.9:1 measured via
     axe-core against real surfaces) on the small metadata/citation text they
     style. Same hue family, same "faint/accent" role, just enough darker or
     lighter to clear 4.5:1 — see Phase 4 accessibility pass in ROADMAP.md. */
  --text-faint:#8AA7A0;
  --accent:#E8703A; --accent-soft:#251A10; --accent-on-tint:#E8703A; --gold:#D8B868;
  --board-bg:#16302A; --board-line:#3A5A50; --piece-fill:#1E3B33; --piece-red:#E8703A; --piece-black:#F3EDE1;
  --font-serif:'Fraunces', serif; --font-sans:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace;
  --radius:10px;
}

#appRoot.light-mode{
  --bg:#F4F1EA; --surface:#FFFFFF; --surface-2:#F1EADA; --surface-3:#E7DCC3;
  --border:#DED2B4; --text:#241F16; --text-muted:#5C5442; --text-faint:#6E6649;
  --accent:#D9632A; --accent-soft:#F3DFC9; --accent-on-tint:#994018; --gold:#B8873A;
  --board-bg:#E8DCC0; --board-line:#5B4A34; --piece-fill:#FBF6EA; --piece-red:#B3402E; --piece-black:#232019;
}
.theme-toggle{margin-left:auto;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:12px;padding:7px 12px;border-radius:8px;}
.theme-toggle:hover{color:var(--text);border-color:var(--surface-3);}
*{box-sizing:border-box}
/* No color/background here on purpose: html/body sit OUTSIDE the
   #appRoot.light-mode scope, so a value resolved here would freeze at
   whichever theme was active at parse time and then get inherited as a
   fixed computed value into elements that don't redeclare it — exactly the
   bug that made "light mode" render with a dark background and near-
   invisible headings until this was caught in the Phase 4 a11y pass. `.app`
   (below) sets both explicitly instead, inside the scope that actually
   toggles. */
html,body{margin:0;padding:0;font-family:var(--font-sans);}
body{min-height:100vh;}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;margin:0;}
button{font-family:var(--font-sans);cursor:pointer;}

/* Explicit background here (not just inherited from html/body) is required:
   the light/dark theme variables are overridden on this element via
   #appRoot.light-mode, but html/body sit OUTSIDE that scope, so without this
   the page background stayed dark-mode-dark even after switching to light
   mode (caught by the Phase 4 accessibility pass — real visual bug, not
   just a contrast nitpick). */
.app{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--text);}
header.topbar{display:flex;align-items:baseline;gap:14px;padding:20px 24px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
header.topbar h1{font-size:21px;letter-spacing:0.2px;}
header.topbar .tagline{color:var(--text-faint);font-size:12.5px;}

nav.tabs{display:flex;gap:4px;padding:0 20px;margin-top:12px;border-bottom:1px solid var(--border);overflow-x:auto;}
nav.tabs button{background:none;border:none;color:var(--text-muted);font-size:13px;padding:9px 12px;border-radius:8px 8px 0 0;border-bottom:2px solid transparent;transition:color .15s;white-space:nowrap;}
nav.tabs button:hover{color:var(--text);}
nav.tabs button.active{color:var(--text);border-bottom:2px solid var(--accent);}
nav.tabs button .due-badge{display:inline-block;margin-left:6px;background:var(--accent);color:#241108;font-size:10px;font-weight:600;border-radius:20px;padding:1px 6px;vertical-align:middle;}

main{display:flex;flex:1;gap:0;min-height:0;}
.sidebar{width:260px;flex:none;border-right:1px solid var(--border);padding:16px 12px;overflow-y:auto;}
.sidebar .group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint);margin:14px 8px 7px;}
.sidebar .group-label:first-child{margin-top:2px;}
.card-item{position:relative;display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:11px 34px 11px 12px;margin-bottom:7px;color:var(--text);}
.card-item:hover{border-color:var(--surface-3);background:var(--surface-2);}
.card-item.selected{border-color:var(--accent);background:var(--surface-2);}
.card-item:focus-visible, button:focus-visible, .star-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.card-item .title{font-size:13px;font-weight:500;margin-bottom:3px;}
.card-item .meta{font-size:11px;color:var(--text-faint);}
.star-btn{position:absolute;top:8px;right:6px;background:none;border:none;color:var(--gold);font-size:16px;line-height:1;padding:4px;}
.empty-slot{border:1px dashed var(--border);border-radius:var(--radius);padding:13px 12px;margin-bottom:7px;color:var(--text-faint);font-size:12px;line-height:1.55;}
.empty-slot b{color:var(--text-muted);font-weight:500;}
.sidebar-note{color:var(--text-faint);font-size:12px;line-height:1.6;padding:4px 8px;}

.viewer{flex:1;padding:22px 26px;overflow-y:auto;}
.viewer-empty{color:var(--text-faint);font-size:14px;padding:36px 8px;max-width:460px;line-height:1.6;}
.viewer-empty h2{font-size:17px;margin-bottom:8px;color:var(--text);}
.viewer-error{color:var(--accent-on-tint);font-size:13px;padding:14px 16px;border:1px solid var(--accent);border-radius:10px;max-width:520px;line-height:1.6;background:var(--accent-soft);}

.lesson-head{margin-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.lesson-head .level-pill{display:inline-block;font-size:10.5px;padding:3px 9px;border-radius:20px;background:var(--accent-soft);color:var(--accent-on-tint);font-weight:500;margin-bottom:7px;}
.lesson-head h2{font-size:19px;margin-bottom:5px;}
.lesson-head p{color:var(--text-muted);font-size:13px;line-height:1.6;max-width:600px;margin:0;}
.star-big{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--gold);font-size:18px;padding:6px 10px;flex:none;}

.study-grid{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;}
.board-col{flex:1 1 380px;max-width:460px;}
.side-col{flex:1 1 300px;min-width:270px;display:flex;flex-direction:column;gap:12px;}

.board-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;}

.explain{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;min-height:120px;}
.explain .move-tag{font-family:var(--font-mono);font-size:12px;color:var(--accent-on-tint);margin-bottom:8px;}
.explain p{margin:0;font-size:15px;line-height:1.7;color:var(--text);}
.explain .source{margin-top:10px;font-size:11.5px;color:var(--text-faint);border-top:1px solid var(--border);padding-top:8px;}

.nav-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.nav-controls button{background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:14px;padding:12px 10px;border-radius:10px;font-weight:500;}
.nav-controls button.primary{background:var(--accent);border-color:var(--accent);color:#241108;}
.nav-controls button:disabled{opacity:0.35;cursor:default;}

.util-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.util-controls button{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:12px;padding:7px 11px;border-radius:8px;}
.util-controls button:hover{border-color:var(--surface-3);color:var(--text);}
.util-controls .step-count{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);margin-left:auto;}
.exit-focus{display:none;}

details.movelist-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:2px 4px;}
details.movelist-wrap summary{cursor:pointer;font-size:12px;color:var(--text-muted);padding:9px 10px;list-style:none;}
details.movelist-wrap summary::-webkit-details-marker{display:none;}
details.movelist-wrap summary::before{content:'▸ ';color:var(--text-faint);}
details.movelist-wrap[open] summary::before{content:'▾ ';}
.movelist{padding:2px 2px 6px;}
.movelist button{display:block;width:100%;background:none;border:none;color:var(--text-muted);font-family:var(--font-mono);font-size:11.5px;padding:6px 10px;border-radius:6px;text-align:left;line-height:1.4;}
.movelist button:hover{background:var(--surface-2);}
.movelist button.current{background:var(--surface-2);color:var(--text);}
.movelist button .idx{color:var(--text-faint);}

#appRoot.focus-mode header.topbar,
#appRoot.focus-mode nav.tabs,
#appRoot.focus-mode .sidebar{display:none;}
#appRoot.focus-mode .viewer{padding:18px 4vw;}
#appRoot.focus-mode .exit-focus{display:inline-flex;}

.glossary-section{margin-bottom:22px;max-width:640px;}
.glossary-section h3{font-size:15px;margin-bottom:10px;}
.g-row{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--border);align-items:baseline;}
.g-row .g-name{flex:0 0 130px;font-weight:500;font-size:13.5px;}
.g-row .g-desc{flex:1;color:var(--text-muted);font-size:12.5px;line-height:1.55;}

.review-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.review-row .due-note{font-size:10.5px;color:var(--text-faint);font-family:var(--font-mono);}

/* Mobile landscape: half board, half description+controls */
@media (orientation:landscape) and (max-height:520px){
  header.topbar .tagline{display:none;}
  .sidebar{display:none;}
  .viewer{padding:10px 14px;}
  .study-grid{flex-wrap:nowrap;}
  .board-col{flex:0 0 48%;max-width:none;}
  .side-col{flex:0 0 50%;min-width:0;}
  .board-wrap{padding:8px;}
  .explain{padding:10px 12px;min-height:0;}
  .explain p{font-size:13px;}
  .nav-controls button{padding:9px 8px;font-size:13px;}
}

@media (max-width:760px){
  main{flex-direction:column;}
  .sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:200px;}
  .lesson-head{flex-direction:column;}
}