/* 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}
/* the page's width and side padding, for the bar and the footer to line up with `main` (MM-1640): the
   contents of both sit where the page's own sit, at every width. main's own widths are below and in
   parent.css; a screen whose main differs says so here. */
#app{--page-w:860px; --page-pad:16px}
#app:has(> main.wide), #app:has(> main.map){--page-w:1100px}
#app:has(> main.p-surface){--page-w:760px}
#app:has(> main.session){--page-w:880px; --page-pad:var(--gutter)}
#app:has(> main.topic){--page-pad:var(--gutter)}
@media (orientation:landscape) and (min-width:900px){ #app:has(> main.session){--page-w:1240px} }

/* the top bar: navy, the mark and the name in white, then what the screen puts on the right */
.topbar{
  position:sticky; top:0; z-index:20; padding-top:var(--safe-top);
  border-bottom:1px solid var(--navy-2);
}
.topbar__in{
  display:flex; align-items:center; gap:12px; min-height:60px;
  max-width:var(--page-w); margin:0 auto; padding:10px var(--page-pad);
  container:topbar / inline-size;   /* her name's pill folds to its initial by the bar's own width, below */
}
.mark{display:block; flex:none; line-height:0}
.mark img{display:block; border-radius:8px}
.brand{display:flex; align-items:center; gap:10px; min-width:0; font-family:var(--f-display); font-weight:800; font-size:21px; line-height:1.1; letter-spacing:-.02em; color:var(--on-navy-hi)}
.brand__name{min-width:0}
a.brand--link{min-height:var(--touch); margin-block:calc((40px - var(--touch)) / 2); text-decoration:none; border-radius:var(--r-lg)}   /* the mark and the name as one link to the app's home (MM-1738); the 44px target overlaps the bar's padding, so a bar holding nothing else tall stays at its 40px of content */
.topbar__in > .brand{flex:none}   /* the product's name is always whole: nothing in the bar takes its room */
.topbar .pa-for{color:var(--on-navy)}
.topbar .ghost{border-color:var(--on-navy); color:var(--on-navy-hi); min-height:var(--touch); padding:0 var(--sp-4); white-space:nowrap; flex:none}   /* "For grown-ups" stays on one line; her name's pill gives way instead */
.topbar .ghost:hover{border-color:var(--mint); color:var(--mint)}
.spacer{flex:1}
/* her name: a pill with her first letter in a mint circle, so the product's name is never replaced by hers */
.name-pill{
  position:relative; display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:40px; max-width:50%; overflow:hidden; padding:4px 14px 4px 4px;
  border-radius:var(--r-pill); background:var(--navy-2); color:var(--on-navy-hi); font-weight:700; font-size:var(--fs-label);
}
.name-pill__initial{
  flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--mint); color:var(--on-bright); font-family:var(--f-display); font-weight:800; font-size:16px;
}
.name-pill__name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* her name shortens with an ellipsis as the room goes, and folds to her initial when there is not room for a few letters:
   sooner beside "For grown-ups" (linked) than beside "Sign in" (the widths are the bar's own, inside its padding).
   Folded, the name stays for a screen reader (clipped, not removed). */
@container topbar (max-width:388px){ .topbar__in:has(.topbar-grownups) .name-pill__name{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .topbar__in:has(.topbar-grownups) .name-pill{padding:4px} }
@container topbar (max-width:356px){ .name-pill--long .name-pill__name{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .name-pill--long{padding:4px} }   /* a name of four letters or more is never cut to the initial and a few letters of it */
@container topbar (max-width:420px){ .topbar__in:has(.kidswitch) .name-pill--xlong .name-pill__name{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .topbar__in:has(.kidswitch) .name-pill--xlong{padding:4px 10px 4px 4px} }   /* a name of nine letters or more beside the switcher's arrow and the menu button is never cut to a few letters and an ellipsis (a clipped label): it folds to the initial, the whole name stays in the button's label and in the list */
@container topbar (max-width:470px){ .topbar__in:has(.kidswitch) .name-pill--xxlong .name-pill__name{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .topbar__in:has(.kidswitch) .name-pill--xxlong{padding:4px 10px 4px 4px} }   /* a name of sixteen letters or more folds a little wider, where the parents' word joins the bar from 441px and leaves no room for it */
@container topbar (max-width:300px){ .name-pill__name{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .name-pill{padding:4px} }
@media (max-width:359px){ .brand{font-size:18px; gap:8px} .name-pill__name{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .name-pill{padding:4px} .topbar__in{gap:6px} .topbar .ghost{padding:0 var(--sp-3); font-size:13px} }

/* the grown-ups' bar (MM-1728, parent/bar.js): whose pages these are, a list of the children, and the round menu button.
   The pill is the name pill above as a button with a down arrow; its name folds to the initial by the same rules. At 440px
   and under the parents' word after the product's name gives its room to them (it stays for a screen reader). */
.kidswitch{position:relative; display:flex; flex:0 1 auto; min-width:0}
button.kid-pill{border:0; font-family:inherit; cursor:pointer; min-height:var(--touch); max-width:none; padding-right:10px}
.kid-pill__arrow{flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.kidswitch__list{
  position:absolute; top:calc(100% + var(--sp-2)); right:0; z-index:25; display:flex; flex-direction:column; gap:2px;
  min-width:220px; max-width:calc(100vw - 2 * var(--gutter)); padding:var(--sp-2); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-card);
}
.kidswitch__item{
  display:flex; align-items:center; gap:10px; min-height:var(--touch); padding:4px 10px; border:0; border-radius:var(--r-lg);
  background:none; color:var(--ink); font:inherit; font-weight:700; text-align:left; cursor:pointer;
}
.kidswitch__item[aria-current="true"]{background:var(--mint-soft); color:var(--mint-ink)}
.kidswitch__all{margin-top:var(--sp-1); border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); color:var(--ink-soft)}
.menu-btn{flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--navy-2); color:var(--on-navy-hi); cursor:pointer}
.menu-btn svg{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.menu-btn[aria-current="page"]{background:var(--mint); color:var(--on-bright)}
@container topbar (max-width:440px){ .topbar__in:has(.kidswitch) .pa-for{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} }

/* the footer: slim and navy, after the page */
.appfoot{margin-top:var(--sp-7)}
.appfoot__in{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--sp-5) var(--sp-7);
  max-width:var(--page-w); margin:0 auto; padding:var(--sp-6) var(--page-pad) calc(var(--sp-6) + var(--safe-bottom));
}
.appfoot__about{flex:1 1 320px; max-width:62ch}
.appfoot .brand{font-size:19px; margin-bottom:var(--sp-2)}
.appfoot__line{margin:0 0 var(--sp-1); font-size:var(--fs-label); line-height:1.5; color:var(--on-navy)}
.appfoot__links ul{display:flex; flex-wrap:wrap; gap:0 var(--sp-3); margin:0; padding:0; list-style:none}
.appfoot__links li{display:flex}
.appfoot__links a{display:inline-flex; align-items:center; min-height:var(--touch); color:var(--on-navy-hi); font-weight:600; font-size:var(--fs-label); text-decoration:underline; text-underline-offset:3px}
.appfoot__links a:hover{color:var(--mint)}
/* the link to the site is small: the four links above it are the footer's, this one only says where the app lives (MM-1740) */
.appfoot__links a.appfoot__site{font-weight:400}
/* on a phone the five links share one row, the width of the page, never a lone link on a second row (the footer stays slim) */
@media (max-width:519px){
  .appfoot__links{flex:1 1 100%}
  .appfoot__links ul{flex-wrap:nowrap; justify-content:space-between; gap:0 var(--sp-2)}
  .appfoot__links a{font-size:13px}
}
@media (max-width:359px){ .appfoot__links ul{gap:0 var(--sp-1)} .appfoot__links a{font-size:12px} }
/* with a tab bar, the footer ends at the bar's top edge: the page keeps clear of the bar as a whole, safe area included */
#app:has(.k-tabbar){padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 1px)}   /* the 1px is for a footer whose lines end between pixels */
#app:has(.k-tabbar) .appfoot__in{padding-bottom:var(--sp-6)}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--card); border:1px solid var(--line); font-size:var(--fs-label); 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:var(--r-pill);
  padding:7px 14px; font-size:var(--fs-label); 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))}
/* with the footer after it, the footer keeps clear of the tab bar instead (child.css .appfoot) */
main.has-tabbar:has(~ .appfoot){padding-bottom:var(--sp-7)}
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:var(--r-lg);
  background:var(--accent); color:var(--accent-ink); padding:22px 24px; box-shadow:var(--shadow);
  transition:transform var(--dur-quick) var(--ease-out);
}
.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:var(--fs-small); 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}
/* After a grown-up signs in on her device (MM-1717, child/signin.js): the children of the account, one tap each */
.panel .signin-children{list-style:none; margin:0 0 var(--sp-4); padding:0; display:grid; gap:var(--sp-2); max-width:420px}   /* .panel ul would indent it */
.panel .signin-children li{margin:0}
.signin-child{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); text-align:left}
.signin-child__year{color:var(--ink-soft); font-size:var(--fs-label)}
.signin-add{max-width:420px}
.signin-add__title{margin:var(--sp-4) 0 var(--sp-2); font-size:var(--fs-title)}
.signin-form{max-width:420px}
.signin-form select{min-height:44px; font:inherit}
.welcome-kept,.welcome-saved{margin:var(--sp-3) 0 0; max-width:62ch}

