/* Reading (features/practice-read) and the shared text view (features/shared/textview.js, tv-*). Kit tokens only
   (tokens.css, motion.css): every transition uses the motion tokens and every distance --move, so reduced motion is
   handled there. Phone (390px) first. The text is the page and the calmest thing in the app: Newsreader 20/1.72
   (21/1.7 from 720 px), at most 32em (about 66 characters) a line, nothing beside it (DESIGN.md typography.reading). */

/* ---------- the text ---------- */
.tv-text { font: 400 20px/1.72 var(--font-display); color: var(--ink); letter-spacing: -0.003em; border-radius: var(--r-tile); }
.tv-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (min-width: 720px) { .tv-text { font-size: 21px; line-height: 1.7; } }
.tv-para { margin: 0 0 var(--s-4); max-width: 32em; }
.tv-w { position: relative; border-radius: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
/* suggested: a quiet dotted rule, ink at 28 % */
.tv-w.is-sug { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in oklab, var(--ink) 28%, transparent); }
/* one band per phrase (its words and the spaces between): surface-2, never a role colour */
.tv-band { background: var(--surface-2); border-radius: 3px; box-shadow: 0 0 0 2px var(--surface-2); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* saved: the text stays ink; an accent wash says "you marked this" (an accent underline would read as a link) */
.tv-w.is-saved { background: color-mix(in oklab, var(--accent) 12%, transparent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 12%, transparent); text-decoration: none; }
.tv-w.is-lit { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.tv-w:focus { outline: none; }
.tv-w:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tv-name { color: var(--ink); }
@media (pointer: coarse) {
  /* a 44px tap target per word without changing the line: 34 px of line plus 6 px above and below */
  .tv-w::before { content: ""; position: absolute; inset: -6px -2px; }
}
.tv-quote { margin: 0; padding: 10px 12px; border-radius: var(--r-tile); background: var(--surface-2); font: 400 17px/1.45 var(--font-display); color: var(--ink-2); }
.tv-hl { background: none; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* the progress hairline under the top edge */
.tv-hair { position: fixed; inset: 0 0 auto 0; z-index: var(--z-bar); height: 2px; pointer-events: none; }
.tv-hair-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
:root[dir="rtl"] .tv-hair-fill { transform-origin: right; }

/* the sheet */
.tv-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 640px; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-2) max(var(--s-5), env(safe-area-inset-left)) calc(var(--s-6) + env(safe-area-inset-bottom)); border: 0; border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sheet);
  /* the sheet itself never fades (a half-transparent sheet doubles the text under it): it rises; only the backdrop fades */
  transform: translateY(100%); transition: transform var(--dur-card) var(--spring-snappy); }
.tv-sheet.is-in { transform: none; }
.tv-sheet::backdrop { background: rgb(12 14 22 / 0.32); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.tv-sheet.is-in::backdrop { opacity: 1; }
:root[data-motion="reduce"] .tv-sheet { transform: none; opacity: 0; transition: opacity 140ms var(--ease-out); }
:root[data-motion="reduce"] .tv-sheet.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .tv-sheet { transform: none; opacity: 0; transition: opacity 140ms var(--ease-out); }
  :root:not([data-motion="full"]) .tv-sheet.is-in { opacity: 1; }
}
.tv-grab { display: block; width: 36px; height: 4px; margin: 0 auto var(--s-1); border-radius: 2px; background: var(--hairline-strong); }
.tv-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; background: var(--surface); }
.tv-sheet-title { margin: 0; font: 400 28px/1.15 var(--font-display); letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }
.tv-sheet-title:focus { outline: none; }
.tv-sheet-x { flex: none; width: var(--tap); padding: 0; }
.tv-sheet-body { display: grid; gap: var(--s-3); }
.tv-sheet-body > p { margin: 0; }

/* the tray */
.tv-tray { display: grid; justify-items: start; gap: 2px; flex: 1; min-width: 0; min-height: var(--tap); padding: var(--s-1) var(--s-3); border: 0; border-radius: var(--r-ctl);
  background: transparent; color: var(--ink); text-align: start; font: inherit; cursor: pointer; }
