/* U1: Literata for Dutch sentences only. The one web font on the site, loaded here and nowhere else. */
@import url("https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600&display=swap");

/* Dutch notes — THE stylesheet of the whole site (D003-ui-harness.md A1–A5, decisions U1–U7).
   Source of truth: _bmad/memory/taal/tools/site.css. export_public_worksheet.write_index()
   copies it to <site>/site.css; every page links it (home, day pages, lesson pages, library,
   word and audio pages; the local /lessons/<id>/ pages read it from /site/site.css).
   No page carries a <style> block or a :root of its own — check_ui.py fails the publish if one does.
   Colours come ONLY from the token block below (harness A0.1). Page-specific rules live here
   too, scoped by the page's body class: .lib (library/word/audio), .audio, .ws (worksheet). */

/* ---- A1 tokens ---- */
:root{
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9;
  --ink:#0F172A; --ink-2:#475569; --muted:#64748B;
  --border:#E2E8F0; --border-strong:#CBD5E1;
  --accent:#4F46E5; --accent-hover:#4338CA; --accent-ink:#4F46E5; --accent-soft:#EEF2FF; --on-accent:#FFFFFF;
  --focus:#0891B2;
  --ok:#047857; --ok-soft:#ECFDF5; --bad:#B91C1C; --bad-soft:#FEF2F2;
  --warn:#B45309; --warn-soft:#FFFBEB; --near:#7C3AED; --near-soft:#F5F3FF;
  --mark-bg:#FEF08A; --mark-ink:#0F172A;
  --gram:var(--ok); --gram-soft:var(--ok-soft);
  --chart:#4F46E5; --chart-track:#E2E8F0;
  /* frequency-list underline on news notes (worksheet .tok.f-*): six named lists, each also
     named in the word card, so colour is never the only carrier (A0.5) */
  --cat-core:#2B4C9B; --cat-general:#B26A00; --cat-spoken:#1F7A4D;
  --cat-fiction:#B03030; --cat-newspapers:#7A2E8E; --cat-web:#00727E;
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-reading:"Literata",Georgia,"Times New Roman",serif;   /* U1: Dutch sentences keep Literata */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-full:999px;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  --w-page:1024px; --w-prose:72ch; --header-h:64px;
  --dur:150ms;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#020817; --surface:#0F172A; --surface-2:#1E293B;
  --ink:#F8FAFC; --ink-2:#CBD5E1; --muted:#94A3B8;
  --border:#1E293B; --border-strong:#334155;
  --accent:#4F46E5; --accent-hover:#4338CA; --accent-ink:#A5B4FC; --accent-soft:#1E1B4B; --on-accent:#FFFFFF;
  --focus:#22D3EE;
  --ok:#34D399; --ok-soft:#022C22; --bad:#F87171; --bad-soft:#450A0A;
  --warn:#FBBF24; --warn-soft:#451A03; --near:#C4B5FD; --near-soft:#2E1065;
  --mark-bg:#FDE047; --mark-ink:#0F172A;
  --chart:#6366F1; --chart-track:#1E293B;
  --cat-core:#7FA0E8; --cat-general:#E0A050; --cat-spoken:#5FC08A;
  --cat-fiction:#E07878; --cat-newspapers:#C08BD8; --cat-web:#4FB3BF;
  --shadow-sm:none; --shadow-md:0 4px 12px rgb(0 0 0 / .4); --shadow-lg:0 10px 28px rgb(0 0 0 / .5);
}}

/* State lines and borders (playing row, hover border, linked chunk) use --accent-ink: the same
   indigo as --accent in light, and in dark the lighter step — the #4F46E5 fill is only 2.8:1
   against the dark surface, too faint for a line that carries a state (A5, 3:1). Fills with
   text on them (primary button, selected mode) keep --accent. */

