/* ============================================================================
 * styles.css — Creative Class Room mockup design system
 * Authority: ../../DESIGN-PRINCIPLES.md
 *
 * Brand rule: warm, friendly, playful — and unmistakably professional.
 * Playfulness lives in MOMENTS, not in the chrome.
 * ==========================================================================*/

:root {
  /* Ink — warm charcoal, never pure black.
     --ink-400 was #928778 (3.52:1 on white) which FAILED AA as the colour of
     .meta and .eyebrow. Darkened to 4.96:1. Do not lighten it again. */
  --ink-900:#2A2521; --ink-700:#4A4239; --ink-500:#6E6459; --ink-400:#7A6F62;

  /* Foreground on a dark/primary ground. Use instead of a bare #fff. */
  --on-primary:#FFFFFF;

  /* Quiet neutral tint (badges, inert rows) */
  --quiet-tint:#F3EFE7;

  /* Hairlines for tinted components — one per semantic hue */
  --success-line:#C6E2D4; --danger-line:#F0CFCC; --warning-line:#EFD9B4;
  --primary-line:#BFDEDB;  --marigold-line:#F2DDB8;

  /* Print palette. Warm brand tints waste ink and read muddy on paper, so
     print deliberately uses neutral greys. Tokens, not inline hex. */
  --print-paper:#FFFFFF; --print-ink:#000000;
  --print-rule:#333333; --print-rule-soft:#BBBBBB; --print-box:#666666;

  /* Primary — deep teal */
  --primary-700:#0F544F; --primary-600:#17706A; --primary-500:#1F8B83; --primary-100:#DCEEEC;

  /* Marigold — the warm accent.
     NOTE: -500 and -600 FAIL AA as text on light grounds. Use -700 for text,
     -500 for fills, -100 for tints. This is a real constraint, not a preference. */
  --marigold-700:#A9660F; --marigold-600:#D98A22; --marigold-500:#F2A33C; --marigold-100:#FDEDD6;

  /* Surfaces — warm paper, not cold white */
  --paper:#FDFBF7; --card:#FFFFFF; --border:#E8E1D6; --border-strong:#D5CABA;

  /* Category set — data identity only. Never buttons, never status. */
  --cat-coral:#E8705F; --cat-violet:#7C6BB0; --cat-sky:#4FA3D1;
  --cat-moss:#5C9A5C;  --cat-clay:#C4795B;

  /* Semantic. Base colours are text-safe EXCEPT warning — use --warning-700. */
  --success:#2E7D5B; --success-tint:#E3F1EA;
  --warning:#C77A16; --warning-700:#8A5410; --warning-tint:#FBEEDA;
  --danger:#C0453B;  --danger-tint:#FAE6E4;

  --r-tile:16px; --r-card:12px; --r-ctl:10px; --r-pill:999px;
  --shadow:0 1px 3px rgba(42,37,33,.08);
  --shadow-lift:0 4px 12px rgba(42,37,33,.12);
  --phone-w:390px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink-700);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif; color:var(--ink-900); margin:0; line-height:1.2; font-weight:600}
h1{font-size:30px} h2{font-size:23px} h3{font-size:19px} h4{font-size:17px}
p{margin:0 0 12px} p:last-child{margin-bottom:0}
a{color:var(--primary-600)}
.num{font-variant-numeric:tabular-nums}

/* Focus — visible, always. Never outline:none. */
:focus-visible{outline:3px solid var(--primary-500); outline-offset:2px; border-radius:4px}

/* ------------------------------------------------------------- utilities ---*/
.row{display:flex; align-items:center; gap:10px}
.row-t{display:flex; align-items:flex-start; gap:10px}
.col{display:flex; flex-direction:column}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.spacer{flex:1}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.txt-sm{font-size:14px}.txt-xs{font-size:13px}
.muted{color:var(--ink-500)}.meta{color:var(--ink-400); font-size:13px}
.strong{font-weight:600; color:var(--ink-900)}
.eyebrow{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400); font-weight:600}
.right{text-align:right}.center{text-align:center}
.hidden{display:none !important}
.divider{height:1px; background:var(--border); margin:16px 0; border:0}

/* ---------------------------------------------------------------- cards ----*/
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-card);
  padding:16px; box-shadow:var(--shadow)}
.card--flush{padding:0; overflow:hidden}
.card--feature{border-top:3px solid var(--primary-600)}
.card__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.card__title{font-family:Fraunces,Georgia,serif; font-size:18px; font-weight:600; color:var(--ink-900)}