.tv-tray-top { font: 600 13px/1.3 var(--font-ui); }
.tv-tray-label { font-weight: 500; color: var(--ink-2); }
.tv-tray-list { display: flex; gap: 10px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 15px/1.3 var(--font-display); color: var(--ink-2); }
.tv-tray-list:empty { display: none; }
/* each saved word with the 4 px accent dot of the wash it has in the text */
.tv-tray-w { display: inline-flex; align-items: center; gap: 5px; }
.tv-tray-w::after { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.tv-tray.is-empty .tv-tray-label { font-weight: 400; color: var(--ink-2); }
.tv-tray-short { display: none; }
@media (max-width: 559px) {
  .tv-tray-long { display: none; } .tv-tray-short { display: inline; }
  .rd-dock .tv-tray-list { display: none; }
  .rd-dock .tv-tray { padding-inline: var(--s-2); }
  .tv-tray-top { white-space: nowrap; }
}
.tv-tray-n { display: inline-block; }

/* ---------- the reader ---------- */
.rd-reader { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.rd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
/* the head: the title first, one meta line, a 3 px meter (ink is known, the track the rest), a note only when it applies */
.rd-top { margin: var(--s-3) 0 var(--s-6); display: grid; gap: var(--s-1); }
.rd-title { margin: 0; font: 400 30px/1.12 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
@media (min-width: 720px) { .rd-title { font-size: 34px; } }
.rd-meta { margin: var(--s-1) 0 0; color: var(--ink-2); }
.rd-cov { position: relative; height: 3px; max-width: 32em; margin-top: 2px; overflow: hidden; border-radius: 2px; background: var(--surface-2); }
.rd-cov-known { position: absolute; inset: 0; background: var(--ink); transform-origin: left; }
:root[dir="rtl"] .rd-cov-known { transform-origin: right; }
.rd-note-line { margin: var(--s-1) 0 0; max-width: 60ch; color: var(--ink-2); }
.rd-badge { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong);
  font: 500 12px/1 var(--font-ui); color: var(--ink-2); }
.rd-badge.is-study, .rd-badge.is-easy { border-color: var(--accent); color: var(--accent-ink); }
.rd-end { display: grid; justify-items: start; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.rd-end .caption { margin: 0; }
.rd-dock { position: fixed; inset-inline: 0; bottom: 0; z-index: calc(var(--z-bar) - 1); padding: var(--s-2) 0 calc(var(--s-2) + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--surface) 97%, transparent); border-top: 1px solid var(--hairline); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 899px) { .rd-dock { bottom: calc(57px + env(safe-area-inset-bottom)); padding-bottom: var(--s-2); } }
@media (prefers-reduced-transparency: reduce) { .rd-dock { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* the dock's row sits in the page's own column, so it starts where the text starts */
.rd-dock-in { max-width: var(--page-max); margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.rd-dock-row { display: flex; align-items: center; gap: var(--s-2); max-width: 760px; }
.rd-dock-btn { flex: none; }
.rd-modes { flex: none; }
.rd-modes .seg button { padding-inline: 12px; font-size: 14px; }
@media (max-width: 380px) { .rd-modes .seg button { padding-inline: 9px; font-size: 13px; } }
:root:has(.rd-dock) { scroll-padding-bottom: calc(57px + 80px + env(safe-area-inset-bottom)); }

/* the word sheet */
.rd-sheet-meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.rd-sheet-meta .wp-meta { margin: 0; }
.rd-state { font: 500 12px/1.3 var(--font-ui); color: var(--ink-3); }
.rd-state.is-unseen, .rd-state.is-unknown { color: var(--accent-ink); }
.rd-state.is-known { color: var(--ink); }
.rd-gloss { font: 500 17px/1.35 var(--font-ui); }
.rd-note { margin: 0; }
.rd-tr:empty { display: none; }
.rd-en { margin: 0; padding-inline-start: var(--s-3); color: var(--ink-2); font-size: 14px; }
.rd-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.rd-sheet-actions .btn { width: 100%; white-space: normal; line-height: 1.25; }
.rd-sheet-actions .btn:only-child { grid-column: 1 / -1; }
.rd-phrase-btn { justify-self: start; }
.rd-chips { gap: 6px; }
.rd-chips .chip { font-family: var(--font-display); font-size: 17px; }

/* tray sheet */
.rd-traylist { margin: 0; padding: 0; list-style: none; }
.rd-trayitem { display: grid; gap: 6px; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.rd-trayitem-top { display: flex; align-items: center; gap: var(--s-2); }
.rd-traylemma { flex: 1; min-width: 0; font: 400 19px/1.3 var(--font-display); }
.rd-trayitem .caption { margin: 0; }
.rd-x { width: var(--tap); padding: 0; margin-inline-end: -10px; }
.rd-review-anyway { color: var(--accent-ink); }
.rd-missing { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-tile); background: var(--surface-2); }
.rd-missing p { margin: 0; }

/* ---------- library, paste ---------- */
.rd-list { display: grid; gap: var(--s-3); }
.rd-card { display: grid; gap: 6px; padding: var(--s-4); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink); text-decoration: none; }
.rd-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.rd-card-title { font: 400 20px/1.25 var(--font-display); }
.rd-card .caption { margin: 0; }
.rd-meter { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: var(--surface-2); }
.rd-meter-fill { display: block; height: 100%; background: var(--ink); transform-origin: left; }
.rd-review { margin-bottom: var(--s-2); }
.rd-paste { min-height: 220px; font: 400 17px/1.5 var(--font-display); resize: vertical; }
.rd-est { min-height: 1.4em; }
.rd-actions { display: flex; gap: var(--s-2); }
.rd-private { margin-top: var(--s-2); }

/* ---------- questions, done ---------- */
.rd-q { display: grid; gap: var(--s-3); padding: var(--s-5); }
.rd-q .label { margin: 0; }
.rd-qtext { margin: 0; font: 400 19px/1.35 var(--font-display); }
.rd-opts { display: grid; gap: 6px; }
.rd-opt { display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink); text-align: start; font: 400 16px/1.35 var(--font-ui); cursor: pointer; }
.rd-opt:disabled { cursor: default; opacity: 1; }
.rd-opt.is-right { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.rd-opt.is-wrong { border-color: var(--bad); }
.rd-res { margin: 0 0 var(--s-1); font: 500 14px/1.3 var(--font-ui); }
.rd-res.is-ok { color: var(--ok); }
.rd-res.is-bad { color: var(--bad); }
.rd-qscore { margin: 0; }
.rd-saved { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font: 400 19px/1.35 var(--font-display); }
.rd-saved-w { opacity: 0; transform: translateY(calc(6px * var(--move))); transition: opacity var(--dur-base) var(--ease-out) calc(var(--i) * 28ms), transform var(--dur-base) var(--ease-out) calc(var(--i) * 28ms); }
.rd-saved.is-in .rd-saved-w { opacity: 1; transform: none; }
:root[data-motion="reduce"] .rd-saved-w { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .rd-saved-w { opacity: 1; transform: none; transition: none; } }

/* the library's graded texts: one level at a time, sorted by fit (fit.js) */
.rd-graded-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.rd-graded-head h2 { margin: 0; }
.rd-graded-head .seg button { min-width: 52px; }
.rd-rows { margin-top: var(--s-2); }
.rd-text-row { align-items: center; padding-block: var(--s-3); border-bottom: 1px solid var(--hairline); }
.rd-text-row .row-title { font: 400 19px/1.3 var(--font-display); }
.rd-text-row .rd-meter { max-width: 180px; margin-top: 6px; }
.rd-read-mark { flex: none; display: inline-flex; color: var(--ink-3); }
.rd-text-row.is-read .row-title { color: var(--ink-2); }

/* forced colours (Windows contrast themes): background tints are dropped there, so the word open in the sheet, the
   marked phrase and the word quoted in the sheet are drawn in the system highlight (audit P1-12) */
@media (forced-colors: active) {
  .tv-hl, .tv-w.is-lit { forced-color-adjust: none; background: Highlight; color: HighlightText; text-decoration-color: HighlightText; }
  .rd-dock { background: Canvas; border-top: 1px solid CanvasText; }
}
.rd-tail { display: flex; justify-content: center; margin-top: var(--s-4); }
.rd-delete { color: var(--ink-3); font-size: 14px; }