/* child.css — the screens of her app, as they stand before the §3 redesign (MM-201).
 *
 * Split out of the old app.css. Colours, type and spacing come from tokens.css; the new
 * components are in kit.css. The screen tickets (MM-204 onwards) move each screen onto the
 * kit and delete its rules from here.
 *
 * The shell and the pieces both apps still draw (top bar, panel, tabs, ghost buttons) are
 * here too: until the parents app has its own shell (research/12 §9), the parent views
 * are hosted by this one. Parent-only rules are in parent.css.
 */

/* ── shell ─────────────────────────────────────────────────────────────── */
#app{min-height:100%; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:var(--safe-top); z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brand{font-family:var(--f-display); font-weight:700; font-size:18px; letter-spacing:-.02em}
.brand span{color:var(--accent)}
.spacer{flex:1}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); font-size:13px; color:var(--ink-soft);
  font-weight:500;
}
.pill.gold{background:var(--gold-soft); border-color:var(--gold); color:var(--gold-ink)}
.ghost{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:14px; font-weight:500; color:var(--ink-soft);
}
.ghost:hover{border-color:var(--accent); color:var(--accent)}
main{flex:1; width:100%; max-width:860px; margin:0 auto; padding:20px 16px calc(40px + var(--safe-bottom))}
main.wide{max-width:1100px}

/* her navigation (MM-204): the kit's tab bar fixed to the bottom, the page kept clear of it */
.k-tabbar.is-fixed{position:fixed; left:0; right:0; bottom:0; z-index:30}
main.has-tabbar{padding-bottom:calc(var(--tabbar-h) + var(--sp-7) + var(--safe-bottom))}
main > .resume{margin-bottom:var(--sp-5)}
/* the grown-ups' entrance at the foot of Today: there, but not asking to be pressed */
main > .grownups{display:flex; margin:var(--sp-7) auto 0; font-size:var(--fs-label)}
main > .grownups-link{margin-top:var(--sp-2)}

/* ── hero, start and tiles: the screens not yet on the kit (Today left them in MM-205) ── */
.hero{margin-bottom:22px}
.hero h1{font-size:clamp(28px,6vw,40px); line-height:1.08}
.hero p{color:var(--ink-soft); margin:8px 0 0; max-width:52ch}

.start{
  display:block; width:100%; text-align:left; border:none; border-radius:18px;
  background:var(--accent); color:var(--accent-ink); padding:22px 24px; box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.start:active{transform:scale(.985)}
.start .big{font-family:var(--f-display); font-size:26px; font-weight:700; letter-spacing:-.02em}
.start .sub{opacity:.85; font-size:15px; margin-top:4px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}

/* Setting up a new device (MM-410, child/welcome.js): a few lines, the fields, one primary. */
.welcome .welcome-promise{font-size:var(--fs-label); margin-top:var(--sp-4)}
.welcome-actions{display:grid; gap:var(--sp-2); max-width:420px; margin-top:var(--sp-4)}
.welcome-foot{color:var(--ink-soft); font-size:var(--fs-label); margin:var(--sp-4) 0 0}
.welcome-who select{min-height:44px; font:inherit}
.welcome-error{margin:var(--sp-2) 0 0}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; text-align:left;
}
.tile:hover{border-color:var(--accent-edge)}
.tile .t{font-family:var(--f-display); font-weight:600; font-size:17px}
.tile .d{color:var(--ink-soft); font-size:14px; margin-top:3px}

/* ── Today (MM-205): the greeting, one card, then the growth line and the month ── */
.today-hello{font-size:var(--fs-display); line-height:var(--lh-tight); margin:0 0 var(--sp-5)}
/* whose turn, with two or more children on the device (MM-409): quiet, under the greeting */
.today-who{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:calc(-1 * var(--sp-3)) 0 var(--sp-5); font-size:var(--fs-label); color:var(--ink-soft)}
.today-who__btn{min-height:var(--touch)}
.today{max-width:560px}
.today-start{margin-top:var(--sp-2)}
.today .k-card__more{margin-top:calc(-1 * var(--sp-2))}
.today-smaller{display:grid; gap:var(--sp-2); padding-bottom:var(--sp-1)}
/* This week (MM-601): a few chunks, the first pre-filled from last week; full is a ceiling. No red. */
.today-week{margin-top:var(--sp-5); max-width:560px}
.today-week__name{font-size:var(--fs-label); font-weight:600; color:var(--ink-soft); margin-bottom:var(--sp-2)}
.today-week__bar{display:flex; gap:4px}
.today-week__seg{position:relative; flex:1 1 0; height:12px; border-radius:var(--r-pill); background:var(--line); overflow:hidden}
.today-week__seg::before{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--accent); transform-origin:left center; transform:scaleX(var(--fill, 0))}
.today-week.is-done .today-week__seg::before{background:var(--gold)}
.today-week__note{margin:var(--sp-2) 0 0; color:var(--ink-soft); font-size:var(--fs-small)}
.today-growth{margin:var(--sp-6) 0 0; max-width:52ch; color:var(--ink-soft); font-size:var(--fs-small)}
.today-growth b{color:var(--ink); font-weight:600}
.today-month{margin-top:var(--sp-4); max-width:560px}
.today-month__name{font-size:var(--fs-label); font-weight:600; color:var(--ink-soft); margin-bottom:var(--sp-2)}
/* one strip for the whole month: the dots shrink to fit a phone rather than wrap */
.today-dots{display:flex; gap:3px; align-items:center}
.today-dot{flex:1 1 0; max-width:14px; aspect-ratio:1; border-radius:var(--r-pill); background:var(--line)}
.today-dot.is-on{background:var(--accent)}
.today-dot.is-today{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--accent-edge)}