/* --------------------------------------------------------------- buttons ---*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--r-ctl);
  font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  border:1px solid transparent; background:var(--card); color:var(--ink-900);
  border-color:var(--border-strong); transition:background .12s, box-shadow .12s;
}
.btn:hover{box-shadow:var(--shadow)}
.btn--primary{background:var(--primary-600); color:var(--on-primary); border-color:var(--primary-600)}
.btn--primary:hover{background:var(--primary-500)}
.btn--danger{background:var(--danger); color:var(--on-primary); border-color:var(--danger)}
.btn--ghost{background:transparent; border-color:transparent; color:var(--primary-600)}
.btn--sm{min-height:36px; padding:0 12px; font-size:14px}
.btn--block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}
/* A button that visibly does nothing yet — honesty rule. */
.btn--stub{border-style:dashed; color:var(--ink-400); border-color:var(--border-strong)}
.btn--stub::after{content:'soon'; font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.8}

/* ----------------------------------------------------- chips and badges ----*/
.chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:var(--r-pill); border:1px solid var(--border-strong);
  background:var(--card); font-size:13px; font-weight:600; color:var(--ink-700); cursor:pointer}
.chip[aria-pressed="true"],.chip.is-on{background:var(--primary-600); border-color:var(--primary-600); color:var(--on-primary)}
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; background:var(--primary-100); color:var(--primary-700)}
.badge--success{background:var(--success-tint); color:var(--success)}
.badge--warning{background:var(--warning-tint); color:var(--warning-700)}
.badge--danger{background:var(--danger-tint); color:var(--danger)}
.badge--marigold{background:var(--marigold-100); color:var(--marigold-700)}
.badge--quiet{background:var(--quiet-tint); color:var(--ink-500)}

/* Category dots/chips — always paired with a label, never colour alone. */
.dot{width:10px; height:10px; border-radius:50%; flex:0 0 auto; display:inline-block}
.cat-coral{background:var(--cat-coral)}.cat-violet{background:var(--cat-violet)}
.cat-sky{background:var(--cat-sky)}.cat-moss{background:var(--cat-moss)}.cat-clay{background:var(--cat-clay)}

/* Attendance codes — letter AND colour. */
.code{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:8px; font-weight:700; font-size:14px; border:1px solid transparent}
.code--P{background:var(--success-tint); color:var(--success); border-color:var(--success-line)}
.code--A{background:var(--danger-tint); color:var(--danger); border-color:var(--danger-line)}
.code--L{background:var(--warning-tint); color:var(--warning-700); border-color:var(--warning-line)}
.code--E{background:var(--primary-100); color:var(--primary-700); border-color:var(--primary-line)}
.code--C{background:var(--marigold-100); color:var(--marigold-700); border-color:var(--marigold-line)}

/* --------------------------------------------------------------- avatars ---*/
.avatar{width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:700;
  background:var(--primary-100); color:var(--primary-700)}
.avatar--sm{width:30px; height:30px; font-size:11px}
.avatar--lg{width:56px; height:56px; font-size:18px}
.avatar--marigold{background:var(--marigold-100); color:var(--marigold-700)}

/* ----------------------------------------------------------------- forms ---*/
.field{margin-bottom:16px}
.field__label{display:block; font-size:14px; font-weight:600; color:var(--ink-900); margin-bottom:6px}
.field__hint{font-size:13px; color:var(--ink-500); margin-top:6px}
.input,.select,.textarea{
  width:100%; min-height:44px; padding:10px 12px; font:inherit; font-size:16px;
  color:var(--ink-900); background:var(--card);
  border:1px solid var(--border-strong); border-radius:var(--r-ctl);
}
.textarea{min-height:120px; resize:vertical; line-height:1.55}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary-500)}
/* A human-only field. Nothing pre-fills these. */
.textarea--human{border-left:3px solid var(--primary-600)}
.human-note{font-size:13px; color:var(--ink-500); margin-top:6px; display:flex; gap:6px; align-items:flex-start}

/* ---------------------------------------------------------------- tables ---*/
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th{text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-400); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border)}
.table td{padding:12px; border-bottom:1px solid var(--border); vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--paper)}
.table .right,.table th.right{text-align:right}

/* ------------------------------------------------------------------ tabs ---*/
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto}
.tab{appearance:none; border:0; background:none; font:inherit; font-size:14px; font-weight:600;
  color:var(--ink-500); padding:12px 14px; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; min-height:44px}