/* ── the welcome (MM-1641, research/58 "The welcome") ─────────────────────────────────
   A navy hero (the subjects, the first sentence as a headline, the one button, the site's own pictures of the
   app tilted on tiles in three subjects' colours), three step cards over its edge, a band on the cards she
   plays and the second try, then the footer. The page's own width is --page-w (the bar and the footer use it
   too); the sections run edge to edge. Colours are tokens only. */
#app:has(> main.welcome-home){--page-w:1180px}
main.welcome-home{max-width:none; padding:0}
.wl-hero{position:relative; overflow:hidden}
.wl-hero__in{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6);
  max-width:var(--page-w); margin:0 auto; padding:var(--sp-6) var(--page-pad) var(--sp-7);
}
.wl-kicker{margin:0 0 var(--sp-3); color:var(--mint); font-weight:800; font-size:var(--fs-label)}
.wl-chips{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-4); padding:0; list-style:none}
.wl-chips .k-subj{min-height:40px; padding:0 var(--sp-4); font-weight:800}
.wl-title{
  margin:0; color:var(--on-navy-hi); font-family:var(--f-display); font-weight:800;
  font-size:clamp(38px, 5vw + 12px, 68px); line-height:1.03; letter-spacing:-.03em; text-wrap:balance;
}
.wl-title__hl{color:var(--mint)}
.wl-lede{margin:var(--sp-5) 0 0; max-width:34em; color:var(--on-navy); font-size:clamp(18px, .6vw + 15px, 22px); line-height:1.5}
.wl-go{margin-top:var(--sp-6); max-width:340px; min-height:var(--touch-lg); font-family:var(--f-display); font-weight:800; font-size:var(--fs-title)}
/* "Sign in" under "Set up" (MM-1717): the same width, outlined on the navy, so Set up stays the one filled button */
.wl-signin{display:block; margin-top:var(--sp-3); max-width:340px; min-height:var(--touch-lg); background:transparent; border:2px solid var(--on-navy); color:var(--on-navy-hi); font-family:var(--f-display); font-weight:800; font-size:var(--fs-title)}
.wl-signin:hover{border-color:var(--mint); color:var(--mint); background:transparent}
.wl-foot{margin:var(--sp-4) 0 0; max-width:52ch; color:var(--on-navy); font-size:var(--fs-label); line-height:1.5}
.wl-privacy{margin:var(--sp-1) 0 0}
.wl-privacy a{display:inline-flex; align-items:center; min-height:var(--touch); color:var(--on-navy-hi); font-weight:600; font-size:var(--fs-small); text-decoration:underline; text-underline-offset:3px}
.wl-privacy a:hover{color:var(--mint)}

/* the pictures: a tile in a subject's strong colour, tilted, with the picture over it at another angle */
.wl-stage{position:relative; height:clamp(205px, 56vw, 270px); margin-top:var(--sp-2)}
.wl-shot{position:absolute; border-radius:var(--r-xl); background:var(--tone); padding:0 0 var(--sp-3) var(--sp-3); transform:rotate(var(--tilt, 0deg)); box-shadow:var(--shadow-card)}
.wl-pic{display:block; width:100%; height:auto; border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-card)}
.wl-shot picture{display:contents}
.wl-shot .wl-pic{transform:translate(0, calc(-1 * var(--sp-2))) rotate(var(--pic-tilt, 0deg))}
.wl-shot--question{left:0; top:22%; width:68%; --tilt:-4deg; --pic-tilt:2deg; z-index:1}
.wl-shot--map{right:0; top:0; width:56%; --tilt:4deg; --pic-tilt:-2deg; z-index:3}
.wl-shot--english{display:none; z-index:2}

/* the three steps */
.wl-wrap{max-width:var(--page-w); margin:0 auto; padding:0 var(--page-pad)}
.wl-steps{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); margin:var(--sp-6) 0 0; padding:0; list-style:none}
.wl-step{background:var(--card); border-radius:var(--r-card); border-top:10px solid var(--tone); box-shadow:var(--shadow-card); padding:var(--sp-6)}
.wl-step__icon{display:grid; place-items:center; width:60px; height:60px; margin-bottom:var(--sp-4); border-radius:var(--r-lg); background:var(--tone-soft); color:var(--tone-ink)}
.wl-step__title{margin:0 0 var(--sp-2); color:var(--ink); font-family:var(--f-display); font-weight:800; font-size:var(--fs-title); line-height:1.15; letter-spacing:-.02em}
.wl-step__text{margin:0; color:var(--ink-soft); font-size:var(--fs-small); line-height:1.55}
.welcome-home .welcome-promise{margin:var(--sp-6) 0 0; max-width:70ch; padding:var(--sp-1) 0 var(--sp-1) var(--sp-4); border-left:4px solid var(--mint-edge); color:var(--ink-soft); font-size:var(--fs-label); line-height:1.55}

/* the band: what she is given when she is stuck, and the reading day on sunshine */
.wl-band{margin-top:var(--sp-8)}
.wl-band__in{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6); align-items:center; max-width:var(--page-w); margin:0 auto; padding:0 var(--page-pad)}
.wl-band__text h2{margin:0 0 var(--sp-3); color:var(--ink); font-family:var(--f-display); font-weight:800; font-size:var(--fs-display); line-height:1.08; letter-spacing:-.03em}
.wl-band__text p{margin:0; max-width:36em; color:var(--ink-soft); font-size:var(--fs-body); line-height:1.55}
.wl-cards{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-5) 0 0; padding:0; list-style:none}
.wl-cards li{padding:var(--sp-2) var(--sp-4); border:2px solid var(--edge); border-radius:var(--r-btn); background:var(--card); box-shadow:0 4px 0 var(--edge); color:var(--ink); font-weight:800; font-size:var(--fs-small)}
.wl-band__tile{overflow:hidden; border-radius:var(--r-card); background:var(--tone); padding:var(--sp-5)}
.wl-band__tile .wl-pic{transform:rotate(-1.5deg)}

@media (min-width:760px){
  .wl-steps{grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-5)}
  .wl-shot--english{display:block}
  .wl-stage{height:clamp(300px, 46vw, 460px)}
  .wl-shot--question{top:24%; width:64%}
  .wl-shot--english{right:4%; bottom:0; width:48%; --tilt:3deg; --pic-tilt:-2deg}
  .wl-shot--map{width:54%}
}
@media (min-width:760px) and (max-width:899px){
  /* an iPad held upright: one column, so the stage keeps the desktop's proportions (about as high as it is wide) and
     the three pictures take the desktop's places; wider and the English picture would sit behind the map */
  .wl-stage{height:clamp(440px, 62vw, 520px); width:min(100%, 520px); margin-inline:auto}
  .wl-shot--question{width:68%}
  .wl-shot--map{width:58%}
  .wl-shot--english{width:52%}
}
@media (min-width:900px){
  .wl-hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:var(--sp-8); padding-top:var(--sp-8); padding-bottom:calc(var(--sp-8) * 2 + var(--sp-7))}
  .wl-steps{margin-top:calc(-1 * (var(--sp-8) + var(--sp-7)))}
  .wl-stage{height:clamp(400px, 40vw, 560px); margin-top:0}
  .wl-shot--question{width:68%}
  .wl-shot--map{width:58%}
  .wl-shot--english{width:52%}
  .wl-band__in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--sp-8)}
}

