/* kit.css — the base and the component kit (MM-201, research/16 §3).
 *
 * Nine components, each with a child and a parent variant: Sheet, Dock, Card, TabBar,
 * Chip, Star, BottomSheet, Toast, Letter, plus the buttons they share; and hers only:
 * Move and Faces, for the Done screen (MM-207), and Choose, the answers she ticks, marks
 * true or false or puts in order (MM-822). The variant is
 * not a modifier class: it comes from the tokens under the nearest data-variant
 * (tokens.css), so one component reads as the exercise book in her app and as the letter
 * home in the parents' one. The few places where the variants differ in more than size
 * are written as [data-variant="parent"] rules next to the component.
 *
 * Components are prefixed k- so they can sit beside the pre-kit screen classes in
 * child.css and parent.css until the screen tickets (MM-204 onwards) move onto them.
 * kit.html shows every component in both variants, light and dark.
 *
 * Provisional: shapes and sizes follow the §3 direction without the MM-202 sign-off.
 */

/* ── base ──────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-text-size-adjust:100%; overscroll-behavior:none;
}
/* a variant set below the root re-applies its own body size */
[data-variant]{font-size:var(--fs-body); line-height:var(--lh-body)}
button{font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs)}
/* where focus is put, not a control: a question sheet, the verdict, a screen's heading (MM-213) */
[tabindex="-1"]:focus{outline:none}
/* nothing tabbed to hides under the sticky top bar (65px tall) or the fixed tab bar (WCAG 2.4.11) */
html{scroll-padding-top:72px; scroll-padding-bottom:calc(var(--tabbar-h, 64px) + 16px)}
h1,h2,h3{font-family:var(--f-display); font-weight:700; text-wrap:balance; margin:0; letter-spacing:-.015em}
h1{font-weight:800}
.num{font-family:var(--f-num); font-variant-numeric:tabular-nums}
/* the exercise book's squared paper — behind the question sheet, where it means something */
.squared{
  background-image:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 28px);
}
.k-visually-hidden{position:absolute; top:0; left:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ── buttons ───────────────────────────────────────────────────────────────────
   The primary is mint with navy text and a 5px mint-edge under it; the secondary is white (the card)
   with a 2px navy border and a navy edge. Chunky, never flat: the edge is a solid shadow with no blur,
   and a press sinks the button onto it. At least --touch-btn tall. The quiet one is a link in a button's
   clothes: no border, no edge. */
.k-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--touch-btn); padding:0 var(--sp-5); border-radius:var(--r-btn);
  border:2px solid var(--edge); background:var(--card); color:var(--ink); box-shadow:0 5px 0 var(--edge);
  font-weight:700; font-size:var(--fs-small); text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
.k-btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--edge)}
.k-btn--primary{background:var(--mint); border-color:var(--mint); color:var(--on-bright); box-shadow:0 5px 0 var(--mint-edge)}
.k-btn--primary:active{box-shadow:0 2px 0 var(--mint-edge)}
.k-btn--big{min-height:var(--touch-lg); font-family:var(--f-display); font-weight:800; font-size:var(--fs-title); letter-spacing:-.01em; border-radius:var(--r-lg)}
.k-btn--block{display:flex; width:100%}
.k-btn--quiet{background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-soft); font-weight:600; min-height:var(--touch)}
.k-btn--quiet:active{transform:none; box-shadow:none}
.k-btn--quiet:hover{color:var(--accent)}
.k-btn:disabled{opacity:.45; cursor:not-allowed}
.k-btn:disabled:active{transform:none; box-shadow:0 5px 0 var(--edge)}
.k-btn--primary:disabled:active{box-shadow:0 5px 0 var(--mint-edge)}
[data-variant="parent"] .k-btn--big{font-family:var(--f-body); font-weight:700}

/* ── a navy surface: the top bar, a hero band, the footer ────────────────────────
   Text on it is --on-navy-hi (primary) or --on-navy (secondary); the focus ring turns mint, which is
   the one ring that shows on navy. Screens put the class on the element; kit.html shows it. */
.k-navy{background:var(--navy); color:var(--on-navy-hi); --focus:var(--mint)}
.k-navy a:not([class]){color:inherit}   /* a plain link; a classed one (a tab, a button) keeps its own colour */
.k-navy__soft{color:var(--on-navy)}