/* ── the question sheet and the answer dock (MM-206, research/16 §3.3) ─────────
   main.session is the whole screen below the top bar: the sheet stretches to fill it and
   the dock is pinned to the bottom (sticky, so a long question scrolls under it). No tab
   bar here. In landscape at 900 px and wider the two sit side by side: the question on
   the left, the dock on the right, low enough for the thumb. */
main.session{
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:var(--sp-4) var(--gutter) 0; max-width:880px;
}
main.session .q-sheet{flex:1 0 auto; display:flex; flex-direction:column}
main.session .k-sheet__body{flex:1}
main.session .q-dock{margin:0 calc(-1 * var(--gutter))}
.q-sheet .k-sheet__head{row-gap:var(--sp-1)}
.q-sheet .k-sheet__topic{font-size:var(--fs-label)}
.q-sheet .k-sheet__line{display:flex; align-items:center; gap:var(--sp-1) var(--sp-3); flex-wrap:wrap}
.q-sheet .k-sheet__line b{color:var(--ink); font-weight:600}
.q-sheet .k-sheet__line .k-btn{margin-left:auto; min-height:36px; padding:0 var(--sp-2); color:var(--accent)}
.k-steps{flex-wrap:wrap}
.k-sheet__prompt.is-calc{font-family:var(--f-num); font-size:clamp(30px, 7vw, 42px); text-align:center; letter-spacing:-.01em}
.q-tally{font-size:var(--fs-title); font-weight:600; color:var(--ok); min-width:var(--touch); text-align:center}
.q-timer{font-size:var(--fs-small); color:var(--ink-soft)}
.q-clock{min-height:36px; padding:0 var(--sp-2); font-size:var(--fs-label)}
.q-sheet .q-timer{font-size:var(--fs-body); color:var(--ink); font-weight:600}

/* a short text the question is about (P2-810, research/19 P2-105): a card on the squared
   paper above the question, as a paper prints it. Paragraph numbers sit in the margin when
   the question refers to them; a heading is bold above its paragraph. Kept to a reading
   width, and it stays on the sheet through the verdict. */
.passage{
  margin:0 0 var(--sp-5); padding:var(--sp-4) var(--sp-5); max-width:62ch;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:var(--r-md);
  font-size:var(--fs-body); line-height:1.6; color:var(--ink);
}
.passage__title{margin:0 0 var(--sp-2); font-family:var(--f-display); font-size:var(--fs-title); font-weight:700; line-height:var(--lh-tight)}
.passage__para{display:flex; gap:var(--sp-3); align-items:baseline}
.passage__para + .passage__para{margin-top:var(--sp-3)}
.passage__n{flex:0 0 auto; min-width:1.4em; font-family:var(--f-num); font-size:var(--fs-small); font-weight:600; color:var(--ink-soft)}
.passage__body{min-width:0}
.passage__head{margin:0; font-weight:700}
.passage__text{margin:0; text-wrap:pretty}
.passage__text--verse,.passage__text--lines{white-space:pre-line}
.passage__gloss{margin:var(--sp-3) 0 0; display:grid; grid-template-columns:auto 1fr; gap:var(--sp-1) var(--sp-2); font-size:var(--fs-small)}
.passage__gloss dt{font-weight:700}
.passage__gloss dd{margin:0}
.passage__credit{margin:var(--sp-3) 0 0; font-size:var(--fs-small); color:var(--ink-soft)}
.passage + .k-sheet__prompt{font-size:var(--fs-title)}
@media (max-width:520px){ .passage{padding:var(--sp-3) var(--sp-4)} }
/* On a phone the dock takes the lower third, so a whole text would push the question under
   it: the text is held to a third of the screen and scrolls on its own (a shadow says there
   is more), the space around it tightens, and the question sits clear above the dock, even
   with the retry note in it. At its ends the scroll passes on to the page, so it never
   traps. iPads keep the whole text. (P2-810 follow-up) */
@media (max-width:600px){
  main.session .k-sheet__body:has(> .passage--capped){padding-top:var(--sp-4)}
  .passage--capped{
    margin-bottom:var(--sp-3); max-height:28vh; max-height:28svh; overflow-y:auto;
    background:
      linear-gradient(var(--card) 30%, transparent) center top / 100% 32px no-repeat local,
      linear-gradient(transparent, var(--card) 70%) center bottom / 100% 32px no-repeat local,
      radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 22%, transparent), transparent) center top / 100% 10px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 22%, transparent), transparent) center bottom / 100% 10px no-repeat scroll,
      var(--card);
  }
}