/* ---- A2/A3 base ---- */
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font-sans);padding:0 16px}
a{color:var(--accent-ink)}
.wrap{max-width:var(--w-page);margin:0 auto;padding-block:32px 64px}
h1{font-size:clamp(24px,6vw,30px);line-height:1.2;font-weight:700;margin:0 0 16px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- ① header / nav ---- */
header.site{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);margin:0 -16px;padding:0 16px}
header.site .bar{max-width:var(--w-page);margin:0 auto;min-height:var(--header-h);display:flex;align-items:center;
  justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
header.site .logo{font-size:20px;font-weight:600;color:var(--ink);text-decoration:none}
header.site nav{display:flex;gap:4px;overflow-x:auto}
header.site nav a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 12px;
  border-radius:var(--r-md);white-space:nowrap;transition:background-color var(--dur)}
header.site nav a:hover{background:var(--surface-2)}
header.site nav a[aria-current="page"]{color:var(--accent-ink);background:var(--accent-soft)}
@media (max-width:639px){header.site .bar{padding-block:8px}header.site nav{width:100%;margin-left:-12px}}
.crumb{font-size:14px;color:var(--muted);margin:0 0 8px}
.crumb a{color:var(--accent-ink);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---- ② section label ---- */
h2.sec{font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:48px 0 12px}
h2.sec:first-child{margin-top:0}

/* ---- ⑦ card ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:16px}
@media (min-width:768px){.card{padding:24px}}

/* ---- ③ progress block + line chart (home ①, /words/) ---- */
.vp .hero{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;margin:0}
.vp .big{font-size:36px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.vp .of{font-size:16px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vp .asof{font-size:14px;color:var(--muted);margin:8px 0 16px}
.vp figure{margin:0;overflow-x:auto}
@media (max-width:639px){.vp .plot{min-width:560px}}   /* axis labels stay legible; the chart scrolls in its own box */
.vp .plot{position:relative}
.vp svg{display:block;width:100%;height:auto;overflow:visible}
.vp svg text{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.vp .hit{cursor:crosshair}
.vp .tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:4px 8px;font-size:13px;color:var(--ink);
  white-space:nowrap;opacity:0;transition:opacity var(--dur)}
.vp .more{margin:12px 0 0;font-size:14px}
.vp h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:24px 0 12px}
.vp .bars{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.vp .bl{font-size:14px}
.vp .bv{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.vp .bar{position:relative;height:10px;background:var(--chart-track);border-radius:var(--r-full)}
.vp .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--chart);border-radius:var(--r-full);display:block}
.vp details{margin-top:12px}
.vp summary{font-size:13px;color:var(--ink-2);cursor:pointer}
.vp table.vpt{margin-top:16px}
.linkbtn{color:var(--accent-ink);text-decoration:none}
.linkbtn:hover{text-decoration:underline}

/* ---- ⑫ study flow (home ②) ---- */
.flow p{margin:0 0 8px;color:var(--ink-2)}
.flow dl{display:grid;grid-template-columns:4.5em 1fr;gap:12px 16px;margin:16px 0 0}
.flow dt{font-weight:600}
.flow dd{margin:0}
.flow dd span{display:block}
.flow dd b{font-weight:500;color:var(--muted);font-size:14px;margin-right:4px}

/* ---- ④ study log + More ---- */
ol.log{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.log-row{display:grid;grid-template-columns:7.5em 1fr auto;gap:12px;align-items:baseline;padding:12px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:var(--ink);
  text-decoration:none;transition:border-color var(--dur),box-shadow var(--dur)}
.log-row:hover{border-color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.log-row .d{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.log-row .m{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-weight:500}
.log-row .t{font-family:var(--font-reading);font-weight:400;color:var(--ink-2)}
.log-row .arr{color:var(--muted)}
@media (max-width:639px){.log-row{grid-template-columns:1fr auto;gap:4px 12px}.log-row .d{grid-column:1 / -1}}
details.more{margin-top:12px}
details.more > summary{list-style:none}
details.more > summary::-webkit-details-marker{display:none}
details.more[open] > summary{margin-bottom:8px}
details.more > summary::before{content:"▸";color:var(--muted)}
details.more[open] > summary::before{content:"▾"}
ul.sub{margin:4px 0 8px;padding:0 0 0 24px;font-size:14px;color:var(--ink-2)}
.daynav{margin:24px 0 0;font-size:14px}

/* ---- ⑤ tabs / segmented control ---- */
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--surface-2);border-radius:var(--r-md);max-width:100%}
.tabs > button,.tabs > a.tab{font:500 14px/1.4 var(--font-sans);border:0;background:transparent;color:var(--ink-2);
  padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;text-align:left;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur),box-shadow var(--dur)}
.tabs > button:hover,.tabs > a.tab:hover{color:var(--ink)}
.tabs > [aria-pressed="true"],.tabs > [aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
/* mode switch = "what am I doing": filled, so it reads differently from the part tabs ("where am I") */
.tabs.mode > [aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

/* ---- ⑥ buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;font:500 14px/1 var(--font-sans);
  border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background-color var(--dur),border-color var(--dur)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{min-height:32px;padding:0 12px;font-size:13px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
@media (max-width:639px){.btn,.btn.sm{min-height:44px}}

/* ---- ⑨ chip ---- */
.chip{display:inline-block;padding:2px 10px;border-radius:var(--r-full);font:600 12px/1.5 var(--font-sans);
  border:1px solid var(--border);color:var(--muted)}
.chip.study{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}

/* ---- ⑩ footer ---- */
footer.site{max-width:var(--w-page);margin:64px auto 0;padding:24px 0 32px;border-top:1px solid var(--border);color:var(--muted);font-size:14px}
footer.site .wrap-f{max-width:var(--w-page);margin:0 auto}
footer.site a{color:var(--accent-ink)}

/* =====================================================================================
   Library pages — /collocations/, /grammar/, /words/ and their entries (registry.py,
   word_pages.py): <body class="lib">. The audio pages add .audio.
   ===================================================================================== */
.lib h1{margin-bottom:4px}
.lib h1 small{font-size:16px;color:var(--ink-2);font-weight:400;margin-left:12px}
.lib h2{font-size:20px;line-height:1.3;font-weight:600;margin:32px 0 12px}
.lib .sub{color:var(--ink-2);margin:0 0 24px;max-width:70ch}
.lib .pill{display:inline-block;padding:2px 10px;border-radius:var(--r-full);font:600 12px/1.5 var(--font-sans);
  background:var(--accent-soft);color:var(--accent-ink);margin-right:8px}
.lib .pill.produced{background:var(--ok-soft);color:var(--ok)}
.lib .pill.solid{background:var(--ok);color:var(--bg)}
.lib .tscroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.lib table{border-collapse:collapse;width:100%;background:var(--surface)}
.lib th,.lib td{padding:8px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--border)}
.lib thead th{border-top:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  background:var(--surface-2);font-weight:600}
.lib td a.h{font-family:var(--font-reading);font-size:16px;text-decoration:none;color:var(--ink)}
.lib td a.h:hover{color:var(--accent-ink);text-decoration:underline}
.lib .sent{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;margin:8px 0;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px}
.lib .sent .n{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.lib .sent .nl{font-family:var(--font-reading);font-size:18px}
.lib .sent .en{color:var(--ink-2);font-size:15px;grid-column:2}
.lib .sent mark{background:transparent;color:var(--accent-ink);font-weight:600}
.lib .sent .go{grid-column:2;font-size:13px}
.lib .notes{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;color:var(--ink-2)}
.lib .search{font:inherit;width:100%;max-width:420px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);margin-bottom:12px}
.lib .count{color:var(--muted);font-size:13px}
@media (max-width:639px){.lib .sent{grid-template-columns:minmax(0,1fr)}.lib .sent .en,.lib .sent .go{grid-column:1}}

/* word page (/words/<lemma>/, word_pages.py) */
.wp .head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.wp .ipa{font-family:var(--font-mono);font-size:14px;color:var(--ink-2)}
.wp .pos{font-size:13px;color:var(--muted)}
.wp .rule{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin:0 0 16px}
.wp .rule p{margin:0 0 12px}
.wp .sibs{display:flex;flex-wrap:wrap;gap:8px}
.wp .sib{font-family:var(--font-reading);font-size:15px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 8px}
.wp .sib i{font-style:normal;color:var(--ink-2);font-size:13px;margin-left:4px}
.wp ul.forms{margin:0;padding-left:20px}
.wp ul.forms li{margin:0 0 4px}
.wp .freq{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.wp audio{height:32px;max-width:100%}

/* audio drill page (/lessons/<id>/audio/deel-<P>/, export_audio_page.py): <body class="lib audio"> */
body.audio header.site{position:static}   /* the player bar is the sticky thing on this page */
.audio .pl-wrap{position:sticky;top:0;z-index:20;background:var(--bg);margin:16px 0;padding:12px 0 8px;border-bottom:1px solid var(--border)}
.audio .pl-wrap .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.audio .player{margin:0;flex:1;min-width:0}
.audio audio{width:100%}
.audio .follow{font-size:13px;color:var(--muted);display:none;align-items:center;gap:4px;user-select:none}
.audio .follow.on{display:inline-flex}
.audio .meta{font-size:13px;color:var(--muted);margin:8px 0 0}
.audio .meta a{color:inherit}
.audio .dl{font-size:13px;margin:12px 0 24px}
.audio .turn{margin:0 0 8px;padding:4px 8px 4px 40px;position:relative;border-radius:var(--r-md)}
.audio .turn .i{position:absolute;left:8px;top:8px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.audio .turn .nl{font-family:var(--font-reading);font-size:18px}
.audio .turn .en{color:var(--ink-2);font-size:14px}
.audio .dsent{border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin:0 0 16px;background:var(--surface)}
.audio .dsent h3{margin:0 0 4px;font-size:18px;font-weight:600;font-family:var(--font-reading)}
.audio .dsent .en{color:var(--ink-2);font-size:14px;margin:0 0 12px}
.audio .sub-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:12px 0 4px}
.audio .drill{margin:0;font-size:14px}
.audio .drill li{margin:0 0 4px}
.audio .drill .a{font-family:var(--font-reading)}
.audio .wl{font-size:14px;margin:0}
.audio .wl code{font-size:12px;color:var(--ink-2)}
.audio .turn[data-t],.audio .dsent[data-t]{cursor:pointer}
body.audio.synced .turn[data-t]:hover,body.audio.synced .dsent[data-t]:hover{background:var(--surface-2)}
/* the line being spoken: the ⑧ "playing row" left bar */
.audio .turn.live,.audio .dsent.live{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent-ink)}
.audio .dsent.live{border-color:var(--accent-ink)}

/* =====================================================================================
   Lesson worksheet — taal-lesson-worksheet/assets/worksheet-template.html: <body class="ws">.
   Same page locally (/lessons/<id>/) and on the site (export_public_worksheet.py).
   ===================================================================================== */
body.ws header.site{position:static}   /* the video column and the filter bar are the sticky things here */
body.ws header.site .bar{max-width:1560px}
.ws .shell{display:grid;grid-template-columns:minmax(300px,38%) minmax(0,1fr);gap:0 32px;max-width:1560px;margin:0 auto}
.ws .shell .wrap{max-width:none;margin:0}
.ws .shell.novideo{grid-template-columns:minmax(0,1fr)}
.ws .shell.novideo .player{display:none}
.ws .shell.novideo .wrap{max-width:var(--w-page);margin:0 auto}
.ws .player{position:sticky;top:0;align-self:start;height:100vh;padding-block:24px;display:flex;flex-direction:column;gap:12px}
.ws .ytbox{position:relative;aspect-ratio:16/9;background:var(--surface-2);border-radius:var(--r-md);overflow:hidden;width:100%}
.ws .ytbox iframe,.ws #yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.ws .pctl{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.ws .now{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;font-size:14px;color:var(--ink-2);min-height:44px}
.ws .now b{font-family:var(--font-mono);color:var(--ink);margin-right:8px;font-weight:500}
.ws .now .nl{font-size:18px;color:var(--ink);display:inline}
.ws .now.err{color:var(--bad)}
.ws .playbtn{font:inherit;font-size:13px;line-height:1;border:1px solid var(--border);background:var(--surface);color:var(--accent-ink);
  border-radius:var(--r-full);width:32px;height:32px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-top:4px;
  transition:background-color var(--dur),border-color var(--dur)}
.ws .playbtn:hover{border-color:var(--accent-ink);background:var(--accent-soft)}
.ws .gut .num[data-play]{cursor:pointer}
.ws .row.playing{border-color:var(--accent-ink);box-shadow:inset 3px 0 0 var(--accent-ink)}
.ws .row.playing .playbtn{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* page head */
.ws h1{margin:0 0 4px;text-wrap:balance}
.ws h2{font-size:20px;line-height:1.3;font-weight:600;margin:0 0 8px}
.ws .sub{color:var(--ink-2);margin:0 0 16px;max-width:70ch}
.ws .modes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 24px}
.ws .ptabs{margin:0 0 24px}
.ws .ptabs .tabs > button{padding:8px 16px}
.ws .ptabs .pdates{display:block;font-size:12px;font-weight:400;color:var(--ink-2)}
body.ws.mode-cards .ptabs{display:none}
.ws .legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted);margin:0 0 24px}
.ws .legend > span{display:inline-flex;align-items:center;gap:8px}
.ws .sw{display:inline-block;padding:0 4px;border-radius:var(--r-sm);font-family:var(--font-reading);color:var(--ink)}
.ws .sw.pipe{color:var(--accent-ink);font-weight:600}
.ws .sw.mark{background:var(--mark-bg);color:var(--mark-ink)}
.ws .sw.nodata{color:var(--muted)}
.ws .sw.gram{text-decoration:underline double var(--gram);text-underline-offset:5px;text-decoration-thickness:1.5px}
.ws .small{font-size:14px;color:var(--ink-2);margin:8px 0;max-width:80ch}
.ws .small.tight{margin:2px 0 0}
.ws code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);padding:0 4px;border-radius:var(--r-sm)}