/* ── Sheet: the question paper ─────────────────────────────────────────────────
   <section class="k-sheet">
     <header class="k-sheet__head"> tag · k-steps · subject and topic (k-sheet__where) </header>
     <p class="k-sheet__line"> the one quiet line (why this is back / new topic) </p>
     <div class="k-sheet__body squared"> <p class="k-sheet__prompt"> … </div>
   </section>
   In the parents' app the same shape frames a worked example or a question she saw. */
.k-sheet{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--card-r);
  box-shadow:var(--card-shadow); overflow:hidden;
}
.k-sheet__head{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  min-height:var(--touch); padding:var(--sp-2) var(--sp-5);
  border-bottom:1px solid var(--line-soft); background:var(--card-2);
  font-size:var(--fs-label); color:var(--ink-soft);
}
.k-sheet__topic{margin-left:auto; color:var(--ink-soft)}
/* the subject then the topic, one item of the header so the pair wraps together (MM-1398) */
.k-sheet__where{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); margin-left:auto; min-width:0}
.k-sheet__where .k-sheet__topic{margin-left:0}
.k-sheet__line{
  margin:0; padding:var(--sp-2) var(--sp-5); border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-small); color:var(--ink-soft);
}
.k-sheet__body{padding:var(--sp-7) var(--sp-5)}
.k-sheet__prompt{
  margin:0; font-size:var(--fs-prompt); line-height:1.4; white-space:pre-wrap;
  font-variant-numeric:tabular-nums; text-wrap:pretty;
}
[data-variant="parent"] .k-sheet__body{padding:var(--sp-5)}
[data-variant="parent"] .k-sheet__body.squared{background-image:none}

/* the block tag on the sheet head */
.k-tag{
  font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px var(--sp-3); border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent);
}
.k-tag--gold{background:var(--gold-soft); color:var(--gold-ink)}
.k-tag--ok{background:var(--ok-soft); color:var(--ok)}

/* segmented progress: one dot per question of the set, never a percentage (principle 3) */
.k-steps{display:flex; gap:5px; align-items:center; list-style:none; margin:0; padding:0}
.k-steps > *{width:10px; height:10px; border-radius:var(--r-pill); background:var(--line)}
.k-steps > .is-done{background:var(--accent)}
.k-steps > .is-now{background:var(--card); box-shadow:inset 0 0 0 2px var(--accent)}
[data-variant="parent"] .k-steps > *{width:8px; height:8px}

/* ── Dock: the answer dock, pinned to the bottom (principle 2) ────────────────
   One place for the thumb. data-state="answer" holds the keypad, choices or text field
   with the hint inside; "right" and "notyet" replace it in place with the verdict,
   and Next sits where Check was. Nothing is red: "not yet" is ink on a warm paper.
   The swap is instant (principle 4 — motion is for growth only). */