/* the steps after it: a navy band for the question and its lede, the panel over its edge (MM-1641) */
main.welcome-step{padding-top:0}
main.welcome-step > .hero{
  position:relative; margin:0 0 var(--sp-5); padding:var(--sp-6) 0 calc(var(--sp-8) + var(--sp-4));
  background:var(--navy); color:var(--on-navy-hi); --focus:var(--mint);
  box-shadow:0 0 0 100vmax var(--navy); clip-path:inset(0 -100vmax);   /* the band runs edge to edge inside the page's own width */
}
main.welcome-step > .hero h1{color:var(--on-navy-hi); font-size:clamp(30px, 4vw + 10px, 44px); font-weight:800; letter-spacing:-.025em}
main.welcome-step > .hero p{color:var(--on-navy)}
main.welcome-step > .hero:not(:has(+ .panel)){padding-bottom:var(--sp-6)}   /* the link step has no panel to overlap: no empty navy foot */
main.welcome-step > .hero + .panel{position:relative; margin-top:calc(-1 * var(--sp-8)); border:0; border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:var(--sp-6)}
main.welcome-step .welcome-actions{max-width:420px; gap:var(--sp-4)}
@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;
}
/* "Before you start" and the puzzle chooser (MM-1643): a band over the choices, the choices as chunky tiles with the edge under them */
main.pick-step .tile{
  padding:var(--sp-4); border:2px solid var(--edge); border-radius:var(--r-lg); box-shadow:0 5px 0 var(--edge);
  transition:transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
main.pick-step .tile:hover{border-color:var(--accent)}
main.pick-step .tile:active{transform:translateY(3px); box-shadow:0 2px 0 var(--edge)}
main.pick-step .tile .t{font-family:var(--f-display); font-weight:800; font-size:var(--fs-title)}
main.pick-step .row2{gap:var(--sp-4); margin-top:var(--sp-3)}
main.pick-step .sheet{border:0; border-radius:var(--r-card); box-shadow:var(--shadow-card)}
main.pick-step .panel{border:0; border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:var(--sp-6)}
main.pick-step > .key.act{min-height:var(--touch-lg); border:2px solid var(--mint); border-radius:var(--r-lg); background:var(--mint); color:var(--on-bright); box-shadow:0 5px 0 var(--mint-edge); font-family:var(--f-display); font-size:var(--fs-title); font-weight:800}
main.pick-step .puzzlepick{margin-bottom:var(--sp-4)}
main.pick-step .puzzlepick .d{font-size:var(--fs-body); font-weight:600}
main.pick-step--puzzle > .hero{background:var(--puzzle); color:var(--puzzle-on); --focus:var(--puzzle-on); box-shadow:0 0 0 100vmax var(--puzzle)}
main.pick-step--puzzle > .hero h1, main.pick-step--puzzle > .hero p{color:var(--puzzle-on)}
.tile:hover{border-color:var(--accent-edge)}
.tile .t{font-family:var(--f-display); font-weight:600; font-size:var(--fs-small)}
.tile .d{color:var(--ink-soft); font-size:var(--fs-label); margin-top:3px}

/* ── Today (MM-205, MM-1642, research/58 "Today") ──────────────────────────────
   The greeting on a navy band under the bar; today's card over its edge with a stripe in the colours of the
   subjects it holds, its label, what the set is and a chip each; beside it (under it on a phone) a tile for what
   grew last time and one for the map; the week's bar and the month's dots as cards. The page's own width is
   --page-w (the bar and the footer use it too). Colours are tokens only. */
#app:has(> main.today-home){--page-w:1100px; --page-pad:var(--gutter)}
main.today-home, main.today-home.has-tabbar:has(~ .appfoot){max-width:none; padding:0}
.today-band{padding:var(--sp-5) 0 calc(var(--sp-6) + var(--sp-8))}
.today-band__in{max-width:var(--page-w); margin:0 auto; padding:0 var(--page-pad)}
.today-hello{margin:0; color:var(--on-navy-hi); font-size:clamp(36px, 28px + 2.6vw, 52px); font-weight:800; line-height:var(--lh-tight); letter-spacing:-.025em}
/* 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:var(--sp-2) 0 0; font-size:var(--fs-label); color:var(--on-navy)}
.today-who__btn{min-height:var(--touch); color:var(--on-navy-hi); text-decoration:underline; text-underline-offset:3px}
.today-who__btn:hover{color:var(--mint)}
.today-page{
  position:relative; display:grid; gap:var(--sp-4); max-width:var(--page-w); margin:calc(-1 * var(--sp-8)) auto 0;
  padding:0 var(--page-pad) var(--sp-4);
}
.today-page > *{margin:0}
.today-top{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); align-items:start}
.today{position:relative; overflow:hidden; max-width:none; padding-top:calc(var(--card-pad) + 10px)}
.today-stripe{position:absolute; top:0; left:0; right:0; height:10px; display:flex}
.today-stripe i{flex:1 1 0; background:var(--tone)}
/* the card's own order: the label, what the set is, a chip each, Start, Something smaller (the words stay where the code says them) */
.today-set > .k-card__title{order:1; font-family:var(--f-body); font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.today-set > .k-card__meta{order:2}
.today-set--sized > .k-card__title + .k-card__meta{font-family:var(--f-display); font-size:clamp(24px, 20px + 1.2vw, 32px); font-weight:800; line-height:var(--lh-tight); letter-spacing:-.02em; color:var(--ink)}
.today-set > .today-chips{order:3}
.today-set > .today-start, .today-set > .today-picks{order:4}
.today-set > .k-card__more{order:5}
.today-chips{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.today-chips .today-subjects{margin:0; color:var(--ink-soft)}
/* the sentence is drawn in line: each chip a pill in the text, the comma straight after it, "and" with a space either side */
.today-chips .today-subject{display:inline-flex; align-items:center; vertical-align:middle; margin:var(--sp-1) 0; gap:6px; min-height:36px; padding:0 var(--sp-3) 0 var(--sp-2); border-radius:var(--r-pill); background:var(--tone-soft); color:var(--tone-ink); font-size:var(--fs-small); font-weight:700}
.today-chips .subject-mark{min-width:0; height:auto; padding:0; background:transparent; color:inherit; font-size:inherit}
.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)}
/* the two tiles: what grew last time (the puzzle's sunshine) and the way to the map (the brand's mint) */
.today-tiles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-4); align-items:start}
.today-tile--long, .today-tile--long + .today-tile--map{grid-column:1 / -1}
.today-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); min-width:0; border:0; border-radius:var(--r-card);
  padding:var(--sp-5); text-align:left; background:var(--tone-soft); color:var(--tone-ink);
}
.today-tile:only-child{grid-column:1 / -1}
.today-tile--map{display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:center; background:var(--mint-soft); color:var(--mint-ink); font:inherit; cursor:pointer}
.today-tile--map .sky-row{grid-column:1 / -1}
.today-tile--map:hover{box-shadow:inset 0 0 0 2px var(--mint-ink)}
.today-tile__label{font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.today-tile__go{grid-column:2; grid-row:1; font-size:var(--fs-title); font-weight:700; line-height:1}
.today-tile .sky-row{display:flex; flex-wrap:wrap; gap:5px}
.today-tile .sky__star{--glyph:22px}
/* This week (MM-601): a few chunks, the first pre-filled from last week; full is a ceiling. No red. */
.today-week{padding:var(--sp-5) var(--card-pad); border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.today-week__name{font-size:var(--fs-label); font-weight:700; 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(--mint-edge); 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:0; max-width:52ch; color:var(--ink-soft); font-size:var(--fs-small)}
.today-growth b{color:var(--ink); font-weight:700}
.today-tile--growth .today-growth{max-width:none; color:inherit}
.today-tile--growth .today-growth b{display:block; color:inherit; font-family:var(--f-display); font-size:var(--fs-body); font-weight:800; line-height:var(--lh-tight)}
/* the month: one dot a day in a card, those practised in mint, today ringed. No number, no loss state */
.today-month__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-1) var(--sp-4)}
.today-month__name{font-family:var(--f-display); font-size:var(--fs-title); font-weight:800; line-height:var(--lh-tight); color:var(--ink)}
.today-dots{display:grid; grid-template-columns:repeat(auto-fill, minmax(26px, 1fr)); gap:var(--sp-2); padding:var(--sp-2) 2px}
.today-dot{width:100%; max-width:32px; aspect-ratio:1; border-radius:var(--r-pill); background:var(--line)}
.today-dot.is-on{background:var(--mint); box-shadow:inset 0 0 0 2px var(--mint-ink)}
.today-dot.is-today{outline:3px solid var(--ink); outline-offset:2px}
.today-page > .grownups{display:flex; margin:var(--sp-2) auto 0; font-size:var(--fs-label); text-decoration:underline; text-underline-offset:3px}
.today-page > .grownups-link{margin-top:0}
.today-page > .today-linked{margin:var(--sp-6) 0 0; text-align:center; color:var(--ink-soft); font-size:var(--fs-label)}
.today-page > .today-linked + .grownups{margin-top:0}
.today-page > .today-writing, .today-page > .today-quest{margin-top:0}

/* an iPad or a desktop (research/58 "iPad and desktop"): the tiles sit beside the card, no narrow column with a third of the screen empty */
@media (min-width:700px){
  .today-top{grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); align-items:stretch}
  .today-tiles{grid-template-columns:minmax(0, 1fr); grid-auto-rows:minmax(0, 1fr); align-items:stretch}
  .today-dots{grid-template-columns:repeat(auto-fill, minmax(30px, 1fr))}
  .today-dot{max-width:36px}
  .today-tile .sky__star{--glyph:30px}
}

