/* compose.css - composition (作文) and typing practice (W2 track: js/screens/compose.js and typing.js). Colours only
   through app.css tokens, light and dark. Rules it keeps:
   - Phone first and calm (docs/mobile-plan.md W5, W6, W8, W9): one column, no boxes on a phone (space and
     hairlines instead), one main action first; on a computer the writing view puts the prompt beside the editor
     and the marking beside its list of corrections, each on a card.
   - Writing by hand on an upright phone is a locked view that fits the screen and never scrolls: the prompt in the
     room above the writing (whole when it fits, else one pinned line with the whole prompt in a sheet, else, on a
     short phone, only under Page: compose.js fitTop sets data-top), then the line and page with how
     many squares are written under them and ‹ › and Page (its rows in the site's ⋯ on a phone), a strip of the
     line's squares (44 px or more each), one big square to 8 px from the screen's edges (less on a short phone,
     never under 260 px where the width allows it), and the thumb bar (write.css .wr-thumb) fixed at the bottom,
     its words short at every width (Undo, Clear: the full words are their names).
     Mark it waits in the bar (the app's #bar-tool) once there is writing. Nothing moves under a finger anywhere
     in it (touch-action none, no pull-to-refresh, no selection or callout). A phone on its side puts the square
     on the left at the window's height.
   - 44 px targets (48 and more for the writing controls), 14 px floor, 16 px inputs, nothing wider than the screen
     at 320 px (long Japanese with no spaces wraps anywhere; the squared paper fits its box). */

/* ---- shared ---- */
.compose-page [lang=ja], .typing-page [lang=ja] { font-family: var(--font-sans); }
.compose-page ruby rt { font-size: max(14px, .55em); color: var(--rt); }
.compose-page .back, .typing-page .back { margin-bottom: var(--s-2); }
.cp-select select { width: auto; max-width: 100%; min-height: var(--tap); font-size: var(--fs-16); }

/* ---- the prompts ---- */
.cp-intro { margin: var(--s-1) 0 0; }
.cp-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); justify-items: start; min-width: 0; }
.cp-pick > * { min-width: 0; max-width: 100%; }
.cp-surprise { min-width: min(100%, 320px); }
.cp-continue, .cp-first { max-width: 100%; }
/* Surprise me: a quiet button with the level and the topic, never the main one while a prompt waits */
.cp-filters .cp-random svg { width: 18px; height: 18px; }
.cp-cont-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-done .maru { font-size: var(--fs-18); }
.cp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cp-lvl-note { margin: 0; }
.cp-list { justify-self: stretch; width: 100%; max-width: 760px; }
.cp-list .cp-card-title { overflow-wrap: anywhere; }
.cp-more { margin-top: var(--s-1); }
.cp-history { margin-top: var(--s-6); max-width: 760px; min-width: 0; scroll-margin-top: calc(var(--bar-h) + env(safe-area-inset-top) + 12px); }
.cp-history h2 { margin: 0 0 var(--s-2); }
.cp-history h2:focus { outline: none; }
/* a row of the learner's writing: the whole row opens it, the bin button beside it */
.cp-hist > li { display: flex; align-items: center; gap: var(--s-1); border-top: 1px solid var(--line); }
.cp-hist > li:first-child { border-top: 0; }
.cp-hist > li > a { flex: 1; min-width: 0; }
.cp-hist .meta { white-space: nowrap; }
.cp-st.warn { color: var(--warn-text); font-weight: 700; }
.cp-st.bad { color: var(--bad-text); font-weight: 700; }
.cp-del { flex: none; color: var(--ink-3); }
.cp-bin .list > li { padding-inline: 0; }

