:root {
  --ink: #1d2926; --muted: #5c6a66; --paper: #fbfaf5; --card: #fff;
  --line: #dce2dc; --forest: #174f42; --forest-2: #0e3a31; --mint: #dcefe5;
  --amber: #c98a2e; --amber-soft: #fff6e6; --coral: #a8473a; --focus: #1f6fd1;
  --on-forest: #fff; --header-bg: rgba(251,250,245,.95); --panel: #f1f4ed; --track: #d4ddd5;
  --surface: #f6f8f3; --surface-faint: #fbfcfa; --rule-faint: #eef1ec; --planned: #8c9894;
  --control-line: #c9d2cb; --control-line-strong: #aeb9b2; --field: #fffdf8;
  --hover-tint: rgba(255,255,255,.7); --hover-mint: #eef5f0; --shadow-tint: rgba(23,79,66,.06);
  --ok: #1d6e45; --ok-line: #2c8a5b; --ok-bg: #eef8f1; --warn: #8a5a0c;
  --bad: #a43e31; --bad-line: #b4574a; --bad-bg: #fdf1ee; --bad-line-soft: #e5bcb5;
  --amber-line: #e2cfa6; --amber-ink: #7a5a1f; --anchor-line: #8a7a5c; --note-ink: #4b4436; --note-muted: #5b5141;
  --flash: #ffe7a8; --mark: #ffe08a; --badge: #eee9dc;
  --diagram-bg: #fffaf0; --img-bg: #efe9da;
  --shadow: 0 16px 45px rgba(23, 79, 66, .08);
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --header: 64px;
  color-scheme: light;
}
/* Night mode is the default; the header toggle stores data-theme="light" to opt out.
   Screen only, so printing stays dark-on-white. */
@media screen {
  :root:not([data-theme="light"]) {
    --ink: #e3e7e1; --muted: #a2b1ab; --paper: #121816; --card: #1a2220;
    --line: #2f3b37; --forest: #6cc1a4; --forest-2: #8fd3bb; --mint: #1d3a31;
    --amber: #d9a650; --amber-soft: #2a2417; --coral: #e5917f; --focus: #7ab0ff;
    --on-forest: #0d1714; --header-bg: rgba(18,24,22,.92); --panel: #161e1c; --track: #2b3633;
    --surface: #1f2826; --surface-faint: #1d2523; --rule-faint: #252f2c; --planned: #6c7b76;
    --control-line: #3c4a45; --control-line-strong: #566661; --field: #161e1c;
    --hover-tint: rgba(255,255,255,.05); --hover-mint: #1b2e28; --shadow-tint: rgba(0,0,0,.3);
    --ok: #82d4a6; --ok-line: #4daa7a; --ok-bg: #173022; --warn: #e3b562;
    --bad: #f09a8e; --bad-line: #c7685a; --bad-bg: #36201c; --bad-line-soft: #6a3a33;
    --amber-line: #5c4c2f; --amber-ink: #e6c88c; --anchor-line: #a8977a; --note-ink: #d9d0be; --note-muted: #b5aa95;
    --flash: #5a4a1b; --mark: #6b5416; --badge: #2d2920;
    --diagram-bg: #f3ecdc; --img-bg: #252b29;
    --shadow: 0 16px 45px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.55; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--forest); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 30; padding: .7rem 1rem; color: var(--on-forest); background: var(--forest); border-radius: .4rem; }
.skip-link:focus { top: .75rem; }