/* ── the question sheet and the answer dock (MM-206, MM-1643, research/58 "A question") ─────
   The top bar gives way to a band in the subject's own strong colour (the registry's tone): the subject's mark and
   name and the topic, Stop, and one segment for each question; the page behind is tinted in the subject's soft
   colour. The question is a white card, the choices tiles under it (two to a row where they are short), the
   strategy cards a navy dock, and the answer dock (keypad, typed answer, the verdict) 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 card is on the
   left and the choices, the cards and the dock are beside it. Colours are tokens only. */
#app[data-tone]{background:color-mix(in srgb, var(--tone-soft) 38%, var(--paper))}
.qband{position:relative; padding-top:var(--safe-top); background:var(--tone); color:var(--tone-on); --focus:var(--tone-on)}
.qband:not([data-tone]){--tone:var(--navy); --tone-on:var(--on-navy-hi)}
.qband__in{display:grid; gap:var(--sp-3); max-width:var(--page-w); margin:0 auto; padding:var(--sp-3) var(--page-pad) var(--sp-4)}
.qband__row{display:flex; align-items:center; gap:var(--sp-3); min-width:0}
/* the band stays at the top on a screen tall enough to spare it: Stop is always there */
@media (min-height:700px){ .qband{position:sticky; top:0; z-index:20} html:has(.qband){scroll-padding-top:104px} }
.qband .k-sheet__where{flex:1 1 0; min-width:0; margin-left:0; font-size:var(--fs-small); font-weight:800; line-height:1.25; color:inherit}
.qband .q-subject{color:inherit; font-weight:800}
.qband .subject-mark{background:var(--tone-on); color:var(--tone)}
.qband .k-sheet__topic, .qband .k-sheet__sep{color:inherit; font-size:inherit; font-weight:inherit}
.qband__row > .k-sheet__topic, .qband .q-count{flex:none; margin:0; white-space:nowrap; font-size:var(--fs-label); font-weight:700; color:inherit}
.qband .q-timer{flex:none; min-width:calc(4ch + .01px); text-align:right; font-size:var(--fs-label); font-weight:800; color:inherit}
.qband .q-timer--long{min-width:calc(5ch + .01px)}   /* a timed set that starts at 10:00 keeps the width of "10:00", so losing a digit at 9:59 moves nothing (MM-1446) */
.qband__stop{
  flex:none; min-height:var(--touch); padding:0 var(--sp-4); border-radius:var(--r-pill);
  border:2px solid var(--tone-on); background:transparent; color:var(--tone-on); font-size:var(--fs-label); font-weight:800;
}
.qband__stop:hover{background:var(--tone-on); color:var(--tone)}
.qband .k-btn--quiet{color:inherit; min-height:36px; padding:0 var(--sp-2); font-size:var(--fs-label); text-decoration:underline; text-underline-offset:3px}
.qband .k-btn--quiet:hover{color:inherit}
.qband .mock-clock__toggle{min-height:var(--touch)}   /* the mock's Hide / Show the clock keeps the touch size the quiet rule above would lower */
/* how far through: one segment for each question, filled when answered, the one she is on outlined, never a number out of a whole */
.qband .k-steps{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:5px; width:100%}
.qband .k-steps > *{width:auto; height:8px; border-radius:4px; background:color-mix(in srgb, var(--tone-on) 24%, transparent); box-shadow:none}
.qband .k-steps > .is-done{background:var(--tone-on)}
.qband .k-steps > .is-now{background:transparent; box-shadow:inset 0 0 0 2px var(--tone-on)}
/* the skills check has no segments (24 do not fit a phone and it can stop early): a thin line */
.qband .check-track{flex:none; width:100%; height:8px; background:color-mix(in srgb, var(--tone-on) 24%, transparent)}
.qband .check-track i{background:var(--tone-on)}

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:0 0 auto}
main.session .q-dock{margin:auto calc(-1 * var(--gutter)) 0}
main.session .cards{margin-top:auto}
main.session .cards + .q-dock{margin-top:0}
main.session .q-dock--inline{margin:0}
/* the card */
.q-sheet{border:0; box-shadow:var(--shadow-card)}
.q-sheet .k-sheet__head{min-height:0; padding:var(--sp-5) var(--sp-6) 0; border:0; background:none; row-gap:var(--sp-1)}
.q-sheet .k-tag:not(.k-tag--gold):not(.k-tag--ok){background:var(--tone-soft, var(--accent-soft)); color:var(--tone-ink, var(--accent))}
.q-sheet .k-sheet__line{
  display:flex; align-items:center; gap:var(--sp-1) var(--sp-3); flex-wrap:wrap;
  margin:var(--sp-3) var(--sp-5) 0; padding:var(--sp-2) var(--sp-4); border:0; border-radius:var(--r-md); background:var(--tone-soft, var(--card-2)); color:var(--tone-ink, var(--ink-soft))
}
.q-sheet .k-sheet__line b{color:inherit}
.q-sheet .k-sheet__line .k-btn{margin-left:auto; min-height:36px; padding:0 var(--sp-2); color:inherit; text-decoration:underline; text-underline-offset:3px}
.q-sheet .k-sheet__body.squared{padding:var(--sp-5) var(--sp-6) var(--sp-6); background:none}
.q-sheet .k-sheet__prompt{font-family:var(--f-display); font-weight:700; font-size:var(--fs-prompt); line-height:1.25; letter-spacing:-.01em; color:var(--ink)}
.q-sheet .k-sheet__prompt.is-long{font-size:var(--fs-title); font-weight:600; line-height:1.35; letter-spacing:0}
.q-sheet .k-sheet__prompt.is-longer{font-size:var(--fs-body); font-weight:600; line-height:1.45; letter-spacing:0}
.q-sheet .k-sheet__prompt.is-calc{font-family:var(--f-num); font-weight:600; font-size:clamp(30px, 7vw, 42px); text-align:center; letter-spacing:-.01em}
/* a stem with its part: the stem is the headline, the part asked under it in plain type */
.q-sheet .k-sheet__lead{font-family:var(--f-display); font-weight:700; font-size:var(--fs-prompt); line-height:1.25; letter-spacing:-.01em}
.q-sheet .k-sheet__lead ~ .k-sheet__prompt{font-family:var(--f-body); font-weight:500; font-size:var(--fs-body); line-height:1.45; letter-spacing:0; color:var(--ink-soft)}
.q-sheet .k-sheet__lead ~ .k-sheet__prompt b{color:var(--ink)}
.q-sheet .k-sheet__topic{font-size:var(--fs-label)}
/* the subject's name is text and the mark beside it is a hint; the narrowest phones keep the pair of names on one row (MM-1398, MM-1408) */
.q-subject{display:inline-flex; align-items:center; gap:var(--sp-1); color:var(--ink); font-weight:600}
.q-subject__short{display:none}
@media (max-width:383px){.q-subject .subject-mark{display:none}}
@media (max-width:348px){
  .q-subject__short{display:inline}
  .q-subject--abbreviated .q-subject__name{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
.today-subject{white-space:nowrap}
.q-tally{font-size:var(--fs-title); font-weight:600; color:var(--ok); min-width:var(--touch); text-align:center}
/* the warm-up's tally is a number, not a button: on the narrowest phones it need not be a touch wide, so the pair shares the row with the clock's button. It keeps two digits' width and the clock three, at every width, so the card's head changes height with neither the right answers nor the seconds left (MM-1408, MM-1446) */
@media (max-width:360px){.q-sheet .q-tally{min-width:calc(2ch + .01px)}}
.q-sheet .q-tally ~ .q-timer{min-width:calc(3ch + .01px)}
.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{
  --passage-bg:var(--card-2);
  margin:0 0 var(--sp-5); padding:var(--sp-4) var(--sp-5); max-width:62ch;
  background:var(--passage-bg); border:1px solid var(--line); border-left:4px solid var(--tone, 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)}
/* a text with numbered gaps (P2-816): each gap its number in bold and a blank line, as GL
   prints it; the gap she is answering outlined, the ones before it holding their words */
.gap{white-space:nowrap}
.gap__n{font-family:var(--f-num); font-weight:700}
.gap__blank{display:inline-block; min-width:4.5em; border-bottom:2px solid var(--ink-soft); line-height:1.2; text-align:center}
.gap.is-filled .gap__blank{min-width:0; border-bottom-color:var(--line); padding:0 2px; font-weight:600; white-space:normal}
.gap.is-now{padding:1px 4px; border-radius:var(--r-sm); background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent)}
.gap.is-now .gap__blank{border-bottom-color:var(--accent)}
/* a two-part item (MM-830): the stem's words above its picture, the parts already answered
   as a quiet line of their answers, and this part's letter in bold before its question. On a
   phone the stem is set at body size, so the part asked sits clear above the dock. */
.k-sheet__lead{margin:0 0 var(--sp-4); font-size:var(--fs-title); line-height:1.45; white-space:pre-wrap; text-wrap:pretty}
/* a word she hears (P2-302): say it again, and the sentence with its gap */
.heard{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-4)}
.heard__sentence{flex:1 1 100%; margin:0; font-size:var(--fs-title); line-height:1.45; text-wrap:pretty}
.k-sheet__part{font-family:var(--f-num); font-weight:700}
.k-parts-done{list-style:none; margin:var(--sp-3) 0 var(--sp-4); padding:var(--sp-1) var(--sp-3); border-left:4px solid var(--line);
  font-size:var(--fs-small); color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4)}
