/* Word popup / side panel, entry layout, paradigm tables, settings dialog. */

/* ---------------------------------------------------------- hosts */
/* The grid columns (reader | divider | panel) live in reader.css "layout". The
   panel is its own scroll box: long entries scroll inside it, wide paradigm
   tables scroll inside .pt__scroll, and nothing may widen the column. */
.panel { display: none; }
.panel, .popup { min-width: 0; max-width: 100%; overflow-x: hidden; overflow-wrap: anywhere; }
@media (min-width: 768px) and (max-width: 1099.98px) {
  /* Tablet: the panel takes its own column so it never covers the text. */
  .layout[data-panel="open"] .panel {
    display: block; position: sticky; top: var(--bar-h, 0px); align-self: start;
    height: calc(100dvh - var(--bar-h, 0px)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-raised);
    animation: slide-in var(--t-base) var(--ease-out);
  }
  .layout[data-panel="open"] .reader { padding-inline: var(--s-5); }
}
@media (min-width: 1100px) {
  .panel {
    display: block; position: sticky; top: var(--bar-h, 0px); align-self: start;
    height: calc(100dvh - var(--bar-h, 0px)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-chrome);
  }
  .layout[data-panel="open"] .panel { background: var(--bg-raised); }
}
@keyframes slide-in { from { transform: translateX(1rem); opacity: 0; } to { transform: none; opacity: 1; } }

.panel__empty { padding: var(--s-6) var(--s-5); color: var(--ink-3); font-size: var(--ui-sm); line-height: 1.55; max-width: 26rem; }
.panel__empty p { margin: 0 0 var(--s-3); }
.panel__mark { color: var(--rubric); font-family: var(--face-serif); }

.popup {
  position: fixed; inset: auto; margin: 0; padding: 0; max-width: none; max-height: none;   /* place() sets the size; the UA caps must not */
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-raised); color: var(--ink);
  box-shadow: var(--shadow-pop); overflow-y: auto; overscroll-behavior: contain;
  z-index: var(--z-modal);
}
.popup::backdrop { background: oklch(0 0 0 / 0.18); }
.popup[open] { animation: pop var(--t-base) var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* The same box opened by the pointer instead of a click (hovergloss.js): it carries the popup's own
   border, ground and shadow so the reader never meets a second, different tooltip — only where it
   hangs from and how it behaves are its own. It takes no pointer, which is what keeps it from
   flickering as the mouse reaches it, and it holds nothing to press: it goes when the pointer
   leaves the word. reader.js sets left / top; the host is the document, or an open dialog when the
   word is inside one. */
.wtip {
  position: absolute; z-index: var(--z-tooltip); pointer-events: none;
  max-height: min(20rem, 60vh);
  animation: pop var(--t-base) var(--ease-out);
}
.wtip__entry { padding: var(--s-3) var(--s-4); }
.wtip__entry .entry__form { margin-right: 0; }
.wtip__entry .entry__lemma { margin-bottom: 0; }
/* The sense list is the tooltip's new last line, so the dictionary form above it needs its space
   back and the list itself takes none below. Tighter than the panel's copy: this is a glance, and
   the tooltip cannot be scrolled (`pointer-events: none`), so it has to fit. */
.wtip__entry .entry__lemma:has(+ .wtip__senses) { margin-bottom: var(--s-2); }
.wtip__senses { margin: 0; font-size: var(--note-sm); line-height: 1.45; color: var(--ink-2); }
.wtip__more { margin: var(--s-2) 0 0; font-size: var(--ui-xs); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .wtip { animation: none; } }

/* ---------------------------------------------------------- content */
.panel__content { position: relative; padding: var(--s-4) var(--s-5) var(--s-5); outline: none; min-width: 0; max-width: 100%; }
.panel__content:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.panel__close {
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius);
  background: transparent; color: var(--ink-2); font-size: 1.5rem; line-height: 1;
}
.panel__close:hover { background: var(--bg-chrome); color: var(--ink); }

