/* learn.css - the Learn screens (learn.js, kana.js, kanji.js, words.js, about.js): only what app.css lacks. Colours and
   sizes come from the tokens in app.css, so light and dark follow; every target is 44 px or more, text 14 px or more;
   nothing scrolls sideways at 320. Phone first and calm (docs/mobile-plan.md T5 to T14): rows for lists, one select
   for a filter, the shared level chip by the title, one quiet state line, folds for what can wait. */

/* ---- shared ---------------------------------------------------------------------------------------------------- */
.lr-oku { color: var(--ink-3); }
.btn-play.playing { background: var(--accent); color: var(--accent-ink); }
.lr-slow { gap: 6px; padding: 0 var(--s-4); }
.lr-slow svg { width: 16px; height: 16px; }
.lr-soon { text-align: left; padding: 0; }
.lr-soon p { margin: 0; }
.lr-skip { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-weight: 700; color: var(--good-text); }
.lr-toolbar { gap: var(--s-3); margin-bottom: var(--s-4); align-items: center; }
.lr-pop { margin-top: var(--s-6); max-width: 820px; }
.lr-pop .ja { margin: var(--s-2) 0; color: var(--pop-ink); }
.lr-kfoot { margin-top: var(--s-4); max-width: var(--measure); }
.lr-sheet { margin-top: var(--s-5); }
.lr-sheet h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-18); }
.lr-sheet h3:first-child { margin-top: 0; }
.lr-hook { margin-top: var(--s-4); max-width: var(--measure); }
.lr-hook p:last-child { margin: 0; }
.lr-hook .eyebrow { margin-bottom: var(--s-1); }
/* a hook is plain words under a small heading, never a box */
.lr-hook-h { margin: 0 0 var(--s-1); font-size: var(--fs-16); color: var(--ink-2); }
.lr-hook:first-child { margin-top: 0; }
.lr-more { margin-top: var(--s-3); min-height: var(--tap); }
kbd.lr-key, .lr-key { margin-left: auto; font: 700 var(--fs-14) var(--mono); color: var(--ink-3); background: none; }
button kbd.lr-key { margin-left: var(--s-2); }
@media (hover: none) and (pointer: coarse) { .lr-key, .lr-keys { display: none; } }

/* the title with the shared level chip beside it; one main action, a quiet Review link only when something is due */
.lr-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.lr-title h1 { margin: 0; }
.lr-title .lvl-chip { margin-left: 0; }
.lr-title > .icon { margin-right: calc(-1 * var(--s-2)); }
.pagehead .lr-acts { align-items: center; gap: var(--s-2) var(--s-4); }
/* the short line under the title, and the page's own labelled tool beside it (Show on Kanji): on the left, never in the
   right-hand column under the site's ⋯; on a phone the tool is a row of that menu instead (app.js .pm-away) */
.lr-lede { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); margin-top: var(--s-1); }
.lr-lede > p { margin: 0; }
.lr-lede > p:empty { display: none; }
.lr-revlink { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
/* "Show: All ▾" (one select for a filter) and the other small labelled selects beside it */
.lr-show { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-14); font-weight: 700; color: var(--ink-2); }
.lr-show select { width: auto; min-width: 0; max-width: 100%; }
/* an item's state: on a row a small dot (met, learning; ōdo when due) or the done mark for known, at its end; on a
   tile (a kanji, a kana on the chart) a soft tint for met, learning and known, the done mark for known and the ōdo
   dot when due (tileMark). The swatch beside "5 met" is that tint, so the tiles explain themselves. */