/* grammar table + "the two parts at a glance" */
.ws .tscroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.ws .gram-sec{margin:0 0 24px}
.ws .gram-sec table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.ws .ov{margin:0 0 24px}
.ws .ov table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.ws .gram-sec th,.ws .gram-sec td,.ws .ov th,.ws .ov td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--border)}
.ws .gram-sec tbody tr:last-child > *,.ws .ov tbody tr:last-child > *{border-bottom:0}
.ws .gram-sec thead th,.ws .ov thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);background:var(--surface-2);font-weight:600}
.ws .gram-sec tbody th{font-weight:600;white-space:nowrap}
.ws .ov tbody th{font-weight:500;width:22%}
.ws .gram-sec .rid{display:inline-block;min-width:1.5em;color:var(--gram);font-family:var(--font-mono)}
.ws .gram-sec .ex{font-family:var(--font-reading);display:flex;flex-direction:column;gap:2px}
.ws .gram-sec .ex .h{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-left:8px}
.ws .gram-sec .hits{display:flex;flex-direction:column;gap:4px}
.ws .gram-sec a{color:var(--gram);text-decoration:none;font-weight:500}
.ws .gram-sec a:hover{text-decoration:underline}
.ws .grambox{margin-top:12px;background:var(--gram-soft);border-radius:var(--r-md);padding:8px 12px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.ws .grambox .g{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.ws .grambox .hl{font-family:var(--font-reading);font-size:16px}
.ws .grambox .hl b,.ws .gram-sec .ex b,.ws #card .gramblk b{color:var(--gram);font-weight:600}
.ws .grambox .rl,.ws #card .gramblk .rl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--gram);font-weight:600}

/* stats + filter bar */
.ws .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ws .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.ws .stat b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;width:100%}
.ws .stat .k{font-family:var(--font-mono);font-size:20px;font-variant-numeric:tabular-nums}
.ws .stat .l{font-size:13px;color:var(--muted);margin-left:4px}
.ws .toolbar{position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.ws .chk{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--ink-2);cursor:pointer}
.ws .save{margin-left:auto;font-size:13px;color:var(--muted);font-family:var(--font-mono)}
.ws .save.err{color:var(--bad)}
.ws .notice{background:var(--warn-soft);color:var(--ink);border-radius:var(--r-md);padding:12px 16px;margin:12px 0;font-size:14px}

/* ⑧ sentence rows */
.ws ol.list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ws .row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm)}
.ws .row.flagged{border-color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}
.ws .row.dim{background:transparent;box-shadow:none}
.ws .row.dim .nl{font-size:16px;color:var(--muted)}
.ws .gut{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:2px}
.ws .gut .num{font-size:17px;color:var(--ink)}
.ws .gut .cum{font-size:12px}
.ws .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.ws .chip.new{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.ws .chip.focus{background:var(--near-soft);color:var(--near);border-color:transparent}
.ws .chip.gram{background:var(--gram-soft);color:var(--gram);border-color:transparent}
.ws .chip.p{font-family:var(--font-mono);font-weight:500}
.ws .nl{font-family:var(--font-reading);font-size:20px;line-height:1.6;margin:0;display:flex;flex-wrap:wrap;column-gap:.28em;row-gap:2px}
.ws .tok{font:inherit;color:inherit;background:transparent;border:0;border-bottom:3px solid transparent;padding:0 2px;margin:0 -2px;
  border-radius:var(--r-sm);cursor:pointer;line-height:inherit;transition:background-color var(--dur)}
.ws .tok:hover,.ws .tok.open{background:var(--accent-soft)}
.ws .tok.nodata{color:var(--muted)}
.ws .tok.pipe{color:var(--accent-ink);font-weight:600}
.ws .tok.mark,.ws .tok.mark:hover{background:var(--mark-bg);color:var(--mark-ink)}
.ws .tok.gram{text-decoration:underline double var(--gram);text-underline-offset:6px;text-decoration-thickness:1.5px}
.ws .tok.f-core{border-bottom-color:var(--cat-core)}
.ws .tok.f-general{border-bottom-color:var(--cat-general)}
.ws .tok.f-spoken{border-bottom-color:var(--cat-spoken)}
.ws .tok.f-fiction{border-bottom-color:var(--cat-fiction)}
.ws .tok.f-newspapers{border-bottom-color:var(--cat-newspapers)}
.ws .tok.f-web{border-bottom-color:var(--cat-web)}
.ws .punct{align-self:center}
.ws .enline{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin-top:4px}
.ws .en{font:inherit;font-size:15px;color:var(--ink-2);margin:0;max-width:72ch;cursor:pointer;background:none;border:0;text-align:left;padding:0}
.ws .en:hover{color:var(--ink)}
.ws .linkbtn{font:inherit;font-size:13px;color:var(--accent-ink);background:none;border:0;padding:0;cursor:pointer;font-weight:500}
.ws .explain{margin-top:12px;border-top:1px solid var(--border);padding-top:12px;font-size:14px;max-width:76ch}
.ws .explain h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 4px}
.ws .explain h4:first-child{margin-top:0}
.ws .explain p{margin:4px 0}
.ws .explain ul{margin:2px 0;padding-left:16px}
.ws .explain li.sub{list-style:circle;margin-left:16px;color:var(--ink-2)}
.ws .explain .none{color:var(--muted);font-style:italic}
.ws .extra{margin-top:12px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.ws .chunks,.ws .mine{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ws .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.ws .chunk{font-family:var(--font-reading);font-size:14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:0 8px}
.ws a.chunk.ref{color:inherit;text-decoration:none;border-color:var(--accent-ink);border-bottom-width:2px}
.ws a.chunk.ref:hover{background:var(--accent);color:var(--on-accent)}
.ws .note{max-width:72ch}
.ws .mine .w{font-family:var(--font-reading);background:var(--mark-bg);color:var(--mark-ink);border-radius:var(--r-sm);padding:0 8px;font-size:14px}
.ws .act{margin-top:12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.ws .btn{min-height:32px;padding:0 12px;font-size:13px}
@media (max-width:639px){.ws .btn{min-height:44px}}
/* a pressed flag button: status colour + the word on the button (A0.5); the soft pair keeps ≥4.8:1 in both modes */
.ws .flagbtn[aria-pressed="true"]{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.ws textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-md);
  padding:8px 12px;width:100%;min-height:36px;resize:vertical}
.ws .empty{color:var(--muted);padding:32px 0;text-align:center}
.ws .rc-study{list-style:none;margin:12px 0 0;padding:0}
.ws .rc-study .row{box-shadow:none;border-style:dashed}

/* news notes: extensive reading, no recite / cards / flags */
body.ws.newsnote #mRecite,body.ws.newsnote #mCards,body.ws.newsnote .flagbtn{display:none}
body.ws.newsnote .tok{cursor:default}
.ws .epwrap{margin:12px 0 0}
.ws .epwrap .eplabel{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.ws .epwrap audio{width:100%;margin-top:8px}
.ws .epwrap .tabs > button{font-size:13px;padding:4px 12px}
.ws .epwrap .chk{display:flex;font-size:13px;margin-top:8px}
body.ws.audioonly .ytbox,body.ws.audioonly .pctl{display:none}
body.ws.audioonly .epwrap{margin-top:0}

/* ⑪ hover tooltip + word card */
.ws #tip{position:fixed;z-index:30;pointer-events:none;background:var(--ink);color:var(--bg);font-size:13px;padding:4px 8px;
  border-radius:var(--r-sm);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws #tip .ipa{font-family:var(--font-mono);opacity:.75;margin-left:8px}
.ws #card{position:fixed;z-index:40;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 16px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:16px}
.ws #card .hw{font-family:var(--font-reading);font-size:24px;font-weight:600;line-height:1.2}
.ws #card .ipa{font-family:var(--font-mono);color:var(--ink-2);font-size:14px}
.ws #card .pos{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-top:8px}
.ws #card .mean{font-size:16px;margin:2px 0 8px}
.ws #card ul{margin:4px 0 0;padding-left:16px;font-size:13px;color:var(--ink-2)}
.ws #card .formnote{font-size:14px;background:var(--accent-soft);color:var(--ink);border-radius:var(--r-sm);padding:4px 8px;margin:8px 0}
.ws #card .sec{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:12px 0 2px}
.ws #card table{border-collapse:collapse;font-size:13px;width:100%}
.ws #card td{padding:2px 8px 2px 0;vertical-align:top}
.ws #card td:first-child{color:var(--ink-2);width:42%}
.ws #card td.v{font-family:var(--font-reading)}
.ws #card .fast{font-size:13px;color:var(--ink)}
.ws #card details{margin-top:12px;font-size:13px}
.ws #card summary{cursor:pointer;color:var(--accent-ink);font-weight:500}
.ws #card .ctxtag{font-size:12px;color:var(--muted)}
.ws #card .none{color:var(--muted);font-style:italic;font-size:14px;margin:8px 0}
.ws #card .cardact{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ws #card .x{position:absolute;top:8px;right:8px;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}
.ws #card .gramblk{background:var(--gram-soft);border-radius:var(--r-md);padding:8px 12px;margin:0 24px 12px 0;font-size:14px}
.ws #card .gramblk .hl{font-family:var(--font-reading);font-size:16px}
.ws .voicenote{font-size:12px;color:var(--muted)}
.ws .voicenote.gap{margin-top:8px}

/* Recite + Cards modes */
body.ws.mode-recite .shell,body.ws.mode-cards .shell{grid-template-columns:minmax(0,1fr)}
body.ws.mode-recite .player,body.ws.mode-cards .player{display:none}
body.ws.mode-recite .shell .wrap,body.ws.mode-cards .shell .wrap{max-width:860px;margin:0 auto}
body.ws.mode-recite .studyonly,body.ws.mode-cards .studyonly{display:none!important}
.ws .rc-head{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:8px 0 16px}
.ws .rc-prog{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-left:auto}
.ws .rc-list,.ws .cd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ws .rc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm)}
.ws .rc .num,.ws .cd .num{font-family:var(--font-mono);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.ws .cue{font-size:18px;margin:0 0 8px;max-width:70ch}
.ws .rc textarea{font-family:var(--font-reading);font-size:18px;background:var(--bg);min-height:48px}
.ws .rc-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.ws .rc-msg{font-size:13px;color:var(--bad)}
.ws .reveal{margin-top:12px;border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.ws .reveal .lbl{display:block;margin-bottom:2px}
.ws .reveal .nl{font-size:18px}
.ws .diff{font-family:var(--font-reading);font-size:18px;line-height:1.9;display:flex;flex-wrap:wrap;column-gap:.35em}
.ws .diff .d-miss{background:var(--warn-soft);color:var(--ink);border-bottom:2px solid var(--warn);padding:0 4px;border-radius:var(--r-sm)}
.ws .diff .d-extra{background:var(--bad-soft);color:var(--ink);text-decoration:line-through;text-decoration-color:var(--bad);padding:0 4px;border-radius:var(--r-sm)}
.ws .diff .d-near{background:var(--near-soft);color:var(--ink);border-bottom:2px dotted var(--near);padding:0 4px;border-radius:var(--r-sm)}
.ws .mk{font-family:var(--font-mono);font-size:.75em;font-weight:600;margin-right:2px}
.ws .diff .d-miss .mk{color:var(--warn)}
.ws .diff .d-extra .mk{color:var(--bad)}
.ws .diff .d-near .mk{color:var(--near)}
.ws .diff small{font-family:var(--font-sans);font-size:12px;color:var(--ink-2);margin-left:4px}
.ws .dkey{font-size:12px;color:var(--muted)}
.ws .vchip{display:inline-block;font:600 12px/1.5 var(--font-sans);padding:2px 10px;border-radius:var(--r-full)}
.ws .vchip.v-correct,.ws .vchip.v-exact{background:var(--ok-soft);color:var(--ok)}
.ws .vchip.v-partly{background:var(--warn-soft);color:var(--warn)}
.ws .vchip.v-wrong,.ws .vchip.v-dk{background:var(--bad-soft);color:var(--bad)}
.ws .vchip.v-anki{background:var(--accent-soft);color:var(--accent-ink)}
.ws .vchip.v-status{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
.ws .grade{background:var(--surface-2);border-radius:var(--r-md);padding:8px 12px;font-size:14px;display:flex;flex-direction:column;gap:8px}
.ws .grade .pats{display:flex;flex-wrap:wrap;gap:8px}
.ws .grade code{background:var(--surface)}
.ws .cd{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 16px;align-items:start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px}
.ws .cd .nl{font-size:18px}
.ws .cd .en{cursor:default}
.ws .cd .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ws .cd label{white-space:nowrap}
.ws .cd-foot{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:16px}

@media (max-width:900px){
  .ws .shell{grid-template-columns:minmax(0,1fr)}
  .ws .player{position:sticky;top:0;z-index:8;height:auto;padding-block:8px;background:var(--bg)}
  .ws .player .now{display:none}
  .ws .toolbar{position:static}
}
@media (max-width:639px){
  .ws .row{grid-template-columns:minmax(0,1fr)}
  .ws .gut{flex-direction:row;gap:12px;align-items:baseline;margin-bottom:4px}
  .ws .nl{font-size:18px}
  .ws .act,.ws .stats{grid-template-columns:minmax(0,1fr)}
  .ws .save{margin-left:0}
  .ws .ptabs .tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(9em,1fr))}
  .ws .ptabs .tabs > button{white-space:normal}
  .ws .cd{grid-template-columns:44px minmax(0,1fr)}
  .ws .cd > label{grid-column:2}
  .ws .cd label{white-space:normal}
}