/* site/assets/site.css, Chart-room, matching the videos (src/theme.ts) */
:root { --vellum:#F3EEE3; --panel:#FBF8F1; --ink:#2B2A26; --muted:#4A463F; --line:#6B5A43; --gold:#E8B931;
  --right:#3F6B45; --right-bg:#E6EFE4; --wrong:#9A3B2E; --wrong-bg:#F4E3DF;
  --serif:'Cormorant Garamond', Georgia, serif; --sans:Inter, system-ui, sans-serif; }
* { box-sizing:border-box; margin:0; }
html { background:var(--vellum); color:var(--ink); font:400 18px/1.6 var(--sans); }
img, video { max-width:100%; height:auto; display:block; }
a { color:inherit; }
.wrap { max-width:1248px; margin:0 auto; padding:0 24px; }
h1, h2, h3 { font-family:var(--serif); font-weight:600; letter-spacing:-0.01em; line-height:1.1; }
h1 { font-size:64px; } h2 { font-size:32px; } h3 { font-size:26px; }
.label { font:600 13px/1.4 var(--sans); letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
/* top bar */
.top { border-bottom:1px solid color-mix(in srgb, var(--line) 40%, transparent); }
.top__in { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px; }
.brand { font:600 22px var(--serif); text-decoration:none; white-space:nowrap; } .brand span { font:600 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-left:10px; }
.top nav { display:flex; gap:20px; align-items:center; } .top nav a { text-decoration:none; padding:10px 0; }
.top nav a[aria-current] { border-bottom:2px solid var(--ink); }
.badge { display:inline-flex; align-items:center; gap:8px; min-height:44px; border:1px solid var(--line); border-radius:999px; padding:6px 12px !important; font-size:14px; }
.dot { width:10px; height:10px; border-radius:50%; flex:none; }
.badge__short { display:none; }
/* grid sections (spec §10) */
.sec { display:grid; grid-template-columns:280px minmax(0, 856px); column-gap:64px; padding-top:40px; margin-top:96px;
  border-top:1px solid color-mix(in srgb, var(--line) 40%, transparent); }
.sec__lane h2 { margin-top:8px; }
.split { display:grid; grid-template-columns:520px 304px; column-gap:32px; }
/* lists, tags */
.rows { list-style:none; padding:0; border-top:1px solid color-mix(in srgb, var(--line) 30%, transparent); }
.rows > li { display:grid; grid-template-columns:48px 1fr auto 64px; align-items:center; gap:16px; min-height:64px;
  border-bottom:1px solid color-mix(in srgb, var(--line) 30%, transparent); }
.draft { font:700 11px var(--sans); letter-spacing:.12em; background:var(--ink); color:var(--vellum); padding:2px 6px; border-radius:3px; }
.progress__track { height:6px; background:color-mix(in srgb, var(--line) 20%, transparent); border-radius:3px; }
.progress__bar { height:6px; background:var(--gold); border-radius:3px; width:0; }
.btn { font:600 16px var(--sans); background:var(--ink); color:var(--panel); border:0; border-radius:6px; padding:14px 20px; min-height:48px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
/* quiz (spec §5, §10) */
.quiz__card { background:var(--panel); border:1px solid color-mix(in srgb, var(--line) 40%, transparent); border-radius:8px; padding:32px; max-width:856px; }
.quiz__q { margin:12px 0 20px; }
.quiz__choices { list-style:none; padding:0; display:grid; gap:10px; }
.choice { width:100%; min-height:56px; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:14px; text-align:left;
  font:500 17px var(--sans); color:var(--ink); background:#fff; border:1px solid color-mix(in srgb, var(--line) 40%, transparent); border-radius:6px; padding:10px 16px; cursor:pointer; }
.choice:disabled { cursor:default; color:var(--muted); }
.choice__key { width:28px; height:28px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:13px; }
.choice.is-right { border-color:var(--right); background:var(--right-bg); color:var(--ink); } .choice.is-right .choice__note { color:var(--right); }
.choice.is-wrong { border-color:var(--wrong); background:var(--wrong-bg); color:var(--ink); } .choice.is-wrong .choice__note { color:var(--wrong); }
.choice__note { font-weight:600; font-size:15px; }
.quiz__why { margin-top:20px; padding-left:16px; border-left:3px solid var(--right); } .quiz__why.is-wrong { border-color:var(--wrong); }
.quiz__verdict { font:600 24px var(--serif); }
/* phone fallback (spec §2): one column, no sideways scroll */
@media (max-width: 1260px) { .sec { grid-template-columns:1fr; row-gap:16px; } .split { grid-template-columns:1fr; row-gap:24px; } }
@media (max-width: 640px) { html { font-size:17px; } h1 { font-size:40px; } .sec { margin-top:56px; } .quiz__card { padding:20px; }
  .wrap { padding:0 16px; } .brand span { display:none; } .brand { font-size:19px; } .top__in { gap:8px; }
  .top nav { gap:10px; flex-wrap:nowrap; white-space:nowrap; font-size:15px; } .badge { gap:6px; padding:6px 10px !important; font-size:13px; }
  .badge__long { display:none; } .badge__short { display:inline; } .rows > li { grid-template-columns:32px 1fr auto; } .rows > li > :last-child { display:none; } }
@media (max-width: 360px) { .brand { font-size:17px; } .top nav { gap:8px; } .badge { padding:6px 8px !important; } }
/* cheat sheet print (spec §6) */
@media print { .top, .no-print, .quiz, video { display:none !important; } .sec { margin-top:16px; break-inside:avoid; } html { background:#fff; font-size:11pt; } }
/* lesson page */
.lesson-head{padding-top:64px} .question{font:italic 500 24px var(--serif);color:var(--muted)} .player{margin:32px 0} .player video,.video-missing img{width:100%;aspect-ratio:16/9;border-radius:8px;background:#000} .video-missing{position:relative} .video-missing p{position:absolute;inset:auto 0 0 0;padding:16px;background:rgba(43,42,38,.8);color:var(--panel)} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn--ghost[aria-pressed=true]{border-color:var(--right);color:var(--right)} .hint{color:var(--muted);font-size:15px} .block{margin-top:96px} .nutshell{columns:2;column-gap:32px;padding-left:1.4em} .nutshell li{break-inside:avoid;margin-bottom:12px} .stills{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px} .stills figcaption{font-size:14px;color:var(--muted);margin-top:8px} .terms{display:grid;grid-template-columns:1fr 1fr;gap:0 48px} .terms>div{padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 30%,transparent)} .terms dt{font:600 20px var(--serif)} .terms dd{margin:0;color:var(--muted);font-size:16px} .rules{margin-top:64px;padding:16px 0;border-top:1px solid color-mix(in srgb,var(--line) 40%,transparent)} .next{margin:48px 0 96px;text-align:right} @media(max-width:640px){.lesson-head{padding-top:32px}.nutshell{columns:1}.stills,.terms{grid-template-columns:1fr}}

/* power page */
.power-head{display:grid;grid-template-columns:280px minmax(0, 856px);column-gap:64px;padding-top:64px} .power-head--guide>div{grid-column:1/-1} .power-head .portrait{width:200px;border-top:6px solid var(--power)} .index{columns:2;padding-left:0;list-style:none} .index a{text-decoration:none;display:block;padding:6px 0} .video-slot{border:1px dashed var(--line);border-radius:8px;padding:20px} .boards{display:grid;grid-template-columns:1fr 1fr;gap:32px} .boards figure:first-child{grid-column:1/-1} .boards figcaption,.card figcaption{font-size:14px;color:var(--muted);margin-top:8px} .community{background:var(--panel);border-radius:8px;padding:20px 24px} .community summary{cursor:pointer;font-weight:600} .print-row{display:flex;gap:16px;align-items:center;margin:96px 0} .print-only{display:none} .rule{display:inline-block;margin-left:6px} @media(max-width:1260px){.power-head{grid-template-columns:1fr}} @media(max-width:640px){.boards{grid-template-columns:1fr}.index{columns:1}}

.hero{display:grid;grid-template-columns:1fr 316px;gap:64px;padding:96px 0 64px} .hero figure img{border-radius:4px} .path{margin-bottom:96px} .notice{margin-top:16px;padding:12px 16px;border-left:3px solid var(--line);background:var(--panel);max-width:720px;font-size:16px} .progress{max-width:336px;margin:24px 0 0 auto} .rows h3{font-size:24px} .rows a{text-decoration:none} [data-state=done] .state::before{content:"✓ Done";color:var(--right);font-weight:600} [data-state=started] .state::before{content:"◐ Started";font-weight:600} .powers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .powers li{border-top:6px solid var(--power);padding-top:16px} .prose{max-width:720px;padding:96px 0} .prose h1{margin-bottom:24px} .prose h2{margin:40px 0 12px} @media(max-width:1240px){.hero{grid-template-columns:1fr}.powers{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.powers{grid-template-columns:1fr}.progress{margin-left:0}}

/* Markdown tables inside content sections */
.sec__body table { width:100%; border-collapse:collapse; font:400 16px/1.5 var(--sans); margin:24px 0; }
.sec__body th { font:600 13px/1.4 var(--sans); letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); text-align:left; }
.sec__body th, .sec__body td { padding:10px 12px; vertical-align:top; border-bottom:1px solid color-mix(in srgb, var(--line) 30%, transparent); }
.sec__body thead th { border-top:1px solid color-mix(in srgb, var(--line) 30%, transparent); }
@media (max-width:640px) { .sec__body table { display:block; overflow-x:auto; max-width:100%; width:max-content; min-width:100%; } }

.sec__body { min-width:0; } .split > * { min-width:0; }

/* cheat sheet print (spec §6): on a power page only the .cheat block prints, on one A4 page */
@media print {
  @page { size:A4; margin:10mm; }
  main:has(> .cheat) > :not(.cheat) { display:none !important; }
  main:has(> .cheat) { max-width:none; padding:0; }
  .cheat { display:block !important; font:400 8pt/1.3 var(--sans); color:#000; }
  .cheat header { border-bottom:1px solid #999; padding-bottom:2mm; margin-bottom:3mm; }
  .cheat h1 { font-size:20pt; } .cheat .question { font-size:10pt; }
  .cheat__cols { columns:2; column-gap:6mm; }
  .cheat__sec { break-inside:avoid-column; margin-bottom:3mm; }
  .cheat h2 { font:700 8pt/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; margin-bottom:1mm; }
  .cheat ul, .cheat ol { padding-left:4mm; } .cheat li { margin-bottom:1mm; } .cheat p { margin-bottom:1mm; }
  .cheat .rule, .cheat .draft { display:none; } .cheat a { text-decoration:none; }
  .cheat figure { margin-top:3mm; break-inside:avoid; } .cheat figure img { width:auto; max-width:100%; max-height:115mm; margin:0 auto; }
}