.tab.is-on{color:var(--primary-700); border-bottom-color:var(--primary-600)}
.tabpanel[hidden]{display:none}

/* ------------------------------------------------------------ empty state --*/
.empty{text-align:center; padding:40px 24px; color:var(--ink-500)}
.empty svg{margin-bottom:12px}
.empty__title{font-family:Fraunces,Georgia,serif; font-size:18px; color:var(--ink-900); margin-bottom:4px}

/* ================================================================= PHONE ===*/
.phone-page{min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  padding:24px 16px; background:var(--border)}
.phone{width:var(--phone-w); max-width:100%; background:var(--paper); border-radius:28px;
  box-shadow:0 12px 40px rgba(42,37,33,.18); overflow:hidden; position:relative;
  display:flex; flex-direction:column; min-height:780px}
.phone__bar{height:28px; background:var(--primary-700); display:flex; align-items:center;
  justify-content:space-between; padding:0 16px; color:var(--on-primary); font-size:11px; font-weight:600}
.phone__head{background:var(--primary-700); color:var(--on-primary); padding:8px 18px 18px}
.phone__head h1,.phone__head h2{color:var(--on-primary)}
.phone__head .meta{color:rgba(255,255,255,.72)}
.phone__body{flex:1; padding:18px; overflow-y:auto}
.phone__nav{display:flex; border-top:1px solid var(--border); background:var(--card)}
.phone__nav a{flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; font-size:11px; font-weight:600; color:var(--ink-500); text-decoration:none}
.phone__nav a.is-on{color:var(--primary-700)}
.backlink{display:inline-flex; align-items:center; gap:6px; color:var(--on-primary); font-size:14px;
  font-weight:600; text-decoration:none; min-height:44px}

/* The 9-tile grid */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.tile{background:var(--card); border:1px solid var(--border); border-radius:var(--r-tile);
  padding:12px 8px; min-height:96px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center; text-decoration:none;
  color:var(--ink-900); font-size:12.5px; font-weight:600; line-height:1.25; box-shadow:var(--shadow)}
.tile:hover{box-shadow:var(--shadow-lift)}
.tile__icon{width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--primary-100); color:var(--primary-700)}
.tile__badge{position:absolute; top:8px; right:8px; min-width:20px; height:20px; border-radius:var(--r-pill);
  background:var(--danger); color:var(--on-primary); font-size:11px; font-weight:700; display:flex;
  align-items:center; justify-content:center; padding:0 5px}
.tile{position:relative}
.tile--teacher .tile__icon{background:var(--marigold-100); color:var(--marigold-700)}

/* Bottom sheet, not a centred modal */
.sheet-scrim{position:fixed; inset:0; background:rgba(42,37,33,.45); display:none; z-index:40}
.sheet-scrim.is-open{display:block}
.sheet{position:absolute; left:0; right:0; bottom:0; background:var(--card);
  border-radius:20px 20px 0 0; padding:20px 18px 24px; max-height:82%; overflow-y:auto; z-index:41}
.sheet__grab{width:38px; height:4px; border-radius:2px; background:var(--border-strong); margin:0 auto 14px}

/* On a phone every control keeps a 44px target — including the small variants.
   Parents and teachers use this one-handed, standing up. */
.phone .btn--sm{min-height:44px}
.phone .chip{height:44px; padding:0 16px}

/* Screen-reader-only text. Used to put a WORD next to every colour-coded cell,
   so meaning never rests on colour alone. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ------------------------------------------------------- calendar month ----*/
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.cal__dow{font-size:11px; font-weight:600; color:var(--ink-400); text-align:center; padding:4px 0}
.cal__day{min-height:44px; border-radius:8px; border:1px solid transparent; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:14px;
  font-variant-numeric:tabular-nums; color:var(--ink-500); background:transparent}
.cal__day--term{background:var(--card); border-color:var(--border); color:var(--ink-700)}
.cal__day--school{background:var(--primary-100); border-color:var(--primary-100);
  color:var(--primary-700); font-weight:700}