.focus {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--glow-bg); color: var(--glow-ink); border-radius: var(--radius);
  font-size: var(--note-sm); line-height: 1.5;
}
.focus__label { margin: 0 0 var(--s-1); font-weight: 600; }
.focus__note { margin: 0; }

.entry__form {
  font-family: var(--face-reading); font-weight: 400; font-size: calc(1.2rem * var(--note-scale)); overflow-wrap: anywhere;
  margin: 0 var(--tap) var(--s-1) 0; color: var(--ink-2);
}
.entry__enclitic { margin: 0 0 var(--s-2); font-size: var(--note-sm); color: var(--ink-2); }
.entry__switch { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-3); }
.entry__alt {
  min-height: 36px; max-width: 100%; white-space: normal; text-align: left; padding: 0 var(--s-3); border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); font-size: var(--ui-sm);
}
.entry__alt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.entry__meaning {
  font-family: var(--face-reading); font-size: calc(1.45rem * var(--note-scale)); line-height: 1.3; overflow-wrap: anywhere;
  margin: 0 0 var(--s-2); color: var(--ink); text-wrap: balance;
}
.entry__meaning--miss { color: var(--ink-2); font-style: italic; font-size: calc(1.2rem * var(--note-scale)); }
.entry__fallback { margin: 0; font-size: var(--note-sm); }
.entry__parse { margin: 0 0 var(--s-2); font-size: var(--note-md); color: var(--ink-2); line-height: 1.6; }
.entry__lemma { margin: 0 0 var(--s-4); font-size: var(--note-sm); color: var(--ink-2); line-height: 1.6; }
.entry__cite { font-family: var(--face-reading); font-style: italic; color: var(--ink); font-size: 1.05em; }
.entry__senses { margin: 0 0 var(--s-4); padding-left: 1.25em; font-size: var(--note-md); line-height: 1.55; }
.entry__senses li::marker { color: var(--ink-3); font-size: var(--ui-xs); }
.entry__usage { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); background: var(--bg-chrome); border-radius: var(--radius); font-size: var(--note-sm); line-height: 1.55; color: var(--ink); }
.entry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.entry__learned { color: var(--success); font-size: var(--ui-sm); padding: 0 var(--s-2); }

/* Gloss terms */
.term { position: relative; display: inline; }
.term__btn {
  background: transparent; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 0.2em; border-radius: 2px;
}
.term__btn:hover, .term__btn.is-open { color: var(--rubric-ink); text-decoration-color: currentColor; }
.term__tip {
  display: none; position: absolute; left: 0; top: calc(100% + 0.35em); z-index: var(--z-tooltip);
  min-width: min(12rem, 60vw); max-width: min(18rem, calc(100vw - 3rem)); padding: var(--s-2) var(--s-3);
  background: var(--ink); color: var(--bg); border-radius: var(--radius-sm);
  font-size: var(--ui-sm); line-height: 1.45; text-wrap: pretty; box-shadow: var(--shadow-pop);
}
.term:hover .term__tip, .term__btn:focus-visible + .term__tip, .term__btn.is-open + .term__tip { display: block; }
@media (hover: none) { .term:hover .term__tip { display: none; } .term__btn.is-open + .term__tip { display: block; } }

/* Paradigm */
.paradigm { margin: 0 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; max-width: 100%; overflow: hidden; }
.paradigm__summary { min-height: var(--tap); display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); cursor: pointer; font-size: var(--ui-md); color: var(--ink); list-style: none; line-height: 1.3; }
.paradigm__label { flex: 1; min-width: 0; text-wrap: pretty; }
.paradigm__summary::-webkit-details-marker { display: none; }
.paradigm__summary::before { content: ""; width: 0.45em; height: 0.45em; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease-out); flex: none; }
.paradigm[open] .paradigm__summary::before { transform: rotate(45deg); }
.paradigm__title { color: var(--ink-2); font-family: var(--face-reading); }
.paradigm__note { margin: 0; padding: 0 var(--s-3) var(--s-2); font-size: var(--ui-sm); color: var(--ink-2); }
/* Last resort: a wide table scrolls inside the panel, never the page. The
   right-edge fade (a scroll-attached shade, hidden by content-attached covers
   at either end) says there is more without a scrollbar. */