/* ---------- header and course panel */
.site-header { height: var(--header); padding: 0 clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--header-bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); }
.brand { display: flex; gap: .7rem; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.brand-mark { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 50% 48% 52%; color: var(--on-forest); background: var(--forest); font: italic 700 1.15rem var(--serif); transform: rotate(-3deg); }
.brand strong, .brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand strong { font-family: var(--serif); }
.brand small { color: var(--muted); font-size: .72rem; letter-spacing: .05em; }
.header-actions { display: flex; gap: .5rem; flex: none; }
.header-start { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.nav-toggle { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-left: -.4rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--forest); cursor: pointer; }
.nav-toggle:hover { background: var(--hover-mint); }
.nav-toggle svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-toggle .pane { stroke: none; fill: transparent; transition: fill .15s; }
.nav-toggle[aria-expanded="true"] .pane { fill: currentColor; opacity: .3; }
.nav-toggle .icon-menu, .nav-toggle .icon-close { display: none; }
.pill { border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: .42rem .85rem; color: var(--forest); font-size: .85rem; font-weight: 700; }
.theme-toggle { min-width: 2.3rem; font-size: 1rem; line-height: 1.2; }
.pill[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }
.app-shell { min-height: calc(100vh - var(--header)); display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
.course-panel { padding: 2rem 1.25rem; background: var(--panel); border-right: 1px solid var(--line); height: calc(100vh - var(--header)); overflow-y: auto; position: sticky; top: var(--header); }
.course-title { margin: .1rem 0 .4rem; font: 700 1.45rem/1.15 var(--serif); }
.course-heading p:last-child { margin: 0; color: var(--muted); font-size: .88rem; }
.eyebrow { margin: 0 0 .3rem; color: var(--coral); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.progress-block { margin: 1.4rem 0 .9rem; }
.progress-copy { display: flex; justify-content: space-between; font-size: .8rem; }
.progress-track { height: 7px; margin-top: .45rem; background: var(--track); border-radius: 99px; overflow: hidden; }
.progress-fill { display: block; width: 0; height: 100%; background: var(--forest); transition: width .3s; }
.panel-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 1.2rem; font-size: .86rem; font-weight: 700; }
.site-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.6rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; }
.site-links a.pill { text-decoration: none; }
.nav-part { margin-bottom: 1rem; }
.nav-part-title { margin: 0 0 .3rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lesson-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.lesson-link { width: 100%; padding: .42rem .55rem; display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: baseline; gap: .4rem; border-radius: .5rem; color: var(--ink); text-decoration: none; font-size: .88rem; }
a.lesson-link:hover { background: var(--hover-tint); }
.lesson-link[aria-current="page"] { background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 4px 14px var(--shadow-tint); font-weight: 700; }
.lesson-link.planned { color: var(--planned); }
.lesson-number { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.lesson-check { color: var(--forest); font-weight: 900; }

/* ---------- main column */
main { width: 100%; max-width: 76rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3.5rem) 4rem; container-type: inline-size; }
main:focus { outline: none; }
.status-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--card); }
.status-card.error { color: var(--bad); border-color: var(--bad-line-soft); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .7rem 1rem; border-radius: .5rem; font-weight: 800; text-decoration: none; line-height: 1.2; }
.button.primary { color: var(--on-forest); background: var(--forest); border: 1px solid var(--forest); }
.button.primary:hover { background: var(--forest-2); }
.button.secondary { color: var(--forest); background: var(--card); border: 1px solid var(--forest); }
.small-button { border: 1px solid var(--control-line); border-radius: .4rem; padding: .4rem .7rem; background: var(--surface); color: var(--forest); font-size: .85rem; font-weight: 700; }
.small-button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }

