/* parent.css — the parent views' own rules (MM-201): progress bars, the objectives table,
 * controls. Split out of the old app.css; see child.css for the pieces both apps share
 * until the parents app has its own shell. Type is the parent variant (tokens.css).
 */

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:20px 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.stat .k{font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:600}
.stat .v{font-family:var(--f-num); font-size:26px; font-weight:600; margin-top:4px; letter-spacing:-.02em; line-height:1.15; display:flex; align-items:baseline; gap:1px}
.stat .v small{font-size:var(--fs-small); color:var(--ink-faint); font-weight:400; margin-left:2px; letter-spacing:0}
.heat{display:flex; flex-wrap:wrap; gap:4px; margin-top:10px}
.cell{width:22px; height:22px; border-radius:var(--r-xs); background:var(--lv0); border:1px solid var(--line-soft)}
.strandrow{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft)}
.strandrow:last-child{border-bottom:none}
.strandname{width:190px; flex:none; font-size:var(--fs-small)}
@media (max-width:640px){.strandname{width:100%}
  .strandrow{flex-wrap:wrap; gap:6px}}
/* a bar's track is the colour of a stage not yet reached; its fill is a stage's colour, or its subject's (MM-1644) */
.bar{flex:1; height:12px; background:var(--lv0); border-radius:var(--r-pill); overflow:hidden; display:flex; min-width:120px}
.bar i{display:block; height:100%}
.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:var(--fs-label); color:var(--ink-soft)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:12px; height:12px; border-radius:var(--r-pill); display:block}
.switch{width:52px; height:31px; border-radius:var(--r-pill); background:var(--line); border:none; position:relative; flex:none}
.switch[aria-checked="true"]{background:var(--accent)}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:25px; height:25px; border-radius:var(--r-pill);
  background:var(--knob); transition:transform var(--dur-quick) var(--ease-out); box-shadow:var(--knob-shadow)}
.switch[aria-checked="true"]::after{transform:translateX(21px)}
table.obj{width:100%; border-collapse:collapse; font-size:var(--fs-small)}
table.obj td{padding:7px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.obj td.id{font-family:var(--f-num); font-size:var(--fs-label); color:var(--ink-faint); white-space:nowrap; width:1%}
table.obj td.lv{width:1%; white-space:nowrap}
.lvchip{display:inline-block; padding:2px 8px; border-radius:var(--r-pill); font-size:var(--fs-label); font-weight:600}
.scroller{overflow-x:auto}
.danger{color:var(--err); border-color:var(--err)}
table.obj td .sub{font-size:var(--fs-label); color:var(--ink-faint); margin-top:2px}
table.obj td.lv .ghost + .ghost{margin-left:6px}

/* her school's plan: the half-term card and the block picker (MM-105) */
.plan-card,.hint-card{margin:var(--sp-4) 0}
.plan-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; margin-top:var(--sp-2)}
.plan-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--sp-2) var(--sp-4);
  padding:var(--sp-3) 0; border-top:1px solid var(--line-soft)}
.plan-row .lab{font-weight:600}
.plan-row .desc{font-size:var(--fs-small); color:var(--ink-soft)}
.plan-email{white-space:pre-wrap; margin:0 0 var(--sp-2)}
/* the School page: "Not right? Change it" under the line it corrects (MM-1172) */
.school-change{margin:0 0 var(--sp-3)}

/* ── the parents' surface (MM-211, research/16 §3.4) ──────────────────────
   Four pages in a tab bar (Home · Practise · Progress · School), Settings behind the menu button, and the pages
   under them. Typographic and calm: the letter home, not a dashboard. The same rules serve
   the parents app (MM-405) — they depend on the kit and on nothing of her screens. */
main.p-surface{max-width:760px}
/* the frame (MM-1644, research/58 "The parents' app"): the page's title, its way back and the line about how fresh it is
   sit on a navy band under the bar, as her Today and map do; the first card of the page rises over the band's edge.
   The type scale and density stay the parents'. */
main.p-surface{padding-top:0}
.p-head{
  position:relative; display:grid; gap:var(--sp-1); margin:0 0 var(--sp-5); padding:var(--sp-4) 0 var(--sp-6);
  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 */
}
.p-head:has(+ :is(.p-summary, .k-card, .panel, .p-figures, .p-links, .p-week, .k-letter, .p-tiles, .set-page, .p-view, .p-sch)){padding-bottom:calc(var(--sp-8) + var(--sp-4)); margin-bottom:0}
main.p-surface > .p-head + :is(.p-summary, .k-card, .panel, .p-figures, .p-links, .p-week, .k-letter, .p-tiles, .set-page, .p-view, .p-sch){position:relative; margin-top:calc(-1 * var(--sp-8))}
/* the letter is an article that opens with its summary card: the article rises over the band, so the card does not add its own top margin (MM-1644 fixes) */
main.p-surface > .p-head + .k-letter > .k-letter__summary:first-child{margin-top:0}
.p-title{font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:800; letter-spacing:-.025em; color:var(--on-navy-hi)}
.p-head__lede{max-width:60ch; margin:var(--sp-1) 0 0; color:var(--on-navy)}   /* a line under the title (the link page's) */
.p-back{justify-self:start; padding-left:0; margin-left:calc(-1 * var(--sp-1)); color:var(--mint)}
.k-btn--quiet.p-back:hover{color:var(--on-navy-hi)}
.p-head .p-muted, .p-head .pa-fresh__line{color:var(--on-navy)}
.p-head .k-btn--quiet{color:var(--mint)}
.p-head .k-btn--quiet:hover{color:var(--on-navy-hi)}
.p-muted{font-weight:400; font-size:var(--fs-small); color:var(--ink-soft)}
.p-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; margin:var(--sp-5) 0}
.p-actions .k-btn{white-space:normal; text-align:center; padding-block:var(--sp-2); max-width:100%}   /* a long school name wraps; a short label stays on one line (MM-1450) */
.p-install__steps{margin:8px 0 14px; padding-left:22px; color:var(--ink-soft); font-size:var(--fs-small)}   /* the steps to install where the browser offers no button (MM-1584) */
.p-install__steps li{margin-bottom:6px}
.p-install .p-actions{margin:var(--sp-3) 0 0}
.p-card{margin:var(--sp-4) 0}
/* every card of the parents' pages has the same shadow and radius as the kit's (MM-1644): the old section panel, a figure, a number tile, a question seen */
main.p-surface .panel, .p-figures, .stat, .try-missed__q, .p-iv-read{border:0; border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
main.p-surface .panel{padding:var(--card-pad); margin:var(--sp-4) 0}
main.p-surface .panel h2{font-family:var(--f-display); font-weight:800; font-size:var(--fs-title); line-height:var(--lh-tight); letter-spacing:-.015em}
.p-figures{padding:var(--card-pad)}
.stat{padding:var(--sp-4)}
.try-missed__q, .p-iv-read{padding:var(--sp-4)}
/* Devices and data: a caught error's message can be one long unbroken word (MM-705) */
.p-error .lab{overflow-wrap:anywhere}
/* Devices and data: which release and build (MM-507), selectable to quote in a bug report */
.p-version__line{font-family:var(--f-num); overflow-wrap:anywhere; user-select:all; -webkit-user-select:all}
.p-card .k-card__title .k-chip__code{margin-left:var(--sp-1)}
.p-checks__list{list-style:none;margin:var(--sp-2) 0;padding:0}
.p-checks__row{padding:var(--sp-1) 0}
.p-checks__run{display:flex;margin-top:var(--sp-1)}

/* This week: the headline, the on-track sentence with its small print, how it felt */
main.p-surface .k-letter{max-width:none; margin-inline:0}
main.p-surface .k-letter p{max-width:62ch}
.p-week{margin:var(--sp-4) 0 0; padding:var(--card-pad); border-radius:var(--card-r); background:var(--card); box-shadow:var(--card-shadow)}
.p-week > *:last-child{margin-bottom:0}
.p-headline{font-family:var(--f-display); font-weight:800; font-size:calc(var(--fs-title) + 5px); line-height:var(--lh-tight); letter-spacing:-.02em; margin-bottom:var(--sp-3)}
.p-track{--tone:var(--accent); border-left:3px solid var(--tone); padding-left:var(--sp-4); margin:0 0 var(--sp-4)}
.p-track[data-state="ahead"],.p-track[data-state="on-track"],.p-track[data-state="done"]{--tone:var(--ok)}
.p-track[data-state="slipping"]{--tone:var(--warn)}
.p-track__sentence{margin:0 0 var(--sp-2)}
.p-track__intro{margin:0 0 var(--sp-3)}
.p-track__intro ~ .p-track__sentence{margin:0 0 var(--sp-1)}
.p-track .p-track__intro ~ .k-letter__note{margin-top:var(--sp-3)}
.p-track .k-letter__note{margin:0}
.p-track .k-letter__note + .p-track__sentence{margin-top:var(--sp-3)}
.p-practice{list-style:none; padding:0; margin:0 0 var(--sp-4)}
.p-practice li{margin:0 0 var(--sp-1)}
.p-enjoy{color:var(--ink-soft)}

/* Controls: the way in to Practice, Breaks and Her world */
.p-links{display:grid; gap:var(--sp-2)}
.p-link{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--touch-lg); text-align:left;
  padding:var(--sp-3) var(--sp-4); border:0; border-radius:var(--r-btn); background:var(--card); box-shadow:var(--shadow);
}
.p-link:hover{box-shadow:var(--shadow-card)}
.p-link__text{display:grid; gap:2px; flex:1; min-width:0}
.p-link__label{font-weight:600}
.p-link__desc{font-size:var(--fs-small); color:var(--ink-soft)}
.p-link__go{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-pill); background:var(--mint-soft); color:var(--mint-ink); font-size:22px; line-height:1}