/* a short piece of writing (P2-601): the prompt on the squared paper, a clock she can see
   that stops at 0:00 with a quiet line (no colour, no sound), and the hand-off. The grown-up's
   ticks are one screen of real checkboxes, each with an example, behind the gate. */
.today-writing{margin-top:var(--sp-3)}
.writing-sheet .writing-prompt{font-family:var(--f-body); font-weight:500; letter-spacing:0}
.writing-guide{margin:var(--sp-4) 0 0; color:var(--ink-soft); max-width:52ch}
.writing-paper,.writing-end{margin:var(--sp-5) 0 0; font-weight:600; max-width:52ch}
.writing-sheet .writing-clock{font-size:var(--fs-body); color:var(--ink); font-weight:600}
.writing-actions{display:grid; gap:var(--sp-2); margin-top:var(--sp-5); max-width:480px}
.rubric{min-width:0}
.rubric__legend{font-family:var(--f-display); font-weight:600; font-size:18px; padding:0; margin-bottom:4px}
.rubric__item{display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3) 0; border-top:1px solid var(--line-soft); cursor:pointer}
.rubric__box{flex:none; width:24px; height:24px; margin:2px 0 0; accent-color:var(--accent)}
.rubric__text{display:grid; gap:2px}
.rubric__example{font-size:14px; color:var(--ink-soft)}
/* a passage to read with a grown-up (P2-405): the text, then three things for the grown-up to ask */
.together{margin-top:var(--sp-4)}
.together__ask{padding:var(--sp-3) 0; border-top:1px solid var(--line-soft)}
.together__q{margin:0}
.together__listen{margin:var(--sp-1) 0 var(--sp-3); font-size:15px; color:var(--ink-soft); max-width:60ch}
.together + .k-btn{margin-top:var(--sp-4)}

/* make your own (MM-602): the question she met, then hers, in the sheet */
.make-answer{margin:var(--sp-3) 0 0; color:var(--ink-soft)}
.make-answer b{color:var(--ink); font-family:var(--f-num); font-weight:600}
.make-ask{margin:var(--sp-5) 0 0; font-weight:600}
.make-sheet .freetext{font-family:var(--f-body); font-size:var(--fs-body); margin:var(--sp-3) 0 0}
.make-sheet textarea.freetext{resize:vertical; min-height:96px}
.q-hints .hintbox:first-child{margin-top:var(--sp-5)}

/* a new topic (MM-605): one done for her, then one half-done with its start written in */
.show-idea{margin:0; line-height:1.6}
.show-head{margin:var(--sp-5) 0 var(--sp-2); font-size:var(--fs-body); font-weight:600}
.show-next{margin:var(--sp-5) 0 0; color:var(--ink-soft)}
.q-started__label{margin:var(--sp-5) 0 0; font-size:var(--fs-small); font-weight:600; color:var(--ink-soft)}
.q-started .hintbox{margin-top:var(--sp-2)}

/* the digit boxes are buttons in a session: tap one to put the caret on it */
button.box{padding:0; color:var(--ink); cursor:pointer}
button.box:not(.filled):not(.caret){border-style:dashed}
.box.filled.caret{box-shadow:0 0 0 2px var(--card), 0 0 0 5px var(--accent)}

/* the dock's pieces: the choices, the text field, the four-column keypad */
.q-dock .choices{margin-top:0; gap:var(--sp-2)}
.q-dock .choice{min-height:var(--touch-lg); padding:var(--sp-2) var(--sp-4); font-size:var(--fs-small)}
.q-dock .freetext{margin:0}
.k-keys--dock{grid-template-columns:repeat(4, 1fr)}
.k-keys--dock .k-keys__go{grid-column:span 2; min-height:var(--key-h)}
.k-keys--dock .q-hint{min-height:var(--key-h); padding:0 var(--sp-1); white-space:normal; line-height:1.15; font-size:var(--fs-label); border-radius:var(--r-md); border:1px dashed var(--line)}
.q-hint{color:var(--accent)}
.k-dock__note{margin:0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--warn-soft); color:var(--ink); font-size:var(--fs-small); line-height:1.45}
.k-dock__sub{margin:0; font-size:var(--fs-small); line-height:1.45; color:var(--ink)}
.k-dock__how > summary{min-height:var(--touch); display:flex; align-items:center; cursor:pointer; font-size:var(--fs-small); font-weight:600; color:var(--ink-soft); list-style:none}
.k-dock__how > summary::-webkit-details-marker{display:none}
.k-dock__how > summary::after{content:"\203A"; margin-left:var(--sp-2)}
.k-dock__how[open] > summary::after{transform:rotate(90deg)}
.k-dock__how .k-dock__method{max-height:30vh; overflow:auto}
/* short phones: a slightly lower keypad, still 44 px and up */
@media (max-height:700px){ .q-dock{--key-h:48px} main.session .k-sheet__body{padding:var(--sp-5) var(--sp-4)} }