/* ---------- intro and overview */
.intro-card { max-width: 40rem; padding: clamp(1.25rem, 4vw, 2.5rem); background: var(--card); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); font-size: 1.05rem; }
.intro-card h1 { margin: 0 0 1rem; font: 700 clamp(1.8rem, 5vw, 2.4rem)/1.1 var(--serif); }
.intro-actions { margin-top: 1.5rem; }
.overview-header h1 { margin: 0; font: 700 clamp(2.1rem, 6vw, 3.6rem)/1.02 var(--serif); letter-spacing: -.02em; }
.overview-subtitle { margin: .6rem 0 0; color: var(--muted); font: italic 1.15rem var(--serif); }
.overview-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0; }
.overview-progress { max-width: 28rem; margin-bottom: 2rem; }
.parts { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.part { padding: 1.1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: .9rem; }
.part-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0 0 .7rem; font: 700 1.25rem var(--serif); }
.part-number { color: var(--coral); font: 800 .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.part-title small { color: var(--muted); font: 500 .78rem var(--sans); }
.chapter-list { margin: 0; padding: 0; list-style: none; }
.chapter-list li > * { display: grid; grid-template-columns: 1.8rem 1fr auto; gap: .5rem; align-items: baseline; padding: .35rem .2rem; border-top: 1px solid var(--rule-faint); text-decoration: none; color: var(--ink); }
.chapter-list a:hover .chapter-title { text-decoration: underline; }
.chapter-list .is-planned > * { color: var(--planned); }
.chapter-number { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.chapter-title { font-family: var(--serif); }
.chapter-state { color: var(--muted); font-size: .72rem; }
.chapter-state.done { color: var(--forest); font-weight: 800; }

/* ---------- lesson header and toolbar */
.lesson-header { position: relative; margin-bottom: 1rem; }
.lesson-header h1 { margin: .1rem 0 0; font: 700 clamp(2.1rem, 6vw, 3.6rem)/1.02 var(--serif); letter-spacing: -.02em; outline: none; }
.status-badge { position: absolute; top: 0; right: 0; padding: .2rem .55rem; background: var(--badge); border-radius: 99px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.lesson-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.6rem; }

/* ---------- pictures */
.scene { margin: 1.4rem 0 1.6rem; }
.scene.cover { margin: 0 0 2rem; }
.enlarge { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: .6rem; }
.scene img { display: block; width: 100%; height: auto; border-radius: .6rem; background: var(--img-bg); }
.reading-width { max-width: 40rem; }

/* ---------- story and margin */
.story-section { margin: 0 0 2.2rem; }
.section-title { margin: 0 0 .7rem; font: 700 1.2rem var(--serif); color: var(--forest); }
.section-number { color: var(--coral); margin-right: .15rem; }
.section-body { position: relative; }
.prose-col { font: 1.2rem/1.75 var(--serif); text-wrap: pretty; min-width: 0; }
.story-para { margin: 0 0 .8em; }
.seg { border-radius: .2rem; scroll-margin-top: calc(var(--header) + 2rem); }
.story { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.seg.flash, .note.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { background: var(--flash); box-shadow: 0 0 0 .2rem var(--flash); } 100% { background: transparent; box-shadow: none; } }
/* Story words (tap-to-gloss): no mark until tapped, then a soft highlight. */
.w { border-radius: .15rem; }
.has-glosses .w { cursor: pointer; }
.has-glosses .w:hover { background: var(--hover-mint); }
.w.w-active { background: var(--mint); box-shadow: 0 0 0 .1rem var(--mint); }
.w:focus { outline: none; }
.w:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.anchor { border-radius: .15rem; text-decoration: underline var(--amber); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.anchor.paired { background: var(--amber-soft); text-decoration-color: var(--amber); }
.note-marker { display: inline-block; margin-left: .15rem; padding: 0 .3rem; border: 1px solid var(--amber-line); border-radius: 99px; background: var(--amber-soft); color: var(--amber-ink); font: 700 .75rem/1.4 var(--sans); vertical-align: super; }
/* Narrow screens: the paragraph's text notes run as one quiet line beneath it. */
.para-notes { margin: -.45em 0 1em; padding: .05rem 0 .05rem .6rem; border-left: 2px solid var(--amber-line); font: .95rem/1.5 var(--serif); color: var(--note-ink); }
.para-notes .note-gloss { display: inline-block; max-width: 100%; margin-right: 1.1em; padding: 0 .15rem; border: 0; border-radius: .2rem; font: inherit; white-space: normal; }
.para-notes .note-gloss:last-child { margin-right: 0; }
.para-notes .note-gloss.paired { background: var(--amber-soft); box-shadow: 0 0 0 .1rem var(--amber-line); }
.margin-col { display: none; }
.note { margin: 0; color: var(--note-ink); }
.note-gloss { font: .95rem/1.35 var(--serif); white-space: pre-line; padding-left: .55rem; border-left: 2px solid var(--amber-line); }
.note.paired { background: var(--amber-soft); border-left-color: var(--amber); }
.pronunciation-note { margin: .25rem 0 .9rem; padding: .45rem .75rem; background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: 0 .4rem .4rem 0; font: .95rem/1.4 var(--serif); }
.pronunciation-note .note-label { font-family: var(--sans); font-weight: 700; }
.course-credits { font-size: .85rem; color: var(--note-ink); }
.gloss-op { color: var(--coral); font-family: var(--sans); font-weight: 700; padding: 0 .1em; }
.note-vignette, .note-diagram { text-align: center; }
.note-vignette .enlarge { width: 7rem; margin: 0 auto; }
.note-vignette img { display: block; width: 100%; height: auto; }
.note-diagram .enlarge { width: 100%; max-width: 16rem; margin: 0 auto; }
.note-diagram img { display: block; width: 100%; height: auto; border-radius: .3rem; background: var(--diagram-bg); }
.note figcaption { margin-top: .15rem; font: italic .9rem/1.3 var(--serif); color: var(--note-muted); }
.note.missing figcaption { display: inline-block; padding: .2rem .55rem; border: 1px dashed var(--amber-line); border-radius: .4rem; font-style: normal; background: var(--amber-soft); }
.prose-col { display: flow-root; }
.prose-col .scene { clear: both; }
.note-float { float: right; clear: right; width: 5.5rem; margin: .35rem 0 .3rem .8rem; }
.note-float.note-diagram { width: 9rem; }
.note-float .enlarge { width: 100%; }
.notes-hidden .margin-col { visibility: hidden; }
.notes-hidden .note-float { display: none; }
.notes-hidden .anchor { text-decoration: none; background: none; }
.notes-hidden .note-marker, .notes-hidden .para-notes { display: none; }

@container (min-width: 48rem) {
  .section-body { display: grid; grid-template-columns: minmax(0, 40rem) minmax(10rem, 15rem); column-gap: 2rem; align-items: start; }
  .margin-col { display: flow-root; position: relative; }
  .margin-col .note { margin-bottom: .55rem; }
  .margin-col .note-gloss { margin-bottom: .4rem; }
  .margin-col .note-vignette { float: right; clear: right; width: 6.5rem; margin-left: .6rem; }
  .margin-col .note-vignette .enlarge { width: 100%; }
  .margin-col .note-diagram { clear: both; }
  .note-marker, .para-notes, .note-float { display: none; }
  .anchor { text-decoration: underline dotted var(--anchor-line); text-decoration-thickness: 1.5px; }
  .scene.cover, .lesson-toolbar, .lesson-header { max-width: 57rem; }
}
@container (min-width: 64rem) {
  .section-body { grid-template-columns: minmax(0, 41rem) 17rem; column-gap: 2.5rem; }
  .prose-col { font-size: 1.27rem; }
  .note-diagram .enlarge { max-width: 17rem; }
}

/* ---------- dictionary popup (tap-to-gloss) */
.gloss-pop { position: absolute; z-index: 25; overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; width: max-content; max-width: min(19rem, calc(100vw - 1rem)); padding: .5rem .75rem .55rem; color: var(--ink); background: var(--card); border: 1px solid var(--control-line); border-radius: .6rem; box-shadow: 0 10px 30px var(--shadow-tint), 0 2px 6px rgba(0,0,0,.12); font: .95rem/1.35 var(--sans); }
.gloss-entry + .gloss-entry { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.gloss-head, .gloss-en, .gloss-note { margin: 0; }
.gloss-word { font: 700 1.08rem var(--serif); }
.gloss-phrase .gloss-word { color: var(--forest); }
.gloss-lemma { font: italic 1rem var(--serif); color: var(--note-ink); }
.gloss-pos { font-size: .8rem; color: var(--muted); }
.gloss-en { margin-top: .1rem; }
.gloss-note { margin-top: .2rem; font-size: .84rem; color: var(--muted); }
.gloss-alts { margin: .35rem 0 0; padding: .3rem 0 0; list-style: none; border-top: 1px dashed var(--line); font-size: .82rem; color: var(--muted); }
.gloss-alts .gloss-lemma { font-size: .9rem; }

/* ---------- lightbox */
.lightbox { max-width: min(96vw, 70rem); max-height: 94vh; padding: 1rem; border: 0; border-radius: .8rem; background: var(--card); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.lightbox::backdrop { background: rgba(20, 28, 25, .72); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; object-fit: contain; }
.lightbox figcaption { margin-top: .5rem; text-align: center; font: italic 1.15rem var(--serif); }
.lightbox form { display: flex; justify-content: flex-end; margin-top: .6rem; }

/* ---------- grammar */
.grammar { margin: 3rem 0; padding: clamp(1rem, 3vw, 1.75rem); background: var(--card); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); }
.grammar h2, .pensa-head h2 { margin: 0 0 .6rem; font: 700 1.6rem var(--serif); }
.grammar-rule { margin: 0 0 1rem; font: 1.1rem/1.6 var(--serif); padding: .6rem .8rem; background: var(--amber-soft); border-radius: .5rem; }
.bridge-language { font-style: italic; }
.grammar-bridge-note { margin: 0 0 1rem; padding-left: .65rem; border-left: 2px solid var(--amber-line); font-family: var(--serif); white-space: pre-line; }
.table-wrap { overflow-x: auto; margin: 0 0 1.1rem; }
.grammar table { border-collapse: collapse; min-width: 100%; font: 1rem/1.4 var(--serif); }
.grammar caption { caption-side: top; text-align: left; padding: 0 0 .35rem; font-weight: 700; color: var(--forest); }
.grammar th, .grammar td { padding: .45rem .6rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.grammar th { background: var(--panel); font-family: var(--sans); font-size: .85rem; }
.grammar-examples { margin: 0 0 1rem; padding-left: 1.2rem; font: 1.05rem/1.6 var(--serif); }
.story-link { margin-left: .2rem; font: 700 .78rem var(--sans); white-space: nowrap; }
.nodyn summary { cursor: pointer; font-weight: 700; color: var(--forest); }
.nodyn p { margin: .5rem 0 0; color: var(--muted); }
.grammar .nodyn[open] p { color: var(--ink); margin-top: 1rem; }
.seg-ref { padding: 0 .12em; border-radius: .2rem; color: var(--forest); text-decoration: none; }
.seg-ref:not(.seg-ref-words) { font: 700 .8em var(--sans); }
.seg-ref-words { font-family: var(--serif); text-decoration: underline dotted; text-underline-offset: .2em; }
.seg-ref:hover { background: var(--mint); }

/* ---------- pensa */
.pensa { margin: 3rem 0; }
.pensa-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.pensum { margin: 1rem 0 1.4rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--card); overflow: hidden; }
.pensum-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .85rem 1.1rem; color: var(--on-forest); background: var(--forest); }
.pensum-head h3 { margin: 0; font: 700 1.2rem var(--serif); }
.pensum-head .en-hint { flex-basis: 100%; margin: 0; font-size: .85rem; opacity: .85; }
.pensum-head .small-button { background: var(--card); }
.word-bank { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem 1.1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.chip { border: 1px solid var(--control-line); border-radius: 99px; padding: .3rem .75rem; background: var(--card); font: 1rem var(--serif); }
.chip:hover { border-color: var(--forest); background: var(--mint); }
.enghraifft { padding: .7rem 1.1rem; border-bottom: 1px dashed var(--line); font: 1.02rem var(--serif); background: var(--surface-faint); }
.enghraifft-label { margin-right: .5rem; color: var(--coral); font: 800 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.items { margin: 0; padding: 0 1.1rem 0 2.6rem; }
.item { padding: .85rem 0; border-bottom: 1px solid var(--rule-faint); }
.items:last-child .item:last-child { border-bottom: 0; }
.item::marker { color: var(--muted); font-size: .85rem; }
.prompt { margin: 0 0 .45rem; font: 1.08rem/1.9 var(--serif); }
.answer-field { border: 1px solid var(--control-line-strong); border-radius: .35rem; padding: .35rem .55rem; background: var(--field); font: 1.02rem var(--serif); }
.answer-field.blank { min-width: 4.5rem; max-width: 100%; padding: .05rem .35rem; border-width: 0 0 2px; border-radius: .2rem .2rem 0 0; }
.answer-field.line { width: min(100%, 30rem); }
.answer-field.self { width: min(100%, 34rem); resize: vertical; }
.answer-field:focus { outline: 3px solid rgba(201,138,46,.35); outline-offset: 1px; border-color: var(--amber); }
.answer-field::placeholder { color: var(--muted); opacity: 1; font-weight: 600; letter-spacing: .03em; }
.answer-field.is-correct { border-color: var(--ok-line); background: var(--ok-bg); }
.answer-field.is-wrong { border-color: var(--bad-line); background: var(--bad-bg); }
.answer-line { margin: 0 0 .45rem; }
.blank-oral { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .45rem; }
.accent-bar { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .45rem; }
.accent-bar button { min-width: 2.1rem; padding: .15rem .4rem; border: 1px solid var(--control-line); border-radius: .3rem; background: var(--card); font: 1rem var(--serif); }
.accent-bar button:hover { background: var(--mint); }
.item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.feedback { min-height: 0; margin-top: .35rem; font-size: .9rem; font-weight: 700; }
.feedback:empty { margin: 0; }
.feedback.status-correct { color: var(--ok); }
.feedback.status-accent, .feedback.status-capitalisation, .feedback.status-mutation, .feedback.status-common_wrong { color: var(--warn); }
.feedback.status-wrong, .feedback.status-empty { color: var(--bad); }
.feedback .typed { font: 1rem var(--serif); }
.feedback mark { background: var(--mark); padding: 0 .05em; border-radius: .15rem; }
.reveal { margin-top: .5rem; padding: .55rem .75rem; background: var(--surface); border-radius: .45rem; font-size: .95rem; }
.reveal p { margin: 0 0 .3rem; }
.reveal p:last-child { margin-bottom: 0; }
.answer-label { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.reveal .answer span[lang], .explanation { font-family: var(--serif); }
.term { display: inline-block; margin-right: .4rem; padding: 0 .4rem; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-family: var(--serif); }
.term.found { border-color: var(--ok-line); color: var(--ok); }
.self-grade { display: flex; gap: .4rem; margin-top: .35rem; }
.oral-only { display: none; }
.pensa.oral .oral-only { display: inline-flex; }
.pensa.oral .answer-field, .pensa.oral .answer-line, .pensa.oral .check-button, .pensa.oral .accent-bar, .pensa.oral .choices { display: none; }
.pensa.oral .blank-oral { display: inline; }

/* ---------- vocabulary, finish, pagination */
.vocabulary { margin: 2rem 0; background: var(--card); border: 1px solid var(--line); border-radius: .9rem; }
.vocabulary summary { padding: .9rem 1.1rem; cursor: pointer; font-weight: 800; }
.vocabulary summary small { color: var(--muted); font-weight: 500; }
.vocab-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0 1.5rem; margin: 0; padding: 0 1.1rem 1rem; }
.vocab-row { padding: .45rem 0; border-top: 1px solid var(--rule-faint); }
.vocab-row dt { font: 700 1.05rem var(--serif); }
.vocab-row dd { margin: 0; color: var(--muted); font-size: .88rem; }
.pos { margin-right: .45rem; color: var(--coral); font-size: .72rem; font-weight: 800; text-decoration: none; }
.lesson-finish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1.5rem; padding: 1.25rem; border-radius: 1rem; background: var(--mint); }
.finish-button { font-size: 1.05rem; padding: .85rem 1.3rem; }
.finish-button[aria-pressed="true"] { background: var(--card); color: var(--forest); }
.anki-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.lesson-pagination { display: flex; justify-content: space-between; gap: 1rem; }
.page-link { font-weight: 700; text-decoration: none; }
.page-link:hover .page-title { text-decoration: underline; }
.page-title { font-family: var(--serif); font-weight: 400; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; max-width: calc(100vw - 2rem); padding: .7rem 1rem; color: var(--on-forest); background: var(--forest-2); border-radius: .5rem; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: none; }


/* ---------- wide screens: the Lessons button folds the sidebar away */
@media (min-width: 861px) {
  .nav-collapsed .app-shell { grid-template-columns: minmax(0, 1fr); }
  .nav-collapsed .course-panel { display: none; }
}

/* ---------- small screens */
@media (max-width: 860px) {
  .nav-toggle .icon-panel { display: none; }
  .nav-toggle .icon-menu { display: block; }
  .nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }
  .app-shell { display: block; }
  .course-panel { display: none; position: fixed; inset: var(--header) 0 0; z-index: 9; height: auto; border: 0; padding: 1.25rem 1rem 2rem; }
  .course-panel.open { display: block; }
  .brand small { display: none; }
}
@media (max-width: 600px) {
  main { padding: 1.25rem 1rem 3rem; }
  .prose-col { font-size: 1.14rem; line-height: 1.72; }
  .status-badge { position: static; display: inline-block; margin-top: .4rem; }
  .items { padding: 0 .9rem 0 2.2rem; }
  .pensum-head, .word-bank, .enghraifft { padding-left: .9rem; padding-right: .9rem; }
  .lesson-finish { flex-direction: column; align-items: stretch; }
  .anki-actions .button { flex: 1; }
  .page-title { display: none; }
  .site-header { padding: 0 1rem; }
  .pill { padding: .35rem .65rem; font-size: .8rem; }
  .brand-mark { width: 32px; height: 32px; font-size: 1rem; }
  .brand strong { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .course-panel, .lesson-toolbar, .pensa, .lesson-finish, .lesson-pagination, .toast { display: none !important; }
  .app-shell { display: block; }
}

/* ---------- courses, stepper, workbook, Напиши (Russian reader features; all additive) */
/* Compact course selection stays outside the lesson drawer. */
.course-switch { min-width: 0; flex: 0 1 23rem; }
.course-switch select { width: 100%; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); color: var(--forest); font-size: .9rem; text-overflow: ellipsis; }
@media (max-width: 860px) {
  :root { --header: 112px; }
  .site-header { flex-wrap: wrap; gap: .35rem .6rem; padding-top: .5rem; padding-bottom: .5rem; }
  .header-start { flex: 1; }
  .course-switch { order: 3; flex: 1 0 100%; }
  .header-actions .suggest-link { display: none; }
}
.afterword { margin: .8rem 0 0; font-size: .92rem; }
.afterword summary { cursor: pointer; font-weight: 700; color: var(--forest); }
.afterword p { margin: .5rem 0 0; }
.afterword-sources { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .85rem; }
.lesson > .afterword { max-width: 40rem; margin: 0 0 2rem; padding: .8rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: .8rem; }
.next-card .lemma-list ol { padding-left: 1.4rem; }
.next-card .lemma { font-family: var(--serif); font-weight: 700; }
.next-card .sense { color: var(--muted); }

.stepper { margin: 0 0 1.6rem; padding: .75rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: .8rem; max-width: 57rem; }
.stepper-title { margin: 0 0 .45rem; color: var(--muted); font: 800 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.steps { display: flex; flex-wrap: wrap; gap: .35rem .45rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { display: flex; align-items: center; gap: .25rem; padding: .15rem .55rem .15rem .2rem; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; background: var(--surface-faint); }
.step.is-next { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); font-weight: 800; }
.step.is-done .step-link { color: var(--muted); }
.step-tick { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 2px solid var(--control-line-strong); border-radius: 50%; background: var(--card); color: var(--on-forest); font-weight: 900; line-height: 1; }
.step-tick[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); }
.step-link { text-decoration: none; color: var(--ink); padding: .2rem 0; }
.step-link:hover { text-decoration: underline; }
.step-end { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .4rem 0 1.4rem; }
.step-end .step-next { font-weight: 700; font-size: .9rem; }

.workbook { margin: 1.2rem 0 1.4rem; padding: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; max-width: 52rem; }
.workbook-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.workbook-head h3 { margin: 0; font: 700 1.25rem var(--serif); color: var(--forest); }
.exercise { margin: 0 0 .9rem; background: var(--card); border: 1px solid var(--line); border-radius: .7rem; overflow: hidden; }
.exercise-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface-faint); }
.exercise-head h4 { margin: 0; font: 700 1.08rem var(--serif); }
.exercise-number { color: var(--coral); }
.exercise-head .en-hint { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--muted); }
.exercise-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.exercise.is-skipped .exercise-head { border-bottom: 0; opacity: .8; }
.skipped-note { font-size: .8rem; font-weight: 800; color: var(--muted); }
.skipped-note::before { content: "⤼ "; }
.exercise .items { padding: 0 .9rem 0 2.4rem; }
.exercise-instruction { margin: .7rem .9rem; }
.exercise .word-bank, .exercise .enghraifft { padding-left: .9rem; padding-right: .9rem; }
.latin-warning { margin: 0 0 .4rem; font-size: .85rem; font-weight: 700; color: var(--warn); }
.lookalike-note { color: var(--warn); font-weight: 600; }
.feedback.status-correct_yo { color: var(--ok); }
.feedback.status-ending, .feedback.status-aspect { color: var(--warn); }
.workbook.oral .oral-only { display: inline-flex; }
.workbook.oral .answer-field, .workbook.oral .answer-line, .workbook.oral .check-button, .workbook.oral .retry-button, .workbook.oral .accent-bar, .workbook.oral .choices, .workbook.oral .latin-warning { display: none; }
.workbook.oral .blank-oral { display: inline; }
.pensa.oral .retry-button, .pensa.oral .latin-warning { display: none; }