/* Settings (MM-1731, the concept's board 7): grouped rows, each with the value it holds and an arrow; the children as pills above them */
.set-page{display:grid; gap:var(--sp-3); margin:0 0 var(--sp-4)}
.set-page > .panel{margin:0}
.set-who{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.set-who__pill{
  flex:1 1 auto; display:flex; align-items:center; gap:var(--sp-2); min-height:var(--touch-lg); padding:var(--sp-2) var(--sp-3);
  border:0; border-radius:var(--r-lg); background:var(--card); color:var(--ink); box-shadow:var(--shadow); font-weight:700; text-align:left; min-width:min(140px, 100%);
}   /* as wide as the name needs, then a row of its own: a name is not broken in the middle unless it is longer than the screen */
.set-who__pill[aria-current="true"]{background:var(--mint-soft); color:var(--mint-ink); box-shadow:inset 0 0 0 2px var(--mint-ink)}
.set-who__initial{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--mint); color:var(--on-bright); font-weight:800}
.set-who__name{min-width:0; overflow-wrap:break-word}
.set-group{padding:var(--sp-2) var(--sp-4); border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.set-group__label{margin:0; padding:var(--sp-3) 0 var(--sp-1); font-family:var(--f-body); font-size:var(--fs-small); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.set-list{list-style:none; margin:0; padding:0}
.set-item + .set-item{border-top:1px solid var(--line-soft)}
.set-item--switch .ctl{padding:var(--sp-3) 0; border-bottom:0}
.set-item--switch .switch::before{content:""; position:absolute; inset:-7px 0}   /* the 52 by 31 px switch answers a tap 45 px tall, in both hosts */
.set-item--switch .ctl .lab{font-weight:700}   /* "Send what they got wrong to my account" (MM-1742): a switch among the rows, not a page */
.set-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3); width:100%; min-height:var(--touch-lg); padding:var(--sp-2) 0; border:0; background:none;
  color:var(--ink); text-align:left; font:inherit; cursor:pointer; list-style:none;
}
.set-row::-webkit-details-marker{display:none}
.set-row__label{flex:none; max-width:60%; font-weight:700}
.set-row__value{margin-left:auto; min-width:0; max-width:100%; font-size:var(--fs-small); color:var(--ink-soft); text-align:right; overflow-wrap:break-word}   /* a long value drops under its label before it is broken */
.set-row__go{flex:none; font-size:22px; line-height:1; color:var(--ink-soft)}
.set-fold[open] .set-row__go{transform:rotate(90deg)}
.set-fold__links{list-style:none; margin:0; padding:0 0 var(--sp-2)}
.set-fold__link{display:flex; align-items:center; min-height:var(--touch); color:var(--mint-ink); font-weight:600}

/* Progress: the two lines at the top, and the years outside the exam folded */
/* Progress is four views (MM-1733): a segmented control on the navy band, a real tab list, and the view under it.
   The first card of a view rises over the band's edge as the first card of any page does. */
.p-seg{display:flex; gap:2px; margin-top:var(--sp-3); padding:4px; border-radius:var(--r-card); background:var(--navy-2)}
.p-seg__tab{flex:1 1 0; min-width:0; min-height:44px; padding:var(--sp-2) 2px; border:0; border-radius:var(--r); background:transparent; color:var(--on-navy);
  font:inherit; font-size:var(--fs-small); font-weight:700; text-align:center; cursor:pointer}