/* the note over the question */
.q-note .q-note__body p, .q-note .steps{margin:0; line-height:1.6; max-width:62ch}
.q-note .steps{padding-left:22px}
/* the way back stays in reach however long the note is */
.q-note .k-bottomsheet__actions{
  position:sticky; bottom:calc(-1 * (var(--sp-6) + var(--safe-bottom)));
  margin:var(--sp-5) 0 calc(-1 * (var(--sp-6) + var(--safe-bottom)));
  padding:var(--sp-3) 0 calc(var(--sp-6) + var(--safe-bottom)); background:var(--card);
}

@media (orientation:landscape) and (min-width:900px){
  main.session{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(340px, 400px);
    align-items:stretch; gap:var(--sp-5); max-width:1240px; padding-bottom:var(--sp-4);
  }
  main.session .q-dock{
    align-self:end; margin:0; bottom:var(--sp-4);
    border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
    padding-bottom:calc(var(--sp-3) + var(--safe-bottom) / 2);
  }
}

/* ── the starting check (MM-210): the session's sheet and dock, no verdict ────────
   The intro is a title, two lines and the button; the progress is a thin line in the
   sheet's header (24 dots do not fit a phone); "I haven't learnt this yet" heads the dock.
   The end is a short letter (kit Letter) with Today's set under it. */
.check-intro{margin:var(--sp-7) 0 var(--sp-6)}
.check-title{font-size:var(--fs-display); line-height:var(--lh-tight); margin-bottom:var(--sp-4)}
.check-line{margin:0 0 var(--sp-2); color:var(--ink-soft); max-width:40ch}
.check-acts{display:grid; gap:var(--sp-3); max-width:440px}
.check-track{flex:1 1 40px; min-width:40px; height:6px; border-radius:var(--r-pill); background:var(--line); overflow:hidden}
.check-track i{display:block; height:100%; background:var(--accent)}
.check-dunno{border-style:dashed}
.check-letter{margin:var(--sp-6) 0 var(--sp-6)}
.check-letter .check-acts{max-width:none; margin-top:var(--sp-6)}

/* ── the older sheet: the shared puzzle ─────────────────────────────────────── */
.sheet{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:14px;
}
.sheet-head{
  display:flex; align-items:center; gap:10px; padding:11px 18px;
  border-bottom:1px solid var(--line-soft); background:var(--card-2);
  font-size:13px; color:var(--ink-soft);
}
.tag{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent);
}
.qbody{padding:26px 22px}
.prompt{
  font-size:clamp(19px,2.6vw,23px); line-height:1.52; white-space:pre-wrap;
  font-variant-numeric:tabular-nums; margin:0;
}

/* digit boxes — the FSCE Beacon answer sheet */
.boxes{display:flex; gap:8px; justify-content:center; margin:26px 0 6px; flex-wrap:wrap}
.box{
  width:52px; height:66px; border:2px solid var(--line); border-radius:10px;
  background:var(--paper); display:grid; place-items:center;
  font-family:var(--f-num); font-size:30px; font-weight:600;
}
.box.filled{border-color:var(--accent); background:var(--card)}
.box.caret{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.unit{align-self:center; font-family:var(--f-num); font-size:22px; color:var(--ink-soft); padding-left:4px}
.freetext{
  width:100%; margin:22px 0 4px; padding:16px 18px; font-size:22px; font-family:var(--f-num);
  border:2px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink);
}
.freetext:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 4px var(--accent-soft)}