/* ---- writing ---- */
.cp-write { display: grid; gap: var(--s-5); align-items: start; min-width: 0; }
.cp-prompt { min-width: 0; }
.cp-prompt h1 { font-size: var(--fs-24); margin: 0 0 var(--s-1); overflow-wrap: anywhere; }
.cp-prompt-ja { font-size: var(--fs-18); line-height: var(--lh-ruby); margin: 0; overflow-wrap: anywhere; }
.cp-prompt-en { margin: var(--s-1) 0 0; }
.cp-meta { margin: var(--s-2) 0 0; font-size: var(--fs-14); color: var(--ink-3); }
.cp-meta .nw { white-space: nowrap; }
.cp-useful-box { margin-top: var(--s-3); }
.cp-useful { list-style: none; margin: 0; padding: 0; display: grid; }
.cp-useful li { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); align-items: baseline; padding: var(--s-1) 0; border-top: 1px solid var(--line); }
.cp-useful li:first-child { border-top: 0; }
.cp-useful-ja { font-size: var(--fs-18); line-height: var(--lh-ruby); color: var(--ink); }
.cp-useful-en { color: var(--ink-3); font-size: var(--fs-14); }
.cp-editor { min-width: 0; }
.cp-mode { margin-bottom: var(--s-3); max-width: 100%; }
.cp-mode button svg { width: 18px; height: 18px; }
.cp-tools { gap: var(--s-3); margin-bottom: var(--s-2); }
.cp-kata button { min-width: var(--tap); font-size: var(--fs-18); }
.cp-text { font-size: var(--fs-18); line-height: 1.8; min-height: 220px; overflow-wrap: anywhere; }
.cp-sugg { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }
.cp-sg { min-height: var(--tap); padding: 4px 14px; border-radius: var(--r-3); font: 700 var(--fs-18)/1.2 var(--font-sans); display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0;
  background: var(--accent-soft); border-color: transparent; color: var(--ink); white-space: normal; }
.cp-sg small { font: 400 var(--fs-14)/1.2 var(--font-sans); color: var(--ink-3); max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-count { margin: var(--s-2) 0 0; }
.cp-markbar { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.cp-markbar .err:empty { display: none; }
.cp-price { margin: 0; color: var(--ink-3); }
.cp-markrow { gap: var(--s-3); }
.cp-markbtn { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-18); }
/* In the bar (typing on a phone): a quiet word until there is something to mark, then the filled button. */
#bar-tool .cp-markbtn { min-height: var(--tap); padding: 0 var(--s-3); font-size: var(--fs-16); gap: var(--s-1); }
#bar-tool .cp-markbtn:disabled { opacity: 1; background: transparent; border-color: transparent; color: var(--ink-3); box-shadow: none; }
.cp-working { display: inline-flex; align-items: center; gap: 10px; }
.cp-working .spinner, .cp-notyet .spinner { width: 18px; height: 18px; }

/* the pinned prompt line, the prompt's own way to its sheet and Mark it for the bar: only in the locked view (below) */
.cp-pin, .cp-review, .cp-po-hint, .cp-prompt-open { display: none; }
.cp-handfoot { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.cp-handfoot .cp-count { flex: 1; min-width: 0; }
.cp-count.bad { color: var(--bad-text); font-weight: 700; }
.cp-prompt-sheet .cp-useful-h { font-size: var(--fs-16); margin: var(--s-4) 0 var(--s-1); }
.cp-rv-n { margin: var(--s-3) 0 0; font-weight: 700; }
.cp-rv-n + .cp-price { margin-top: var(--s-1); }
#cp-rv-err:empty { display: none; }
#cp-rv-working { display: flex; align-items: center; gap: 10px; margin: var(--s-2) 0 0; }
#cp-rv-working[hidden] { display: none; }

/* the squared paper (原稿用紙): the whole page, on a tablet or a computer */
.gk-tools { gap: var(--s-2); margin-bottom: 10px; }
.gk-pages { gap: var(--s-1); }
.gk-page { min-width: 6.5em; text-align: center; color: var(--ink-3); }
.gk-wrap { width: 100%; max-width: 760px; margin: 0 auto; }
.gk { display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); cursor: crosshair; max-width: 100%; }
.gk-help { margin: var(--s-2) 0 0; }
@media (hover: none) and (pointer: coarse) { .gk-help { display: none; } }
/* nothing moves under a finger while the paper is on the screen */
html:has(#main .gk), html:has(#main .gk) body { overscroll-behavior: none; }
#cp-pad { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#cp-pad :is(button, a) { touch-action: manipulation; }

/* one big square at a time, on a phone: where it is, the line's squares, the square, the thumb bar */
.gk-square { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); min-width: 0; }
.gk-sqhead { display: flex; align-items: center; gap: var(--s-1); min-height: var(--tap); }
/* where it is, on one line: "Line 1 · page 1" and, on a phone, " · 2 written" (‹ › at the row's end) */
.gk-at { display: block; min-width: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-14); }
.gk-where { font-weight: 700; color: var(--ink-2); }
.gk-note { display: none; color: var(--ink-3); }
.gk-note::before { content: " · "; color: var(--ink-3); }
.gk-menu { flex: none; }
.gk-menu .menu-list { min-width: min(260px, calc(100vw - 48px)); }
.gk-menu .menu-list > button > span { flex: 1; min-width: 0; }
.gk-menu .gk-page { min-width: 0; text-align: left; margin: var(--s-1) var(--s-3); }
/* The row is as tall as its squares (Genko.fit sets --gk-h: 44 to 52 px), so no square loses an edge. */
.gk-strip { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: var(--gk-h, var(--tap)); min-height: var(--tap); overflow: hidden; }
.gk-strip-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gk-cell { position: relative; min-height: var(--gk-h, var(--tap)); min-width: 0; padding: 0; border: 0; border-radius: var(--r-1); background: transparent; }
@media (hover: hover) { .gk-cell:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } }
.gk-cell:focus-visible { outline-offset: -2px; }
.gk-bigwrap { width: min(100%, 55dvh); max-width: none; }
.gk-big { border-radius: var(--r-2); box-shadow: 0 0 0 1px var(--line-strong); }
.gk-thumb > button { display: inline-flex; }
.gk-thumb #gk-next-sq { gap: var(--s-1); }
/* Up to 360 px the thumb bar says Undo and Clear (their names keep "stroke" and "square"), so it stays one row. */
.gk-see canvas { display: block; max-width: 100%; border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--line); }