.p-seg__tab.is-on{background:var(--mint); color:var(--on-bright)}
.p-seg__tab:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.p-seg__tab.is-on:focus-visible{outline-color:var(--on-navy-hi)}
.p-view > :first-child{margin-top:0}
/* "Not taught yet" and Enjoyment start shut: the heading is the one tap target, with a chevron that turns (MM-1733) */
.p-fold > summary{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:44px; list-style:none; cursor:pointer}
.p-fold > summary::-webkit-details-marker{display:none}
.p-fold > summary h2{margin:0}
.p-fold > summary::after{content:"›"; flex:none; font-size:22px; line-height:1; color:var(--ink-soft); transition:transform var(--dur-quick) var(--ease-out)}
.p-fold[open] > summary::after{transform:rotate(90deg)}
.p-fold > summary + *{margin-top:var(--sp-3)}
/* the stages in the traffic light (MM-1734): a bar and a swatch have an edge, so a pale amber is still a shape; the name is beside it */
.bar--tl{border:1px solid var(--tl-edge); box-sizing:border-box}
.legend--tl i{border:1px solid var(--tl-edge); box-sizing:border-box}
/* a 1px gap in the card's colour between segments, outside each one's width so a small segment keeps its size */
.bar--tl i + i{border-left:1px solid var(--card); box-sizing:content-box}
.p-stages .p-stages__line{margin:var(--sp-2) 0 0; font-size:var(--fs-small); color:var(--ink-soft)}
.p-figures{display:grid; gap:var(--sp-2); margin:0 0 var(--sp-5)}
.p-figure{margin:0; font-size:calc(var(--fs-body) + 1px)}
.p-figure b{font-size:calc(var(--fs-body) + 5px)}
.p-figure--small{font-size:var(--fs-small); color:var(--ink-soft)}
.p-figure--small b{font-size:inherit}
.p-figures .k-card__more p{margin:0 0 var(--sp-2)}
.p-figures .bar{height:14px}
.p-year > summary{font-weight:500; color:var(--ink)}
/* a year's name and a folded year's summary carry a dot in the subject's own colour, where two subjects share the page */
.p-yearbars h3{font-size:var(--fs-body)}
.p-yearbars[data-tone] h3::before, .p-year[data-tone] > summary::before{content:""; flex:none; display:inline-block; width:10px; height:10px; margin-right:var(--sp-2); border-radius:var(--r-pill); background:var(--tone)}
.p-yearchart + .p-yearchart{margin-top:var(--sp-5)}
.p-yearchart h3{font-size:var(--fs-body)}
.p-yearchart__svg svg{display:block; width:100%; max-width:480px; height:auto}
.p-yearchart__svg{max-width:480px; cursor:pointer; touch-action:pan-y; border-radius:var(--r-xs); -webkit-tap-highlight-color:transparent}
.p-yearchart__svg:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.p-yearchart__pick{margin:var(--sp-1) 0 0; font-size:var(--fs-small); color:var(--ink-soft); min-height:2.6em}
.p-yearchart__line{display:flex; gap:8px; align-items:baseline; margin:var(--sp-1) 0 0; font-size:var(--fs-small); color:var(--ink)}
.p-yearchart__line i{flex:none; width:10px; height:10px; border-radius:3px; display:block}
.p-yeartable{border-collapse:collapse; font-size:var(--fs-label)}
.p-yeartable th, .p-yeartable td{padding:4px 8px; border-bottom:1px solid var(--line-soft); text-align:right; white-space:nowrap}
.p-yeartable th[scope=row], .p-yeartable tr:first-child th:first-child{text-align:left; font-weight:500}
table.obj td .k-chip__code{margin-left:var(--sp-1)}
/* Where to help (MM-1734): a stripe in the stage's traffic light at the left of the row, and the stage written in it */
table.obj td.stagemark{padding-left:calc(var(--sp-3) + 4px)}
table.obj td.stagemark[data-stage="1"]{box-shadow:inset 5px 0 0 var(--tl1)}
table.obj td.stagemark[data-stage="2"]{box-shadow:inset 5px 0 0 var(--tl2)}
table.obj td.stagemark[data-stage="3"]{box-shadow:inset 5px 0 0 var(--tl3)}
table.obj td.stagemark[data-stage="4"]{box-shadow:inset 5px 0 0 var(--tl4), inset 6px 0 0 var(--tl-edge)}   /* the dark green is dark: an edge keeps it a stripe on the dark card */
table.obj td.stagemark[data-stage="0"]{box-shadow:inset 5px 0 0 var(--lv0)}
.p-stage{font-weight:700; color:var(--ink)}

/* her "Show the report to a grown-up": the letter, then the way back */
.p-back-home{display:flex; margin:var(--sp-7) auto 0}
/* the weak-topic tables on a phone: the topic across the row, its figures and buttons under it */
@media (max-width:640px){
  .p-surface table.obj tr{display:grid; grid-template-columns:auto 1fr; align-items:center; border-bottom:1px solid var(--line-soft)}
  .p-surface table.obj td{border-bottom:none}
  .p-surface table.obj td:first-child{grid-column:1 / -1; padding-bottom:0}
  .p-surface table.obj td.lv:last-child{width:auto; text-align:right}
}
/* the letter home is plain paper: the squares belong behind her question sheet */
[data-variant="parent"] #app.squared{background-image:none}

/* Children on this device (MM-409) */
.p-about{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-4)}
.p-learner .p-actions{margin:0}
.p-learner-remove{margin:var(--sp-3) 0}