.k-dock{
  position:sticky; bottom:0; z-index:10;
  display:grid; gap:var(--sp-3);
  padding:var(--sp-3) calc(var(--gutter) + var(--safe-right)) calc(var(--sp-3) + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
  background:color-mix(in srgb, var(--card) 94%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.k-dock__inner{display:grid; gap:var(--sp-3); width:100%; max-width:440px; margin:0 auto}
.k-keys{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-2)}
.k-key{
  min-height:var(--key-h); border-radius:var(--r-md); border:1px solid var(--line); background:var(--card);
  font-family:var(--f-num); font-size:calc(var(--fs-prompt) - 2px); font-weight:600; box-shadow:0 1px 0 var(--line);
}
.k-key:active{background:var(--accent-soft)}
.k-key--word{font-family:var(--f-body); font-size:var(--fs-small); color:var(--ink-soft)}
.k-dock__row{display:flex; align-items:center; gap:var(--sp-3)}
.k-dock__row > .k-btn--primary{flex:1}
.k-dock__verdict{
  display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; margin:0;
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-title); line-height:var(--lh-tight);
}
.k-dock__verdict .k-dock__answer{font-family:var(--f-body); font-weight:500; font-size:var(--fs-body)}
.k-dock__method{margin:0; font-size:var(--fs-small); color:var(--ink-soft); line-height:1.5; white-space:pre-wrap}
.k-dock[data-state="right"]{background:var(--ok-soft); border-top-color:var(--ok)}
.k-dock[data-state="right"] .k-dock__verdict{color:var(--ok)}
.k-dock[data-state="notyet"]{background:var(--warn-soft); border-top-color:var(--warn)}
.k-dock[data-state="notyet"] .k-dock__verdict{color:var(--ink)}
.k-dock[data-state="notyet"] .k-dock__method{color:var(--ink)}
[data-variant="parent"] .k-dock__inner{max-width:560px}
[data-variant="parent"] .k-dock__row{justify-content:flex-end}
[data-variant="parent"] .k-dock__row > .k-btn--primary{flex:none}

/* ── Card: one thing, one primary action ──────────────────────────────────────
   Her Today card is a lifted page with a big Start; a parent's card is flat and
   typographic with the action as a link-weight button. */
.k-card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--card-r);
  padding:var(--card-pad); box-shadow:var(--card-shadow);
  display:grid; gap:var(--sp-3);
}
.k-card__eyebrow{font-size:var(--fs-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.k-card__title{font-family:var(--f-display); font-weight:800; font-size:var(--fs-title); line-height:var(--lh-tight); margin:0}
.k-card__meta{margin:0; font-size:var(--fs-small); color:var(--ink-soft)}
.k-card__more{font-size:var(--fs-small); color:var(--ink-soft)}
.k-card__more > summary{min-height:var(--touch); display:flex; align-items:center; cursor:pointer; list-style:none}
.k-card__more > summary::-webkit-details-marker{display:none}
.k-card__more > summary::after{content:"\203A"; margin-left:var(--sp-2); transition:transform var(--dur-quick) var(--ease-out)}
.k-card__more[open] > summary::after{transform:rotate(90deg)}
.k-card--gold{border-color:var(--gold); background:var(--gold-soft)}
/* a card in a subject's (or the puzzle's) own tone: its soft fill, its ink (data-tone, below) */
.k-card[data-tone]{background:var(--tone-soft); border-color:transparent; color:var(--tone-ink)}
.k-card[data-tone] .k-card__eyebrow, .k-card[data-tone] .k-card__meta{color:var(--tone-ink)}
[data-variant="parent"] .k-card{gap:var(--sp-2)}
[data-variant="parent"] .k-card__title{font-family:var(--f-body); font-weight:700}
[data-variant="parent"] .k-card .k-btn--quiet{padding-left:0; color:var(--accent)}

/* ── TabBar: Today · Map · Learn for her; the parents' pages for them ─────────
   <nav class="k-tabbar"><a class="k-tab" aria-current="page"><svg/>Today</a>…</nav>
   White and raised; the active tab is a mint pill with mint-ink text and icon. The bar is
   --tabbar-h tall (a tab and its 6px above and below); fixed to the bottom by the screen,
   here it only flows. */
.k-tabbar{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--sp-1);
  padding:6px calc(var(--sp-2) + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(var(--sp-2) + var(--safe-left));
  background:var(--card); box-shadow:var(--shadow-bar);
}
.k-tab{
  position:relative; min-height:calc(var(--tabbar-h) - 12px); min-width:var(--touch);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:none; background:none; border-radius:var(--r-lg); color:var(--ink-soft); text-decoration:none;
  font-size:var(--fs-label); font-weight:700; line-height:1.2;   /* the bar is exactly --tabbar-h tall, so a page can clear it by that (MM-1640) */
  padding:0; white-space:nowrap;                                  /* one line of label: five tabs fit a 320px phone, so the bar never grows past its token */
}
@media (max-width:359px){ .k-tabbar{gap:0; padding-left:calc(var(--sp-1) + var(--safe-left)); padding-right:calc(var(--sp-1) + var(--safe-right))} }
.k-tab svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.k-tab[aria-current="page"]{background:var(--mint-soft); color:var(--mint-ink)}
/* the bar from an iPad up, hers and the parents': the tabs together in the middle, not spread across a desktop */
@media (min-width:700px){ .k-tabbar{grid-auto-columns:minmax(0, 200px); justify-content:center} }
[data-variant="parent"] .k-tabbar{--tabbar-h:56px}
[data-variant="parent"] .k-tab svg{width:22px; height:22px}

/* ── Chip: a choice among a few ───────────────────────────────────────────────
   Her "Before you start" choices are large chips; a parent's chips name a topic with its
   code in small type after it. aria-pressed marks the chosen one. */
.k-chips{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.k-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:var(--chip-h); padding:0 var(--chip-pad); border-radius:var(--r-pill);
  border:2px solid var(--line); background:var(--card); color:var(--ink);
  font-size:var(--chip-fs); font-weight:700; text-align:left;
}
.k-chip:hover{border-color:var(--accent-edge)}
.k-chip[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.k-chip__code{font-family:var(--f-num); font-size:var(--fs-label); font-weight:400; color:var(--ink-faint)}
[data-variant="parent"] .k-chip{border-width:1px; font-weight:600}

/* ── Subject: its tone, its mark and its chip ────────────────────────────────
   Each subject pack's `tone` names a colour of its own (tokens.css: --maths, --english, --verbal,
   --nvr, --science, and --puzzle for the puzzle). A screen sets the tone with data-tone (static
   markup) or, from the registry, with the four properties below (sky.js subjectMark); everything
   that shows a subject reads --tone, --tone-soft, --tone-ink and --tone-on, never a colour of its own.
   <span class="k-subj" data-tone="maths"><span class="subject-mark" aria-hidden="true">123</span>Maths</span>
   The mark is a hint (the name is beside it); the chip is a pill on the soft fill with the ink on it.
   --strong is the tab or band in the strong tone (text --tone-on); --on-navy a tab that is not the
   one being looked at, on a navy bar. */
[data-tone="maths"]{--tone:var(--maths); --tone-soft:var(--maths-soft); --tone-ink:var(--maths-ink); --tone-on:var(--maths-on)}
[data-tone="english"]{--tone:var(--english); --tone-soft:var(--english-soft); --tone-ink:var(--english-ink); --tone-on:var(--english-on)}
[data-tone="verbal"]{--tone:var(--verbal); --tone-soft:var(--verbal-soft); --tone-ink:var(--verbal-ink); --tone-on:var(--verbal-on)}
[data-tone="nvr"]{--tone:var(--nvr); --tone-soft:var(--nvr-soft); --tone-ink:var(--nvr-ink); --tone-on:var(--nvr-on)}
[data-tone="science"]{--tone:var(--science); --tone-soft:var(--science-soft); --tone-ink:var(--science-ink); --tone-on:var(--science-on)}
[data-tone="puzzle"]{--tone:var(--puzzle); --tone-soft:var(--puzzle-soft); --tone-ink:var(--puzzle-ink); --tone-on:var(--puzzle-on)}
.subject-mark{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.2em; height:1.6em;
  padding:0 var(--sp-1); border-radius:var(--r-sm); font-size:var(--fs-label); font-weight:800;
  color:var(--tone-ink, var(--accent)); background:var(--tone-soft, var(--accent-soft));
}
.k-subj{
  display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--touch); padding:0 var(--sp-4);
  border:0; border-radius:var(--r-pill); background:var(--tone-soft, var(--accent-soft)); color:var(--tone-ink, var(--accent));
  font-size:var(--fs-small); font-weight:700; text-decoration:none; white-space:nowrap;
}
.k-subj .subject-mark{min-width:0; height:auto; padding:0; background:transparent; color:inherit; font-size:inherit}
.k-subj--strong{background:var(--tone, var(--accent)); color:var(--tone-on, var(--accent-ink))}
.k-subj--on-navy{background:var(--navy-2); color:var(--on-navy-hi)}

/* ── Star: one objective on the map ───────────────────────────────────────────
   <button class="k-star" data-level="0–4" aria-label="…"><svg viewBox="0 0 24 24">
   <path d="…"/></svg></button>. The glyph is small; the button is the 44 px hit area.
   .is-tonight marks tonight's stars; .is-growing plays the one bit of motion the kit has
   (600 ms, then it stays bright). */
.k-star{
  --star-fill:var(--lv0); --star-edge:var(--ink-faint);
  position:relative; width:var(--touch); height:var(--touch); padding:0;
  display:inline-grid; place-items:center; border:none; background:none; border-radius:var(--r-pill);
}
.k-star svg{width:var(--star-size); height:var(--star-size); overflow:visible; fill:var(--star-fill); stroke:var(--star-edge); stroke-width:1.2; stroke-linejoin:round}
/* not started: an outline; not taught yet is the same outline, dashed and faded (.is-fog, child.css) */
.k-star[data-level="0"] svg{fill:none; stroke-width:1.6}
.k-star[data-level="1"]{--star-fill:var(--lv1); --star-edge:var(--lv1)}
.k-star[data-level="2"]{--star-fill:var(--lv2); --star-edge:var(--lv2)}
.k-star[data-level="3"]{--star-fill:var(--lv3); --star-edge:var(--lv3)}
.k-star[data-level="4"]{--star-fill:var(--lv4); --star-edge:var(--lv4)}
.k-star[data-level="4"] svg{filter:drop-shadow(0 0 4px var(--glow))}
.k-star.is-tonight::after{
  content:""; position:absolute; bottom:3px; left:50%; width:6px; height:6px; margin-left:-3px;
  border-radius:var(--r-pill); background:var(--accent);
}
.k-star.is-growing svg{animation:k-grow var(--dur-grow) var(--ease-grow) both}
@keyframes k-grow{
  0%{transform:scale(.7); filter:none}
  55%{transform:scale(1.3); filter:drop-shadow(0 0 10px var(--glow))}
  100%{transform:scale(1); filter:drop-shadow(0 0 4px var(--glow))}
}
.k-star-legend{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); align-items:center; font-size:var(--fs-label); color:var(--ink-soft)}
.k-star-legend > span{display:inline-flex; align-items:center}

/* ── Move: a level moving, on the Done card (MM-207) ─────────────────────────
   <div class="k-move" role="img" aria-label="Learning to Getting there">
   <i class="k-move__seg is-on" data-level="1"></i> … four segments, Learning to Mastered.
   The segments gained today carry .is-new and style="--i:0…3": each fills in turn,
   --dur-quick apart over --dur-move, so four at most take 600 ms. The resting state is
   the finished one, so reduced motion (no animation) shows the move already made.
   .is-settled on an ancestor stops a replay when the screen redraws. */
.k-move{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; max-width:240px}
.k-move__seg{position:relative; height:10px; border-radius:var(--r-pill); background:var(--line-soft); overflow:hidden}
.k-move__seg.is-on::before{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--seg)}
.k-move__seg[data-level="1"]{--seg:var(--lv1)}
.k-move__seg[data-level="2"]{--seg:var(--lv2)}
.k-move__seg[data-level="3"]{--seg:var(--lv3)}
.k-move__seg[data-level="4"]{--seg:var(--lv4)}
.k-move__seg.is-new::before{transform-origin:left center; animation:k-fill var(--dur-move) var(--ease-out) both; animation-delay:calc(var(--i, 0) * var(--dur-quick))}
@keyframes k-fill{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.is-settled .k-move__seg.is-new::before{animation:none}

/* ── Faces: how was that? (MM-207) ────────────────────────────────────────────
   <div class="k-faces" role="group"><button class="k-face" aria-label="good"><svg>…</svg>
   </button>…</div>. Three marks drawn in the ink colour — not emoji, which each platform
   draws its own way. The same three SVGs as child.js FACES. */
.k-faces{display:flex; gap:var(--sp-3)}
.k-face{
  width:64px; height:64px; padding:0; display:grid; place-items:center;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--card); color:var(--ink);
}
.k-face:hover{border-color:var(--accent-edge); background:var(--accent-soft)}
.k-face svg{width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.k-face svg .k-face__eye{fill:currentColor; stroke:none}

/* ── BottomSheet: a note over the question, without leaving it ────────────────
   <div class="k-scrim"></div><div class="k-bottomsheet" role="dialog" aria-modal="true">
   <div class="k-bottomsheet__grip"></div> … <div class="k-bottomsheet__actions">…</div>
   Opens instantly. .is-inline draws it in the flow (kit.html). */
.k-scrim{position:fixed; inset:0; z-index:40; background:var(--scrim)}
.k-bottomsheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  width:100%; max-width:720px; max-height:85vh; margin:0 auto; overflow:auto; overscroll-behavior:contain;
  padding:var(--sp-2) calc(var(--gutter) + var(--safe-right)) calc(var(--sp-6) + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
  background:var(--card); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-lift);
}
.k-bottomsheet__grip{width:40px; height:5px; border-radius:var(--r-pill); background:var(--line); margin:0 auto var(--sp-4)}
.k-bottomsheet__title{font-size:var(--fs-title); line-height:var(--lh-tight); margin:0 0 var(--sp-2)}
.k-bottomsheet__meta{margin:0 0 var(--sp-4); font-size:var(--fs-small); color:var(--ink-soft)}
.k-bottomsheet__actions{display:flex; gap:var(--sp-3); margin-top:var(--sp-5); flex-wrap:wrap}
.k-bottomsheet__actions > .k-btn--primary{flex:1}
.k-bottomsheet.is-inline{position:relative; z-index:auto; max-height:none; border:1px solid var(--line); border-bottom:none}