/* ---- a marking ---- */
.cp-result { display: grid; gap: var(--s-5); align-items: start; }
.cp-col { display: grid; gap: var(--s-5); min-width: 0; }
.cp-res-meta { margin: 0 0 var(--s-1); font-size: var(--fs-14); color: var(--ink-3); }
.cp-res-acts { gap: var(--s-2); }
.cp-read { margin-bottom: var(--s-5); }
.cp-read-as, .cp-text-shown { font-size: var(--fs-18); line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--s-3) 14px; border-radius: var(--r-3); background: var(--surface-2); }
.cp-page-box summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.cp-page { display: block; max-width: 100%; height: auto; border-radius: var(--r-2); box-shadow: 0 0 0 1px var(--line); margin: var(--s-2) 0; }
.cp-marked { font-size: var(--fs-18); line-height: 2.3; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.cp-mk { display: inline; min-height: 0; padding: 7px 2px; margin: -7px 0; border: 0; border-radius: 4px; font: inherit; line-height: inherit; white-space: pre-wrap; color: inherit;
  background: color-mix(in srgb, var(--kc, var(--bad)) 16%, transparent); box-shadow: inset 0 -2px 0 var(--kc, var(--bad)); cursor: pointer; }
.cp-mk sup { font: 700 var(--fs-14)/1 var(--font-sans); color: var(--kc, var(--bad)); margin-left: 1px; }
.cp-mk[aria-expanded=true] { background: color-mix(in srgb, var(--kc, var(--bad)) 30%, transparent); }
.cp-why { margin-top: 14px; padding: var(--s-3) 14px; border-radius: var(--r-3); border: 1px solid var(--line-strong); background: var(--surface-2); }
.cp-why p { margin: 6px 0 0; }
.cp-fixed { font-size: var(--fs-18); line-height: 2.2; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.cp-good { margin: 0 0 var(--s-2); padding-left: 20px; }
.cp-good li { margin: 4px 0; }
.cp-level-note { margin: var(--s-2) 0 0; }
.cp-fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cp-fix { padding: var(--s-3) 14px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--surface); min-width: 0; transition: border-color .2s, box-shadow .2s; }
.cp-fix.on { border-color: var(--kc, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kc, var(--accent)) 30%, transparent); }
.cp-fix-top { gap: var(--s-2); }
.cp-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--surface-2); font: 700 var(--fs-14)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.cp-change { font-size: var(--fs-18); line-height: 2; margin: 6px 0 2px; overflow-wrap: anywhere; }
.cp-change del { color: var(--bad-text); text-decoration-thickness: 2px; }
.cp-arrow { margin: 0 var(--s-2); color: var(--ink-3); }
.cp-ins { color: var(--good-text); font-weight: 700; }
.cp-fix-why { margin: 2px 0 6px; }
.cp-sent { display: grid; gap: 2px; margin: 0 0 6px; padding: var(--s-2) 10px; border-radius: var(--r-2); background: var(--surface-2); overflow-wrap: anywhere; }
.cp-sent-ja { font-size: var(--fs-16); line-height: 2; }
.cp-card-pick { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); font-weight: 700; font-size: var(--fs-14); cursor: pointer; }
.cp-card-pick input { width: 22px; height: 22px; margin: 0; }
.cp-save { margin-top: var(--s-3); }
.cp-notyet h2 { margin-top: var(--s-4); }
/* each kind of correction keeps its own colour (a token) */
.k-particle { --kc: var(--c3); } .k-conjugation { --kc: var(--c5); } .k-register { --kc: var(--c4); } .k-kanji { --kc: var(--c8); }
.k-word { --kc: var(--c6); } .k-spelling { --kc: var(--c7); } .k-naturalness { --kc: var(--c2); } .k-punctuation { --kc: var(--c9); }
.chip[class*="k-"] { background: color-mix(in srgb, var(--kc) 16%, transparent); color: var(--ink); }