/* multiple choice — the Adventure paper ovals */
.choices{display:grid; gap:10px; margin-top:24px}
.choice{
  display:flex; align-items:center; gap:14px; padding:15px 18px; text-align:left;
  background:var(--paper); border:2px solid var(--line); border-radius:12px; font-size:17px;
}
.choice:hover{border-color:var(--accent-edge)}
.choice[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.oval{
  flex:none; width:34px; height:24px; border-radius:999px; border:2px solid var(--ink-faint);
  display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--ink-faint);
}
.choice[aria-pressed="true"] .oval{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

/* the big keys: the gate's hold button and the older screens' buttons */
.key{
  height:60px; border-radius:13px; border:1px solid var(--line); background:var(--card);
  font-family:var(--f-num); font-size:25px; font-weight:600; box-shadow:0 1px 0 var(--line);
}
.key:active{background:var(--accent-soft)}
.key.wide{grid-column:span 2}
.key.act{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-family:var(--f-body); font-size:18px; font-weight:600}
.key.sub{font-family:var(--f-body); font-size:16px; color:var(--ink-soft)}

/* the grown-ups' gate (MM-411): a button that fills while held */
.key.hold{
  position:relative; overflow:hidden; display:block; width:100%; max-width:380px; margin:16px auto 0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none;
}
.hold-fill{position:absolute; inset:0 auto 0 0; width:0; background:rgba(255,255,255,.28)}
.hold-label{position:relative}
.gate .freetext{max-width:380px; display:block; margin-left:auto; margin-right:auto}


.method{
  margin-top:10px; padding:14px 16px; background:var(--card-2); border:1px solid var(--line);
  border-radius:12px; white-space:pre-wrap; font-size:15.5px; color:var(--ink); line-height:1.6;
}
.method b{color:var(--accent)}
.hintbox{margin-top:12px; padding:13px 15px; background:var(--warn-soft); border:1px solid var(--warn);
  border-radius:11px; color:var(--ink); font-size:var(--fs-small); line-height:1.5}

/* figures */
figure.fig{margin:20px auto; display:flex; justify-content:center}
figure.fig svg{max-width:100%; height:auto}

/* the two figures she moves (MM-608): a marker on a number line, a bar to split and shade.
   touch-action none: a drag moves the figure, not the page. */
.manip{margin:22px auto 6px; max-width:420px}
.manip-line__track{position:relative; touch-action:none; cursor:pointer; padding:14px 0 0}
.manip-line__track svg{display:block; width:100%; height:auto}
.manip-line__marker{
  position:absolute; top:0; width:var(--touch); height:var(--touch); margin-left:calc(var(--touch) / -2);
  border-radius:var(--r-pill); display:flex; align-items:flex-start; justify-content:center; cursor:grab;
}
.manip-line__marker::before{
  content:""; width:22px; height:22px; margin-top:6px; border-radius:var(--r-pill);
  background:var(--accent); border:3px solid var(--card); box-shadow:0 0 0 2px var(--accent);
}
.manip-line__marker::after{content:""; position:absolute; top:32px; left:50%; width:2px; height:20px; margin-left:-1px; background:var(--accent)}
.manip-line__marker.is-unset::before{background:var(--card); box-shadow:0 0 0 2px var(--ink-soft)}
.manip-line__marker.is-unset::after{background:var(--ink-soft)}
.manip-line__marker:focus-visible{outline:none}
.manip-line__marker:focus-visible::before{box-shadow:0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft)}
.manip-line__marker[aria-disabled="true"]{cursor:default}
.manip-bar__whole{margin:0 0 6px; text-align:center; color:var(--ink-soft); font-size:var(--fs-small)}
.manip-bar__track{position:relative; touch-action:none; padding-bottom:28px}
.manip-bar__parts{display:flex; height:var(--touch-lg); border:2px solid var(--accent); border-radius:var(--r-xs); overflow:hidden; background:var(--card-2)}
.manip-bar__part{
  flex:1 1 0; min-width:0; border:0; border-left:2px solid var(--accent); background:transparent; color:var(--ink);
  font-family:var(--f-num); font-size:var(--fs-small); cursor:pointer; padding:0;
}
.manip-bar__part:first-child{border-left:0}
/* shaded is hatched as well as coloured, so it does not rest on colour alone */
.manip-bar__part.is-shaded{background:repeating-linear-gradient(135deg, var(--accent-soft) 0 7px, var(--accent-edge) 7px 11px)}
.manip-bar__part:focus-visible{outline:3px solid var(--accent); outline-offset:-5px}
.manip-bar__cut{
  position:absolute; bottom:0; width:var(--touch); height:28px; margin-left:calc(var(--touch) / -2);
  display:flex; justify-content:center; cursor:ew-resize;
}
.manip-bar__cut::before{content:""; width:0; height:0; border:9px solid transparent; border-bottom:14px solid var(--accent); border-top:0; margin-top:4px}
.manip-bar__cut.is-whole{margin-left:calc(var(--touch) / -1)}
.manip-bar__cut:focus-visible{outline:3px solid var(--accent); outline-offset:0; border-radius:var(--r-xs)}
.manip-bar__cut[aria-disabled="true"]{display:none}
.manip-bar__ctl{display:flex; gap:var(--sp-2); justify-content:center; margin-top:var(--sp-2)}
.manip-say{margin:var(--sp-2) 0 0; text-align:center; color:var(--ink-soft); font-size:var(--fs-small)}
.manip-try{margin-top:var(--sp-6); padding:var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--card-2)}
.manip-try h2{margin-top:0}
.manip-try__ask{margin:0}
.manip-try__check{margin-top:var(--sp-3)}
.manip-try__says{margin:var(--sp-3) 0 0; font-size:var(--fs-small); color:var(--ink)}
.manip-try__says:empty{display:none}
.manip-try__says.is-right{color:var(--ok)}

/* ── results ───────────────────────────────────────────────────────────── */
.score{font-family:var(--f-num); font-size:56px; font-weight:600; letter-spacing:-.03em; line-height:1}
.breakdown{display:grid; gap:8px; margin-top:18px}
.brow{display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--card);
  border:1px solid var(--line); border-radius:11px; font-size:15px}
.brow .dot{width:9px; height:9px; border-radius:99px; flex:none}
.brow .oid{font-family:var(--f-num); font-size:12px; color:var(--ink-faint); flex:none}