.lr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); }
.lr-dot.due { background: var(--warn-text); }
.lr-gmet .lr-dot { margin-right: 6px; vertical-align: 1px; }
.lr-swatch, .legend i.lr-swatch { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; border: 1px solid var(--dye-2); border-radius: var(--r-1); background: var(--dye-1); }
.lr-stateline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); margin: var(--s-2) 0 0; font-size: var(--fs-14); color: var(--ink-3); }
.lr-stateline .link { min-height: var(--tap); font-size: var(--fs-14); font-weight: 700; }
/* the note at the top of a sheet of quick checks; Kanji's Show above it */
.lr-sheet-note { margin: 0 0 var(--s-3); font-size: var(--fs-14); }
.lr-sheet-show { margin: 0 0 var(--s-5); }
.lr-sheet-show .lr-show { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-16); }
.lr-sheet-show .lr-show select { flex: 0 1 60%; }
.dbody > .lr-sheet-h { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-1); font-size: var(--fs-16); }
/* a filtered list says so in one quiet line, with Show all */
.lr-showing { margin: 0 0 var(--s-3); font-size: var(--fs-14); color: var(--ink-2); }
.lr-showing:empty { display: none; }
.lr-showing .link { display: inline-flex; align-items: center; min-height: var(--tap); margin-left: var(--s-1); font-size: var(--fs-14); }
/* one pair of sound buttons of one look: Play and Slowly */
.lr-sound { gap: var(--s-2); }
.lr-sound > .lr-slow { min-width: 112px; }
/* the "How this works" fold at a page's foot */
.lr-how { max-width: var(--measure); }
.lr-how p { margin: 0 0 var(--s-2); }
/* rows on the hub and the kana page: the Japanese quiet beside the name, a thin bar under it */
.lr-rows { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lr-rows .lr-rja { margin-left: var(--s-2); font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); }
.lr-rowbar { display: block; height: 4px; max-width: 220px; margin-top: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.lr-rowbar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.lr-rowbar > i.sliver { min-width: 6px; }
.lr-glyph { font-size: var(--fs-22); font-weight: 400; color: var(--accent-text); }
.lr-glyph.two { font-size: var(--fs-16); letter-spacing: -.02em; }
/* sheets: a heading per group, the look-alikes in one column, the kind of drill as rows */
.lr-sheetbody .lr-sheet-h { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-4) 0 var(--s-1); font-size: var(--fs-16); }
.lr-sheetbody .lr-sheet-h:first-child { margin-top: 0; }
.lr-sheetbody .lr-pairs { grid-template-columns: minmax(0, 1fr); }
.lr-sheet-go { margin: var(--s-4) 0 0; }
.lr-moderows button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: var(--s-2) var(--s-4); }
.lr-moderows button b { min-width: 0; }
.lr-moderows button span { font-size: var(--fs-14); color: var(--ink-3); }
.lr-moderows button[aria-current=true] span { color: inherit; }

/* the kanji and the words before and after this one */
.lr-prevnext { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); }
.lr-pn { display: inline-grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s-2); min-height: 56px; max-width: 48%; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--ink); text-decoration: none; }
.lr-pn.next { grid-template-columns: minmax(0, 1fr) auto auto; margin-left: auto; text-align: right; }
.lr-pn.next .lr-pn-dir { order: 3; }
.lr-pn.next .lr-pn-c { order: 2; }
@media (hover: hover) { .lr-pn:hover { border-color: var(--accent-text); background: var(--accent-soft); } }
.lr-pn-dir { font-size: var(--fs-24); color: var(--ink-3); }
.lr-pn-c { font-size: var(--fs-26); line-height: 1.3; }
.lr-pn-k { font-size: var(--fs-14); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- the hub --------------------------------------------------------------------------------------------------- */
.lr-hub { max-width: 880px; }
.lr-next { margin-bottom: var(--s-6); }
.lr-next-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-top: var(--s-5); }
.lr-next-body h2 { font-size: var(--fs-24); margin: var(--s-1) 0 var(--s-1); }
.lr-next-body p { margin: 0; }
.lr-next-tiles { margin-top: var(--s-3); }