/* "Which schools might they apply for?" (MM-802, parent/schools-choice.js): the schools by exam, and "Not sure yet" */
.schools-choice{display:grid; gap:var(--sp-3); min-width:0}
.schools-choice__exam{border:0; margin:0; padding:0; min-width:0}
.schools-choice__legend{font-family:var(--f-display); font-weight:600; font-size:var(--fs-body); padding:0; margin-bottom:2px}
.schools-choice__about{font-size:var(--fs-small); color:var(--ink-soft); margin:0 0 var(--sp-2); max-width:62ch}
.schools-choice__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; min-height:44px}
.schools-choice__box{flex:none; width:24px; height:24px; margin:2px 0 0; accent-color:var(--accent)}
.schools-choice__text{display:grid; gap:2px}
.schools-choice__desc{font-size:var(--fs-small); color:var(--ink-soft)}
.schools-choice__route .schools-choice__item:first-of-type{border-top:0}
.schools-choice__route-hint{margin:0}
/* found by a search (MM-814): the chosen on top, the search, a live count, then the groups it finds */
.schools-choice__chosen{background:var(--accent-soft); border:1px solid var(--accent-edge); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4)}
.schools-choice__chosen .schools-choice__legend{float:left; width:100%}
.schools-choice__chosen .schools-choice__item, .schools-choice__chosen .schools-choice__table{clear:both}
.schools-choice__chosen .schools-choice__legend + .schools-choice__item{border-top:0}
/* The chosen schools as a short table (MM-1485): school, exam, expected. Stacked, one block a row, on a phone. */
.schools-choice__table{width:100%; border-collapse:collapse; table-layout:auto}
.schools-choice__table th{text-align:left; font-weight:600; font-size:var(--fs-small); color:var(--ink-soft); padding:0 var(--sp-3) var(--sp-1) 0}
.schools-choice__table td{vertical-align:top; padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; border-top:1px solid var(--line-soft); font-size:var(--fs-small); overflow-wrap:anywhere}
.schools-choice__table .schools-choice__item{border-top:0; padding:0; min-height:44px; align-items:center}
.schools-choice__cell--school{min-width:10rem}
.schools-choice__nowrap{white-space:nowrap}
.schools-choice__estimate{font-size:var(--fs-small); color:var(--ink-soft); margin:var(--sp-2) 0 0; max-width:62ch}
@media (max-width:560px){
  .schools-choice__table, .schools-choice__table tbody, .schools-choice__table tr, .schools-choice__table td{display:block}
  .schools-choice__table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .schools-choice__table tr{padding:var(--sp-1) 0; border-top:1px solid var(--line-soft)}
  .schools-choice__table td{border-top:0; padding:0 0 2px 0}
  .schools-choice__cell--school{min-width:0}
  .schools-choice__cell--exam, .schools-choice__cell--when{margin-left:calc(24px + var(--sp-3)); color:var(--ink-soft)}
}
.schools-choice__find{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-2); min-width:0}
.schools-choice__find-label{font-family:var(--f-display); font-weight:600; font-size:var(--fs-body)}
.schools-choice__search.freetext{font-family:var(--f-body); font-size:var(--fs-body); min-height:48px; margin:0; padding:10px 14px; max-width:28rem}
/* her placeholder, whole, on a phone: the text is about 14 times its size in px wide, the field about 112 px less than the screen */
@media (max-width:400px){ .schools-choice__search::placeholder{font-size:min(var(--fs-body), calc((100vw - 120px) / 14))} }
.schools-choice__region{font-family:var(--f-body); font-size:var(--fs-body); min-height:48px; max-width:28rem}
/* the provider (MM-1400, the reviewer's "Exam provider" list of 20 Oct 2026): each with the count of its schools beside the name */
.schools-choice__provider, .schools-choice__unlisted-test, .schools-choice__unlisted-year, .schools-choice__unlisted-month{font-family:var(--f-body); font-size:var(--fs-body); min-height:48px; max-width:28rem}
/* a list grows to its longest option unless told otherwise: the three lists of "Can’t find a school?" stay inside the card at 320 px */
.schools-choice__unlisted-test, .schools-choice__unlisted-year, .schools-choice__unlisted-month{width:100%; min-width:0}
/* the headings the reviewer's screen has (owner, 20 Oct 2026): the schools, the search, the last question */
.schools-choice__title{font-family:var(--f-display); font-weight:600; font-size:var(--fs-body); margin:var(--sp-2) 0 0}
.schools-choice__intro, .schools-choice__field{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-1); margin:0 0 var(--sp-2); max-width:28rem}
.schools-choice__field .freetext{min-height:48px; margin:0; padding:10px 14px}
.controls-sources{margin:var(--sp-2) 0; padding-left:1.25rem; display:grid; gap:var(--sp-1)}
.schools-choice__found{font-size:var(--fs-small); color:var(--ink-soft); margin:0; max-width:62ch}
.schools-choice__added{font-size:var(--fs-small); color:var(--ink-soft); margin:0; max-width:62ch}
.schools-choice__results{display:grid; gap:var(--sp-3); min-width:0}
.schools-choice__results:empty{display:none}
/* a school found, as a card (owner, 20 Oct 2026): name, town and provider, the exam, the subjects, what is covered, the fold, the box */
.schools-choice__card{display:grid; gap:var(--sp-1); min-width:0; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4)}
.schools-choice__card-name{font-family:var(--f-display); font-weight:600; font-size:var(--fs-body); margin:0; overflow-wrap:anywhere}
.schools-choice__card-line{font-size:var(--fs-small); color:var(--ink-soft); margin:0; overflow-wrap:anywhere}
.schools-choice__card-covers{font-size:var(--fs-small); margin:var(--sp-2) 0 0; max-width:62ch}
.schools-choice__fold{min-width:0}
.schools-choice__fold > summary{cursor:pointer; color:var(--accent); font-size:var(--fs-small); padding:var(--sp-3) 0; min-height:44px; box-sizing:border-box}
.schools-choice__fold > .schools-choice__about{overflow-wrap:anywhere}
.schools-choice__gaps-title{margin-bottom:2px}
.schools-choice__gaps-title b{font-family:var(--f-display); font-weight:600}
.schools-choice__card > .schools-choice__item{padding-bottom:0}

/* "Mixed, or one at a time?" (MM-811, parent/subjects-choice.js): why mixing, then the modes */
.subjects-choice__why{background:var(--accent-soft); border:1px solid var(--accent-edge); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); max-width:66ch}
.subjects-choice__why-head{margin:0 0 var(--sp-2)}
.subjects-choice__reasons{margin:0; padding-left:1.1em; display:grid; gap:var(--sp-2); font-size:var(--fs-small)}
.subjects-choice__rec{display:inline-block; margin-left:var(--sp-2); padding:1px 8px; border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink); font-size:var(--fs-label); font-weight:600; vertical-align:2px}
.subjects-choice__more summary{cursor:pointer; color:var(--accent); font-size:var(--fs-small); padding:var(--sp-2) 0}
.subjects-choice__study summary{cursor:pointer; color:var(--accent); font-size:var(--fs-small); padding:var(--sp-2) 0 0}
.subjects-choice__study p{margin:var(--sp-2) 0 0; font-size:var(--fs-small)}

/* A paper mock run on the grown-up's screen (MM-935): the clock is large, here only; she sees only the paper */
.inv-exam{margin:0; color:var(--ink-soft); font-size:var(--fs-small)}
.inv-title{margin:var(--sp-1) 0 var(--sp-3)}
.inv-clock__label{margin:0; color:var(--ink-soft); font-size:var(--fs-small)}
.inv-clock{margin:0 0 var(--sp-3); font-family:var(--f-num); font-size:clamp(56px, 18vw, 112px); line-height:1; font-variant-numeric:tabular-nums; color:var(--ink)}
.inv-clock--warn{color:var(--err)}
.inv-state{margin:0 0 var(--sp-2); font-weight:600}
.invigilator-line{margin:0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--accent-soft); border:1px solid var(--accent-edge); font-size:18px; max-width:40ch}
.inv-voice{margin-top:var(--sp-2)}
/* what is read aloud before a section's clock starts (MM-1258): a list to read from, wide enough for a sentence */
.inv-opening{margin:var(--sp-3) 0; max-width:66ch}
.inv-opening__lines{margin:var(--sp-1) 0 0; padding-left:1.4em; display:grid; gap:var(--sp-2); font-size:18px}
.inv-parts{margin:0; padding-left:1.4em; display:grid; gap:var(--sp-2); font-size:var(--fs-small)}
.inv-part--now{font-weight:600}