/* ── parent dashboard ──────────────────────────────────────────────────── */
.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.tab{padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  font-size:14px; font-weight:500; color:var(--ink-soft)}
.tab[aria-selected="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:14px}
.panel h2{font-size:18px; margin-bottom:4px}
.panel h3{font-size:15px; margin:20px 0 6px; color:var(--ink)}
.panel h3:first-of-type{margin-top:8px}
.panel ul{margin:8px 0 14px; padding-left:20px; color:var(--ink-soft)}
.panel ul li{margin-bottom:6px}
.panel p{margin:0 0 10px}
.panel .lede{color:var(--ink-soft); font-size:14.5px; margin:0 0 14px}
.ctl{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.ctl:last-child{border-bottom:none}
.ctl .lab{font-weight:500}
.ctl .desc{font-size:13.5px; color:var(--ink-soft); max-width:46ch}
select,input[type=range]{font:inherit; accent-color:var(--accent)}
select{padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.note{font-size:13.5px; color:var(--ink-soft); background:var(--accent-soft); border:1px solid var(--accent-edge);
  border-radius:11px; padding:12px 14px; margin-top:12px}

/* ── learning: weak spots, teaching notes ───────────────────────────────
   Deliberately calm. Nothing here is red, nothing shows a failure score to her,
   and every row leads to an explanation rather than to more questions. */

.workon{margin-top:16px}
.workon .lede{margin-bottom:10px}

.workrow,.topicrow{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--card-2); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; margin-top:8px; color:inherit; font:inherit; cursor:pointer;
}
.workrow:hover,.topicrow:hover{border-color:var(--accent-edge); background:var(--accent-soft)}
.wtxt{min-width:0; flex:1}
.wtxt .t{font-weight:500; line-height:1.35}
.wtxt .d{font-size:13px; color:var(--ink-soft); margin-top:3px}
.workrow .go,.topicrow .go{color:var(--ink-faint); font-size:22px; line-height:1; flex:none}
.topicrow .dot{width:9px; height:9px; border-radius:99px; flex:none}

.ghost.wide{display:block; width:100%; max-width:380px; margin:14px auto 0; padding:11px 14px}
.ghost.small{padding:4px 10px; font-size:12.5px}


/* ── Learn and a topic (MM-209, research/16 §3.3) ─────────────────────────────
   Learn: the search field, "Worth a look", then the years as closed sections. A topic:
   the note in tighter type than the rest of her screens, its related topics as chips,
   the actions in a dock that sits on the tab bar. The same note is the bottom sheet over
   the map and the question (q-note). */
.learn-title{font-size:var(--fs-display); line-height:var(--lh-tight); margin:0 0 var(--sp-4)}
.learn-find{margin-bottom:var(--sp-5)}
.learn-find__field{
  width:100%; min-height:var(--touch-lg); padding:0 var(--sp-4) 0 calc(var(--sp-4) + 26px);
  border:2px solid var(--line); border-radius:var(--r-pill); background:var(--card); color:var(--ink);
  font:inherit; font-size:var(--fs-body);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:var(--sp-4) center; background-size:20px;
}
.learn-find__field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.learn-find__field::placeholder{color:var(--ink-faint)}
.learn-none{color:var(--ink-soft); font-size:var(--fs-small)}
.learn-h{font-size:var(--fs-title); line-height:var(--lh-tight); margin:0 0 var(--sp-1)}
.learn-sub{font-family:var(--f-body); font-size:var(--fs-label); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin:var(--sp-5) 0 0}
.learn-lede{margin:0 0 var(--sp-2); font-size:var(--fs-small); color:var(--ink-soft)}
.learn-worth{margin-bottom:var(--sp-7)}
.learn-year{border-top:1px solid var(--line)}
.learn-year:last-child{border-bottom:1px solid var(--line)}
.learn-year > summary{
  display:flex; align-items:center; gap:var(--sp-3); min-height:var(--touch-lg); cursor:pointer; list-style:none;
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-title);
}
.learn-year > summary::-webkit-details-marker{display:none}
.learn-year > summary::after{content:"\203A"; margin-left:var(--sp-2); color:var(--ink-soft); transition:transform var(--dur-quick) var(--ease-out)}
.learn-year[open] > summary::after{transform:rotate(90deg)}
.learn-year__n{margin-left:auto; font-family:var(--f-body); font-weight:500; font-size:var(--fs-label); color:var(--ink-soft)}
.learn-year[open]{padding-bottom:var(--sp-5)}
.learn-year .learn-sub:first-of-type{margin-top:0}
.learn .topicrow, .topic-page .topicrow{min-height:var(--touch)}
.learn .wtxt .t{font-size:var(--fs-small)}
.learn .wtxt .d{font-size:var(--fs-label)}

.topic-page{max-width:66ch}
.topic-meta{margin:0 0 var(--sp-1); font-size:var(--fs-label); color:var(--ink-soft)}
.topic-title{font-size:var(--fs-title); line-height:var(--lh-tight); margin:0 0 var(--sp-4)}
.topic-body, .q-note .q-note__body{font-size:var(--fs-small)}
.topic-body h2, .q-note .q-note__body h2{font-family:var(--f-body); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:var(--sp-5) 0 var(--sp-2)}
.topic-body h2:first-child{margin-top:0}
.topic-body p, .topic-body .steps{margin:0; line-height:1.55}
.topic-body .steps{padding-left:22px}
.topic-body .steps li{margin-bottom:var(--sp-1)}
.topic-related{margin-top:var(--sp-6)}
.topic-related__title{font-family:var(--f-body); font-size:var(--fs-label); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 var(--sp-2)}
.topic-related .k-chip{min-height:var(--touch); height:auto; padding:var(--sp-2) var(--sp-4); font-size:var(--fs-label); line-height:1.3; white-space:normal; border-radius:var(--r-md)}
/* the actions sit on the tab bar, in reach however long the note is */
main.topic{padding:var(--sp-5) var(--gutter) calc(var(--tabbar-h) + var(--safe-bottom))}
.topic-dock{
  bottom:calc(var(--tabbar-h) + var(--safe-bottom)); margin:var(--sp-6) calc(-1 * var(--gutter)) 0;
  padding-bottom:var(--sp-3);
}
.topic-dock .k-dock__inner{max-width:560px}
.topic-dock .k-btn{min-height:var(--touch-lg)}
.topic-dock .topic-back:not(.k-btn--primary){flex:0 0 auto}

.ahead,.flagnote{
  font-size:var(--fs-label); border-radius:11px; padding:12px 14px; margin-bottom:12px;
  background:var(--accent-soft); border:1px solid var(--accent-edge); color:var(--ink-soft);
}
.flagnote{background:var(--gold-soft); border-color:var(--gold); color:var(--gold-ink)}

.egbox{
  font-family:var(--f-num); font-size:14.5px; line-height:1.7;
  background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; padding:13px 15px;
}
.watchbox{
  font-size:14.5px; line-height:1.6; background:var(--warn-soft); color:var(--warn);
  border:1px solid var(--warn); border-radius:10px; padding:13px 15px;
}
.tile.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tile.primary .d{color:var(--accent-ink); opacity:.85}

/* ── second pass (research/14): session blocks, cards, map, calendar, faces ── */

.cards{margin:14px 0 4px; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start}
.cardslabel{flex-basis:100%; font-size:13px; color:var(--ink-soft); margin-bottom:2px}
.card{
  display:flex; flex-direction:column; gap:4px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 13px;
  font-size:14px; max-width:100%; box-shadow:var(--shadow);
}
.card b{font-family:var(--f-display); font-weight:600; font-size:15px}
.card span{color:var(--ink-soft); font-size:13.5px; line-height:1.4}
.card.played{background:var(--gold-soft); border-color:var(--gold); flex-basis:100%; opacity:1}
.card.static{flex-basis:calc(50% - 4px)}

.puzzlepick{width:100%; text-align:left; margin-bottom:10px}
.puzzlepick .d{color:var(--ink); font-size:16px; line-height:1.45; white-space:normal}

/* ── the map (MM-208, research/16 §3.3) ───────────────────────────────────────
   A destination, not a panel: the whole sky (strand rows × year columns, the thinking
   row apart below) and one row opened out. In the sky a star is a small glyph and the
   row is the 44 px target; opened out, every star is a kit k-star (44 px). */
main.map{display:flex; flex-direction:column; gap:var(--sp-4); max-width:1100px}
.map-head{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1)}
.map-title{font-size:var(--fs-display); line-height:var(--lh-tight)}
.map-out{padding:0 var(--sp-3) 0 var(--sp-2); margin-left:calc(-1 * var(--sp-2))}
.map-out span{font-size:1.4em; line-height:1}
/* one sky per subject (P2-106): a row of toggle chips that wraps when there are many */
.sky-switch{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.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-xs); font-size:var(--fs-label); font-weight:700;
  color:var(--tone, var(--accent)); background:var(--tone-soft, var(--accent-soft));
}
.learn-subject{display:grid; gap:0; margin-top:var(--sp-4)}
.learn-subject__head{display:flex; align-items:center; gap:var(--sp-2)}
.done-sky__subject{display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-2) 0 0}
.map-legend{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin:0; font-size:var(--fs-label); color:var(--ink-soft)}
.map-legend > span{display:inline-flex; align-items:center; gap:var(--sp-2)}
.map-legend .sky__star{--glyph:14px}
.map-legend__dot{display:inline-block; width:6px; height:6px; margin:0 4px; border-radius:var(--r-pill); background:var(--accent)}