/* ---- the quick check (test-outs) --------------------------------------------------------------------------------- */
.lr-check { max-width: 760px; margin: 0 auto; }
.lr-check-top { display: flex; align-items: center; gap: var(--s-2); }
.lr-check-title { font-size: var(--fs-24); margin: var(--s-3) 0 var(--s-1); }
.lr-check .progressline { margin: var(--s-2) 0 0; }
.lr-qcard { margin-top: var(--s-4); }
.lr-ask { margin: 0 0 var(--s-2); color: var(--ink-3); font-weight: 700; }
.lr-face { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; }
.lr-qkanji { font-family: var(--font-hand); font-size: 104px; line-height: 1.15; }
.lr-qword { font-size: var(--fs-40); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.lr-qsound { font-size: var(--fs-40); font-weight: 700; letter-spacing: .02em; }
.lr-qkana { font-size: var(--fs-30); line-height: 1.2; }
.lr-q { align-self: stretch; text-align: left; margin: var(--s-4) 0 0; font-weight: 700; }
.lr-opt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lr-read { align-self: stretch; text-align: left; margin-top: var(--s-4); }
.lr-after { align-self: stretch; text-align: left; }
.lr-acts { justify-content: center; margin-top: var(--s-4); }
.pagehead .lr-acts { margin-top: 0; }
.lr-summary { margin-top: var(--s-4); }
.lr-summary .of { font-size: var(--fs-24); }
.lr-sum-acts { justify-content: center; margin-top: var(--s-4); }

/* ---- kana -------------------------------------------------------------------------------------------------------- */
.lr-krows { margin-bottom: var(--s-4); min-width: 0; }
.lr-soundsw { min-height: var(--tap); font-size: var(--fs-14); }
/* Hiragana | Katakana: a segmented control of the two pages (the iOS way between sibling views) */
.lr-setseg { display: flex; width: min(100%, 420px); margin: 0 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); overflow: hidden; }
.lr-setseg a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: 0; min-height: var(--tap); padding: 0 var(--s-3);
  color: var(--ink-2); font-size: var(--fs-16); text-decoration: none; white-space: nowrap; }
.lr-setseg a + a { border-left: 1px solid var(--line-strong); }
.lr-setseg a[aria-current=page] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
@media (hover: hover) { .lr-setseg a:not([aria-current]):hover { background: var(--surface-2); } }
.lr-setseg a:focus-visible { outline-offset: -3px; }
/* the chart past its main part (combined sounds, small tsu and long vowels, sounds from abroad): one fold each */
details.lr-chartfold > summary { gap: var(--s-3); min-height: 52px; color: var(--ink); }
.lr-fold-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); flex: 1 1 auto; min-width: 0; font-size: var(--fs-16); }
.lr-fold-n { flex: none; font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lr-chartfold > p { margin: 0 0 var(--s-3); }
.lr-chartfold > .lr-chart { margin-bottom: var(--s-3); }
.lr-chartsec + .lr-chartfold { margin-top: var(--s-5); }
.lr-chartfold + .lr-chartfold { margin-top: 0; }
/* All 21 lessons: a fold of compact rows (title, its kana and minutes, how far), the next one marked */
details.lr-allles > summary { min-height: 56px; color: var(--ink); font-size: var(--fs-16); }
.lr-allles .lr-lessons { margin: 0 0 var(--s-2); }
.lr-lesson.next > a { box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--s-3); }
.lr-lesson.next .meta { color: var(--accent-text); font-weight: 700; }
.lr-lesson.done .main > b { color: var(--ink-2); }
.lr-lesson .meta .maru { font-size: var(--fs-18); }
.lr-lesson small [lang=ja] { letter-spacing: .04em; }
.kt.fresh { border-style: dashed; color: var(--ink-2); }

.lr-chartsec + .lr-chartsec { margin-top: var(--s-6); }
.lr-chartsec h3 { margin: 0 0 var(--s-1); font-size: var(--fs-18); display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.lr-chartsec > p { margin: 0 0 var(--s-3); }
.lr-chart { display: grid; gap: var(--s-2); max-width: 640px; }
.lr-chart.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lr-chart.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 400px; }
.lr-chart.cols-free { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.lr-kcell { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; min-height: 68px; min-width: 0; padding: var(--s-2) 2px;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--ink); font: 400 var(--fs-16)/1.2 var(--font-sans); white-space: normal; }
.lr-kcell.empty { border: 1px dashed var(--line); background: transparent; }
@media (hover: hover) { .lr-kcell:not(.empty):hover { border-color: var(--accent-text); background: var(--accent-soft); } }
.lr-kc { font-size: 30px; line-height: 1.15; }
.lr-ks { font-size: var(--fs-14); color: var(--ink-3); line-height: 1.2; overflow-wrap: anywhere; }
.nosound .lr-ks { visibility: hidden; }
.lr-kcell:is(.s-met, .s-learning, .s-known) { background: var(--dye-1); border-color: var(--dye-2); }
.lr-kcell:is(.s-met, .s-learning, .s-known) .lr-ks { color: var(--ink-2); }
.lr-kmark { position: absolute; top: 5px; right: 5px; font-size: var(--fs-14); }
/* the chart's one-line legend, next to Show the sounds */
.lr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: 0; font-size: var(--fs-14); color: var(--ink-3); }
.lr-legend > span { display: inline-flex; align-items: center; }
.lr-legend .maru { margin-right: 6px; }
/* a set's chart: no box around it; its head, then Show the sounds on a row of its own with the legend beside it */
.lr-chartcard { min-width: 0; }
.lr-chart-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s-2); margin: 0; font-size: var(--fs-20); }
.lr-chartbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); margin: var(--s-1) 0 var(--s-4); }
.lr-chartbar .lr-legend { margin: 0; }
/* a set's page: its next lesson as one row (the Kana page has the card) */
.lr-knextrow { margin: 0 0 var(--s-5); }
.lr-knextrow .lr-kwait { margin: 0; display: flex; align-items: center; min-height: 56px; }
.lr-knextrow .meta { color: var(--accent-text); font-weight: 700; }