/* ── Toast: one line that goes by itself ──────────────────────────────────────
   role="status". Above the tab bar and the dock; .is-inline draws it in the flow. */
.k-toast{
  position:fixed; z-index:50; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--sp-4) + var(--safe-bottom));
  display:inline-flex; align-items:center; gap:var(--sp-3);
  max-width:calc(100vw - 2 * var(--gutter)); min-height:var(--touch); padding:var(--sp-2) var(--sp-5);
  border-radius:var(--r-pill); background:var(--ink); color:var(--paper);
  font-size:var(--fs-small); font-weight:500; box-shadow:var(--shadow);
}
.k-toast .k-btn--quiet{color:var(--paper); min-height:36px; padding:0 var(--sp-2); text-decoration:underline}
.k-toast.is-inline{position:static; transform:none}

/* ── Letter: the report as a letter home ──────────────────────────────────────
   <article class="k-letter"> date · heading · sections of paragraphs · signature.
   Findings are paragraphs with a tone rule; topics are named, with the code after them
   in small type. The child variant is her "show a grown-up" page: same shape, larger. */
.k-letter{max-width:62ch; margin:0 auto; color:var(--ink); line-height:1.65}
/* the date is an ordinary small label, not a line of code (MM-1644) */
.k-letter__brand{margin:0 0 var(--sp-1); font-family:var(--f-display); font-size:var(--fs-title); font-weight:800; letter-spacing:-.02em}   /* the name above the date on a page that is printed alone (owner, 20 Oct 2026) */
.k-letter__date{margin:0 0 var(--sp-2); font-family:var(--f-body); font-size:var(--fs-label); font-weight:700; color:var(--ink-soft)}
/* one display heading, then a section's heading, then a subject's tone heading: each visibly smaller than the one before (MM-1644) */
/* the title outranks `.k-letter h2` below (the letter's title is an h2), so the display size, spacing and margin apply (MM-1644 fixes) */
.k-letter .k-letter__title{font-size:var(--fs-display); font-weight:800; letter-spacing:-.025em; line-height:var(--lh-tight); margin:0 0 var(--sp-4)}
.k-letter__summary .k-letter__title{margin-top:var(--sp-1)}
.k-letter h2{font-family:var(--f-display); font-weight:800; font-size:calc(var(--fs-title) + 3px); line-height:var(--lh-tight); letter-spacing:-.02em; margin:var(--sp-7) 0 var(--sp-2)}
.k-letter h3{font-size:var(--fs-body); font-weight:700; margin:var(--sp-5) 0 var(--sp-2); color:var(--ink)}
.k-letter p{margin:0 0 var(--sp-4); text-wrap:pretty}
.k-letter__lede{font-size:calc(var(--fs-body) + 2px)}
.k-letter__finding{--tone:var(--accent); border-left:3px solid var(--tone); padding-left:var(--sp-4)}
.k-letter__finding[data-tone="good"]{--tone:var(--ok)}
.k-letter__finding[data-tone="watch"]{--tone:var(--warn)}
.k-letter__code{font-family:var(--f-num); font-size:var(--fs-label); color:var(--ink-faint); margin-left:var(--sp-1)}
.k-letter__note{font-size:var(--fs-small); color:var(--ink-soft)}
/* the cards of the letter and of the week (MM-1644): the summary, each subject, each section; a subject's card
   takes its own colour on its top edge and in a small mark before its heading */