.k-parts-done__answer{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .k-sheet__lead{font-size:var(--fs-body); margin-bottom:var(--sp-3)}
  .fig-table--grid td{padding:5px 10px}
}
/* the gap's sentence again in the "not yet" dock, which covers the text on a phone */
.cloze-echo{display:none}
@media (max-width:600px){
  .k-dock .cloze-echo{display:block; margin:0; padding:var(--sp-2) var(--sp-3); font-size:var(--fs-small); line-height:1.5;
    background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:var(--r-md)}
  .cloze-echo mark{background:var(--ok-soft); color:var(--ink); font-weight:700; padding:0 2px; border-radius:2px}
}
@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(--passage-bg) 30%, transparent) center top / 100% 32px no-repeat local,
      linear-gradient(transparent, var(--passage-bg) 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(--passage-bg);
  }
}

/* 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:var(--fs-label); color:var(--ink-soft)}
.rubric-model{display:grid; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.rubric-model__toggle{justify-self:start}
.rubric-model__set{font-size:var(--fs-label); color:var(--ink-soft)}
.rubric-model__text{border-left:3px solid var(--line-soft); padding-left:var(--sp-3)}
.rubric-model__notes{display:grid; gap:var(--sp-2); margin:0; padding-left:var(--sp-4)}
.rubric-model__note{display:grid; gap:2px; font-size:var(--fs-label)}
/* the paragraphs tick's example points to the breaks (MM-1134): each paragraph numbered beside it */
.rubric-model__para{position:relative; padding-left:1.75em}
.rubric-model__n{position:absolute; left:0; top:0; font-weight:700; font-size:var(--fs-label); 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:var(--fs-small); 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 at the foot (MM-1643): a raised white panel with rounded top corners, holding the keypad, the typed answer, the hint
   or the verdict; the verdict's two states keep their own colours and a rule of the same colour on top, never red */
.q-dock{
  border-top:0; border-radius:var(--r-card) var(--r-card) 0 0; box-shadow:var(--shadow-bar);
  background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* a question answered by a tap has no keypad: its dock is a quiet strip in the flow, between the card and the tiles */
.q-dock--inline[data-state="answer"]{position:static; margin:0; padding:0; background:none; box-shadow:none; border-radius:0; border:0}
.q-dock--inline[data-state="answer"] .k-dock__inner{max-width:none; margin:0}
.q-dock--inline .k-dock__row{justify-content:flex-start}
.q-dock[data-state="right"]{background:var(--ok-soft); border-top:4px solid var(--ok)}
.q-dock[data-state="notyet"]{background:var(--warn-soft); border-top:4px solid var(--warn)}
.q-dock .freetext{margin:0}
/* what she ticks, marks or numbers, on the page under the question, takes the tiles' edge too (settled, on the card, it keeps its right and not-yet marks) */
.q-answers .k-tick, .q-answers .k-order__item, .q-answers .k-match__item{border-color:var(--edge); border-radius:var(--r-md); box-shadow:0 3px 0 var(--edge)}
.q-answers .k-tick.is-on, .q-answers .k-order__item.is-on, .q-answers .k-match__item.is-on{border-color:var(--accent); box-shadow:0 3px 0 var(--accent)}
.q-answers .k-row__opt{border-color:var(--edge); box-shadow:0 3px 0 var(--edge)}
.q-answers .k-row__opt[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 3px 0 var(--accent)}
/* the hint, in the strip between the card and the tiles: a pill in the subject's soft colour */
.q-dock--inline .q-hint{min-height:var(--touch); padding:0 var(--sp-4); border-radius:var(--r-pill); background:var(--tone-soft, var(--accent-soft)); color:var(--tone-ink, var(--accent)); font-weight:700}
/* the keys: chunky, with the edge under them, as an answer tile has */
.q-dock .k-key{border:2px solid var(--edge); border-radius:var(--r-md); box-shadow:0 3px 0 var(--edge); background:var(--card)}
.q-dock .k-key:active{transform:translateY(2px); box-shadow:0 1px 0 var(--edge)}
.q-dock .k-key--word{color:var(--ink)}
.q-dock .freetext, .quest-sheet .freetext{border:2px solid var(--edge); border-radius:var(--r-md); background:var(--card)}
/* the worked example's dock (MM-1409): "Read the whole note" and "I’ve read it" sit side by side where they fit, both with less padding and a closer gap under 390 px
   (the redesign's larger primary needs it at 360 px), and one above the other where they still do not; from 390 px, and in the session's side column in landscape, the row is as it was */
@media (max-width:389px){
  .show-dock .k-dock__row{flex-wrap:wrap; column-gap:var(--sp-2)}
  .show-dock .k-dock__row > .k-btn--quiet{padding-inline:var(--sp-1)}
  .show-dock .k-dock__row > .k-btn--primary{padding-inline:var(--sp-3)}
}
/* five options (GL's cloze, A to E: decision 13): on a phone each is a row, --touch-btn high, so the five stay clear of the dock */
@media (max-width:600px){
  .choices--five{gap:var(--sp-2)}
  .choices--five .choice{min-height:var(--touch-btn); padding-block:var(--sp-2)}
}
.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); grid-template-rows:auto auto auto 1fr auto;
    align-items:start; gap:var(--sp-5); max-width:1240px; padding-bottom:var(--sp-4);
  }
  /* the card on the left, as high as it is; the second-go note, the choices and the cards beside it, the dock low enough for the thumb */
  main.session > .q-sheet{grid-column:1; grid-row:1 / 6}
  main.session > .q-dock--inline{grid-column:2; grid-row:1}
  main.session > .q-answers{grid-column:2; grid-row:2}
  main.session > .cards{grid-column:2; grid-row:3; margin:0}
  main.session > .q-dock:not(.q-dock--inline){
    grid-column:2; grid-row:5; align-self:end; margin:0; bottom:var(--sp-4);
    border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card);
    padding-bottom:calc(var(--sp-3) + var(--safe-bottom) / 2);
  }
  main.session > .q-dock[data-state="right"], main.session > .q-dock[data-state="notyet"]{border-width:1px; border-style:solid; border-color:var(--line)}
  .choices:not(.choices--short):not(.choices--letters){grid-template-columns:minmax(0, 1fr)}
}

/* ── the skills 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}
/* a long button ("Show my results to an adult", MM-1481) wraps on a phone instead of widening the page; a short one is as it was */
.check-acts .k-btn{white-space:normal; text-align:center}
.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-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:var(--r-lg);
  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:var(--fs-label); color:var(--ink-soft);
}
.tag{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-pill); 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:var(--r-sm);
  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:var(--r-md); 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 (MM-1643, research/58 "A question"): chunky tiles with a letter badge on a soft fill, two to a row where they are
   short (a number, a word), one to a row where they are long, and always two from an iPad up; a tap answers, so the page keeps
   the edge under a tile that sinks when pressed. The badges take the subjects' soft colours in turn: a decoration, the letter is the name */