.lr-pairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-3); }
.lr-pair { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3); min-width: 0; }
.lr-pair-chars { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
.lr-pair-c, .lr-missed .kt { padding: 0; font-weight: 400; min-height: 0; }
.lr-tells { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-14); color: var(--ink-2); }
.lr-tells b { font-size: var(--fs-18); margin-right: 4px; color: var(--ink); }

/* a two-kana sound (きゃ, ああ) in a tile: as wide as it needs */
.kt.wide { width: auto; min-width: 48px; padding: 0 6px; }
.kt.lg.wide { min-width: 72px; padding: 0 var(--s-2); }

/* one kana, in the dialog */
.lr-kd-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.lr-kd-hogan { width: 132px; }
.lr-kd-pic { width: 132px; height: 132px; object-fit: cover; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface-2); }
.lr-kd-sound { display: grid; gap: var(--s-2); min-width: 0; }
.lr-kd-romaji { margin: 0; font-size: var(--fs-30); font-weight: 700; line-height: 1.2; }
.lr-kd-say { margin: var(--s-4) 0 var(--s-3); }
.lr-kd-hook { margin-bottom: var(--s-3); }
.lr-kd-hook p:last-child { margin: 0; }
.lr-kd h3 { font-size: var(--fs-16); margin: var(--s-4) 0 var(--s-2); }
.lr-kd-looks, .lr-kd-words { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.lr-kd-looks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.lr-kd-words li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-1) 0; }
.lr-kd-w { font-size: var(--fs-22); font-weight: 700; }
.lr-kd-k { font-size: var(--fs-18); color: var(--ink-3); }
.lr-kd-en { color: var(--ink-2); }
.lr-kd-note { flex-basis: 100%; }

/* drills: the kind of drill is a row each in the site's ⋯ (the page's group; the one running marked), and on a
   computer behind ⚙ beside the count too, never in the session's body; keyboard words only once a real keyboard has
   been used on a touch device */
html[data-touch]:not([data-keys]) :is(.lr-keys, .lr-key) { display: none; }
.lr-drill-title { font-size: var(--fs-24); margin: 0; }
.lr-dset { flex: none; }
#menu-page-rows > [id^="lr-mode-"][aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
#menu-page-rows > [id^="lr-mode-"][aria-current="true"] svg { color: currentColor; }
@media (max-width: 720px) { .lr-drill .lr-dset { display: none; } }
.lr-drill .progressline { margin-bottom: var(--s-3); }
.lr-dflash { gap: 0; }
.lr-dkana { font-size: 112px; line-height: 1.15; margin: 0 0 var(--s-2); }
.lr-kchoices .lr-opt { font-size: var(--fs-30); line-height: 1.2; }
.lr-dplay { width: 72px; height: 72px; margin: var(--s-2) 0; }
.lr-dplay svg { width: 32px; height: 32px; }
.lr-dnext { justify-content: center; margin-top: var(--s-3); }
.lr-dflash .typeans { align-self: stretch; }
.lr-missed { justify-content: center; margin: var(--s-3) 0; }
.lr-keys { text-align: center; margin-top: var(--s-3); }