.cal__day--today{border-color:var(--primary-600); border-width:2px}
.cal__day--out{color:var(--ink-400); opacity:.5}
.cal__ev{width:6px; height:6px; border-radius:50%; background:var(--marigold-600); flex:0 0 auto}
.legend{display:flex; flex-wrap:wrap; gap:10px 14px; font-size:13px; color:var(--ink-500)}
.legend__key{width:15px; height:15px; border-radius:4px; flex:0 0 auto; border:1px solid var(--border)}
.legend__key--school{background:var(--primary-100); border-color:var(--primary-100)}
.legend__key--term{background:var(--card); border-color:var(--border)}
.legend__key--off{background:transparent; border-color:var(--border-strong); border-style:dashed}
.legend__key--ev{background:var(--marigold-600); border-color:var(--marigold-600); border-radius:50%;
  width:9px; height:9px; margin:3px}

/* ------------------------------------------------------------------ chat ----*/
.chat{display:flex; flex-direction:column; gap:16px}
.chat__row{display:flex; flex-direction:column; align-items:flex-start; max-width:100%}
.chat__row--me{align-items:flex-end}
.bubble{max-width:86%; padding:12px 14px; border-radius:14px; font-size:15px; line-height:1.6}
.bubble--them{background:var(--card); border:1px solid var(--border); color:var(--ink-700);
  border-bottom-left-radius:4px}
.bubble--me{background:var(--primary-600); color:var(--card); border-bottom-right-radius:4px}
.bubble__meta{font-size:12px; color:var(--ink-400); margin-top:5px}

/* ---------------------------------------------------- long-form reading ----*/
/* Generous measure and leading: newsletters are read end-to-end by parents,
   some of whom share the learning profiles the school serves. */
.prose{font-size:17px; line-height:1.75; max-width:62ch; color:var(--ink-700)}
.prose p{margin:0 0 18px}
.prose p:last-child{margin-bottom:0}

/* List rows */
.list{list-style:none; margin:0; padding:0}
.list__item{display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border)}
.list__item:last-child{border-bottom:0}
.list-link{display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit; min-height:44px}
.list-link:last-child{border-bottom:0}

/* =================================================================== HUB ===*/
.hub{display:flex; min-height:100vh}
.side{width:248px; flex:0 0 248px; background:var(--primary-700); color:var(--on-primary);
  display:flex; flex-direction:column; padding:18px 0}
.side__brand{padding:0 18px 18px; display:flex; align-items:center; gap:10px}
.side__mark{width:36px; height:36px; border-radius:10px; background:var(--marigold-500);
  color:var(--primary-700); display:flex; align-items:center; justify-content:center;
  font-family:Fraunces,Georgia,serif; font-weight:700; font-size:16px}
.side__name{font-family:Fraunces,Georgia,serif; font-size:16px; font-weight:600; color:var(--on-primary); line-height:1.2}
.side__group{padding:14px 18px 6px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.5); font-weight:600}
.side a{display:flex; align-items:center; gap:10px; padding:10px 18px; color:rgba(255,255,255,.82);
  text-decoration:none; font-size:14.5px; font-weight:500; min-height:44px}
.side a:hover{background:rgba(255,255,255,.08); color:var(--on-primary)}
.side a.is-on{background:var(--primary-600); color:var(--on-primary); box-shadow:inset 3px 0 0 var(--marigold-500)}
.side__foot{margin-top:auto; padding:14px 18px 0; border-top:1px solid rgba(255,255,255,.14)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{background:var(--card); border-bottom:1px solid var(--border); padding:14px 28px;
  display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:10}
.content{padding:28px; max-width:1240px; width:100%}
.page-head{margin-bottom:24px}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.grid-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}

/* Stat tile */
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:16px}
.stat__label{font-size:12.5px; color:var(--ink-500); font-weight:600; margin-bottom:6px}
.stat__value{font-family:Fraunces,Georgia,serif; font-size:27px; font-weight:600; color:var(--ink-900);
  font-variant-numeric:tabular-nums; line-height:1.1}
.stat__sub{font-size:13px; color:var(--ink-400); margin-top:4px}
.stat--alert{border-top:3px solid var(--danger)}
.stat--warn{border-top:3px solid var(--warning)}

/* School switcher — proves the multi-tenant seam exists */
.school-switch{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-ctl); padding:8px 10px;
  color:var(--on-primary); font-size:13px; font-weight:600; cursor:pointer; width:100%}

/* Progress */
.bar{height:8px; border-radius:var(--r-pill); background:var(--border); overflow:hidden}
.bar__fill{height:100%; background:var(--primary-600); border-radius:var(--r-pill)}
.bar__fill--marigold{background:var(--marigold-500)}