.k-letter__summary, .k-letter__group, .k-letter__section, .p-summary{
  position:relative; overflow:hidden; margin:var(--sp-4) 0; padding:var(--card-pad); border-radius:var(--card-r);
  background:var(--card); box-shadow:var(--card-shadow);
}
.k-letter__summary > *:last-child, .k-letter__section > *:last-child, .k-letter__group > *:last-child, .p-summary > *:last-child{margin-bottom:0}
.k-letter__summary, .p-summary{padding-top:calc(var(--card-pad) + 10px)}
.k-letter__group[data-tone]{border-top:10px solid var(--tone)}
.k-letter__group > h2:first-child, .k-letter__section > h2:first-child{margin-top:0}
.k-letter__group[data-tone] > h2:first-child{color:var(--tone-ink)}
.p-stripe{position:absolute; top:0; left:0; right:0; height:10px; display:flex}
.p-stripe i{flex:1 1 0; background:var(--tone, var(--mint))}
.p-stripe i[data-tone="mint"]{background:var(--mint)}
.k-letter__sign{margin-top:var(--sp-7); font-style:italic; color:var(--ink-soft)}

/* ── Choose: tick, true or false, put in order (MM-822, shell/ui.js chooseUI) ──
   Hers only, in the answer dock: tick boxes for "tick every one" and "Tick TWO"
   (role=checkbox), a row of two buttons per statement (aria-pressed), items she numbers by
   tapping (the number in the item's name). Every target is at least --touch high. Settled
   (.is-settled, on the sheet), the same shapes read-only: what she chose, and the right
   ones marked — a solid edge and "Right" in --ok, never red; her wrong ones in --warn. */
