/* 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:12px; 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:15px; 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:5px; 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:14.5px}
@media (max-width:640px){.strandname{width:100%}
  .strandrow{flex-wrap:wrap; gap:6px}}
.bar{flex:1; height:10px; background:var(--line); border-radius:99px; 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:13px; color:var(--ink-soft)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:12px; height:12px; border-radius:4px; display:block}
.switch{width:52px; height:31px; border-radius:99px; 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:99px;
  background:#fff; transition:transform .16s ease; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch[aria-checked="true"]::after{transform:translateX(21px)}
table.obj{width:100%; border-collapse:collapse; font-size:14px}
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:12px; 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:99px; font-size:11.5px; font-weight:600}
.scroller{overflow-x:auto}
.danger{color:var(--err); border-color:var(--err)}
table.obj td .sub{font-size:12.5px; 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 parents' surface (MM-211, research/16 §3.4) ──────────────────────
   Five pages in a tab bar (This week · Progress · School · Controls · Data) 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}
.p-head{display:grid; gap:var(--sp-1); margin:0 0 var(--sp-5)}
.p-title{font-size:var(--fs-display); line-height:var(--lh-tight)}
.p-back{justify-self:start; padding-left:0; margin-left:calc(-1 * var(--sp-1)); color:var(--accent)}
.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-card{margin:var(--sp-4) 0}
/* 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 */
.p-week{margin:0}
.p-headline{font-family:var(--f-display); font-weight:600; font-size:var(--fs-title); line-height:var(--lh-tight); margin-bottom:var(--sp-5)}
.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 .k-letter__note{margin:0}
.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:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
}
.p-link:hover{border-color:var(--accent-edge)}
.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{font-size:24px; line-height:1; color:var(--ink-faint)}

/* Progress: the two lines at the top, and the years outside the exam folded */
.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-year > summary{font-weight:500; color:var(--ink)}
.p-yearbars h3{font-size:var(--fs-body)}
table.obj td .k-chip__code{margin-left:var(--sp-1)}

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