/* a star as a glyph: the kit's levels, smaller */
.sky__star{
  --glyph:12px; --star-fill:var(--lv0); --star-edge:var(--ink-faint);
  position:relative; flex:none; display:inline-grid; place-items:center; width:var(--glyph); height:var(--glyph);
}
.sky__star svg{width:100%; height:100%; overflow:visible; fill:var(--star-fill); stroke:var(--star-edge); stroke-width:1.6; stroke-linejoin:round}
.sky__star[data-level="0"] svg{fill:none}
.sky__star[data-level="1"]{--star-fill:var(--lv1); --star-edge:var(--lv1)}
.sky__star[data-level="2"]{--star-fill:var(--lv2); --star-edge:var(--lv2)}
.sky__star[data-level="3"]{--star-fill:var(--lv3); --star-edge:var(--lv3)}
.sky__star[data-level="4"]{--star-fill:var(--gold); --star-edge:var(--gold)}
.sky__star[data-level="4"] svg{filter:drop-shadow(0 0 3px var(--glow))}
/* not taught yet: barely there — nothing to feel about it */
.sky__star.is-fog svg, .k-star.is-fog svg{opacity:.4; stroke-dasharray:none}
.sky__star.is-tonight::after{
  content:""; position:absolute; bottom:-4px; left:50%; width:4px; height:4px; margin-left:-2px;
  border-radius:var(--r-pill); background:var(--accent);
}
.sky__star.is-growing svg{animation:k-grow var(--dur-grow) var(--ease-grow) both}