/* ---- typing ---- */
.ty-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); justify-items: start; min-width: 0; max-width: 680px; }
.ty-setup > * { min-width: 0; max-width: 100%; }
.ty-setup .seg { max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ty-setup .seg button { min-width: 0; justify-content: center; }
.ty-help { margin: 0; max-width: 60ch; }
.ty-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .ty-touch { display: inline; } .ty-desk { display: none; } }
.ty-sample { display: grid; justify-items: center; gap: 2px; width: 100%; padding: var(--s-4) var(--s-3); border-radius: var(--r-3); background: var(--surface-2); text-align: center; }
.ty-sample-l { font-size: var(--fs-14); font-weight: 700; color: var(--ink-3); }
.ty-sample-w { font-size: 32px; line-height: 1.3; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.ty-arrow { margin: 0 var(--s-2); color: var(--ink-3); font-size: .7em; vertical-align: middle; }
.ty-sample-m { font-size: var(--fs-14); color: var(--ink-3); overflow-wrap: anywhere; }
.ty-key { font-family: var(--mono); color: var(--ink-2); }
.ty-go { display: flex; gap: var(--s-2) var(--s-3); width: 100%; }
.ty-start { min-width: min(100%, 320px); }
.ty-bestline { margin: 0; font-size: var(--fs-14); color: var(--ink-3); }
.ty-bestline b { color: var(--ink-2); }
/* the level chip and a select beside it are the same height */
:is(.cp-filters, .typing-page .pagehead) .lvl-chip, .cp-filters select { min-height: var(--tap); height: var(--tap); }
.ty-best { margin-top: var(--s-6); max-width: 680px; }
.ty-best h2 { margin: 0 0 var(--s-2); }
.ty-table td, .ty-table th { white-space: nowrap; }
.ty-round { max-width: 680px; margin: 0 auto; scroll-margin-top: calc(var(--bar-h) + 8px); padding: var(--s-4) 18px; }
.ty-top { display: flex; align-items: center; gap: var(--s-3); }
.ty-clock { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.ty-clock i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .2s linear; }
.ty-left { font-weight: 700; min-width: 2ch; text-align: right; }
.ty-word { font-size: clamp(30px, 9vw, 44px); line-height: 1.3; text-align: center; margin: 14px 0 2px; overflow-wrap: anywhere; letter-spacing: .02em; }
.ty-done { color: var(--good-text); }
.ty-mean { text-align: center; color: var(--ink-3); margin: 0 0 var(--s-3); min-height: 1.5em; }
input.ty-in { font-size: 20px; text-align: center; min-height: 52px; }
.ty-in.shake { animation: ty-shake .25s; border-color: var(--bad); }
@keyframes ty-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .ty-in.shake { animation: none; } .ty-clock i { transition: none; } }
.ty-cands { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: 10px; }
.ty-cand { min-height: 48px; min-width: 56px; padding: 0 var(--s-4); border-radius: var(--r-3); font: 700 20px/1 var(--font-sans); }
.ty-cand.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ty-cand.right { background: var(--good-soft); border-color: var(--good); color: var(--good-text); }
.ty-cand.wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-text); }
.ty-note { text-align: center; min-height: 1.5em; margin: 10px 0 0; color: var(--ink-3); }
.ty-note.bad { color: var(--bad-text); font-weight: 700; }
.ty-note.good { color: var(--good-text); font-weight: 700; }
.ty-foot { margin-top: 10px; }
.ty-summary { margin-bottom: var(--s-5); max-width: 680px; }
.ty-score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: var(--s-3) 0 var(--s-4); }
.ty-score > div { padding: var(--s-3); border-radius: var(--r-2); background: var(--surface-2); min-width: 0; }
.ty-score b { display: block; font-size: var(--fs-30); letter-spacing: -.01em; }
.ty-score span { color: var(--ink-3); font-size: var(--fs-14); font-weight: 700; }
.ty-missed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.ty-missed li { overflow-wrap: anywhere; }
.ty-mk { font-size: var(--fs-18); font-weight: 700; }