.pt__scroll {
  overflow-x: auto; max-width: 100%; padding: 0 var(--s-2) var(--s-2); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  --pt-bg: var(--bg-raised);
  background:
    linear-gradient(to right, var(--pt-bg) 40%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--pt-bg) 40%, transparent) right / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--scroll-shade), transparent) right / 1.5rem 100% no-repeat scroll,
    linear-gradient(to right, var(--scroll-shade), transparent) left / 1.5rem 100% no-repeat scroll;
}
@media (min-width: 1100px) { .layout:not([data-panel="open"]) .pt__scroll { --pt-bg: var(--bg-chrome); } }
.pt { border-collapse: collapse; width: 100%; font-size: var(--ui-md); table-layout: auto; }
.pt + .pt { margin-top: var(--s-2); }
.pt__caption { text-align: left; caption-side: top; padding: var(--s-2) var(--s-2) var(--s-1); font-size: var(--ui-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.pt th, .pt td { padding: 0.3em var(--s-2); text-align: left; border-top: 1px solid var(--line); vertical-align: baseline; }
.pt thead th { border-top: 0; font-weight: 500; color: var(--ink-3); font-size: var(--ui-xs); white-space: nowrap; overflow-wrap: normal; hyphens: manual; min-width: 0; }   /* never "deponen / t": the box scrolls instead */
.pt tbody th { font-weight: 400; color: var(--ink-2); font-size: var(--ui-sm); width: 1%; white-space: nowrap; padding-right: var(--s-3); }
.pt td { white-space: nowrap; }
.pt__alt { color: var(--ink-2); }
.pt__cell.is-empty { color: var(--ink-3); }
.popup .pt { font-size: var(--ui-sm); }
.popup .pt tbody th { font-size: var(--ui-xs); white-space: normal; text-wrap: pretty; max-width: 9em; }   /* long row labels wrap before the table scrolls */
.pt__cell { font-family: var(--face-reading); font-size: 1.05em; }
@media (min-width: 768px) {
  .panel .pt { font-size: var(--ui-sm); }   /* one step smaller in the side panel so most tables fit its default width */
  .panel .pt th, .panel .pt td { padding-inline: var(--s-1); }   /* …with the tighter cells: the pluperfect subjunctive (nārrāvissem) fits the 303 px box too (QA-4 m4) */
}
/* Three value columns (adjectives: masculine / feminine / neuter, QA-4 m4):
   one more step down with the tablet's tighter cells, and the row-label
   column may wrap ("nominative" over two lines) — so the positive,
   comparative and superlative tables fit the panel's 319 px at its default
   width instead of scrolling sideways. */
@media (min-width: 768px) {
  .panel .pt--wide { font-size: var(--ui-xs); }
  .panel .pt--wide th, .panel .pt--wide td { padding-inline: var(--s-1); }
  .panel .pt--wide tbody th { font-size: var(--ui-xs); white-space: normal; text-wrap: pretty; width: auto; min-width: 4.5em; max-width: 6em; padding-right: var(--s-2); }   /* not the 1% column: "nominative sg." wraps at the space, never letter by letter */
  .panel .pt--wide .pt__cell { font-size: 1em; }
}
/* The tablet column is narrower still (min(22rem, 44vw)): one more step down,
   the reading-face cells at the table's own size and tighter cell padding,
   so the 15 nārrō tables fit the box without scrolling. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .panel .pt { font-size: var(--ui-xs); }
  .panel .pt tbody th { font-size: var(--ui-xs); }
  .panel .pt th, .panel .pt td { padding-inline: var(--s-1); }
  .panel .pt__cell { font-size: 1em; }
  /* Three value columns at exactly 768 (a 273 px box): one notch tighter still — 1 px cells, the row labels at 4em, the box's own padding halved — so the superlative (maximus / -a / -um, 265 px) fits without scrolling (QA-6 m6). */
  .panel .pt--wide th, .panel .pt--wide td { padding-inline: 1px; }
  .panel .pt--wide tbody th { min-width: 0; max-width: none; padding-right: var(--s-1); overflow-wrap: normal; }   /* the label wraps at its space ("nominative / sg."), never inside the word: the value cells give the room */
  .panel .pt--wide .pt__cell { font-size: 0.92em; }
  .panel .pt__scroll:has(.pt--wide) { padding-inline: var(--s-1); }
}
.pt__stem { color: var(--ink-2); }
.pt__ending { color: var(--ink); font-weight: 600; }
.pt__stem::after { content: "‑"; color: var(--ink-3); font-weight: 400; margin: 0 0.02em; }
.pt__cell.is-hit { background: var(--underline); color: oklch(0.2 0.02 95); border-radius: 3px; }
.pt__cell.is-hit .pt__stem, .pt__cell.is-hit .pt__ending, .pt__cell.is-hit .pt__stem::after { color: oklch(0.2 0.02 95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt__cell.is-hit { color: oklch(0.15 0.02 95); } }

/* Notes */
.note__meta { margin: 0 var(--tap) var(--s-2) 0; font-size: var(--ui-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.note__la { margin: 0 0 var(--s-3); overflow-wrap: anywhere; font-family: var(--face-reading); font-size: calc(1.05rem * var(--note-scale)); line-height: 1.45; color: var(--ink-2); }
.note__text { margin: 0; font-size: var(--note-md); line-height: 1.55; }
/* "In plain words": the simpler second layer under a grammar note — the
   sentence note (panel / popup and sentence view) and the grammar-focus note.
   A native disclosure in the summary-toggle idiom (chevron, quiet label);
   settings.plainOpen keeps the learner's last choice, so once opened it stays
   open on every note. No box: the plain text simply follows the note. */
.plain { margin: var(--s-2) 0 0; font-family: var(--face-ui); font-size: var(--note-sm); line-height: 1.55; color: var(--ink-2); }
.plain__toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; margin-left: calc(-1 * var(--s-2)); padding: 0 var(--s-2); border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 600; letter-spacing: 0.01em; cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.plain__toggle::-webkit-details-marker { display: none; }
.plain__toggle::before {
  content: ""; flex: none; width: 0.4em; height: 0.4em; margin-top: -0.15em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease-out);
}
.plain[open] .plain__toggle::before { transform: rotate(45deg); margin-top: -0.3em; }
.plain__toggle:hover { color: var(--ink); background: var(--bg-chrome); }
.plain__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.plain__text { margin: var(--s-1) 0 var(--s-1); max-width: 60ch; color: var(--ink); text-wrap: pretty; animation: rise-down var(--t-base) var(--ease-out); }
.focus .plain { margin-top: var(--s-1); }
.focus .plain__toggle { color: var(--glow-ink); }
.focus .plain__toggle:hover { background: var(--glow-ring); color: var(--glow-ink); }
.focus .plain__text { color: var(--glow-ink); }
@media (prefers-reduced-motion: reduce) { .plain__text { animation: none; } }
/* ---------------------------------------------------------- stack */
/* Tablet + desktop: the side panel holds the current sentence's stack — its
   grammar note (†), the grammar-focus spans tapped in it and every word looked
   up in it, newest last. Each row is a button collapsed to one quiet line
   (form — meaning) that expands in place; one row is open at a time. The
   header names the sentence. Phones keep the popup and never see this. */
.stack { padding-bottom: var(--s-6); }
.stack__title {
  margin: 0 var(--tap) var(--s-3) 0; padding-top: var(--s-1);
  font-family: var(--face-serif); font-size: 1rem; line-height: 1.35; color: var(--ink-2); text-wrap: balance;
}
.stack__hint { margin: 0; font-size: var(--ui-sm); line-height: 1.5; color: var(--ink-3); max-width: 26rem; }
.stack__list { list-style: none; margin: 0 calc(-1 * var(--s-3)); padding: 0; border-top: 1px solid var(--line); }
.stack__row { border-bottom: 1px solid var(--line); }
.stack__btn {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.35em; row-gap: 0;
  width: 100%; min-height: var(--tap); padding: var(--s-2) calc(var(--s-3) + 1.4em) var(--s-2) var(--s-3);
  background: transparent; border: 0; border-radius: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  line-height: 1.4; overflow-wrap: anywhere;
  transition: background-color var(--t-fast) var(--ease-out);
}
.stack__btn:hover { background: var(--bg-chrome); }
@media (min-width: 1100px) { .layout:not([data-panel="open"]) .stack__btn:hover { background: var(--bg-raised); } }
.stack__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-sm); }
/* The disclosure chevron, at the row's right end (the marks — †, the glow — keep the left). */
.stack__btn::after {
  content: ""; position: absolute; right: var(--s-3); top: 50%; width: 0.42em; height: 0.42em; margin-top: -0.35em;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg); transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.stack__row.is-open > .stack__btn::after { transform: rotate(-135deg); margin-top: -0.1em; border-color: var(--ink); }
.stack__body { padding: 0 var(--s-3) var(--s-4); animation: rise-down var(--t-base) var(--ease-out); }
/* Word rows: the form in the reading face, then the plain meaning line ("to/for the labyrinth · in/by the labyrinth"). */
.stack__form { font-family: var(--face-reading); font-size: calc(1.1rem * var(--note-scale)); color: var(--ink); }
.stack__sep { color: var(--ink-3); }
.stack__meaning { font-size: var(--note-sm); color: var(--ink-2); }
.stack__meaning--miss { color: var(--ink-3); font-style: italic; }
.stack__learned { flex: none; margin-left: 0.2em; font-size: var(--ui-xs); color: var(--success); }
.stack__row.is-learned .stack__form { color: var(--ink-2); }
/* The note row: the dagger and the first line, cut at the row's edge until pressed. */
.stack__row--note .stack__btn { flex-wrap: nowrap; }
.stack__mark { flex: none; font-family: var(--face-serif); color: var(--rubric); }
.stack__line { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--note-sm); color: var(--ink-2); }
.stack__row--note.is-open .stack__line { color: var(--ink-3); }   /* the body below carries the whole note; the head stays one line */
/* The highlight row: the glowed words as they are in the text, then the label. */
.stack__glow {
  font-family: var(--face-reading); font-size: calc(1.05rem * var(--note-scale)); color: var(--glow-ink);
  background: var(--glow-bg); box-shadow: 0 0 0 0.15em var(--glow-bg); border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.stack__label { font-size: var(--note-sm); color: var(--ink-2); }
.stack__body .note__la { margin-top: var(--s-1); }
.stack__body .focus { margin-bottom: 0; }
.stack__body .entry__actions { margin-top: var(--s-3); }
/* "Back to the sentence" over the temporary section-summary view. */
.stack__back { min-height: 36px; margin: 0 0 var(--s-2) calc(-1 * var(--s-3)); padding-inline: var(--s-3); font-size: var(--ui-sm); }
@media (prefers-reduced-motion: reduce) { .stack__body { animation: none; } }

/* Section summary in the panel: the same .summary__* body as the passage disclosure (reader.css), at the panel's UI size. */
.note--summary { font-size: var(--ui-md); line-height: 1.55; }
.note--summary .summary__body { padding: 0; max-width: none; animation: none; }
.note--summary .summary__en { color: var(--ink); }
.note--summary .summary__p { font-size: 1.05rem; line-height: 1.5; }

/* ---------------------------------------------------------- settings */
.settings {
  margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-raised); color: var(--ink); box-shadow: var(--shadow-pop);
  width: min(26rem, calc(100vw - 2rem)); box-sizing: border-box; overflow-x: hidden;
}
.settings::backdrop { background: oklch(0 0 0 / 0.25); }
.settings__body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-4); }
.settings__head { display: flex; align-items: center; justify-content: space-between; margin-right: calc(-1 * var(--s-2)); }
.settings__title { font-family: var(--face-serif); font-weight: 400; font-size: 1.3rem; margin: 0; }
.settings__head .panel__close { position: static; }
.settings__row { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.settings__label { font-size: var(--ui-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); padding: 0; }
.settings__label-hint { font-weight: 400; letter-spacing: 0; color: var(--ink-3); margin-left: 0.35em; }
.stepper { display: flex; align-items: center; gap: var(--s-3); }
.stepper__a { font-family: var(--face-serif); }
.stepper__a--sm { font-size: 0.9rem; }
.stepper__a--lg { font-size: 1.35rem; }
/* The Notes stepper: the same control one register down (its A's are the notes' proportion of the text). */
.stepper--notes .stepper__a--sm { font-size: 0.8rem; }
.stepper--notes .stepper__a--lg { font-size: 1.15rem; }
.size-dots { display: flex; gap: 5px; }
.size-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.size-dot.is-on { background: var(--ink); }
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; font-size: var(--ui-md); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice__serif { font-family: var(--face-serif); }
.choice__sans { font-family: var(--face-sans); }
.choice__dys { font-family: var(--face-dyslexic); }
.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); font-size: var(--ui-md); line-height: 1.4; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--ink); flex: none; }
.check small { display: block; color: var(--ink-3); font-size: var(--ui-xs); }
/* Reading: the toolbar toggles again, as labelled switches (a native checkbox
   with role="switch"; .switch__ui draws the track + knob from :checked). */