.choices{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-3); margin-top:0}
.choices--short{grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (min-width:640px){ .choices{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.choice{
  display:flex; flex-direction:row; align-items:center; gap:var(--sp-3); min-height:var(--touch-lg); padding:var(--sp-4); text-align:left;
  background:var(--card); color:var(--ink); border:2px solid var(--edge); border-radius:var(--r-lg); box-shadow:0 5px 0 var(--edge);
  font-size:var(--fs-title); font-weight:700; line-height:1.3; overflow-wrap:break-word;
  transition:transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
.choices--short .choice{flex-direction:column; align-items:flex-start; gap:var(--sp-2)}
@media (max-width:360px){ .choices--short .choice{padding:var(--sp-3); font-size:18px} }   /* two tiles across a 320 px phone still hold a word of eleven letters on one line */
.choice:not(:disabled):active{transform:translateY(3px); box-shadow:0 2px 0 var(--edge)}
.choice:hover{border-color:var(--accent)}
.choice[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 5px 0 var(--accent)}
.oval{
  flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:9px;
  font-size:15px; font-weight:800; background:var(--maths-soft); color:var(--maths-ink);
}
.choice:nth-child(5n+2) .oval{background:var(--english-soft); color:var(--english-ink)}
.choice:nth-child(5n+3) .oval{background:var(--verbal-soft); color:var(--verbal-ink)}
.choice:nth-child(5n+4) .oval{background:var(--puzzle-soft); color:var(--puzzle-ink)}
.choice:nth-child(5n) .oval{background:var(--nvr-soft); color:var(--nvr-ink)}
.choice[aria-pressed="true"] .oval{background:var(--accent); color:var(--accent-ink)}
/* options drawn in the figure (non-verbal reasoning, P2-705): the tiles are the letters alone, in one row */
.choices--letters{display:flex; flex-wrap:wrap}
.choices--letters .choice{flex:1 1 0; min-width:var(--touch-lg); justify-content:center; padding:var(--sp-3)}
.choices--letters .oval{width:40px; height:36px; font-size:var(--fs-title)}

/* the GL/SEAG line (P2-815): the line on a card, split into its four groups, each group's
   letter under it as the paper prints it; the groups wrap on a phone and never scroll sideways.
   The dock's row of five ovals is the GL answer row, A B C D N: one tap answers, as any option.
   Settled, the group with the mistake is outlined in the colour of a right answer. */
.groups{
  list-style:none; margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-2); max-width:62ch;
  display:flex; flex-wrap:wrap; row-gap:var(--sp-3);
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:var(--r-md);
}
.groups__g{
  flex:0 1 auto; min-width:0; max-width:100%; display:flex; flex-direction:column; align-items:center;
  padding:2px var(--sp-2); border-right:1px dashed var(--line); border-radius:var(--r-sm);
}
.groups__g:last-child{border-right:0}
.groups__words{order:1; font-size:var(--fs-body); line-height:1.5; text-align:center; color:var(--ink)}
.groups__letter{order:2; font-family:var(--f-num); font-size:var(--fs-label); font-weight:700; color:var(--ink-soft)}
.groups.is-settled .groups__g.is-right{border-right-color:transparent; box-shadow:inset 0 0 0 2px var(--ok); background:var(--ok-soft)}
/* the line again in the "not yet" dock, which covers the sheet's line on a phone: smaller, the
   right group marked as on the sheet; iPads see the sheet's line above the dock, so not there */
.groups--echo{display:none}
@media (max-width:600px){
  .k-dock .groups--echo{display:flex; margin:0; max-width:none; padding:var(--sp-2) var(--sp-1); row-gap:var(--sp-2)}
  .groups--echo .groups__g{padding:2px var(--sp-2)}
  .groups--echo .groups__words{font-size:var(--fs-small); line-height:1.4}
}
.choices--groups{display:flex; gap:var(--sp-2); margin-top:0}
.choices--groups .choice--group{flex:1 1 0; min-width:0; min-height:var(--touch-lg); justify-content:center; padding:var(--sp-2) 0}
.choices--groups .oval{width:40px; height:32px; font-size:var(--fs-small)}
.choices--groups .choice--none{margin-left:var(--sp-2)}

/* the big keys: the gate's hold button and the older screens' buttons */
.key{
  height:60px; border-radius:var(--r-md); 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:var(--fs-small); 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:var(--hold)}
.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:var(--r-md); white-space:pre-wrap; font-size:var(--fs-small); 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:var(--r-sm); 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}
/* a table to read (MM-823): a real table, its numbers in the numbers' font, lined like a
   printed one; wider than a phone it scrolls on its own, never the page */
figure.fig:has(> .fig-table){display:block; overflow-x:auto}
/* a picture to read (P2-822): it takes the sheet's width, up to about twice its drawn size
   (an iPad reads it across the page, not in a 360 px box); on a phone it runs to the sheet's
   edges, the question over it is set at body size, and the true / false / can't tell rows in
   the dock sit closer, so the whole picture stays in view above the dock while she answers */
figure.fig--scene{margin:var(--sp-4) auto}
figure.fig--nvr svg{width:100%; max-width:560px}
figure.fig--scene svg{width:100%; max-width:640px}
@media (max-width:600px){
  main.session .k-sheet__body:has(> .fig--scene){padding-top:var(--sp-3); padding-bottom:var(--sp-3)}
  main.session .k-sheet__body:has(> .fig--scene) > .k-sheet__prompt{font-size:var(--fs-body); line-height:1.4}
  figure.fig--scene{margin:var(--sp-2) calc(-1 * var(--sp-3)) 0}
  .q-answers .k-rows--words{gap:0}
  .q-answers .k-rows--words .k-row{gap:var(--sp-1); padding:var(--sp-1) 0}
}
/* beside the question (an iPad on its side), a sentence has the dock's width to itself, over
   its three buttons, rather than a narrow column beside them */
@media (orientation:landscape) and (min-width:900px){
  .q-answers .k-rows--words .k-row{grid-template-columns:1fr}
  .q-answers .k-rows--words .k-row__opt{flex:1}
  .q-answers .k-rows--words .k-row__opts{display:flex}
}
.fig-table{margin:0 auto; border-collapse:collapse; font-size:var(--fs-small); color:var(--ink); background:var(--card)}
/* on a phone the label size keeps a four-column table inside the sheet (16px pushed the last
   column out of view and made the figure a scroll region) */
@media (max-width:640px){.fig-table{font-size:var(--fs-label)}}
.fig-table caption{caption-side:top; padding:0 0 var(--sp-2); font-weight:600; font-size:var(--fs-small); color:var(--ink); white-space:nowrap}
.fig-table th,.fig-table td{border:1px solid var(--ink-faint); padding:6px 10px; text-align:center; white-space:nowrap}
.fig-table thead th{background:var(--card-2); font-weight:600}
.fig-table tbody th{text-align:left; font-weight:600; white-space:normal; min-width:6em}
.fig-table td{font-family:var(--f-num); font-variant-numeric:tabular-nums}
/* the gridiron (MM-830): a grid of numbers, a space to fill marked (a) in the accent; its
   caption (the steps) is read out, and shown in the stem's words above it */
.fig-table--grid caption{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.fig-table--grid td{min-width:5.5em; padding:10px 12px; font-size:var(--fs-small)}
.fig-table--grid .fig-table__gap{font-weight:700; color:var(--accent); background:var(--accent-soft)}

/* 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}

/* ── parent dashboard ──────────────────────────────────────────────────── */
.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.tab{padding:8px 15px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--card);
  font-size:var(--fs-label); 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:var(--fs-small); 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:var(--fs-small); 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:var(--fs-small); color:var(--ink-soft); max-width:46ch}
select,input[type=range]{font:inherit; accent-color:var(--accent)}
/* A select is as wide as its longest option: never wider than the row it sits in (WCAG 1.4.10 reflow; a Year 5
   topic name is longer than a phone is wide) */
select{padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card); color:var(--ink); max-width:100%}
.note{font-size:var(--fs-small); color:var(--ink-soft); background:var(--accent-soft); border:1px solid var(--accent-edge);
  border-radius:var(--r-sm); 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:var(--r-md);
  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:var(--fs-label); 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:var(--r-pill); 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:var(--fs-label)}


/* ── 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). */
/* the title and the search on a navy band under the bar, the topics on the page under it (MM-1642) */
main.learn, main.learn.has-tabbar:has(~ .appfoot){max-width:none; padding:0}
#app:has(> main.learn){--page-w:1100px; --page-pad:var(--gutter)}
.learn-band{padding:var(--sp-5) 0 var(--sp-6)}
.learn-band__in, .learn-page{max-width:var(--page-w); margin:0 auto; padding:0 var(--page-pad)}
.learn-page{padding-top:var(--sp-5); padding-bottom:var(--sp-4)}
.learn-title{margin:0 0 var(--sp-4); color:var(--on-navy-hi); font-size:clamp(36px, 28px + 2.6vw, 52px); font-weight:800; line-height:var(--lh-tight); letter-spacing:-.025em}
.learn-find{margin:0}
.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(--card); 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(--mint); box-shadow:0 0 0 4px var(--navy-2)}
.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-5)}
.learn-browse{display:grid; gap:var(--sp-3)}
.learn-year{border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow); padding:0 var(--sp-4)}
.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}

@media (min-width:700px){
  .learn-find{max-width:640px}
  .learn-browse{grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items:start; gap:var(--sp-4)}
  .learn-browse > .learn-worth{grid-column:1 / -1}
}
.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:var(--r-sm); 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)}
.soon{font-size:var(--fs-label); border-radius:var(--r-sm); padding:12px 14px; margin-bottom:12px; background:var(--card-2); border:1px dashed var(--line); color:var(--ink-soft)}