/* Timeline */
.tl{list-style:none; margin:0; padding:0 0 0 22px; border-left:2px solid var(--border)}
.tl__item{position:relative; padding:0 0 20px 14px}
.tl__item::before{content:''; position:absolute; left:-23px; top:5px; width:10px; height:10px;
  border-radius:50%; background:var(--primary-600); box-shadow:0 0 0 3px var(--paper)}

/* Modal (hub only — phone uses sheets) */
.modal-scrim{position:fixed; inset:0; background:rgba(42,37,33,.5); display:none;
  align-items:center; justify-content:center; padding:24px; z-index:50}
.modal-scrim.is-open{display:flex}
.modal{background:var(--card); border-radius:16px; padding:24px; width:100%; max-width:560px;
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lift)}

/* Masked sensitive value — POPIA. Reveal writes an audit row. */
.masked{font-variant-numeric:tabular-nums; letter-spacing:.04em}
.reveal{appearance:none; border:0; background:none; font:inherit; font-size:13px; font-weight:600;
  color:var(--primary-600); cursor:pointer; text-decoration:underline; padding:4px}

/* Banner */
.banner{border-radius:var(--r-card); padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
  font-size:14px; border:1px solid}
.banner--info{background:var(--primary-100); border-color:var(--primary-line); color:var(--primary-700)}
.banner--warn{background:var(--warning-tint); border-color:var(--warning-line); color:var(--warning-700)}
.banner--danger{background:var(--danger-tint); border-color:var(--danger-line); color:var(--danger)}

/* Key/value detail rows — the learner record reads as a record, not a form. */
.kv{display:grid; grid-template-columns:minmax(140px,32%) 1fr; gap:10px 18px; margin:0}
.kv dt{margin:0; font-size:14px; font-weight:600; color:var(--ink-500)}
.kv dd{margin:0; color:var(--ink-900); font-size:15px}
@media (max-width:640px){ .kv{grid-template-columns:1fr; gap:2px 0} .kv dd{margin-bottom:10px} }

/* Selectable option card — academic path. Never colour alone: the chosen one
   also carries the word "Current". */
.pick{display:block; width:100%; text-align:left; font:inherit; cursor:pointer; min-height:44px;
  background:var(--card); border:1px solid var(--border-strong); border-radius:var(--r-card);
  padding:14px 16px; color:var(--ink-700)}
.pick:hover{box-shadow:var(--shadow-lift)}
.pick[aria-pressed="true"]{border-color:var(--primary-600); background:var(--primary-100)}

/* A table row that navigates. The name cell holds the real <a> for keyboards. */
.table tr.is-clickable{cursor:pointer}

/* Celebration — a playful moment, deliberately small and brief */
.cheer{background:var(--marigold-100); border:1px solid var(--marigold-line); color:var(--marigold-700);
  border-radius:var(--r-card); padding:14px 16px; font-weight:600; display:flex; gap:10px; align-items:center}

/* ------------------------------------------------- register & matrix bits ---*/
/* Visually hidden, still announced by a screen reader. */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0}

/* Wide tables scroll inside their own container so the page never scrolls sideways. */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* Attendance code control — carries the LETTER as well as the colour.
   The tint has to beat .select's own background, hence the doubled class. */
.select--code{min-width:150px; font-weight:600}
.select--code.code--P{background:var(--success-tint); color:var(--success); border-color:var(--success)}
.select--code.code--A{background:var(--danger-tint);  color:var(--danger);  border-color:var(--danger)}
.select--code.code--L{background:var(--warning-tint); color:var(--warning-700); border-color:var(--warning-700)}
.select--code.code--E{background:var(--primary-100);  color:var(--primary-700); border-color:var(--primary-600)}
.select--code.code--C{background:var(--marigold-100); color:var(--marigold-700); border-color:var(--marigold-600)}

/* A filter chip that is also a touch target. */
.chip--tap{min-height:44px; height:auto; padding:0 16px; font-size:14px}

/* Compliance matrix — learners down, document types across. */
.matrix{border-collapse:collapse; font-size:13px}
.matrix th,.matrix td{border-bottom:1px solid var(--border); padding:3px 4px; text-align:center}
.matrix thead th{font-size:11px; line-height:1.25; vertical-align:bottom; color:var(--ink-500);
  font-weight:600; padding:8px 4px; white-space:normal; min-width:58px}
.matrix tbody th{font-weight:400}
.matrix .stick{position:sticky; left:0; background:var(--card); text-align:left;
  border-right:1px solid var(--border-strong); min-width:200px; white-space:normal; padding:6px 12px 6px 4px}