.words-history { margin: 2.5rem 0; padding: clamp(1rem, 3vw, 1.5rem); max-width: 44rem; background: var(--amber-soft); border-left: 4px solid var(--amber); border-radius: 0 .9rem .9rem 0; }
.words-history h2 { margin: 0 0 .6rem; font: 700 1.4rem var(--serif); }
.words-history-word { font-style: italic; }
.words-history p { margin: 0 0 .6rem; font: 1.1rem/1.65 var(--serif); }
.words-history .proverb { font-style: italic; }

.napishi { margin: 3rem 0; padding: clamp(1rem, 3vw, 1.5rem); background: var(--card); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); max-width: 52rem; }
.napishi-head h2 { margin: 0 0 .5rem; font: 700 1.6rem var(--serif); }
.napishi .prompt { font: 1.12rem/1.6 var(--serif); }
.napishi .en-hint, .length-hint { margin: 0 0 .5rem; color: var(--muted); font-size: .9rem; }
.napishi-field { margin: .6rem 0; }
.napishi-field label { display: block; margin-bottom: .25rem; font-weight: 800; font-size: .85rem; color: var(--forest); }
.napishi-text { width: 100%; font-size: 1.08rem; line-height: 1.6; }
.napishi-meta { font-size: .8rem; color: var(--muted); }
.napishi-reveal h3 { margin: .7rem 0 .3rem; font: 800 .78rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.model-answers, .rubric-list, .typical-errors { margin: 0 0 .4rem; padding-left: 1.3rem; }
.model-answers li, .typical-errors li { font-family: var(--serif); margin-bottom: .3rem; }
.typical-errors s { color: var(--bad); }
.error-note { font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.mark-error { display: inline-flex; align-items: center; gap: .2rem; margin-left: .3rem; font: 600 .8rem var(--sans); color: var(--forest); white-space: nowrap; }
.mark-error input { width: 1.05rem; height: 1.05rem; }
.napishi-instruction { margin-top: .8rem !important; font-weight: 700; }
.copy-fallback { width: 100%; margin-top: .6rem; font: .85rem/1.4 ui-monospace, monospace; }

@media (max-width: 600px) {
  .workbook { padding: .6rem; margin-left: -.4rem; margin-right: -.4rem; }
  .exercise .items { padding: 0 .7rem 0 2.1rem; }
  .step { font-size: .8rem; }
}
@media print {
  .stepper, .step-end, .workbook, .napishi .item-actions { display: none !important; }
}
.timing-summary { max-width: 28rem; margin: -.6rem 0 1.8rem; padding: .7rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: .8rem; font-size: .9rem; }
.timing-summary h2 { margin: 0 0 .35rem; color: var(--muted); font: 800 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.timing-summary ul { margin: 0; padding-left: 1.1rem; }
.timing-summary .timing-total { margin: .35rem 0 0; }
.anki-known { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--forest); }
.anki-known input { width: 1.1rem; height: 1.1rem; }

/* Capability-driven practice features shared by every custom course. */
.custom-tag { display: inline-block; padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 1rem; font: .7rem var(--sans); }
.seg.receptive { font-style: italic; background: var(--amber-soft); box-decoration-break: clone; }
.preview-marker { font: .8rem var(--sans); text-decoration: none; }
.english-reveal { display: block; margin-top: .35rem; font: .85rem/1.5 var(--sans); }
.english-reveal summary { width: fit-content; color: var(--muted); cursor: pointer; }
.input-preview { display: inline-flex; flex-direction: column; vertical-align: middle; max-width: 100%; }
.greek-preview { display: block; min-height: 1.2em; color: var(--muted); font-size: .85em; white-space: pre-wrap; overflow-wrap: anywhere; }
.input-preview:has(textarea) { width: 100%; }
/* Workbook book: the course bar's second book (section exercises per chapter). */
.book-switch { display: flex; gap: .25rem; margin: 0 0 1rem; padding: .2rem; border: 1px solid var(--line); border-radius: 99px; background: var(--card); }
.book-tab { flex: 1; padding: .35rem .6rem; border: 0; border-radius: 99px; background: none; color: var(--muted); font-size: .85rem; font-weight: 700; cursor: pointer; }
.book-tab[aria-pressed="true"] { background: var(--forest); color: var(--on-forest); }
.workbook-back { margin: -.4rem 0 1rem; font-size: .92rem; }
.lesson.is-workbook .workbook { max-width: 57rem; }
.lesson.is-workbook .workbook-head h2 { margin: 0; font: 700 1.25rem var(--serif); color: var(--forest); }
.workbook-link { margin: 1.5rem 0; }
.lesson > [id], .lesson .workbook { scroll-margin-top: calc(var(--header) + 1rem); }
.return-to-workbook { position: fixed; left: 50%; bottom: 1rem; z-index: 20; transform: translateX(-50%); box-shadow: var(--shadow); }
.vocabulary-self-check [aria-pressed="true"] { color: var(--ink); background: var(--amber-soft); border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.families { margin: 2rem 0; }
.families h2 { margin: 0 0 .6rem; font: 700 1.6rem var(--serif); }
.parergon h3, .family h3 { margin: 1rem 0 .5rem; font: 700 1.3rem var(--serif); color: var(--forest); }
.family-member h4 { font: 700 1.1rem var(--serif); }
.family { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.family-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.family-member h4 { margin-bottom: .5rem; }
.family-example { font-size: .95em; }
.family-diagram { margin: 1rem auto; text-align: center; }
.family-diagram img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.parergon { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1rem; }
.vocabulary-self-check { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.vocabulary-export { margin-top: 1rem; }
@media (max-width: 700px) {
  .family-pair { grid-template-columns: 1fr; }
}

/* Greek capitals carry no accents or breathings, which text-transform keeps; Greek labels
   therefore stay in their written case (`lang` is inherited from the course content). */
:lang(grc), :lang(el) { text-transform: none !important; }


/* Japanese reference charts are plain authored text, never interpreted HTML. */
.kana-reference { overflow-x: auto; margin-block: 1rem; }
.kana-reference table { border-collapse: collapse; width: 100%; }
.kana-reference th, .kana-reference td { padding: .45rem; border: 1px solid var(--border, #bbb); text-align: start; white-space: nowrap; }
:lang(ja) .sentence { line-height: 2; }

/* Only authored Japanese story readings enter this presentation path. */
:lang(ja) .authored-ruby { ruby-align: center; ruby-position: over; }
:lang(ja) .authored-ruby rt { font-size: .55em; font-weight: 400; line-height: 1; }
:lang(ja) .gloss-reading { margin-block: .25rem; }

.suggest-link { text-decoration: none; }
@media (max-width: 640px) { .suggest-link { display: none; } }