.k-ticks, .k-rows, .k-order__list{display:grid; gap:var(--sp-2); margin:0; padding:0}
.k-tick{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--touch); padding:var(--sp-2) var(--sp-4);
  border:2px solid var(--line); border-radius:var(--r-md); background:var(--card); color:var(--ink);
  font-size:var(--fs-small); text-align:left;
}
button.k-tick:hover{border-color:var(--accent-edge)}
.k-tick__box{flex:none; width:22px; height:22px; border:2px solid var(--ink-faint); border-radius:var(--r-xs); display:grid; place-items:center}
.k-tick.is-on{border-color:var(--accent); background:var(--accent-soft)}
.k-tick.is-on .k-tick__box{background:var(--accent); border-color:var(--accent)}
.k-tick.is-on .k-tick__box::after{content:""; width:6px; height:11px; margin-top:-3px; border:solid var(--accent-ink); border-width:0 3px 3px 0; transform:rotate(45deg)}
.k-tick__letter{flex:none; font-family:var(--f-num); font-size:var(--fs-label); font-weight:600; color:var(--ink-soft)}
.k-tick__text{flex:1; min-width:0}
.k-tick__mark{flex:none; font-size:var(--fs-label); font-weight:700; color:var(--ok)}
.k-ticks__count{margin:0; font-size:var(--fs-label); color:var(--ink-soft)}
.is-settled .k-tick{background:var(--card-2)}
.is-settled .k-tick.is-key{border-color:var(--ok)}
.is-settled .k-tick.is-on:not(.is-key){border-color:var(--warn); background:var(--warn-soft)}
.is-settled .k-tick.is-on .k-tick__box{background:var(--ink-soft); border-color:var(--ink-soft)}
.is-settled .k-tick.is-on .k-tick__box::after{border-color:var(--card)}
/* In two groups (P2-817, GL's "one word from each group"): side by side at every width, each
   named above its three boxes; the letters A B C and X Y Z as GL's answer sheet has them. */