.matrix thead .stick{z-index:2}
.matrix tbody tr:hover .stick{background:var(--paper)}

/* One document cell: a letter or tick, a colour, and a title naming the status. */
.dcell{appearance:none; font:inherit; font-weight:700; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:8px; cursor:pointer; border:1px solid transparent}
.dcell--on-file{background:var(--success-tint); color:var(--success); border-color:var(--success)}
.dcell--missing{background:var(--danger-tint); color:var(--danger); border-color:var(--danger)}
.dcell--expired{background:var(--warning-tint); color:var(--warning-700); border-color:var(--warning-700)}
.dcell--not-required{background:var(--paper); color:var(--ink-400); border-color:var(--border-strong)}

/* Signature block for a printed register. */
.sig{display:flex; gap:28px; margin-top:22px}
.sig>div{flex:1}
.sigline{border-bottom:1px solid var(--ink-900); height:26px; margin-top:16px}

/* ------------------------------------------------ large tappable controls ---
 * A teacher marks a register one-handed while standing up. 44px is the floor,
 * not the aspiration. These exist so pages never shrink a target to fit. */
.chip--lg{height:auto; min-height:44px; padding:0 16px; font-size:15px}
.chip--lg .dot{width:12px; height:12px}

/* Attendance code buttons. The letter carries the meaning; colour reinforces
   it; the row also prints the word. Never colour alone. */
.code-set{display:flex; gap:6px; flex-wrap:wrap}
.code-btn{appearance:none; -webkit-appearance:none; font:inherit; font-weight:700;
  font-size:16px; cursor:pointer; width:46px; height:46px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border-strong)}
.code-btn--off{background:var(--card); color:var(--ink-500); border-color:var(--border-strong)}
.code-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--primary-600)}

/* Big picker rows — choosing a learner or a class on a phone. */
.picker{appearance:none; display:flex; align-items:center; gap:12px; width:100%;
  min-height:60px; padding:10px 12px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-ctl); font:inherit; font-size:15px; text-align:left;
  color:var(--ink-900); cursor:pointer}
.picker.is-on{border-color:var(--primary-600); box-shadow:inset 0 0 0 1px var(--primary-600)}

/* One learner, one set of codes. */
.reg{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--border)}
.reg:last-child{border-bottom:0}

/* A phone number is a thumb target, not a link. */
.telbtn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border-radius:var(--r-ctl); border:1px solid var(--primary-600); color:var(--primary-700);
  background:var(--primary-100); font-size:15px; font-weight:600; text-decoration:none}

/* ================================================================= PRINT ===
 * Every statutory register must print in a form an inspector accepts. */
.print-only{display:none}
@media print{
  body{background:var(--print-paper); font-size:11pt}
  .side,.topbar,.phone__nav,.no-print,.btn,.tabs{display:none !important}
  .print-only{display:block}
  .hub,.main,.content{display:block; padding:0; max-width:none}
  .card{border:1px solid var(--print-box); box-shadow:none; break-inside:avoid; page-break-inside:avoid}
  .table th{border-bottom:1.5px solid var(--print-rule)}
  .table td{border-bottom:1px solid var(--print-rule-soft)}
  .code{border:1px solid var(--print-box); background:var(--print-paper) !important; color:var(--print-ink) !important}
  a{color:var(--print-ink); text-decoration:none}
  .print-head{display:block; margin-bottom:14px; border-bottom:2px solid var(--print-rule); padding-bottom:8px}
  /* A page with several registers on it prints ONE of them. The print button marks
     which block is active; .pb-hide is the on-screen working view. */
  .pb-hide{display:none !important}
  .print-only[data-pb]{display:none}
  .print-only[data-pb].pb-active{display:block}
  .matrix .stick{position:static}
  .tablewrap{overflow:visible}
  .dcell{border:1px solid var(--print-box); background:var(--print-paper) !important; color:var(--print-ink) !important}
  @page{margin:14mm}
}

/* The daily register lives on a phone but still has to print. Drop the phone
   frame entirely so the paper carries the register, not a screenshot of one. */
@media print{
  .phone-page{display:block; padding:0; background:var(--card)}
  .phone{width:auto; max-width:none; min-height:0; border-radius:0; box-shadow:none;
    background:var(--card); display:block}
  .phone__bar,.phone__head,.sheet-scrim,.modal-scrim{display:none !important}
  .phone__body{padding:0; overflow:visible}
}

@media (max-width:900px){
  .side{display:none}
  .content{padding:18px}
}