.sky{--sky-label:84px; display:grid; gap:var(--sp-2)}
.sky__years, .sky__row{display:grid; grid-template-columns:var(--sky-label) repeat(4, minmax(0, 1fr)); gap:var(--sp-1); align-items:center}
.sky__years{padding:0 var(--sp-2); font-size:var(--fs-label); font-weight:600; color:var(--ink-soft); text-align:center}
.sky__row{
  min-height:var(--touch); padding:var(--sp-2); text-align:left;
  border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--card);
}
.sky__row:hover{border-color:var(--accent-edge)}
.sky__row:active{background:var(--accent-soft)}
.sky__label{font-size:var(--fs-label); font-weight:600; line-height:1.2; color:var(--ink)}
.sky__cell{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:5px 3px; min-height:28px; padding:2px 0}
.sky__cell + .sky__cell{border-left:1px dashed var(--line-soft)}
.sky__cell--wide{grid-column:2 / -1}
.sky__gap{flex:none; width:var(--sp-5)}
.sky__row.is-apart{margin-top:var(--sp-2); background:var(--card-2); border:1px dashed var(--line)}
@media (min-width:700px){
  .sky{--sky-label:132px}
  .sky__star{--glyph:15px}
  .sky__cell{gap:7px 5px}
  .sky__label{font-size:var(--fs-small)}
}

/* one row opened out: on a phone the years stack, each a labelled band of 44 px stars;
   from 600 px they stand as columns */
.strand__cols{display:grid; gap:var(--sp-3)}
.strand__col{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-2) var(--sp-3)}
.strand__head{font-family:var(--f-body); font-size:var(--fs-label); font-weight:600; color:var(--ink-soft); padding:0 var(--sp-2) var(--sp-1)}
.strand__stars{display:flex; flex-wrap:wrap}
@media (min-width:600px){
  .strand__cols{grid-template-columns:repeat(var(--cols, 4), minmax(0, 1fr)); gap:var(--sp-2); align-items:start}
  .strand__head{text-align:center}
  .strand__stars{justify-content:center}
}

/* a star's sheet: the note's own styles (q-note), the stage line with its star */
.map-sheet__stage{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); font-weight:600}
.map-sheet__stage .sky__star{--glyph:20px}

/* ── done (MM-207, research/16 §3.3) ──────────────────────────────────────────
   The before/after card first, its levels moving (kit Move); then, if a star brightened,
   the map at full width with that star growing once the card has moved; the faces; Show
   a grown-up beside Done. main.is-settled is a redraw: nothing plays again. */
main.done{display:flex; flex-direction:column; gap:var(--sp-5)}
.done-title{font-size:var(--fs-display); line-height:var(--lh-tight)}
.done-card{gap:var(--sp-4)}
.done-move{display:grid; gap:var(--sp-2)}
.done-move + .done-move{padding-top:var(--sp-4); border-top:1px solid var(--line-soft)}
.done-move__name{font-size:var(--fs-title); line-height:var(--lh-tight)}
.done-card .k-card__meta b{color:var(--ink)}
.done-sky{display:grid; gap:var(--sp-2)}
.done-sky__row{font-family:var(--f-body); font-size:var(--fs-label); font-weight:600; color:var(--ink-soft); margin-top:var(--sp-2)}
.done-sky__all{justify-self:start; padding-left:0}
/* the star waits for the card, then glows 600 ms and stays bright */
.done-sky .k-star.is-growing svg{animation-delay:var(--dur-move)}
main.done.is-settled .k-star.is-growing svg{animation:none; filter:drop-shadow(0 0 4px var(--glow))}
main.done > .breakdown{margin-top:0}
.done-extra h2, .done-extra__line{margin:0; max-width:34em}
.done-extra__answer{display:grid; gap:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--line)}
.done-extra__answer:focus{outline:none}
.done-extra__show{justify-self:start}
.done-mood{display:grid; gap:var(--sp-3)}
.done-mood h2{font-size:var(--fs-title)}
.done-acts{display:flex; flex-wrap:wrap; gap:var(--sp-3)}
.done-acts > .k-btn{flex:1 1 200px}
.done-acts > .done-done{order:2}

.freetext.short{font-size:15px; height:40px; max-width:260px; margin:0}
.spark svg{display:block; max-width:100%}
/* "Have you started this at school?" under a miss (MM-108) */
.q-hint{display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--sp-3)}
.q-hint__row{display:flex; gap:var(--sp-2)}
/* "Something wrong with this question?" on the verdict (MM-506): quiet, under the working */
button.q-flag{justify-self:start; padding-inline:0; font-size:var(--fs-small); color:var(--ink-soft)}
p.q-flag{color:var(--ink-soft)}