/* ---- a computer: the writing view and the marking side by side, each part on a card ---- */
@media (min-width: 721px) {
  .cp-prompt, .cp-editor, .cp-result > .cp-col > section, .cp-fixes-box, .cp-read, .cp-notyet { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
}
@media (min-width: 1000px) {
  .cp-write { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .cp-prompt { position: sticky; top: calc(var(--bar-h) + 16px); }
  .cp-result { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ---- a phone ---- */
@media (max-width: 720px) {
  .cp-surprise, .ty-start { width: 100%; }
  /* Start in the thumb's reach: a foot fixed over the tab bar, as the other thumb bars */
  .page.typing-page:has(.ty-go) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 72px + var(--s-5)); }
  .ty-go { 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]))) .ty-go { padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom)); }
  .ty-go .ty-start { min-height: 56px; }
  .cp-pick { justify-items: stretch; }
  .cp-filters > * { flex: 1 1 auto; }
  .cp-filters .cp-select select { width: 100%; }
  .cp-filters .lvl-chip { flex: none; }
  .cp-mode { display: flex; width: 100%; }
  .cp-mode button { flex: 1; }
  .cp-markbtn { width: 100%; }
  /* the marking: sections on the page, the corrections as rows */
  .cp-fixes { gap: 0; }
  .cp-fix { padding: var(--s-3) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .cp-fix:first-child { border-top: 0; }
  .cp-fix.on { box-shadow: inset 3px 0 0 var(--kc, var(--accent)); padding-left: var(--s-3); }
  .ty-setup { justify-items: stretch; }
  .ty-score { grid-template-columns: 1fr 1fr; }
  .ty-score > div:last-child { grid-column: span 2; }
  .ty-round { padding: var(--s-3) 14px; }
  .ty-word { margin-top: var(--s-2); }
}
/* An upright phone writing by hand: the locked view. The page is exactly the screen under the bar: the prompt right
   under the bar; the line (one row: "Line 1 · page 1 · 2 written" with ‹ › at its end), the strip and the square
   together as one block anchored to the thumb bar, as the kanji pad is, nearest the thumb; whatever height is left
   over goes between the prompt and that block, never between the paper and the thumb bar (write.css .wr-thumb,
   fixed), as in a handwriting session. The big square: the screen's width less 8 px a side, or the height less
   everything else (the page's top, the line and page, the strip, the thumb bar and the gaps: 200 px, and the
   prompt's pinned line, --cp-top, unless it is under Page), whichever is smaller: 290 px at 360 x 600 with the
   prompt under Page, 332 at 360 x 640, 374 at 390 x 844. Mark it is in the bar (#bar-tool), so nothing sits under
   the square. */