.egbox{
  font-family:var(--f-num); font-size:var(--fs-small); line-height:1.7;
  background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-sm); padding:13px 15px;
}
.watchbox{
  font-size:var(--fs-small); line-height:1.6; background:var(--warn-soft); color:var(--warn);
  border:1px solid var(--warn); border-radius:var(--r-sm); 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 ── */

/* the strategy cards (MM-1643): a navy dock, "Stuck? Play a card." in mint and the cards as coloured pills, navy text on each */
.cards{
  display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:flex-start; margin:14px 0 4px; padding:var(--sp-4);
  border-radius:22px; background:var(--navy); color:var(--on-navy-hi); --focus:var(--mint);
}
.cardslabel{flex-basis:100%; font-size:var(--fs-small); font-weight:800; color:var(--mint)}
.card{
  display:flex; flex-direction:column; gap:4px; text-align:left; min-height:var(--touch);
  background:var(--puzzle); color:var(--on-bright); border:0; border-radius:12px; padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-label); max-width:100%;
}
.card:nth-of-type(3n+2){background:var(--mint)}
.card:nth-of-type(3n){background:var(--on-navy)}
.card b{font-family:var(--f-body); font-weight:700; font-size:var(--fs-small)}
.card span{color:var(--on-bright); font-size:var(--fs-label); line-height:1.4}
.card.played{background:var(--on-navy-hi); 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:var(--fs-small); 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, main.map.has-tabbar:has(~ .appfoot){display:block; max-width:none; padding:0}
#app:has(> main.map){--page-pad:var(--gutter)}
.map-band{padding:var(--sp-5) 0 var(--sp-5)}
.map-band__in, .map-page{max-width:var(--page-w); margin:0 auto; padding:0 var(--page-pad)}
.map-band__in{display:grid; gap:var(--sp-4)}
.map-page{display:grid; gap:var(--sp-4); padding-top:var(--sp-4); padding-bottom:var(--sp-4)}
.map-head{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1)}
.map-title{margin:0; color:var(--on-navy-hi); font-size:clamp(36px, 28px + 2.6vw, 52px); font-weight:800; line-height:var(--lh-tight); letter-spacing:-.025em}
.map-out{padding:0 var(--sp-3) 0 var(--sp-2); margin-left:calc(-1 * var(--sp-2)); color:var(--on-navy-hi)}
.map-out:hover{color:var(--mint)}
.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)}
/* the subjects as tabs on the navy band: the one showing is in its own strong colour, the others on the band's lighter navy */
.sky-switch .sky-switch__btn{min-height:var(--touch-btn); padding:0 var(--sp-4); border:0; background:var(--navy-2); color:var(--on-navy-hi); font-size:var(--fs-small)}
.sky-switch .sky-switch__btn:hover{background:var(--navy-2); box-shadow:inset 0 0 0 2px var(--on-navy)}
.sky-switch .sky-switch__btn[aria-pressed="true"]{background:var(--tone); color:var(--tone-on); box-shadow:none}
.sky-switch .sky-switch__btn .subject-mark{background:var(--tone-soft); color:var(--tone-ink)}
/* .subject-mark is the kit's (kit.css, Subject): the pack's tone, drawn as ink on its soft fill */
.learn-subject{display:grid; gap:var(--sp-2); padding:var(--sp-4); border-radius:var(--r-card); background:var(--tone-soft)}
.learn-subject__head{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-1); color:var(--tone-ink)}
.learn-subject .subject-mark{background:var(--card)}
.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; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow); 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:16px}
.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; stroke:var(--ink-faint); stroke-width:1.8}
.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(--lv4); --star-edge:var(--lv4)}
.sky__star[data-level="4"] svg{filter:drop-shadow(0 0 3px var(--glow))}
/* not taught yet: the not-started outline, dashed and faded — nothing to feel about it */
.sky__star.is-fog svg, .k-star.is-fog svg{opacity:.5; stroke-dasharray:3 2.5}
/* coming soon (MM-893): nothing to practise yet — grey, dotted (not taught yet is the dashed star above), never filled, whatever her level */
.sky__star.is-soon, .k-star.is-soon{--star-fill:none; --star-edge:var(--ink-faint)}
.sky__star.is-soon svg, .k-star.is-soon svg{fill:none; stroke:var(--ink-faint); stroke-dasharray:0.1 3; stroke-linecap:round; stroke-width:2}
.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}

/* the years as tabs, on a phone: one year of each strand at a time */
.sky-years{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:var(--sp-2)}
.sky-year{min-height:var(--touch-btn); padding:0 var(--sp-2); border:2px solid transparent; border-radius:var(--r-btn); background:var(--card); box-shadow:var(--shadow); color:var(--ink-soft); font-weight:700; font-size:var(--fs-small)}
.sky-year.is-on{background:var(--navy); border-color:var(--edge); color:var(--on-navy-hi); box-shadow:none}
/* the sky: each strand a rounded tile; the strand she is working on is tinted in its subject's soft colour (--tone-soft, set by the screen from the registry) */
.sky{--sky-label:84px; display:grid; gap:var(--sp-3)}
.sky__years, .sky__row{display:grid; grid-template-columns:var(--sky-label) repeat(var(--sky-cols, 4), minmax(0, 1fr)); gap:var(--sp-1); align-items:center}
.sky__years{padding:0 var(--sp-4); font-size:var(--fs-label); font-weight:700; color:var(--ink-soft); text-align:center}
.sky__row{
  min-height:var(--touch-lg); padding:var(--sp-3) var(--sp-4); text-align:left;
  border:0; border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow);
}
.sky__row:hover{box-shadow:var(--shadow), inset 0 0 0 2px var(--accent-edge)}
.sky__row:active{background:var(--accent-soft)}
.sky__label{font-family:var(--f-display); font-size:var(--fs-small); font-weight:700; 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)}
.sky__cell--wide{grid-column:2 / -1}
.sky__cell.sky__cell--wide{gap:var(--sp-2) var(--sp-5)}
.sky__group{display:flex; flex-wrap:wrap; justify-content:center; gap:5px 3px}
.sky__group-name{flex:0 0 100%; font-size:var(--fs-label); font-weight:700; color:var(--ink-soft); text-align:center}
.sky__row.is-apart{margin-top:var(--sp-2); background:var(--card-2); border:2px dashed var(--line); box-shadow:none}
/* a phone: the label over the stars of the year the tab picked, the stars larger; a strand with none that year is left out */
@media (max-width:699px){
  .sky__years{display:none}
  .sky__row{grid-template-columns:minmax(0, 1fr); gap:var(--sp-2)}
  .sky__cell{display:none}
  .sky__cell.is-year{display:flex; justify-content:flex-start; gap:7px; min-height:0; border-left:0}
  .sky__cell--wide{grid-column:auto}
  .sky__cell--wide.is-year{gap:var(--sp-3)}
  .sky__row:has(.sky__cell.is-year:empty){display:none}
  /* only the year the tab picked counts for the tint: a star of tonight in a year not shown tints nothing */
  .sky__row:has(.sky__cell.is-year .is-tonight){background:var(--tone-soft)}
  .sky__group{justify-content:flex-start; gap:7px}
  .sky__group-name{text-align:left}
  .sky__row .sky__star{--glyph:22px}
}
@media (min-width:700px){
  .sky{--sky-label:132px}
  .sky-years{display:none}
  .sky__star{--glyph:18px}
  .sky__cell{gap:7px 5px}
  .sky__group{gap:7px 5px}
  .sky__label{font-size:var(--fs-body)}
  /* every year shows here, so a strand with a star of tonight in any year is tinted */
  .sky__row:has(.sky__cell .is-tonight){background:var(--tone-soft)}
}
/* a phone with five year tabs (Year 7 shown) is under 420px: the label at the tab label's size and the tabs closer, so "Year 3" stays on one line */
@media (max-width:419px){
  .sky-years:has(.sky-year:nth-child(5)){gap:var(--sp-1)}
  .sky-years:has(.sky-year:nth-child(5)) .sky-year{padding:0 var(--sp-1); font-size:var(--fs-label); white-space:nowrap}
}

/* 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); box-shadow:var(--shadow); border-radius:var(--r-lg); 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, MM-1643, research/58 "The end of a session") ───────────────────────
   A navy band with a few small stars (decoration, aria-hidden) and the title, the before/after card over its edge with its
   four-stage bar in the stage colours, the topics she met grouped by subject, each group on its subject's soft fill with
   "Show all", the puzzle on the puzzle's, how was that as three large faces on soft fills, Show a grown-up and Done.
   From an iPad up two columns: what happened on the left, what she is asked on the right. The before/after card's levels
   move once (kit Move); main.is-settled is a redraw: nothing plays again. Colours are tokens only. */