/* ---- kanji ------------------------------------------------------------------------------------------------------- */
/* a group of 20 folds as Words' groups do (the first open, and the one being worked on); no content-visibility
   placeholder (a guessed height left blank stretches and made the scroll bar jump on a phone) */
.lr-group { margin-top: var(--s-5); }
.lr-gmet { font-size: var(--fs-14); color: var(--ink-3); white-space: nowrap; }
.lr-ghead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-2); margin-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.lr-gtitle { font-size: var(--fs-18); margin: 0; }
.lr-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); }
.lr-ktile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 96px; min-width: 0; padding: var(--s-2) var(--s-1);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--ink); text-decoration: none; text-align: center; }
@media (hover: hover) { .lr-ktile:hover { border-color: var(--accent-text); background: var(--accent-soft); } }
.lr-ktile[hidden] { display: none; }
/* the kanji in the handwriting model (Klee One), as learners copy it: one font slice a level, kept offline */
.lr-kchar { font-family: var(--font-hand); font-size: 40px; line-height: 1.25; }
.lr-kkey { font-size: var(--fs-14); color: var(--ink-2); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lr-kstate .lr-st { position: absolute; top: 8px; right: 8px; }
.lr-kstate .maru.lr-st { top: 6px; right: 6px; font-size: var(--fs-14); }
.lr-ktile:is(.s-met, .s-learning, .s-known) { background: var(--dye-1); border-color: var(--dye-2); }

/* one kanji: the hero, the stroke order, readings and words */
.lr-khero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-6); align-items: start; }
.lr-hogan { width: 200px; }
.lr-hogan .model { font-size: 150px; }
.lr-khero-main { min-width: 0; }
.lr-kw { font-size: var(--fs-30); margin: var(--s-1) 0 0; }
.lr-kmore { margin: var(--s-1) 0 0; color: var(--ink-2); }
.lr-khero .kread { margin-top: var(--s-3); }
.lr-khero .kread dd { font-size: var(--fs-22); font-weight: 400; }
.lr-kacts { margin-top: var(--s-4); }
.lr-kacts svg { width: 20px; height: 20px; }
/* a word saved as a card: where it went, in place of the button */
.lr-saved { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); color: var(--ink-2); font-weight: 700; }
/* one word: two rows of two equal buttons, Play (the main action) and Slowly, then Save as a card and Write it (its
   quiet "In your cards" in Save's place); one button alone keeps its own width, never half or all of the row */
.lr-whero .lr-sound, .lr-whero .lr-kacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); max-width: 440px; }
.lr-whero .lr-sound > *, .lr-whero .lr-kacts > * { width: 100%; min-width: 0; min-height: var(--tap); justify-content: center; }
.lr-whero .lr-kacts { margin-top: var(--s-2); }
.lr-whero .lr-kacts > :only-child, .lr-whero .lr-kacts > [hidden] + .lr-saved:last-child { width: auto; justify-self: start; }
.lr-whero .lr-kacts > .lr-saved { justify-content: flex-start; }
.lr-rmain { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; }
.lr-rother { color: var(--ink-2); }
.lr-shape { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5) var(--s-6); align-items: start; }
.lr-strokebox { display: grid; gap: var(--s-2); justify-items: start; }
.lr-stroke { position: relative; width: 240px; max-width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--ink); }
.lr-stroke > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Play sits in the box's corner; on a phone the box is centred, up to 240 px */
.lr-strokewrap { position: relative; width: 240px; max-width: 100%; }
.lr-strokewrap > .lr-stroke { width: 100%; }
.lr-strokeacts { justify-content: center; }
.lr-shape-more { min-width: 0; }
.lr-shape-more > p:first-child { margin-top: 0; }
.lr-readings { margin: 0; }
.lr-readings > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: var(--s-2) var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.lr-readings > div:first-child { border-top: 0; padding-top: 0; }
.lr-readings dt { font-weight: 700; color: var(--accent-text); }
.lr-readings dt .small { display: block; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.lr-readings dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.lr-readings .lr-rplay { font-size: var(--fs-20); font-weight: 400; }
.lr-readings .lr-rother { font-size: var(--fs-16); color: var(--ink-2); }
.lr-readings .lr-rother [lang=ja] { margin-left: var(--s-1); font-size: var(--fs-18); }
.lr-kwlist, .lr-wlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lr-kwrow { display: grid; grid-template-columns: var(--tap) minmax(9em, 16em) minmax(0, 1fr) auto; grid-template-areas: "play link en side"; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.lr-kwrow > .btn-play { grid-area: play; }
.lr-kwlink { grid-area: link; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 0 var(--s-2); min-height: var(--tap); color: var(--ink); text-decoration: none; min-width: 0; }
@media (hover: hover) { .lr-kwlink:hover .lr-kwja { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent-text); } }
.lr-kwja { font-size: var(--fs-20); line-height: 1.4; }
.lr-kwr { font-size: var(--fs-14); color: var(--ink-3); }
.lr-kwen { grid-area: en; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.lr-kwside { grid-area: side; display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; }
.lr-kwside:empty { display: none; }

/* ---- words ------------------------------------------------------------------------------------------------------- */
.lr-wtools { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); max-width: 760px; }
.lr-wbar { flex-wrap: nowrap; align-items: center; gap: var(--s-2); }
.lr-wtools .lr-wshown { margin: 0; }
.lr-filterbtn { gap: var(--s-1); }
.lr-filterbtn svg { width: 18px; height: 18px; transition: transform .15s; }
.lr-filterbtn[aria-expanded=true] svg { transform: rotate(180deg); }
.lr-fcount { font-variant-numeric: tabular-nums; }
.lr-wfilt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lr-witem { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-1) 0; border-bottom: 1px solid var(--line); }
.lr-wrow { display: grid; grid-template-columns: minmax(8em, 15em) minmax(0, 1fr) auto; grid-template-areas: "ja en st"; gap: 0 var(--s-4); align-items: center;
  min-height: var(--tap); padding: var(--s-1) 0; color: var(--ink); text-decoration: none; min-width: 0; }