.k-ticks__groups{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3)}
.k-ticks__group{display:grid; gap:var(--sp-2); align-content:start; min-width:0}
.k-ticks__name{margin:0; font-size:var(--fs-label); font-weight:600; color:var(--ink-soft)}
/* A narrow column never breaks a word: the word drops below the box and letter when it does not
   fit beside them, and "Right" drops below the word (pushed to the right edge). Only a word wider
   than the whole option is broken. */
.k-ticks--groups .k-tick{gap:var(--sp-1) var(--sp-2); padding-inline:var(--sp-3); flex-wrap:wrap}
.k-ticks--groups .k-tick__text{flex:1 1 auto; min-width:auto; max-width:100%; overflow-wrap:break-word; hyphens:manual}
.k-ticks--groups .k-tick__mark{margin-left:auto}

.k-row{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-2) 0; border-bottom:1px solid var(--line-soft)}
.k-row:last-child{border-bottom:0}
.k-row__text{margin:0; font-size:var(--fs-small); font-family:var(--f-num); overflow-wrap:anywhere}
.k-rows--words .k-row__text{font-family:var(--f-body); overflow-wrap:normal; text-wrap:pretty}
.k-row__opts{display:flex; gap:var(--sp-2)}
.k-row__opt{
  min-width:72px; min-height:var(--touch); padding:0 var(--sp-3); border:2px solid var(--line); border-radius:var(--r-pill);
  background:var(--card); color:var(--ink); font-size:var(--fs-label); font-weight:600; display:inline-grid; place-items:center;
}
button.k-row__opt:hover{border-color:var(--accent-edge)}
.k-row__opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent); color:var(--accent-ink)}
.is-settled .k-row__opt{min-height:36px; background:var(--card-2); color:var(--ink-soft)}
.is-settled .k-row__opt.is-on{background:var(--ink-soft); border-color:var(--ink-soft); color:var(--card)}
.is-settled .k-row__opt.is-key{border-color:var(--ok); box-shadow:0 0 0 1px var(--ok)}
.is-settled .k-row.is-wrong .k-row__text{color:var(--ink)}
.is-settled .k-row.is-wrong{border-left:3px solid var(--warn); padding-left:var(--sp-2)}
@media (max-width:420px){ .k-row{grid-template-columns:1fr} .k-row__opts .k-row__opt{flex:1} }