.settings__reading { padding-top: var(--s-3); border-top: 1px solid var(--line); gap: 0; }
.settings__reading legend { float: left; width: 100%; margin-bottom: var(--s-1); }   /* float: the legend joins the grid flow */
.switch { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); cursor: pointer; font-size: var(--ui-md); line-height: 1.3; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch__ui {
  position: relative; flex: none; width: 2.4rem; height: 1.4rem; border-radius: 999px;
  border: 1.5px solid var(--ink-3); background: transparent;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.switch__ui::after {
  content: ""; position: absolute; top: 50%; left: 0.2rem; width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: var(--ink-3); transform: translateY(-50%);
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.switch:has(input:checked) .switch__ui { background: var(--ink); border-color: var(--ink); }
.switch:has(input:checked) .switch__ui::after { background: var(--bg); transform: translate(1rem, -50%); }
.switch:has(input:focus-visible) .switch__ui { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch:hover .switch__ui { border-color: var(--ink); }
.switch:hover:has(input:checked) .switch__ui { border-color: var(--ink); }
.switch__text { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.switch__text small { display: block; color: var(--ink-3); font-size: var(--ui-xs); line-height: 1.35; }
.switch__text small.switch__hint { color: var(--ink-2); font-style: italic; }   /* a switch that can do nothing this week says why (Book lines without line data) */
.switch__key { flex: none; font-family: var(--face-mono); font-size: var(--ui-xs); color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 0.4em; line-height: 1.5; }
@media (hover: none) and (pointer: coarse) { .switch__key { display: none; } }
@media (prefers-reduced-motion: reduce) { .switch__ui::after { transition: none; } }

.settings__audio { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.settings__audio .settings__label { margin: 0; }
.audio__speed { display: grid; gap: var(--s-2); }
.audio__speed-label { font-size: var(--ui-md); color: var(--ink); }
.audio__speed-value { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 0.35em; }
.audio__state { margin: 0; font-size: var(--ui-md); line-height: 1.45; color: var(--ink); }
.audio__state[data-state="none"] { color: var(--ink-2); }
.audio__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-inline: calc(-1 * var(--s-3)); }
.audio__play { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.audio__upload { position: relative; cursor: pointer; }
.audio__upload:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.audio__upload.is-busy { opacity: 0.6; cursor: progress; }
.audio__msg { margin: 0; min-height: 1.3em; font-size: var(--ui-sm); line-height: 1.45; color: var(--ink-2); }
.audio__msg[data-tone="error"] { color: var(--danger); }
.audio__msg[data-tone="ok"] { color: var(--success); }
.audio__msg:empty { display: none; }
/* Progress: this week's count and the two resets (each behind a confirm()). */
.settings__progress { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.settings__progress .settings__label { margin: 0; }
.progress-set__state { margin: 0; font-size: var(--ui-md); line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; }
.progress-set__state[data-state="none"] { color: var(--ink-2); }
.progress-set__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-inline: calc(-1 * var(--s-3)); }
.progress-set__note { margin: 0; font-size: var(--ui-xs); line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
/* Study log (CONTRACT.md "Study log"): today's line, a sparkline of minutes
   per day (one series — the line in the tertiary ink, today's point in the
   rubric), two small tables (the active days of the last 14, the weeks) and
   the pace line. Figures are UI face, tabular in the columns only. */
.study { display: grid; gap: var(--s-3); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.study__h { margin: 0; font-size: var(--ui-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.study__today { margin: 0; font-size: var(--ui-md); line-height: 1.45; color: var(--ink); }
.study__spark { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.study__svg { flex: none; overflow: visible; }
.study__line { stroke: var(--ink-3); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.study__dot { fill: var(--rubric); stroke: var(--bg-raised); stroke-width: 2; }   /* a 2px surface ring where the point sits on the line */
.study__cap { font-size: var(--ui-xs); line-height: 1.4; color: var(--ink-3); text-wrap: pretty; }
.study__table { width: 100%; border-collapse: collapse; font-size: var(--ui-sm); line-height: 1.4; color: var(--ink); }
.study__table th, .study__table td { padding: 0.3em var(--s-2); text-align: left; border-top: 1px solid var(--line); vertical-align: baseline; }
.study__table thead th { border-top: 0; padding-top: 0; font-weight: 500; font-size: var(--ui-xs); color: var(--ink-3); }
.study__table tbody th { font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.study__table .study__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.study__table .study__nil { color: var(--ink-3); }   /* a day with nothing reviewed: a quiet dash */
.study__table tbody tr:first-child td, .study__table tbody tr:first-child th { border-top-color: var(--line-strong); }
.study__table + .study__table { margin-top: var(--s-2); }   /* the days and the weeks are two tables, not one */
.study__pace { margin: 0; font-size: var(--ui-sm); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

.settings__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); margin-inline: calc(-1 * var(--s-3)); }
.settings__keys { margin: 0; padding-inline: var(--s-3); font-size: var(--ui-xs); color: var(--ink-3); line-height: 1.5; flex: 1 1 100%; text-wrap: pretty; }
.settings__keys kbd { font-family: var(--face-mono); font-size: 0.95em; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 0.3em; }
@media (hover: none) and (pointer: coarse) { .settings__keys { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .popup[open], .layout[data-panel="open"] .panel { animation: none; }
}

/* ---------------------------------------------------------- weeks menu */
.weeks {
  margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-raised); color: var(--ink); box-shadow: var(--shadow-pop);
  width: min(34rem, calc(100vw - 2rem)); max-height: min(80dvh, 44rem);
}
.weeks::backdrop { background: oklch(0 0 0 / 0.25); }
.weeks__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-3) 0 var(--s-5); }
.weeks__head .panel__close { position: static; }
.weeks__title { font-family: var(--face-serif); font-weight: 400; font-size: 1.3rem; margin: 0; }
.weeks__hint { margin: var(--s-1) var(--s-5) var(--s-3); font-size: var(--ui-sm); color: var(--ink-3); }
.weeks__list { list-style: none; margin: 0; padding: 0 var(--s-3) var(--s-3); }
.weeks__item { border-top: 1px solid var(--line); }
.weeks__item:first-child { border-top: 0; }
.weeks__row {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: baseline;
  width: 100%; min-height: var(--tap); padding: var(--s-3) var(--s-2); text-align: left;
  background: none; border: 0; border-radius: var(--radius); color: inherit; font: inherit; cursor: pointer;
}
.weeks__row:hover { background: var(--bg-chrome); }
.weeks__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.weeks__row[aria-current="true"] .weeks__name { color: var(--rubric-ink); }
.weeks__row[disabled] { cursor: default; }
.weeks__row[disabled]:hover { background: none; }
.weeks__n { font-family: var(--face-serif); font-size: var(--ui-lg); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.weeks__name { font-family: var(--face-serif); font-size: var(--ui-lg); line-height: 1.3; }
.weeks__row[disabled] .weeks__name { color: var(--ink-3); }
.weeks__meta { grid-column: 2; font-size: var(--ui-sm); color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.weeks__row[disabled] .weeks__meta { color: var(--ink-3); }
.weeks__state { grid-column: 3; grid-row: 1; font-size: var(--ui-xs); color: var(--ink-3); white-space: nowrap; }
/* Reading progress per week (CONTRACT.md): a hairline bar and "42 of 93 sentences" under the reading line. */
.weeks__progress {
  grid-column: 2; grid-row: 3; display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2);
  font-size: var(--ui-xs); line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.weeks__bar { flex: 0 0 5rem; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.weeks__bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--ink-3); transition: width var(--t-base) var(--ease-out); }
.weeks__left { white-space: nowrap; }   /* "· about 2 h left" (main.js timeLeftFor) */
.weeks__progress { flex-wrap: wrap; row-gap: 2px; }
.weeks__progress[data-state="done"] { color: var(--success); }
.weeks__progress[data-state="done"] .weeks__bar-fill { background: var(--success); }
/* The review shelf (Familia Romana I–XXIV): one group after the course weeks — a
   disclosure heading with the chapter count, its rows under it, roman numerals
   in the number column. Collapsed by default (settings.shelfOpen). */
.weeks__group { border-top: 1px solid var(--line-strong); margin-top: var(--s-2); }
.weeks__group-btn {
  display: flex; align-items: baseline; gap: var(--s-2); width: 100%; min-height: var(--tap);
  padding: var(--s-3) var(--s-2); text-align: left;
  background: none; border: 0; border-radius: var(--radius); color: inherit; font: inherit; cursor: pointer;
}
.weeks__group-btn:hover { background: var(--bg-chrome); }
.weeks__group-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.weeks__group-caret { flex: none; width: 2.6rem; color: var(--ink-3); font-size: var(--ui-sm); transition: transform var(--t-base) var(--ease-out); }
.weeks__group-btn[aria-expanded="true"] .weeks__group-caret { transform: rotate(90deg); }
.weeks__group-name { font-family: var(--face-serif); font-size: var(--ui-lg); line-height: 1.3; }
.weeks__group-count { margin-left: auto; font-size: var(--ui-xs); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.weeks__group-list { list-style: none; margin: 0; padding: 0 0 0 var(--s-2); }
.weeks__group-list .weeks__item:first-child { border-top: 1px solid var(--line); }
.weeks__row[data-shelf] .weeks__n { font-size: var(--ui-md); letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) { .weeks__group-caret { transition: none; } }
@media (max-width: 479.98px) {
  .weeks { width: calc(100vw - 1rem); max-height: 88dvh; }
  .weeks__row { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .weeks__state { grid-column: 2; grid-row: 4; }
  .weeks__group-caret { width: 2.2rem; }
}
.weeks[open] { animation: pop var(--t-base) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .weeks[open] { animation: none; } }

/* 3+-column paradigm tables on tablets: one notch smaller so the superlative fits the panel */
@media (min-width: 768px) and (max-width: 1099.98px) { .panel .pt--wide { font-size: 0.72rem; } .panel .pt--wide td, .panel .pt--wide th { padding-inline: 0.2em; } }