/* 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 two of hers
 * only, Move and Faces, for the Done screen (MM-207). 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(--accent); 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 or the fixed tab bar (WCAG 2.4.11) */
html{scroll-padding-top:64px; scroll-padding-bottom:calc(var(--tabbar-h, 64px) + 16px)}
h1,h2,h3{font-family:var(--f-display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.015em}
.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; 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 ───────────────────────────────────────────────────────────────── */
.k-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--touch); padding:0 var(--sp-5); border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-weight:600; font-size:var(--fs-small); text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-quick) var(--ease-out);
}
.k-btn:active{transform:scale(.97)}
.k-btn--primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.k-btn--big{min-height:var(--touch-lg); font-family:var(--f-display); font-size:var(--fs-title); letter-spacing:-.01em; border-radius:var(--r-md)}
.k-btn--block{display:flex; width:100%}
.k-btn--quiet{background:transparent; border-color:transparent; color:var(--ink-soft); font-weight:500}
.k-btn--quiet:hover{color:var(--accent)}
.k-btn:disabled{opacity:.45; cursor:not-allowed}
[data-variant="parent"] .k-btn--big{font-family:var(--f-body); font-weight:600}

/* ── Sheet: the question paper ─────────────────────────────────────────────────
   <section class="k-sheet">
     <header class="k-sheet__head"> tag · k-steps · topic </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); border-radius:var(--r-lg);
  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)}
.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); 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:600; 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)}
[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>
   Fixed to the bottom by the screen; here it only flows. */
.k-tabbar{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  padding:0 var(--safe-right) var(--safe-bottom) 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-tab{
  position:relative; min-height:var(--tabbar-h); min-width:var(--touch);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:none; background:none; color:var(--ink-soft); text-decoration:none;
  font-size:var(--fs-label); font-weight:600;
}
.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"]{color:var(--accent)}
.k-tab[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:30%; right:30%; height:3px;
  border-radius:0 0 3px 3px; background:var(--accent);
}
[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:600; 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:500}

/* ── 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}
.k-star[data-level="0"] svg{fill:none; stroke-dasharray:2 2}
.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(--gold); --star-edge:var(--gold)}
.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(--gold)}
.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}
.k-letter__date{margin:0 0 var(--sp-2); font-family:var(--f-num); font-size:var(--fs-label); color:var(--ink-soft)}
.k-letter__title{font-size:var(--fs-display); line-height:var(--lh-tight); margin:0 0 var(--sp-5)}
.k-letter h2{font-size:var(--fs-title); margin:var(--sp-7) 0 var(--sp-2)}
.k-letter h3{font-size:var(--fs-body); margin:var(--sp-5) 0 var(--sp-2); color:var(--ink-soft)}
.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)}
.k-letter__sign{margin-top:var(--sp-7); font-style:italic; color:var(--ink-soft)}