@media (hover: hover) { .lr-wrow:hover .lr-wja { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent-text); } }
.lr-wja { grid-area: ja; font-size: var(--fs-20); line-height: 1.4; overflow-wrap: anywhere; }
.lr-wr { margin-left: var(--s-1); font-size: var(--fs-14); color: var(--ink-3); }
.lr-wen { grid-area: en; color: var(--ink-2); overflow-wrap: anywhere; }
.lr-wst { grid-area: st; display: inline-flex; align-items: center; justify-content: center; min-width: 14px; }
.lr-wst .maru { font-size: var(--fs-14); color: var(--good-text); }
.lr-wmore { display: flex; justify-content: center; margin-top: var(--s-4); }
/* a group of 20 words: the first open, the rest one row each (range, first words, how many met, a chevron) */
details.lr-wgroup { margin: 0; border-bottom: 1px solid var(--line); }
details.lr-wgroup:first-child { border-top: 1px solid var(--line); }
details.lr-wgroup > summary { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-1) 2px; cursor: pointer; list-style: none; }
details.lr-wgroup > summary::-webkit-details-marker { display: none; }
details.lr-wgroup > summary::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--ink-3); -webkit-mask: var(--i-chev) center / 18px no-repeat;
  mask: var(--i-chev) center / 18px no-repeat; transition: transform .15s; }
details.lr-wgroup[open] > summary::after { transform: rotate(180deg); }
@media (hover: hover) { details.lr-wgroup > summary:hover { background: var(--surface-2); } }
details.lr-wgroup > summary:focus-visible { outline-offset: -2px; }
details.lr-wgroup .lr-gtitle { flex: none; }
.lr-gpeek { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); color: var(--ink-3); }
details.lr-wgroup[open] .lr-gpeek { display: none; }
details.lr-wgroup .lr-wlist { border-top: 1px solid var(--line); }
details.lr-wgroup .lr-wlist > li:last-child { border-bottom: 0; }
/* a kanji group folds the same way; its tiles under the row when open */
details.lr-kgroup .lr-kgrid { padding: var(--s-2) 0 var(--s-4); }

