/* write.css - the Write tab and handwriting practice (W1 track: js/screens/write.js, js/write/*). Colours only
   through the tokens in app.css, so light, dark and the site's chosen look follow by themselves. Rules it keeps:
   - Phone first, for a finger: on an upright phone the session fits the screen without scrolling (360 x 560 and
     up): the head right under the bar, one status line, the pad (the screen's width less 8 px a side, capped by
     the height) and the thumb bar fixed at the bottom with 56 px buttons; spare height goes above the thumb bar.
     The head is one row, or, where the height allows (write.js fitHead sets .wr-stage[data-room=lead|mid]), the
     full head: the tile, the meaning and readings large, what it is, the step track and (lead) the step's
     instruction, things to read rather than touch. The pad shows only a light dashed cross. On a computer the pad
     is on the left, the full head on the right and the thumb bar under the pad; a phone on its side puts the
     one-row head and the bar beside the pad.
   - The model is drawn as a brush leaves it (write/model.js .wr-fill outlines: sweeps and hooks thin out); in
     tracing the next stroke is a little darker (.wr-nextline) with its number, start dot and arrow.
   - While a pad shows nothing moves under a finger: the pad has touch-action none, the page no pull-to-refresh
     or rubber band, the session no text selection or callout, its buttons no double-tap zoom; Tomo stays away.
   - The thumb bar's classes (.wr-thumb, .wr-span2, .wr-span3, .offer) are shared with composition by hand
     (compose.css). .wr-tools and .wr-word are shared with the study screens' pads (study/runner.js, meet.js):
     the thumb bar's look is scoped to .wr-thumb, so theirs is untouched.
   - 14 px floor, 44 px targets (48 px and more for the writing controls), nothing wider than the page at 320 px.
     The model glyph is in Klee One (--font-hand). */

/* ---- Hub ---- */
.wr-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); min-width: 0; }
.wr-hub .pagehead { margin-bottom: 0; }
.wr-intro { margin: var(--s-1) 0 0; }
.wr-note { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.wr-today { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; }
.wr-today .wr-start { min-width: min(100%, 320px); }
.wr-today-sub { margin: 0; color: var(--ink-3); font-size: var(--fs-14); }
/* Today's characters: one row of 48 px tiles, each a link that writes that one character. */
.wr-todaychars { display: flex; gap: var(--s-2); width: 100%; margin: var(--s-1) 0 0; padding: 0; list-style: none; }
.wr-tile { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--line);
  font: 400 30px/1 var(--font-hand); color: var(--ink); }
.wr-todaychars .wr-tile { width: 48px; height: 48px; font-size: 28px; text-decoration: none; }
@media (hover: hover) { a.wr-tile:hover { border-color: var(--line-strong); background: var(--surface); } }
.wr-todaychars .wr-tile.more { background: transparent; border-color: transparent; font: 700 var(--fs-14)/1 var(--font-sans); color: var(--ink-3); }
/* Composition and Typing: two rows, the whole row one link (the shared ul.list.links). */
.wr-ways { max-width: 760px; }
.wr-ways .main b .ja-sub { margin-left: var(--s-1); }
/* Choose what to write: a fold (closed on a phone, open on a wider screen); its row is the section's head */
.wr-sets { min-width: 0; scroll-margin-top: calc(var(--bar-h) + env(safe-area-inset-top) + 12px); }
.wr-sets:focus { outline: none; }
.wr-sets-sum { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; cursor: pointer; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wr-sets-sum::-webkit-details-marker { display: none; }
.wr-sets-sum::after { content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; background: var(--ink-3);
  -webkit-mask: var(--i-chev) center / 20px no-repeat; mask: var(--i-chev) center / 20px no-repeat; transition: transform .15s; }
.wr-sets[open] > .wr-sets-sum::after { transform: rotate(180deg); }
.wr-sets[open] > .wr-sets-sum { border-bottom-color: transparent; }
.wr-sets-t { display: grid; gap: 2px; min-width: 0; }
.wr-sets h2 { margin: 0; font-size: var(--fs-20); }
.wr-sets-sub { font-size: var(--fs-14); color: var(--ink-3); }
.wr-sets-body { display: grid; gap: var(--s-3); padding-top: var(--s-2); min-width: 0; }
.wr-sets .seg { justify-self: start; max-width: 100%; }
@media (min-width: 721px) {
  /* on a wider screen it reads as a plain section with its head (it starts open) */
  .wr-sets-sum { border: 0; min-height: 0; }
}
.wr-setbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.wr-lvl select { width: auto; min-width: 200px; }
.wr-rows, .wr-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--s-3) 10px; }
.wr-row { position: relative; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 64px; padding: 10px 14px; border-radius: var(--r-2); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
@media (hover: hover) { .wr-row:hover { border-color: var(--line-strong); background: var(--surface-2); } }
.wr-row-ch { font: 400 24px/1.25 var(--font-hand); letter-spacing: .06em; overflow-wrap: anywhere; }
/* a row's tile is a grid of its kana: each sound in the column under its kana, the columns one width across the tile
   (--n: how many in the row), so あいうえお is spaced as かきくけこ is and "chi tsu te to" sit under ちつてと */
.wr-cols { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); width: 100%; max-width: calc(var(--n, 5) * 36px); letter-spacing: 0; }
.wr-cols > span { text-align: center; min-width: 0; }
.wr-ro { width: 100%; }
.wr-ro > span { white-space: nowrap; }
.wr-oneof { margin-top: var(--s-1); }
/* Under the row's characters: their sounds (or which ten). How many are written from memory ("2 of 5", or the done
   mark) sits on the tile's top-right corner, on its border, never on the sounds' line. */