.k-order__list{list-style:none}
.k-order__item{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--touch); padding:var(--sp-2) var(--sp-4);
  border:2px solid var(--line); border-radius:var(--r-md); background:var(--card); color:var(--ink); font-size:var(--fs-small); text-align:left;
}
button.k-order__item:hover{border-color:var(--accent-edge)}
.k-order__n{flex:none; width:32px; height:32px; border:2px dashed var(--ink-faint); border-radius:var(--r-sm);
  display:grid; place-items:center; font-family:var(--f-num); font-weight:600}
.k-order__item.is-on{border-color:var(--accent); background:var(--accent-soft)}
.k-order__item.is-on .k-order__n, .k-order__item.is-done .k-order__n{border-style:solid; border-color:var(--accent); background:var(--accent); color:var(--accent-ink)}
.k-order__item.is-done{background:var(--card-2); color:var(--ink-soft)}
.k-order__text{flex:1; min-width:0}
.k-order__say{margin:var(--sp-2) 0 0; font-size:var(--fs-label); color:var(--ink-soft)}
.k-order__key{flex:none; font-family:var(--f-num); font-size:var(--fs-label); font-weight:700; color:var(--ok)}
.k-order__key::before{content:"is "; font-weight:400; color:var(--ink-soft)}
.is-settled .k-order__item{background:var(--card-2)}
.is-settled .k-order__item.is-right{border-color:var(--ok)}
.is-settled .k-order__item.is-wrong{border-color:var(--warn); background:var(--warn-soft)}
.is-settled .k-order__n{border-style:solid}
/* Draw lines to match (P2-818, shell/ui.js matchUI): two columns with a gap for the lines, which
   an SVG under them draws in the app's tokens — --accent while she joins, --ok and --warn
   (dashed) once settled. Each left item carries its partner's letter in a box, as a paper's
   answer sheet does. The item she has tapped first is marked with a thicker --accent edge. */
.k-match__cols{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) var(--sp-7) minmax(0, 1fr); align-items:start}
.k-match__col{display:grid; gap:var(--sp-2); min-width:0; position:relative; z-index:1}
.k-match__col--left{grid-column:1}
.k-match__col--right{grid-column:3}
.k-match__lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.k-match__line{stroke:var(--accent); stroke-width:3; stroke-linecap:round}
.k-match__line.is-right{stroke:var(--ok)}
.k-match__line.is-wrong{stroke:var(--warn); stroke-dasharray:6 5}
.k-match__item{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:var(--touch); padding:var(--sp-2) var(--sp-3);
  border:2px solid var(--line); border-radius:var(--r-md); background:var(--card); color:var(--ink); font-size:var(--fs-small); text-align:left;
}
button.k-match__item:hover{border-color:var(--accent-edge)}
.k-match__text{flex:1 1 auto; min-width:0; overflow-wrap:break-word}
/* a left item wraps its box (and the right letter, settled) under the word rather than break it */
.k-match__left{flex-wrap:wrap; row-gap:var(--sp-1)}
.k-match__tags{flex:none; display:flex; align-items:center; gap:var(--sp-2); margin-left:auto}
.k-match__letter{flex:none; font-family:var(--f-num); font-size:var(--fs-label); font-weight:600; color:var(--ink-soft)}
.k-match__box{flex:none; width:28px; height:28px; border:2px dashed var(--ink-faint); border-radius:var(--r-xs);
  display:grid; place-items:center; font-family:var(--f-num); font-size:var(--fs-label); font-weight:700}
.k-match__item.is-on{border-color:var(--accent); background:var(--accent-soft)}
.k-match__item.is-on .k-match__box{border-style:solid; border-color:var(--accent); background:var(--accent); color:var(--accent-ink)}
.k-match__item.is-picked{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
.k-match__say{margin:var(--sp-2) 0 0; font-size:var(--fs-label); color:var(--ink-soft)}
.k-match__key{flex:none; font-family:var(--f-num); font-size:var(--fs-label); font-weight:700; color:var(--ok)}
.k-match__key::before{content:"is "; font-weight:400; color:var(--ink-soft)}
.is-settled .k-match__item{background:var(--card-2)}
.is-settled .k-match__box{border-style:solid}
.is-settled .k-match__left.is-right{border-color:var(--ok)}
.is-settled .k-match__left.is-wrong{border-color:var(--warn); background:var(--warn-soft)}

/* on the sheet, the settled control sits under the prompt as a figure would */
.k-sheet__body > .is-settled{margin-top:var(--sp-5)}