.lr-whero { margin-bottom: var(--s-2); }
.lr-wtitle { font-size: var(--fs-56); line-height: var(--lh-ruby-big); font-weight: 700; margin: var(--s-2) 0 0; overflow-wrap: anywhere; }
.lr-wtitle rt { font-weight: 400; }
.lr-wmean { font-size: var(--fs-24); font-weight: 700; margin: var(--s-2) 0 0; }
.lr-walso { margin: var(--s-1) 0 0; color: var(--ink-3); font-size: var(--fs-14); max-width: var(--measure); }
.lr-wplay { margin-top: var(--s-3); }
.lr-pitch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-4); }
.lr-pitch-draw { max-width: 100%; overflow-x: auto; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--surface-2); }
.lr-pitch-kind { margin: 0 0 var(--s-1); font-size: var(--fs-18); }
.lr-pitch p:last-child { margin: 0; }
.lr-pitch-text { flex: 1 1 260px; min-width: 0; max-width: var(--measure); }
details.lr-pitchhow { margin-top: var(--s-2); border-top: 0; }
details.lr-pitchhow > summary { font-size: var(--fs-14); }
.lr-pitchhow > p { margin: 0 0 var(--s-2); color: var(--ink-2); }
.lr-exslow { margin-top: var(--s-2); }
.lr-wklist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.lr-wk { display: flex; align-items: center; gap: var(--s-3); min-height: 88px; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); text-decoration: none; }
@media (hover: hover) { a.lr-wk:hover { border-color: var(--accent-text); background: var(--accent-soft); } }
.lr-wk-text { display: grid; gap: 2px; }
.lr-addprev { font-size: var(--fs-18); }

/* ---- about ------------------------------------------------------------------------------------------------------- */
.lr-jlpt { margin: var(--s-6) 0 0; max-width: var(--measure); font-size: var(--fs-14); color: var(--ink-3); }
.lr-about ul { padding-left: var(--s-5); margin: 0 0 var(--s-3); }
.lr-about li + li { margin-top: var(--s-2); }
.lr-about a { overflow-wrap: anywhere; }
.lr-about details { margin: var(--s-3) 0; }
.lr-about summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-weight: 700; color: var(--accent-text); }
.lr-licence pre { margin: var(--s-2) 0 0; padding: var(--s-4); border-radius: var(--r-2); background: var(--surface-2); color: var(--ink-2); font: var(--fs-14)/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.lr-ctable td.num, .lr-ctable th:not(:first-child) { text-align: right; }
.lr-ctotal td { font-weight: 700; }
.lr-aboutfiles { list-style: none; padding: 0 !important; }
.lr-aboutfiles > li { border-top: 1px solid var(--line); padding: var(--s-4) 0; }
.lr-aboutfiles > li + li { margin-top: 0 !important; }
.lr-aboutfiles h3 { font-size: var(--fs-18); margin: 0 0 var(--s-1); }
.lr-aboutfiles h3 code { font-size: var(--fs-14); font-weight: 400; }
.lr-aboutfiles p { font-size: var(--fs-16); margin: 0 0 var(--s-2); }
.lr-srcs { font-size: var(--fs-16); }
/* the credits as folds, each a 44 px row */
.lr-credits { max-width: var(--measure); border-top: 1px solid var(--line); }
.lr-credits > details { margin: 0; border-bottom: 1px solid var(--line); }
.lr-credits > details > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 52px; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
.lr-credits > details > summary::-webkit-details-marker { display: none; }
.lr-credit-t { min-width: 0; }
.lr-credits .lr-rja { margin-left: var(--s-1); font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
/* the title's Japanese: after it on a phone, and at the gutter when it wraps (no margin carried to the new line) */
@media (max-width: 720px) { .lr-aboutpage .pagehead h1 .ja-sub { margin-left: 0; } }
.lr-credits > details > summary::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--ink-3); -webkit-mask: var(--i-chev) center / 18px no-repeat;
  mask: var(--i-chev) center / 18px no-repeat; transition: transform .15s; }
.lr-credits > details[open] > summary::after { transform: rotate(180deg); }
.lr-credits > details > .lr-about { padding: 0 0 var(--s-4); font-size: var(--fs-16); color: var(--ink-2); }
.lr-credits > details > .lr-about > p:first-child { margin-top: 0; }