#app:has(> main.done){--page-w:1100px; --page-pad:var(--gutter)}
main.done, main.done.has-tabbar{max-width:none; padding:0 0 var(--sp-7)}
.done-band{position:relative; overflow:hidden; padding:var(--sp-5) 0 calc(var(--sp-6) + var(--sp-8))}
.done-band__in{position:relative; max-width:var(--page-w); margin:0 auto; padding:0 var(--page-pad)}
.done-title{margin:0; max-width:11ch; color:var(--on-navy-hi); font-size:clamp(36px, 28px + 2.6vw, 52px); font-weight:800; line-height:var(--lh-tight); letter-spacing:-.025em}
.done-stars{position:absolute; top:0; right:var(--page-pad); bottom:0; width:min(52%, 320px); pointer-events:none}
.done-stars svg{display:block; width:100%; height:100%}
.done-star--1{fill:var(--lv1)}
.done-star--2{fill:var(--mint)}
.done-star--3{fill:var(--lv2)}
.done-star--4{fill:var(--on-navy)}
.done-page{position:relative; display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); align-items:start; max-width:var(--page-w); margin:calc(-1 * var(--sp-8)) auto 0; padding:0 var(--page-pad)}
.done-col{display:grid; gap:var(--sp-4); min-width:0}
.done-col--side{gap:var(--sp-5)}
@media (min-width:700px){ .done-page{grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr)} .done-col--side{padding-top:var(--sp-8)} }   /* the right column starts under the band: its words are ink, not white */
.done-card{gap:var(--sp-4); background:var(--card)}
.done-card .k-card__eyebrow{font-weight:800; letter-spacing:.08em}
.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-move{max-width:none; gap:6px}
.done-card .k-move__seg{height:12px; border-radius:6px; background:var(--line)}
.done-card .k-card__meta b{color:var(--ink)}
.done-sky{display:grid; gap:var(--sp-2); padding:var(--card-pad); border-radius:var(--card-r); background:var(--card); box-shadow:var(--card-shadow)}
.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))}
/* the topics she met, a card for each subject in its soft colour; the puzzle in its own */
.done-group, .done-puzzle{display:grid; gap:var(--sp-3); padding:var(--sp-4); border-radius:20px; background:var(--tone-soft); color:var(--tone-ink)}
.done-group__head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3)}
.done-group__name, .done-puzzle__name{display:flex; align-items:center; gap:var(--sp-2); margin:0; font-family:var(--f-display); font-size:var(--fs-title); font-weight:800; line-height:var(--lh-tight); color:inherit}
.done-group .subject-mark{background:var(--card)}
.done-group__all{min-height:var(--touch); padding:0 var(--sp-2); border:0; background:none; color:inherit; font-size:var(--fs-label); font-weight:800; text-decoration:underline; text-underline-offset:3px}
.done-group__all::after{content:" \203A"}
.done-topics{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.done-topic{
  display:inline-flex; align-items:center; min-height:var(--touch); padding:var(--sp-2) var(--sp-3); border:0; border-radius:12px;
  background:var(--card); color:var(--ink); font-size:var(--fs-small); font-weight:600; line-height:1.3; text-align:left;
}
button.done-topic:hover{box-shadow:inset 0 0 0 2px var(--tone-ink)}
button.done-topic::after{content:"\203A"; margin-left:var(--sp-2); color:var(--tone-ink); font-weight:800}
.done-puzzle__line{margin:0; font-size:var(--fs-small); color:var(--tone-ink)}
.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)}
/* three large faces, each on a soft fill (violet, sunshine, teal): ink on the fill, the same ink SVGs as ever */
.done-mood .k-faces{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-3)}
.done-mood .k-face{width:auto; height:72px; border:0; border-radius:var(--r-lg)}
.done-mood .k-face svg{width:36px; height:36px}
.done-mood .k-face:nth-child(1){background:var(--english-soft); color:var(--english-ink)}
.done-mood .k-face:nth-child(2){background:var(--puzzle-soft); color:var(--puzzle-ink)}
.done-mood .k-face:nth-child(3){background:var(--verbal-soft); color:var(--verbal-ink)}
.done-mood .k-face:hover{box-shadow:inset 0 0 0 2px currentColor}
.done-acts{display:grid; gap:var(--sp-3)}
.done-acts > .done-done{order:2}

.freetext.short{font-size:var(--fs-small); height:40px; max-width:260px; margin:0}
/* The set-up school step: the field takes the panel's width, in the body font (a name is words, not numbers), so her placeholder "Enter a school name or town…" shows whole, "Find school" below it */
.welcome-school .ctl{flex-direction:column; align-items:stretch; gap:6px}
.welcome-school .legend{margin-top:0}
.welcome-school .freetext.short{max-width:none; flex:1 1 100%; width:100%; font-family:var(--f-body)}
@media (max-width:359px){ main.welcome-step > .hero + .panel.welcome-school{padding-inline:var(--sp-3)} }
.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)}
/* "{name} chooses each time" (MM-863): one button per subject, side by side, none preselected. */
.today-picks{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--sp-2); margin-top:var(--sp-2)}
.today-picks .today-start{margin-top:0}

/* the times tables check (P2-501, child/tables.js): one fact, big, the typed answer under it, the digits */
.tables-card{text-align:center}
.tables-fact{font-family:var(--f-display, var(--f-body)); font-size:clamp(2.5rem, 12vw, 4rem); font-weight:700; margin:var(--sp-5) 0 var(--sp-3); font-variant-numeric:tabular-nums}
.tables-entry{font-size:clamp(2rem, 10vw, 3rem); font-weight:600; min-height:1.4em; margin:0 auto var(--sp-4); max-width:6ch; border-bottom:2px solid var(--ink-soft); font-variant-numeric:tabular-nums}
.tables-pad{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-2); max-width:20rem; margin:0 auto var(--sp-4)}
.tables-key{min-height:3rem; font-size:1.25rem}
.tables-stop{margin-top:var(--sp-3)}

/* The English practice test on screen (MM-904, child/quest.js): one question at a time, its text
   above it, Back and Next, and every question to jump to. No clock. */
.today-quest{margin-top:var(--sp-3)}
/* the question of a practice test or a mock takes the band and the card as a session's does (MM-1643): the choices are tiles, the keys chunky */
.quest-sheet{display:grid; gap:var(--sp-4); margin:var(--sp-3) 0; padding:var(--sp-5) var(--sp-6) var(--sp-6); border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.quest-prompt{white-space:normal; margin:0; font-family:var(--f-display); font-weight:600; font-size:var(--fs-title); line-height:1.4}
.quest-arrows{display:inline-block; line-height:2.4}
.quest-arrow{display:inline-block; vertical-align:-0.9em; font-size:12px; line-height:1}
.quest-nav{display:flex; gap:var(--sp-2); justify-content:space-between; margin-top:var(--sp-3)}
.quest-nav .k-btn{flex:1}
.quest-warn{margin-top:var(--sp-2)}
.quest-all{margin-top:var(--sp-4)}
.quest-grid{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin:var(--sp-2) 0}
.quest-grid__n{min-width:44px; padding:0 var(--sp-1)}
.quest-grid__n.is-done{font-weight:600}
.quest-grid__n.is-now{outline:2px solid currentColor}
.quest-answers{padding-left:var(--sp-4)}
.quest-answers li{margin:var(--sp-1) 0}
.quest-stop{margin-top:var(--sp-2)}
/* A mock on her screen (MM-938, child/mock.js): the quest screen's layout, with the one clock a
   child's screen has, top right, which she can hide; warnings as a line of words under it. */
.mock-clock{display:flex; align-items:center; gap:var(--sp-1); margin-left:auto}
.mock-clock__time{font-weight:600; font-variant-numeric:tabular-nums; min-width:4ch; text-align:right}
.mock-clock__toggle{min-height:44px}
.mock-warning{margin:var(--sp-1) 0 0; font-weight:600}
.mock-parts{padding-left:var(--sp-4)}
.mock-parts li{margin:var(--sp-1) 0}
.mock-part-title{font-size:inherit; margin:var(--sp-3) 0 var(--sp-1)}
.writing-opening{margin:var(--sp-4) 0 0; max-width:52ch; font-style:italic}
.writing-was{margin:var(--sp-3) 0 0; max-width:52ch; color:var(--ink-soft)}
.writing-think-head{margin:var(--sp-4) 0 0; font-weight:600}
.writing-think{margin:var(--sp-2) 0 0; padding-left:1.2em; color:var(--ink-soft); max-width:52ch}
.writing-choices{display:grid; gap:var(--sp-3); max-width:560px}
.writing-choice{display:grid; gap:var(--sp-1); text-align:left; white-space:normal}