/* Marking a mock's answer sheet (MM-936): a row of taps per line */
.mm-rule{max-width:66ch}
.mm-total{margin:var(--sp-2) 0}
.mm-lines{list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:var(--sp-2)}
.mm-line{display:grid; grid-template-columns:2.2em 1fr; gap:var(--sp-1) var(--sp-2); align-items:start; padding:var(--sp-2) 0; border-top:1px solid var(--line-soft)}
.mm-line__n{font-weight:600; padding-top:8px}
.mm-line__taps{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.mm-letter{min-width:44px; justify-content:center}
.mm-line__key{flex-basis:100%; font-size:var(--fs-label); color:var(--ink-soft)}
.mm-line__read{grid-column:2; font-size:var(--fs-label); color:var(--ink-soft); min-height:1em}

/* Her mocks under Progress (MM-937) */
.p-mock{margin:var(--sp-4) 0; padding-top:var(--sp-3); border-top:1px solid var(--line-soft)}
.p-mock h3{margin:0 0 var(--sp-2); font-size:var(--fs-body)}
.p-mock__table{width:100%; border-collapse:collapse; font-size:var(--fs-small); display:block; overflow-x:auto}
.p-mock__table th,.p-mock__table td{padding:6px 8px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top}
.p-mock__table thead th{font-size:var(--fs-label); color:var(--ink-soft); font-weight:600}
.p-mock__earlier{margin:var(--sp-1) 0 0; padding-left:1.2em; font-size:var(--fs-small)}

/* Key dates (MM-1023): the list by school year */
.p-kd__list{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:grid; gap:var(--sp-2)}
.p-kd__item{padding:var(--sp-2) 0; border-top:1px solid var(--line-soft); overflow-wrap:anywhere}
.p-kd__item p{margin:0}
.p-kd__schools{font-weight:600}
.p-kd__meta{font-size:var(--fs-label); color:var(--ink-soft); margin-top:var(--sp-1)}
.p-kd__item.is-past .p-kd__label{color:var(--ink-soft)}
.p-kd__disclaimer{margin:var(--sp-4) 0}

/* Interview practice (MM-1030, parents app only): the kinds, the card, the five ticks. The
   read-aloud text is large enough to hand the phone over to read from. */
.p-iv-kinds__row{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.p-iv-last{margin:var(--sp-3) 0 0}
.p-iv-card__kind{margin:0 0 var(--sp-1)}
.p-iv-card__ask{white-space:pre-wrap}
.p-iv-card__problem{font-size:var(--fs-title); line-height:var(--lh-tight); white-space:pre-wrap; margin:var(--sp-3) 0}
.p-iv-card__sub{font-size:var(--fs-body); margin:var(--sp-4) 0 var(--sp-1)}
.p-iv-card__list{margin:0; padding-left:20px}
.p-iv-read{margin:var(--sp-4) 0; padding:var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--card-2)}
.p-iv-read__title{font-size:var(--fs-title); margin:0 0 var(--sp-2)}
.p-iv-read__text{font-size:22px; line-height:1.55; white-space:pre-wrap; margin:0}
.p-iv-read__credit{margin:var(--sp-2) 0 0}
.p-iv-show__say{margin:0 0 var(--sp-2)}
.p-iv-show .p-iv-card__problem{font-size:22px; line-height:1.55; margin:0}
.p-iv-ticks{border:0; padding:0; margin:var(--sp-5) 0 0; display:grid; gap:var(--sp-2)}
.p-iv-ticks legend{font-weight:700; margin-bottom:var(--sp-2)}
.p-iv-tick{display:flex; align-items:flex-start; gap:var(--sp-3); min-height:var(--touch); padding:var(--sp-2) var(--sp-3); border:1px solid var(--line); border-radius:var(--r-md)}
.p-iv-tick__box{flex:none; width:22px; height:22px; margin-top:2px}
.p-iv-tick__text{display:grid; gap:2px}

/* ── a page printed or saved as a PDF (MM-1082; the letter shares it, MM-1084) ──
   Only what is inside .k-print is printed: the findings, black on white, no navigation and no
   buttons. Each subject's section starts a page of its own. */
.try-adds h2{margin-top:0}
.try-result{overflow-wrap:anywhere}
.try-result h2{margin-top:var(--sp-5)}
.try-result__list{margin:0 0 var(--sp-3); padding-left:20px}
.try-result__list li + li{margin-top:var(--sp-1)}
.try-missed__toggle{margin:0 0 var(--sp-3)}
.try-missed__list{list-style:none; margin:0; padding:0}
.try-missed__list.is-folded{display:none}
.try-missed__q{margin:0 0 var(--sp-3); padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-md)}
.try-missed__q > *:first-child{margin-top:0}
.try-missed__prompt, .try-missed__how .try-missed__text, .try-missed__lines .try-missed__text{white-space:pre-wrap}
.try-missed__row{margin:var(--sp-2) 0 0}
.try-missed__question .try-missed__row{margin-left:var(--sp-3)}   /* a question's own options sit under it (owner, 20 Oct 2026) */
.try-missed__label{display:block; font-weight:700}
.k-letter__acts{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4)}
@media print{
  @page{size:A4; margin:16mm}
  body:has(.k-print) :not(:has(.k-print), .k-print, .k-print *){display:none !important}
  body:has(.k-print), body:has(.k-print) :has(.k-print){
    margin:0 !important; padding:0 !important; max-width:none !important; min-height:0 !important;
    background:#fff !important; border:0 !important; box-shadow:none !important;
  }
  .k-print{color:#000 !important; background:#fff !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; font-size:11pt}
  .k-print *{color:#000 !important; background:transparent !important; box-shadow:none !important}
  .k-print button, .k-print .no-print{display:none !important}
  .k-print button.k-chip{display:inline-block !important; border:1px solid #000 !important}
  .k-print .k-letter__summary, .k-print .k-letter__group, .k-print .k-letter__section{padding:0 !important; margin:0 0 12pt !important; border:0 !important; border-radius:0 !important; overflow:visible !important}
  .k-print .k-letter__group + .k-letter__group{break-before:page}
  .k-print .k-letter__finding{break-inside:avoid}
  .k-print .try-missed__list.is-folded{display:block}
  .k-print .try-missed__q{break-inside:avoid; border:1px solid #000 !important}
  .k-print h1, .k-print h2, .k-print h3{break-after:avoid}
}
.p-comps{list-style:none; margin:var(--sp-2) 0 0; padding:0}
.p-comps__row{padding:var(--sp-2) 0; border-top:1px solid var(--line)}
.p-comps__row p{margin:0 0 var(--sp-1); font-size:var(--fs-small)}
.p-link-steps{margin:var(--sp-2) 0 var(--sp-4); padding-left:22px; color:var(--ink-soft)}   /* the link page's three numbered steps (MM-1490) */
.p-link-steps li{margin-bottom:var(--sp-1)}
.p-list-lead{margin:var(--sp-3) 0 var(--sp-1); font-weight:600}   /* "Shared information includes:" above its list (the link page's) */
/* the five tabs on the narrowest phones (owner, 20 Oct 2026; "This week" and "Progress" were 6 px apart at 320 px and read as one):
   a slightly smaller label and a short rule between neighbours, so the five labels read as five */
@media (max-width:359px){
  .p-tabbar .k-tab{font-size:11.5px}
  .p-tabbar .k-tab + .k-tab::before{content:""; position:absolute; left:0; top:24%; bottom:24%; width:1px; background:var(--ink-soft); opacity:.35}
}
/* the link page's two fields stack, label and its help above the box, the box the panel's width: her placeholder "Enter the code from your phone…" shows whole at every width (owner, 20 Oct 2026) */
.p-linking .ctl{flex-direction:column; align-items:stretch; gap:6px}
.p-linking .ctl .freetext.short{max-width:none; width:100%; flex:none; font-family:var(--f-body)}
@media (max-width:359px){ main.p-surface .panel.p-linking{padding-inline:var(--sp-3)} }

/* Practise: four tiles, "Papers she has had" under them (MM-1729) */
.p-tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); margin:0 0 var(--sp-4)}
.p-tile{
  display:flex; flex-direction:column; gap:4px; min-height:132px; padding:var(--sp-4); text-align:left; border:0; border-radius:var(--r-card);
  background:var(--tone-soft, var(--mint)); color:var(--tone-ink, var(--on-bright)); box-shadow:var(--shadow-card), 0 5px 0 var(--shadow-tile);
}
.p-tile:active{box-shadow:var(--shadow-card), 0 2px 0 var(--shadow-tile); transform:translateY(3px)}
.p-tile:last-child:nth-child(odd){grid-column:1 / -1}
.p-tile__ic{display:grid; place-items:center; width:40px; height:40px; margin-bottom:var(--sp-1); border-radius:12px; background:var(--card); color:inherit}
/* the mint tile is bright in both themes, so its icon sits on a light box (the card would be dark in dark mode: navy on navy) */
.p-tile:not([data-tone]) .p-tile__ic{background:var(--on-navy-hi)}
.p-tile__ic svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.p-tile b{font-family:var(--f-display); font-weight:800; font-size:18px; line-height:1.15}
.p-tile__desc{font-size:var(--fs-small); line-height:1.3}
.p-tile--first .p-tile__desc{font-weight:600}
.p-had{margin:0 0 var(--sp-4); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.p-had__title{margin:0; padding:var(--sp-2) 0 var(--sp-1); font-family:var(--f-body); font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.p-had__row{display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:56px; padding:var(--sp-2) 0; text-align:left; border:0; border-top:1px solid var(--line-soft); background:none; color:var(--ink)}
.p-had__title + .p-had__row{border-top:0}
.p-had__mark{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; font-family:var(--f-display); font-weight:800; font-size:13px; background:var(--tone-soft, var(--mint-soft)); color:var(--tone-ink, var(--mint-ink))}
.p-had__text{display:grid; gap:1px; flex:1; min-width:0}
.p-had__text b{font-size:15px}
.p-had__line{font-size:var(--fs-small); color:var(--ink-soft)}
.p-had__status{flex:none; margin-left:auto; padding:5px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700; white-space:nowrap; background:var(--mint-soft); color:var(--mint-ink)}
.p-had__status.is-todo{background:var(--puzzle-soft); color:var(--puzzle-ink)}

/* Papers to print and the Year 6 SATs: the form in three steps, the rest behind More options (MM-1730) */
.p-steps{margin:var(--sp-4) 0 var(--sp-3)}
.p-steps__bar{display:flex; gap:6px}
.p-steps__bar i{flex:1; height:6px; border-radius:3px; background:var(--mint-soft)}
.p-steps__bar i.on{background:var(--mint-ink)}
.p-steps__n{margin:var(--sp-2) 0 0; font-size:var(--fs-small); color:var(--ink-soft)}
.p-step__ask{margin:0 0 var(--sp-2); font-family:var(--f-display); font-weight:800; font-size:calc(var(--fs-body) + 3px); line-height:var(--lh-tight)}
.p-opts{display:grid; gap:var(--sp-1)}
.p-opt{display:flex; align-items:center; gap:var(--sp-3); min-height:60px; padding:var(--sp-2) var(--sp-3); border-radius:14px; border:2px solid transparent; cursor:pointer}
.p-opt.is-on{background:var(--mint-soft); border-color:var(--mint-ink)}
.p-opt input{flex:none; width:24px; height:24px; margin:0; accent-color:var(--mint-ink)}
.p-opt:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:2px}
.p-opt__text{display:grid; gap:2px; min-width:0}
.p-opt__text b{font-size:16px}
.p-how{display:grid; gap:var(--sp-2)}
.p-how p{margin:0; padding:var(--sp-2) var(--sp-3); border-radius:14px; background:var(--card-2); color:var(--ink)}
.p-step__go{margin-top:var(--sp-2)}
.p-opt__desc{font-size:var(--fs-small); color:var(--ink-soft)}
.p-more{margin:var(--sp-4) 0; border:2px dashed var(--ink-soft); border-radius:16px}
.p-more__sum{display:block; min-height:48px; padding:var(--sp-3); font-weight:700; cursor:pointer}
.p-more__sum small{display:block; font-weight:400; color:var(--ink-soft); font-size:var(--fs-small)}
.p-more__body{padding:0 var(--sp-3) var(--sp-3)}
.p-sum{--focus:var(--mint); margin-top:var(--sp-4); padding:var(--sp-4); border-radius:var(--r-card); background:var(--navy); color:var(--on-navy)}
/* the summary and its buttons stay above the tab bar while the choices scroll (the canvas pins them), so Make is always in reach.
   A window under 701 px tall leaves the choices too little room beside it, so there it stays in the flow. While it is pinned the
   page's scroll padding clears it too, by its tallest (--sum-h, wider screens set fewer lines), so a control reached by Tab or an
   arrow key is never scrolled under it (WCAG 2.4.11) */
@media (min-height:701px){
  .panel .p-sum{position:sticky; bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-2)); z-index:5; box-shadow:var(--shadow-bar)}
  html:has(.panel .p-sum){--sum-h:310px; scroll-padding-bottom:calc(var(--tabbar-h, 64px) + var(--safe-bottom, 0px) + var(--sp-2) + var(--sum-h) + var(--sp-4))}
}
@media (min-height:701px) and (min-width:359px){ html:has(.panel .p-sum){--sum-h:262px} }
@media (min-height:701px) and (min-width:430px){ html:has(.panel .p-sum){--sum-h:240px} }
@media (min-height:701px) and (min-width:600px){ html:has(.panel .p-sum){--sum-h:216px} }
@media (min-height:701px) and (min-width:820px){ html:has(.panel .p-sum){--sum-h:192px} }
.p-sum__line{margin:0 0 var(--sp-3); font-size:var(--fs-small); color:var(--on-navy)}
.p-sum__btns{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.p-sum__btns .k-btn:not(.k-btn--primary){background:var(--navy-2); border-color:var(--navy-2); color:var(--on-navy-hi)}
.p-sum__nav{display:flex; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-2)}
.p-sum__nav .k-btn--quiet{color:var(--mint)}

/* School: her schools and the next two key dates, as cards that open the page (MM-1735) */
.p-sch{margin:0 0 var(--sp-4); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.p-sch__title{margin:0; padding:var(--sp-2) 0 var(--sp-1); font-family:var(--f-body); font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.p-sch__list{list-style:none; margin:0; padding:0}
.p-sch__row{display:flex; align-items:center; gap:var(--sp-3); min-height:56px; padding:var(--sp-2) 0; border-top:1px solid var(--line-soft)}
.p-sch__title + .p-sch__list > .p-sch__row:first-child{border-top:0}
.p-sch__text{display:grid; gap:1px; flex:1; min-width:0; overflow-wrap:anywhere}
.p-sch__text b{font-size:16px}
.p-sch__sub{font-size:var(--fs-small); color:var(--ink-soft)}
.p-sch__none{margin:0; padding:var(--sp-2) 0; font-size:var(--fs-small); color:var(--ink-soft)}
.p-sch__chip{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:52px; min-height:44px; padding:6px 0; border-radius:12px; text-align:center; background:var(--puzzle-soft); color:var(--puzzle-ink); font-family:var(--f-display); font-weight:800; font-size:18px; line-height:1}
.p-sch__chip small{display:block; margin-bottom:2px; font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:.06em}
.p-sch__link{display:flex; align-items:center; width:100%; min-height:44px; margin:var(--sp-1) 0; padding:0; border:0; background:none; font:inherit; font-weight:700; text-align:left; color:var(--mint-ink); cursor:pointer}
.p-sch__link--add::before{content:"+"; margin-right:var(--sp-2)}
.p-sch__link:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* Home (MM-1732, board 2): the child over the title on the band, the letter's card with its subjects and its button, "Do next"
   as a card of rows (the look of Papers had), and the week's detail in a fold whose summary is a card and whose cards stay cards */
.p-head__kicker{margin:0; font-size:var(--fs-small); font-weight:600; color:var(--on-navy)}
.p-homecard__subjects{list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0 0; padding:0}
.p-homecard__subjects .k-subj{min-height:32px; padding:0 var(--sp-3)}
.p-homecard .p-homecard__read{display:flex; width:100%; margin:var(--sp-4) 0 0}
.p-next{margin:0 0 var(--sp-4); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.p-next__title{margin:0; padding:var(--sp-2) 0 var(--sp-1); font-family:var(--f-body); font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.p-next__row{display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:56px; padding:var(--sp-2) 0; text-align:left; border:0; border-top:1px solid var(--line-soft); background:none; color:var(--ink); cursor:pointer}
.p-next__title + .p-next__row{border-top:0}
.p-next__ic{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--tone-soft, var(--mint-soft)); color:var(--tone-ink, var(--mint-ink))}
.p-next__ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.p-next__text{display:grid; gap:1px; flex:1; min-width:0; overflow-wrap:anywhere}
.p-next__text b{font-size:16px}
.p-next__sub{font-size:var(--fs-small); color:var(--ink-soft)}
.p-next__row[data-row="help"] .p-next__sub{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}   /* a long topic name stays whole on Progress, which the row opens; the other rows wrap whole */
.p-next__go{flex:none; margin-left:auto; font-size:22px; line-height:1; color:var(--ink-soft)}
.p-next__row:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.p-detail{margin:0 0 var(--sp-4)}
.p-detail > summary{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:56px; padding:var(--sp-2) var(--sp-4); list-style:none; cursor:pointer; border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.p-detail > summary::-webkit-details-marker{display:none}
.p-detail > summary h2{margin:0; font-family:var(--f-display); font-weight:800; font-size:var(--fs-title); line-height:var(--lh-tight); letter-spacing:-.015em}
.p-detail > summary::after{content:"›"; flex:none; font-size:22px; line-height:1; color:var(--ink-soft); transition:transform var(--dur-quick) var(--ease-out)}
.p-detail[open] > summary::after{transform:rotate(90deg)}
.p-detail > summary + *{margin-top:var(--sp-3)}
.p-detail > summary:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* Wide screens (MM-1736, board 8): from 820 px a page that has the four tabs swaps the bottom bar for a navy side menu, the way the
   concept draws it: the mark, whose pages these are, the four pages, and Settings at the foot. It is the same bar and the same
   tabs, set out differently, so the pages, the handlers and `aria-current` are one thing at every width; under 820 px nothing
   here applies and the bottom bar is as it was. The column also needs 480 px of height: a phone held sideways is 820 px wide or more
   but under 440 tall, where the mark, the switcher, four rows and Settings would lie over each other, so a window that short keeps the
   bottom bar and the round button (app/parent/bar.js SIDE_MENU_QUERY is this query, for the order the controls are tabbed in). It keys
   on the tab list being there (.p-tabbar): the screens around the pages (sign-in, the children, the account) have no tabs and keep
   the top bar. Practise puts its tiles beside the papers she has had. */
.menu-btn__side, .menu-btn__word{display:none}
.menu-btn__ic{display:grid}   /* a block of its own, so the icon sits in the middle of the round button as it did before the span (the side menu hides it) */
@media (min-width:820px) and (min-height:480px){
  #app:has(.p-tabbar){--side-w:248px; --side-top:calc(var(--safe-top) + 78px); --page-w:760px; --page-pad:24px; padding-bottom:0}
  #app:has(.p-tabbar):has(.kidswitch){--side-top:calc(var(--safe-top) + 140px)}   /* the bar's mark (44 px) and, when there are children, the switcher (48 px) */
  html:has(.p-tabbar){--tabbar-h:0px}   /* nothing at the foot of the page to clear: the pinned summary and the toasts sit at the window's edge */
  #app:has(.p-tabbar)::before{content:""; position:fixed; z-index:10; top:0; bottom:0; left:0; width:var(--side-w); background:var(--navy)}
  /* the top bar becomes the head of the column: the mark, then the switcher */
  #app:has(.p-tabbar) > .topbar{position:fixed; top:0; left:0; width:var(--side-w); z-index:20; background:var(--navy); border:0}   /* navy on the column's navy: the same to the eye, and a checker that reads no ::before finds the words' own ground */
  #app:has(.p-tabbar) > .topbar .topbar__in{flex-direction:column; align-items:stretch; gap:14px; width:auto; max-width:none; min-height:0; margin:0; padding:20px 16px 0 calc(16px + var(--safe-left)); container-type:normal}   /* no container: the name never folds to its initial in a column this wide */
  #app:has(.p-tabbar) > .topbar .spacer{display:none}
  #app:has(.p-tabbar) > .topbar a.brand--link{margin-block:0}
  #app:has(.p-tabbar) .kidswitch{display:block}
  #app:has(.p-tabbar) button.kid-pill{width:100%; height:48px; max-width:none; padding:8px 12px; border-radius:16px; background:var(--navy-2); font-size:16px}
  #app:has(.p-tabbar) .kid-pill .name-pill__name{flex:1; text-align:left}
  #app:has(.p-tabbar) .kidswitch__list{left:0; right:0; min-width:0}
  /* the four pages: a column of rows, the page she is on a mint pill */
  #app:has(.p-tabbar) .p-tabbar{--focus:var(--mint); position:fixed; z-index:15; left:0; right:auto; top:var(--side-top); bottom:auto; width:var(--side-w); display:flex; flex-direction:column; gap:6px; padding:0 16px 0 calc(16px + var(--safe-left)); background:var(--navy); box-shadow:none}
  #app:has(.p-tabbar) .p-tabbar .k-tab{flex-direction:row; justify-content:flex-start; gap:12px; min-height:48px; padding:0 12px; border-radius:14px; color:var(--on-navy); font-size:16px}
  #app:has(.p-tabbar) .p-tabbar .k-tab svg{width:22px; height:22px}
  #app:has(.p-tabbar) .p-tabbar .k-tab:hover{background:var(--navy-2); color:var(--on-navy-hi)}
  #app:has(.p-tabbar) .p-tabbar .k-tab[aria-current="page"]{background:var(--mint); color:var(--on-bright)}
  /* Settings at the foot of the column: the round button as a row, the word beside its icon */
  #app:has(.p-tabbar) .menu-btn{position:fixed; z-index:20; left:calc(16px + var(--safe-left)); bottom:calc(16px + var(--safe-bottom)); width:calc(var(--side-w) - 32px - var(--safe-left)); height:48px; display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:0 12px; border-radius:14px; background:var(--navy); color:var(--on-navy); font-size:16px; font-weight:700}
  #app:has(.p-tabbar) .menu-btn:hover{background:var(--navy-2); color:var(--on-navy-hi)}
  #app:has(.p-tabbar) .menu-btn[aria-current="page"]{background:var(--mint); color:var(--on-bright)}
  #app:has(.p-tabbar) .menu-btn__ic{display:none}
  #app:has(.p-tabbar) .menu-btn__side{display:block; flex:none}
  #app:has(.p-tabbar) .menu-btn__word{display:inline}
  /* the page and the footer take the room beside the column; the band starts at the top of the window */
  #app:has(.p-tabbar) > main.p-surface{width:calc(100% - var(--side-w)); max-width:none; margin:0 0 0 var(--side-w); padding-inline:max(var(--page-pad), calc((100vw - var(--side-w) - var(--page-w)) / 2))}
  #app:has(.p-tabbar) > main.p-surface > .p-head{padding-top:calc(var(--safe-top) + var(--sp-7))}
  #app:has(.p-tabbar) > .appfoot{margin-left:var(--side-w)}
  #app:has(.p-tabbar) > .appfoot .appfoot__in{max-width:none; margin:0; padding-inline:max(var(--page-pad), calc((100vw - var(--side-w) - var(--page-w)) / 2))}   /* the footer's words start where the page's do */
}
@media (min-width:1100px) and (min-height:480px){
  #app:has(.p-tabbar){--page-pad:40px}
}
@media (min-width:820px) and (min-height:480px){
  /* Practise: the tiles beside "Papers she has had" in two columns, the tiles two to a row where the column is wide enough */
  #app:has(.p-tabbar):has(> main.p-surface > .p-tiles){--page-w:1040px}   /* on #app, so the footer below the page takes the same width */
  #app:has(.p-tabbar) > main.p-surface:has(> .p-tiles) .p-tiles{gap:var(--sp-4)}
  #app:has(.p-tabbar) > main.p-surface:has(> .p-tiles):has(> .p-had) > .p-tiles{grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}   /* beside the papers, one tile to a row where the column is narrow */
  #app:has(.p-tabbar) > main.p-surface:has(> .p-tiles) .p-tile{min-height:160px}
  #app:has(.p-tabbar) > main.p-surface:has(> .p-tiles) .p-tile b{font-size:20px}
  #app:has(.p-tabbar) > main.p-surface:has(> .p-tiles):has(> .p-had){display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(280px, 1fr); column-gap:var(--sp-5); align-items:start}
  #app:has(.p-tabbar) > main.p-surface:has(> .p-tiles):has(> .p-had) > *{grid-column:1 / -1}
  #app:has(.p-tabbar) > main.p-surface:has(> .p-tiles):has(> .p-had) > .p-tiles{grid-column:1}
  #app:has(.p-tabbar) > main.p-surface:has(> .p-tiles):has(> .p-had) > .p-had{grid-column:2; margin-bottom:var(--sp-4)}
  #app:has(.p-tabbar) > main.p-surface > .p-head + .p-tiles + .p-had{position:relative; margin-top:calc(-1 * var(--sp-8))}   /* it rises over the band's edge with the tiles */
}

/* What she got wrong (MM-1741): the page behind the gate on her device, the Home card that opens it, and the tick under the two files.
   A question is folded to its prompt line; it opens to the try's five rows (the .try-missed__* rules above). Printed, every question is open. */
.p-wrongcard .p-next__row{border-top:0}
.p-wrong__none{margin:var(--sp-4) 0}
.p-wrong__print{display:none}
.p-wrong__top{margin:0 0 var(--sp-4)}
.p-wrong__session{margin:0 0 var(--sp-5)}
.p-wrong__head{margin:0; font-family:var(--f-display); font-weight:800; font-size:var(--fs-title); line-height:var(--lh-tight); letter-spacing:-.015em}
.p-wrong__meta{margin:var(--sp-1) 0 var(--sp-3); font-size:var(--fs-small); color:var(--ink-soft)}
.p-wrong__group{margin:0 0 var(--sp-4)}
.p-wrong__subject{margin:0 0 var(--sp-2); font-family:var(--f-body); font-size:var(--fs-label)}
.p-wrong__subject .k-subj{min-height:32px; padding:0 var(--sp-3)}
.p-wrong__list{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2)}
.p-wrong__q{border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow-card)}
.p-wrong__toggle{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); width:100%; min-height:56px; padding:var(--sp-2) var(--sp-4); text-align:left; border:0; border-radius:var(--r-card); background:none; color:var(--ink); font:inherit; font-weight:600; cursor:pointer}
.p-wrong__line{min-width:0; overflow-wrap:anywhere}
.p-wrong__chev{flex:none; font-size:22px; line-height:1; color:var(--ink-soft); transition:transform var(--dur-quick) var(--ease-out)}
.p-wrong__toggle[aria-expanded="true"] .p-wrong__chev{transform:rotate(90deg)}
.p-wrong__toggle:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.p-wrong__body{margin:0; padding:var(--sp-1) var(--sp-4) var(--sp-4); border-top:1px solid var(--line-soft)}
.p-wrong__body > *:first-child{margin-top:0}
.p-wrong__body.is-folded{display:none}
.p-wrong__acts{margin:var(--sp-3) 0 0}
.p-wrong__fresh{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3); margin:0 0 var(--sp-4)}   /* the parents' app (MM-1742): when the copy came, and Refresh */
.p-wrong__when{flex:1 1 14em; margin:0}
.p-wrongoff .p-actions{margin-top:var(--sp-3)}
.p-include__box{flex:none; width:22px; height:22px}
@media print{
  .p-wrong__print{display:block}
  .k-print .p-wrong__body.is-folded{display:block}
  .k-print .p-wrong__q{break-inside:avoid; border:1px solid #000 !important; margin:0 0 8pt}
  .k-print .p-wrong__body{border:0 !important}
  .k-print .p-wrong__session + .p-wrong__session{break-before:page}
  .k-print .p-wrong__toggle{display:none !important}
}