/* ---- tablet and phone -------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .lr-shape { grid-template-columns: minmax(0, 1fr); }
  .lr-strokebox { justify-items: center; }
  /* the Shape box at most about 240 px, so a phone's first screen holds the head and the readings over it */
  .lr-strokewrap { width: min(100%, 240px); }
  .lr-readings > div { grid-template-columns: minmax(0, 1fr); }
  .lr-kwrow { grid-template-columns: var(--tap) minmax(0, 1fr) auto; grid-template-areas: "play link side" "play en en"; }
  /* a section's head on one line: "Shape かたち" */
  .lr-sheet .sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
  .lr-sheet .sec-head h2 { margin: 0; }
  .lr-sheet .sec-ja { display: inline; margin: 0; }
}
@media (max-width: 720px) {
  .lr-next { margin-bottom: var(--s-5); }
  .lr-next-body .btn.big { width: 100%; }
  .lr-next-body h2 { font-size: var(--fs-20); }
  .pagehead .lr-acts { width: 100%; }
  .pagehead .lr-acts > .primary { flex: 1 1 100%; }
  .lr-kc { font-size: 26px; }
  .lr-kcell { min-height: 64px; }
  .lr-setseg { width: 100%; }
  /* a drill: on an upright phone the kana above and the four answers in the lower half, in reach of the thumb
     (Next comes up under them) */
  .lr-kd-hogan, .lr-kd-pic { width: 112px; }
  .lr-kd-pic { height: 112px; }
  .lr-dkana { font-size: 88px; }
  .lr-qkanji { font-size: 88px; }
  .lr-kgrid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .lr-ktile { min-height: 88px; }
  .lr-kchar { font-size: 36px; }
  /* one kanji or one word: no box around the sections, space between them */
  .lr-sheet { border: 0; border-radius: 0; background: none; padding: 0; }
  .lr-sheet .sec { padding-block: var(--s-5); }
  .lr-khero { grid-template-columns: min(140px, 38vw) minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
  .lr-hogan { width: min(140px, 38vw); }
  .lr-hogan .model { font-size: min(104px, 28vw); }
  .lr-sheet .sec:first-child { padding-top: var(--s-3); }
  .lr-kw { font-size: var(--fs-24); }
  .lr-khero .kread dd { font-size: var(--fs-18); }
  .lr-khero .lr-kacts { margin-top: var(--s-3); }
  .lr-khero .lr-kacts .btn { width: 100%; }
  .lr-readings dd { font-size: var(--fs-22); }
  .lr-wfilt { gap: var(--s-3); }
  .lr-wfilt > .lr-show { flex: 1 1 100%; justify-content: space-between; }
  .lr-wfilt > .lr-show select { flex: 0 1 60%; }
  /* a word: two lines (the word, then its meaning) beside its play button, its dot at the end */
  .lr-wrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ja st" "en st"; }
  .lr-wja { font-size: var(--fs-18); line-height: 1.35; }
  .lr-wen { font-size: var(--fs-14); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the pitch's words and its "What's this?" run to the right gutter */
  .lr-pitch-text { flex-basis: 100%; max-width: none; }
  .lr-wtitle { font-size: var(--fs-40); }
  .lr-wmean { font-size: var(--fs-20); }
  .lr-pn { max-width: 49%; padding: var(--s-2) var(--s-3); }
  .lr-pn-k { display: none; }
}
@media (max-width: 720px) and (min-height: 501px) {
  .lr-drill:has(.lr-dflash > .choices) { display: flex; flex-direction: column; min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--s-4) - var(--s-7)); }
  .lr-drill:has(.lr-dflash > .choices) > #lr-dcard { flex: 1 1 auto; display: flex; flex-direction: column; }
  /* the screen is the card (no box around it): the kana fills the space over the answers, which keep to the foot */
  .lr-drill .lr-dflash:has(> .choices) { flex: 1 1 auto; justify-content: flex-start; padding: 0; border: 0; border-radius: 0; background: none; }
  .lr-dflash:has(> .choices) > .lr-dkana { flex: 1 1 auto; display: grid; place-items: center; margin: 0; font-size: clamp(96px, 22dvh, 168px); line-height: 1; }
  .lr-dflash:has(> .choices) > .lr-dplay { margin-block: auto; }
  .lr-dflash > .choices { margin-top: var(--s-4); }
  .lr-dflash > .choices .choice { min-height: 52px; }
}
@media (max-width: 380px) {
  .lr-kgrid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .lr-chart.cols-5 { gap: 6px; }
  .lr-kc { font-size: 24px; }
}