.wr-row-sub { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.wr-row-n { position: absolute; top: -10px; right: 10px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-14); line-height: 20px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wr-row-n:empty { display: none; }
.wr-row-n .maru { font-size: var(--fs-16); }
.wr-groups .wr-row-ch { font-size: 20px; letter-spacing: .02em; word-break: break-all; line-break: anywhere; }

/* ---- Session ---- */
/* Nothing moves under a finger while a pad is on the screen. */
/* (The summary keeps the pad out of sight for an Undo: a hidden stage is not a pad on the screen.) */
html:has(#main .wr-pad:not([hidden] *)), html:has(#main .wr-pad:not([hidden] *)) body { overscroll-behavior: none; }
body:has(#main :is(.wr-session .wr-pad:not([hidden] *), .gk)) .tutor:not(.open) { display: none; }
.wr-session { --wr-rest: 296px; --wr-pad: clamp(260px, calc(100dvh - var(--bar-h) - var(--tab-h) - var(--wr-rest)), 620px); display: grid; gap: var(--s-3); min-width: 0;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.wr-session :is(button, a) { touch-action: manipulation; }
.wr-top { display: flex; align-items: center; gap: 10px; }
.wr-top .back { margin: 0; }
.wr-count { font-size: var(--fs-14); font-weight: 700; color: var(--ink-2); }
.wr-session .progressline { margin: 0; }
.wr-stage { display: grid; gap: var(--s-3) var(--s-6); grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "pad"; align-items: start; min-width: 0; }
.wr-padcol { grid-area: pad; width: min(100%, var(--wr-pad)); justify-self: center; display: grid; gap: var(--s-1); min-width: 0; }

/* The head as one row: the character as a tile (tap to hear it), its meaning (up to two lines) over the step in
   words ("Step 2: Trace"), ⋯ (the strokes and readings at its head). */
.wr-head { grid-area: head; display: flex; align-items: center; gap: var(--s-2); min-width: 0; min-height: 52px; }
.wr-glyph { flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 400 30px/1 var(--font-hand); white-space: normal; }
.wr-glyph:disabled { opacity: 1; cursor: default; }
.wr-about { flex: 1; min-width: 0; line-height: 1.3; }
.wr-meaning { font-size: var(--fs-16); font-weight: 700; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.wr-kindword { font-weight: 400; color: var(--ink-3); }
.wr-reads, .wr-sub, .wr-track, .wr-how { display: none; }
.wr-stepname { font-size: var(--fs-14); font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-head > .icon, .wr-menu { flex: none; }
/* The full head (a computer, a tablet, a phone with room above the pad): the tile larger, the meaning and the
   readings large, what it is and its strokes, then the steps as a labelled track and the step's instruction. */
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "glyph about say more" "track track track track" "how how how how";
  align-items: start; gap: var(--s-3); }
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-head:not(:has(.wr-glyph)) { grid-template-areas: "about about say more" "track track track track" "how how how how"; }
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-glyph { grid-area: glyph; width: 72px; height: 72px; font-size: 52px; }
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-about { grid-area: about; display: grid; gap: 2px; align-self: center; }
.wr-stage:is([data-room=lead], [data-room=mid]) #wr-say { grid-area: say; }
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-menu { grid-area: more; }
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-meaning { font-size: var(--fs-22); line-height: 1.25; }
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-kindword, .wr-stage:is([data-room=lead], [data-room=mid]) .wr-stepname, .wr-stage:is([data-room=lead], [data-room=mid]) .wr-facts { display: none; }
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-reads { display: block; font-size: var(--fs-18); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-sub { display: block; font-size: var(--fs-14); color: var(--ink-3); }
/* Four equal steps, the last as wide as "From memory" needs, so every label stays on one line at 320 px. */
.wr-stage:is([data-room=lead], [data-room=mid]) .wr-track { grid-area: track; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(max-content, 1.3fr); gap: var(--s-1); list-style: none; margin: var(--s-1) 0 0; padding: 0; }
.wr-track li { min-width: 0; padding-top: var(--s-2); border-top: 4px solid var(--track); font-size: var(--fs-14); line-height: 1.25; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-track li.done { border-top-color: var(--dye-2); color: var(--ink-2); }
.wr-track li.now { border-top-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.wr-stage[data-room=lead] .wr-how { grid-area: how; display: block; margin: 0; font-size: var(--fs-16); line-height: 1.4; color: var(--ink-2); }
/* Less room: the full head without its instruction (the status line says it), the tile a little smaller. */
.wr-stage[data-room=mid] .wr-head { grid-template-areas: "glyph about say more" "track track track track"; gap: var(--s-2) var(--s-3); }
.wr-stage[data-room=mid] .wr-head:not(:has(.wr-glyph)) { grid-template-areas: "about about say more" "track track track track"; }
.wr-stage[data-room=mid] .wr-glyph { width: 60px; height: 60px; font-size: 44px; }
.wr-stage[data-room=mid] .wr-meaning { font-size: var(--fs-20); }
.wr-menu .menu-list { min-width: min(290px, calc(100vw - 48px)); }
.wr-menu .menu-list > button > span { flex: 1; min-width: 0; }
.wr-menu .wr-facts { font-size: var(--fs-14); color: var(--ink-3); line-height: 1.4; }

/* The pad: grid paper with 田 guides; the ink, the model and the finished strokes in the tokens' colours. */
.wr-pad { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-2); border: 1px solid var(--line-strong); color: var(--ink); overflow: hidden;
  background-color: var(--surface);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; }
.wr-pad > svg, .wr-pad > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wr-pad canvas { touch-action: none; cursor: crosshair; }
.wr-pad.off canvas { cursor: default; }
.wr-grid .wr-sq { fill: none; stroke: var(--line-strong); stroke-width: .8; }
.wr-grid .wr-guide { fill: none; stroke: var(--line-strong); stroke-width: .7; stroke-dasharray: 2.2 2.2; }
/* On the pad: only the dashed cross through the middle (four quarters), light, and the pad's own edge. */
.wr-pad .wr-sq { stroke: none; }
.wr-pad .wr-guide { stroke-width: .55; stroke-dasharray: 2 2.4; stroke-opacity: .75; }
.wr-layer text { font: 700 8px var(--font-sans); fill: var(--ink-3); paint-order: stroke; stroke: var(--surface); stroke-width: 2px; stroke-linejoin: round; }
.wr-layer text.accent { fill: var(--accent); }
.wr-layer text.faint { fill: var(--ink-3); }
.wr-grey { stroke: color-mix(in srgb, var(--ink) 17%, transparent); }
.wr-clean { stroke: var(--ink); animation: wr-settle .25s ease-out; }
.wr-hintline { stroke: color-mix(in srgb, var(--accent) 32%, transparent); }
/* The model as a brush leaves it: filled outlines (model.js outline) in the same colours as the lines. */
path.wr-fill { stroke: none; }
.wr-grey.wr-fill { fill: color-mix(in srgb, var(--ink) 17%, transparent); }
.wr-clean.wr-fill { fill: var(--ink); }
.wr-hintline.wr-fill { fill: color-mix(in srgb, var(--accent) 32%, transparent); }
.wr-nextline.wr-fill { fill: color-mix(in srgb, var(--ink) 38%, transparent); }
.wr-animpath.wr-fill { fill: var(--ink); }
.wr-animpath.now.wr-fill { fill: var(--accent); }
.wr-startdot, .wr-arrow { fill: var(--accent); }
.wr-bad { stroke: var(--bad); opacity: .85; animation: wr-fade 1.3s ease-in forwards; }
.wr-animpath { stroke: var(--ink); }
.wr-animpath.now { stroke: var(--accent); }
@keyframes wr-settle { from { opacity: .35; } }
@keyframes wr-fade { 0%, 45% { opacity: .85; } 100% { opacity: 0; } }

/* The status line, right under the pad: what to do, then what the checker saw. */
.wr-word { margin: 0; min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: var(--fs-16); line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.wr-word.ok { color: var(--good-text); }
.wr-word.start { font-weight: 400; color: var(--ink-3); }
.wr-word.near { color: var(--warn-text); }
/* The study screens' pads keep their row of tools (study/runner.js, meet.js). */
.wr-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wr-tools button { padding: 0 14px; }

/* The thumb bar: three equal buttons, or the step's one primary, or the paper grades. */
.wr-thumb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-1); }
.wr-thumb > .wr-tools, .wr-thumb > .wr-go, .wr-thumb .wr-grades { display: contents; }
.wr-thumb button { min-height: 48px; padding: 0 var(--s-2); min-width: 0; }
.wr-thumb .wr-span2 { grid-column: span 2; }
.wr-thumb .wr-span3 { grid-column: 1 / -1; }
.wr-thumb .offer { border-color: var(--accent); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.wr-thumb kbd { font: 700 var(--fs-14) var(--mono); padding: 2px 6px; border-radius: var(--r-1); background: color-mix(in srgb, currentColor 14%, transparent); }
.wr-thumb .primary kbd { background: color-mix(in srgb, var(--accent-ink) 22%, transparent); color: var(--accent-ink); }
.wr-thumb .again { background: var(--bad-soft); border-color: transparent; color: var(--bad-text); }
.wr-thumb .hard { background: var(--warn-soft); border-color: transparent; color: var(--warn-text); }
.wr-thumb .got { background: var(--good-soft); border-color: transparent; color: var(--good-text); }
.wr-keys { margin: 0; }
@media (hover: none) and (pointer: coarse) { .wr-keys, .wr-thumb kbd { display: none; } }

/* A tablet held upright: the full head over the pad, so the pad gives up the head's height and nothing scrolls. */
@media (min-width: 721px) and (max-width: 899px) { .wr-session:has(.wr-stage[data-room=lead]) { --wr-rest: 480px; } }
/* A computer: the pad on the left, the head on the right, the thumb bar under the pad. */
@media (min-width: 900px) {
  .wr-stage { grid-template-columns: var(--wr-pad) minmax(260px, 1fr); grid-template-areas: "pad head"; }
  .wr-padcol { width: var(--wr-pad); }
  .wr-stage:is([data-room=lead], [data-room=mid]) .wr-head { gap: var(--s-4); max-width: 520px; }
  .wr-stage:is([data-room=lead], [data-room=mid]) .wr-glyph { width: 88px; height: 88px; font-size: 60px; }
  .wr-stage:is([data-room=lead], [data-room=mid]) .wr-meaning { font-size: var(--fs-24); -webkit-line-clamp: 3; line-clamp: 3; }
  .wr-thumb button { gap: var(--s-2); }
}

/* An upright phone: the head right under the bar; the pad anchored to the thumb bar (8 px over it, nearest the
   thumb), as wide as the screen less 8 px a side (374 px at 390, 344 at 360) where the height allows, else as tall
   as it allows, with the status line ("Good: stroke 1 of 4") right over it, where the hand drawing on the pad does
   not cover it; the thumb bar fixed at the bottom, and the bar holds the count and the way back. Whatever height is
   left over goes between the head and the status line, never between the pad and Undo, Clear and Show me. */
@media (max-width: 720px) and (min-height: 501px) {
  /* The page ends where the thumb bar starts, so a session that fits does not scroll at all. */
  .page:has(> .wr-session) { --wr-thumb-h: 73px; padding-top: var(--s-2);
    padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--wr-thumb-h)); }
  .page:has(> .wr-session .wr-summary) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--s-6)); }
  /* The pad: the screen's width less 8 px a side, or the room less the head (--wr-head: the height of the head
     shown, one row, mid or lead, measured by write.js fitHead, which keeps a taller head only while the pad stays as
     wide as the one-row head leaves it, or the page's 16 px gutters), the status line (44) and the gap (8, and 2 to
     spare), whichever is smaller. */
  .wr-session { --wr-top: 64px; --wr-head: 56px; gap: var(--s-2);
    --wr-side: calc(max(8px, env(safe-area-inset-left)) + max(8px, env(safe-area-inset-right)));
    --wr-room: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - var(--tab-h) - env(safe-area-inset-bottom) - var(--s-2) - var(--wr-thumb-h));
    --wr-pad: clamp(240px, min(100vw - var(--wr-side), var(--wr-room) - var(--wr-top) - var(--wr-head) - 44px - 10px), 620px); }
  html[data-shell=focus] .wr-session { --wr-top: 0px; }
  html[data-shell=focus] .wr-session > :is(.wr-top, .progressline) { display: none; }
  html[data-shell=focus] .wr-session:has(> .wr-stage:not([hidden])) { min-height: var(--wr-room); }
  .wr-session:has(> .wr-stage:not([hidden])) { display: flex; flex-direction: column; }
  /* (the 8 px under the pad, over the thumb bar, is the pad column's own; the room to spare is the auto margin over
     the status line, so the stage has no gap of its own) */
  .wr-stage { gap: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
  /* the pad's column runs to 8 px from the screen's edges (past the page's 16 px gutters); the pad is centred in
     it and the status line keeps to the pad's width, over it */
  .wr-padcol { display: flex; flex-direction: column; align-items: center; gap: 0; width: auto; align-self: stretch;
    margin-inline: calc(max(8px, env(safe-area-inset-left)) - var(--gut-l)) calc(max(8px, env(safe-area-inset-right)) - var(--gut-r));
    margin-top: auto; padding-bottom: var(--s-2); }
  #wr-pad { width: var(--wr-pad); max-width: 100%; flex: none; }
  .wr-padcol > .wr-word { order: -1; align-self: center; width: min(100% - 16px, var(--wr-pad)); }
  .wr-head { width: min(100%, var(--wr-pad)); align-self: center; }
  .wr-thumb { position: fixed; z-index: 25; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); margin: 0;
    padding: var(--s-2) var(--gut-r) var(--s-2) var(--gut-l); background: var(--surface); border-top: 1px solid var(--line); }
  html:not(:has(#tabbar:not([hidden]))) .wr-thumb { bottom: 0; padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom)); }
  .wr-thumb button { min-height: 56px; flex-direction: column; gap: 2px; padding: 4px; font-size: var(--fs-14); line-height: 1.2; white-space: nowrap; }
  .wr-thumb button svg { width: 22px; height: 22px; }
  .wr-thumb :is(.primary, .again, .hard, .got) { flex-direction: row; font-size: var(--fs-16); }
  .wr-thumb kbd { display: none; }
  .wr-keys { display: none; }
}
/* A phone on its side (or any short window): the pad on the left at the window's height, the rest beside it. */
@media (max-height: 500px) and (orientation: landscape) {
  .page:has(> .wr-session) { padding-top: var(--s-3); padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--s-3)); }
  .wr-session { --wr-pad: clamp(200px, calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - var(--tab-h) - env(safe-area-inset-bottom) - 28px), 420px); gap: var(--s-2); }
  /* The session is one grid: the pad down the left; the way back and the count, the head, the status line and the
     thumb bar down the right. */
  .wr-session:has(> .wr-stage:not([hidden])) { grid-template-columns: var(--wr-pad) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "pad top" "pad head" "pad word" "pad thumb"; gap: var(--s-2) var(--s-5); }
  .wr-session > .progressline, .wr-keys { display: none; }
  .wr-session:has(> .wr-stage:not([hidden])) :is(.wr-stage, .wr-padcol) { display: contents; }
  .wr-top { grid-area: top; min-height: var(--tap); }
  .wr-head { grid-area: head; }
  #wr-pad { grid-area: pad; width: var(--wr-pad); }
  .wr-word { grid-area: word; align-self: start; }
  .wr-thumb { grid-area: thumb; align-self: end; }
  .wr-thumb button { min-height: 52px; }
}
/* An upright phone with room for the full head: right under the bar, the status line and the pad right under it. */
@media (max-width: 720px) and (min-height: 501px) {
  .wr-stage[data-room=lead] .wr-head { padding-block: var(--s-2) 0; }
}

/* The summary. Its heading says how many: the count and the progress line above it go. */
.wr-session:has(.wr-summary) :is(.wr-count, .progressline) { display: none; }
.wr-summary .wr-results { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wr-summary .wr-results li { display: grid; justify-items: center; gap: 6px; }
.wr-sum-acts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); justify-content: center; }

@media (max-width: 720px) {
  .wr-today { justify-items: stretch; }
  .wr-today .wr-start { width: 100%; }
  /* Hiragana, Katakana, Kanji: the full width, three equal parts */
  .wr-sets .seg { justify-self: stretch; display: flex; width: 100%; }
  .wr-sets .seg > button { flex: 1 1 0; }
  .wr-ways { max-width: none; }
  .wr-rows, .wr-groups { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
  .wr-row-ch { font-size: 22px; }
  .wr-keys { display: none; }
  .wr-sum-acts > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .wr-clean { animation: none; } .wr-bad { animation-duration: 1.4s; } }