@media (max-width: 720px) and (min-height: 501px) {
  .page.cp-by-hand { --cp-top: 52px; --gk-sq: clamp(200px, min(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)), 100dvh - var(--bar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 200px - var(--cp-top)), 560px);
    display: flex; flex-direction: column; min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top));
    padding-top: var(--s-2); padding-bottom: calc(env(safe-area-inset-bottom) + 73px + 6px); touch-action: none;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .page.cp-by-hand[data-top=menu] { --cp-top: 0px; }
  .page.cp-by-hand > .back, .cp-by-hand .cp-prompt, .cp-by-hand .cp-mode, .cp-by-hand .cp-markbar, .cp-by-hand .cp-handfoot { display: none; }
  .cp-by-hand .cp-write { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; }
  .cp-by-hand .cp-editor { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--s-2); }
  .cp-by-hand #cp-area { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); min-width: 0; }
  /* The prompt whole: its title, the Japanese with its readings, the English; the details (level, topic, the
     useful words) in the sheet ⋯ opens. */
  .cp-by-hand:is([data-top=full], [data-top=clamp]) .cp-write { gap: var(--s-2); }
  .cp-by-hand:is([data-top=full], [data-top=clamp]) .cp-prompt { display: block; position: relative; }
  .cp-by-hand .cp-prompt :is(.cp-meta, .cp-useful-box) { display: none; }
  .cp-by-hand .cp-prompt h1 { font-size: var(--fs-20); margin: 0 0 var(--s-1); }
  .cp-by-hand .cp-prompt-en { color: var(--ink-2); line-height: 1.45; }
  /* A long prompt: the title on one line, two lines of Japanese and two of English, the rest in the sheet. */
  .cp-by-hand[data-top=clamp] .cp-prompt h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-by-hand[data-top=clamp] :is(.cp-prompt-ja, .cp-prompt-en) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  /* the third line's readings sit just above its line box: cut them off with it */
  .cp-by-hand[data-top=clamp] .cp-prompt-ja { max-height: calc(2em * 2.1 - 6px); }
  /* The whole block opens the sheet (the prompt in full and its useful words); a quiet line says so. */
  .cp-by-hand .cp-po-hint { display: flex; align-items: center; gap: 2px; margin: var(--s-1) 0 0; font-size: var(--fs-14); font-weight: 700; color: var(--accent-text); }
  .cp-by-hand .cp-po-hint svg { width: 16px; height: 16px; }
  .cp-by-hand[data-top=full] .cp-po-hint.none, .cp-by-hand[data-top=full] .cp-po-clamp, .cp-by-hand[data-top=clamp] .cp-po-full { display: none; }
  .cp-by-hand:is([data-top=full], [data-top=clamp]) .cp-prompt:has(.cp-po-hint:not(.none)) .cp-prompt-open,
  .cp-by-hand[data-top=clamp] .cp-prompt-open { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0;
    border: 0; border-radius: var(--r-2); background: transparent; box-shadow: none; }
  .cp-by-hand .cp-prompt-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* The pinned line (the prompt not yet measured, or too long for the room). */
  .cp-by-hand:not([data-top=full]):not([data-top=clamp]):not([data-top=menu]) .cp-pin { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: 0 var(--s-3); text-align: left;
    font: 400 var(--fs-16)/1.3 var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }
  .cp-pin-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-pin-more { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-14); font-weight: 700; color: var(--accent-text); }
  .cp-pin-more svg { width: 16px; height: 16px; }
  /* ⋯ holds the prompt only when nothing else on the screen opens it (a short phone). */
  .cp-by-hand:not([data-top=menu]) #cp-see-prompt { display: none; }
  .cp-by-hand .gk-square { gap: var(--s-2); }
  .cp-by-hand .gk-note { display: inline; }
  /* centred on the page, running past its 16 px gutters (to 8 px from the screen's edges) when it is that wide */
  .cp-by-hand .gk-bigwrap { width: var(--gk-sq); margin: 0 calc((100% - var(--gk-sq)) / 2); }
  /* the prompt's row under Page is only for a short phone, where nothing else on the screen opens the prompt */
  html:has(#main.cp-by-hand:not([data-top=menu])) #menu-page-rows #cp-see-prompt { display: none; }
}
/* Mark it in the bar, writing by hand on an upright phone: shown once there is writing. */
#bar-tool .cp-review:not([hidden]) { display: inline-flex; flex: none; gap: var(--s-1); color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
#bar-tool .cp-review svg { width: 18px; height: 18px; }
/* A phone on its side: the square on the left at the window's height, the rest beside it. */
@media (max-height: 500px) and (orientation: landscape) {
  .gk-square { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "big head" "big strip" "big ." "big thumb"; gap: var(--s-2) var(--s-5); }
  .gk-sqhead { grid-area: head; }
  .gk-strip { grid-area: strip; }
  .gk-bigwrap { grid-area: big; width: min(420px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--s-6))); }
  .gk-square { scroll-margin-top: var(--s-3); }
  .gk-thumb { grid-area: thumb; }
  /* the icon over the word, as upright, so "Undo stroke" and "Clear square" fit a third of the column each */
  .gk-square .gk-thumb > button { min-height: 56px; flex-direction: column; gap: 2px; padding: 4px; font-size: var(--fs-14); line-height: 1.2; white-space: nowrap; }
  .gk-square .gk-thumb > button svg { width: 22px; height: 22px; }
  .gk-square .gk-thumb > #gk-next-sq { flex-direction: row; font-size: var(--fs-16); }
}