/* ============================================================
   Fable Homework · app.css

   The Fable v2.2 token system, extended with the pieces this app
   needs: the upload review grid, the results table, the attempt
   replay, and the solve animations.

   Light and dark are both first class. Light is parchment with
   forest ink and amber for action. Dark is a deep forest room
   built for evening classes, not an inversion of the light one.
   The board keeps the same two colours in both, so the position
   reads identically whichever theme a child is in.
   ============================================================ */

:root{
  /* brand constants, identical in both themes */
  /* The brand kit's palette (Brand Kit v1.1, 1.3_Colour and Tokens):
     four primaries and four support colours, nothing else. The
     working names below (mint, coral, sky, violet) are kept so no
     screen had to change, but each is now a brand colour: mint is
     Board Green, coral is Terracotta, sky is Slate, violet is Sage. */
  --amber:#FFB813; --forest:#123524; --parchment:#FBF6EA; --ink:#0B0B0B;
  --board-green:#3F6B4F; --terracotta:#B84E2A; --sage:#B7CBAE; --slate:#4E6B78;
  --sans:"Jost","Century Gothic",Futura,-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:"Newsreader",Lora,Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px; --s6:38px; --s7:56px; --s8:80px;
  --e-out:cubic-bezier(.22,.8,.3,1); --e-spring:cubic-bezier(.18,.9,.28,1.3);

  /* The board keeps its own colours in both themes on purpose, so
     a position reads the same whether the child is in light or
     dark. The overlays are amber and red in every board theme
     for the same reason. */
  --sq-light:#F0E7D0; --sq-dark:#547B5B;
  --sq-sel:rgba(255,184,19,.52); --sq-last:rgba(255,184,19,.30);
  --sq-check:rgba(214,74,44,.80); --sq-hint:rgba(15,26,16,.30);
  --sq-good:rgba(63,107,79,.55); --sq-bad:rgba(184,78,42,.55);
  --co-dark:#38503B; --co-light:#FFF9EA;
}

/* ---------- board colour schemes ----------
   Set on the root element as data-board. Each one only moves the
   two square colours, the edge, and the two coordinate inks, so
   nothing else in the design has to know a board theme exists. */
[data-board="slate"]{
  --sq-light:#FFFFFF; --sq-dark:#AAAAAA; --sq-edge:#666666;
  --co-dark:#5C5C5C; --co-light:#FFFFFF; --sq-hint:rgba(20,20,20,.28);
}
[data-board="wood"]{
  --sq-light:#EDD6B0; --sq-dark:#B07E4E; --sq-edge:#8A5F37;
  --co-dark:#7A5230; --co-light:#FBEFDC;
}
[data-board="ocean"]{
  --sq-light:#DEE8F1; --sq-dark:#6E94BF; --sq-edge:#5B7FA6;
  --co-dark:#41597A; --co-light:#F2F7FC;
}

:root, [data-theme="light"]{
  color-scheme:light;
  --bg:#FBF6EA; --bg-2:#F3ECDA; --surface:#FFFDF6; --surface-2:#F7F1E2; --surface-3:#EFE6D0;
  --rule:#DBD2BC; --rule-soft:#EAE2CE;
  --text:#123524; --text-2:#2F4A3B; --muted:#4C5C52; --faint:#526457;
  --on-accent:#221A03; --accent:#FFB813; --accent-2:#FFC53D; --accent-ink:#7E5703;
  --accent-wash:rgba(255,184,19,.16); --accent-line:rgba(214,150,10,.42);
  --mint:#3F6B4F; --mint-ink:#2C5139; --mint-wash:rgba(63,107,79,.13); --mint-line:rgba(63,107,79,.36);
  --coral:#B84E2A; --coral-ink:#8F3A1E; --coral-wash:rgba(184,78,42,.11); --coral-line:rgba(184,78,42,.34);
  --sky:#4E6B78; --sky-ink:#3A5360; --sky-wash:rgba(78,107,120,.13); --sky-line:rgba(78,107,120,.34);
  --violet:#7E9A73; --violet-ink:#4A6342; --violet-wash:rgba(183,203,174,.34); --violet-line:rgba(126,154,115,.45);
  --sq-edge:#C9BCA1; --track:rgba(20,39,29,.09); --hover:rgba(20,39,29,.05);
  --shadow-2:0 4px 14px -4px rgba(30,45,35,.13),0 1px 3px rgba(30,45,35,.05);
  --shadow-3:0 22px 48px -18px rgba(30,45,35,.26);
  --ring:0 0 0 3px rgba(255,184,19,.34);
  --ground-top:rgba(18,53,36,.05); --ground-fade:rgba(18,53,36,0);
  --weave:url("/brand/tile-board-parchment.svg");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B1F16; --bg-2:#0E2519; --surface:#123524; --surface-2:#173F2B; --surface-3:#1D4A33;
    --rule:#2A5238; --rule-soft:#1F4430;
    --text:#F1ECDD; --text-2:#CBD8CE; --muted:#A0B4A6; --faint:#98AD9F;
    --on-accent:#1A1300; --accent:#FFB813; --accent-2:#FFC948; --accent-ink:#FFC53D;
    --accent-wash:rgba(255,184,19,.13); --accent-line:rgba(255,184,19,.36);
    --mint:#6FA784; --mint-ink:#A3CFB2; --mint-wash:rgba(111,167,132,.16); --mint-line:rgba(111,167,132,.40);
    --coral:#D9774F; --coral-ink:#F2B49A; --coral-wash:rgba(217,119,79,.15); --coral-line:rgba(217,119,79,.40);
    --sky:#7F9FAD; --sky-ink:#B6CDD7; --sky-wash:rgba(127,159,173,.16); --sky-line:rgba(127,159,173,.40);
    --violet:#B7CBAE; --violet-ink:#D2E0CB; --violet-wash:rgba(183,203,174,.14); --violet-line:rgba(183,203,174,.38);
    --sq-edge:#2A3B2C; --track:rgba(255,255,255,.09); --hover:rgba(255,255,255,.055);
    --shadow-2:0 6px 20px -6px rgba(0,0,0,.5); --shadow-3:0 24px 60px -18px rgba(0,0,0,.68);
    --ring:0 0 0 3px rgba(255,184,19,.30);
    --ground-top:rgba(18,53,36,.55); --ground-fade:rgba(8,23,15,0);
    --weave:url("/brand/tile-board-forest.svg");
  }
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1F16; --bg-2:#0E2519; --surface:#123524; --surface-2:#173F2B; --surface-3:#1D4A33;
  --rule:#2A5238; --rule-soft:#1F4430;
  --text:#F1ECDD; --text-2:#CBD8CE; --muted:#A0B4A6; --faint:#98AD9F;
  --on-accent:#1A1300; --accent:#FFB813; --accent-2:#FFC948; --accent-ink:#FFC53D;
  --accent-wash:rgba(255,184,19,.13); --accent-line:rgba(255,184,19,.36);
  --mint:#6FA784; --mint-ink:#A3CFB2; --mint-wash:rgba(111,167,132,.16); --mint-line:rgba(111,167,132,.40);
  --coral:#D9774F; --coral-ink:#F2B49A; --coral-wash:rgba(217,119,79,.15); --coral-line:rgba(217,119,79,.40);
  --sky:#7F9FAD; --sky-ink:#B6CDD7; --sky-wash:rgba(127,159,173,.16); --sky-line:rgba(127,159,173,.40);
  --violet:#B7CBAE; --violet-ink:#D2E0CB; --violet-wash:rgba(183,203,174,.14); --violet-line:rgba(183,203,174,.38);
  --sq-edge:#2A3B2C; --track:rgba(255,255,255,.09); --hover:rgba(255,255,255,.055);
  --shadow-2:0 6px 20px -6px rgba(0,0,0,.5); --shadow-3:0 24px 60px -18px rgba(0,0,0,.68);
  --ring:0 0 0 3px rgba(255,184,19,.30);
  --ground-top:rgba(18,53,36,.55); --ground-fade:rgba(8,23,15,0);
  --weave:url("/brand/tile-board-forest.svg");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
/* The page colour lives on html, so the brand tile (body::before)
   can sit behind everything rather than over anything that is not
   positioned: the tile is opaque, unlike the old faint weave. */
body{
  margin:0; background:transparent; color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:24px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  /* Never a flat rectangle of colour: the brand's quiet board tile. */
  background-image:linear-gradient(180deg,var(--ground-top),var(--ground-fade) 42%),var(--weave);
  background-size:auto, 136px 136px;
}
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
a{ color:inherit; } a.btn{ text-decoration:none; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--ring); border-radius:var(--r-sm);
}

/* ---------- chrome ---------- */
.appbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:var(--s3);
  padding:10px var(--s4); background:var(--surface); border-bottom:1px solid var(--rule);
  box-shadow:var(--shadow-2); flex-wrap:nowrap;
}
.appbar > *{ flex:0 0 auto; }
/* Hidden means hidden. Without this, any rule that sets display
   (label.f is a grid) quietly overrides the hidden attribute, and
   the sign in page showed both its boxes at once: a child who
   typed into the second one was refused with the right password. */
[hidden]{ display:none !important; }
.brand{ display:flex; align-items:center; gap:var(--s2); color:inherit; text-decoration:none; }
.brand b{ font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:-.01em; }
.brand .sub{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
/* The logo, from the brand kit's files: never retyped. The primary
   version on light, the reversed one on dark, the mark alone when
   the bar is narrow. */
.brand img{ display:block; height:32px; width:auto; }
.brand .logo-dark, .brand .logo-icon{ display:none; }
[data-theme="dark"] .brand .logo-light{ display:none; }
[data-theme="dark"] .brand .logo-full.logo-dark{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo-light{ display:none; }
  :root:not([data-theme="light"]) .brand .logo-full.logo-dark{ display:block; }
}
@media (max-width:560px){
  .brand .logo-full{ display:none !important; }
  .brand .logo-icon.logo-light{ display:block; }
  [data-theme="dark"] .brand .logo-icon.logo-light{ display:none; }
  [data-theme="dark"] .brand .logo-icon.logo-dark{ display:block; }
}
[data-theme="dark"] body::before{ opacity:.55; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body::before{ opacity:.55; } }
.crest{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--forest),#1d4f35); color:var(--amber);
  font-family:var(--serif); font-weight:600; font-size:16px; flex:0 0 auto;
}
.spacer{ flex:1 1 auto; min-width:0; }
.icon-btn{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  border:1px solid transparent; color:var(--muted);
}
.icon-btn:hover{ background:var(--hover); color:var(--text); }
.icon-btn svg{ width:18px; height:18px; }
.whoami{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); min-width:0; }
.whoami > *{ flex:0 0 auto; }
.whoami .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; flex:0 1 auto; }

/* Wraps rather than scrolls. A row that scrolls with its bar
   hidden leaves the last tabs off the edge, where a mouse cannot
   find them; a manager has twelve. Phones use the bar below. */
.nav{
  position:sticky; top:53px; z-index:29; display:flex; flex-wrap:wrap; gap:2px;
  padding:8px var(--s4); background:var(--bg); border-bottom:1px solid var(--rule-soft);
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }
.nav button{
  padding:7px 14px; border-radius:var(--r-pill); font-size:14px; font-weight:600;
  color:var(--muted); white-space:nowrap;
}
.nav button:hover{ background:var(--hover); color:var(--text); }
.nav button[aria-current="true"]{ background:#4A3A30; color:#FFFFFF; }   /* cocoa, the same as the academy menu */
[data-theme="dark"] .nav button[aria-current="true"]{ background:var(--accent); color:var(--on-accent); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav button[aria-current="true"]{ background:var(--accent); color:var(--on-accent); }
}

/* ---------- layout ---------- */
.page{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:var(--s5) var(--s4) var(--s8); }
.page.narrow{ max-width:760px; }
.stack{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); }
.stack > .btn, .stack > .pill{ justify-self:start; }
.row{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.grid{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.split{ display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr) 320px; align-items:start; }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:var(--s2); }
h1.big{ font-family:var(--serif); font-size:clamp(25px,4.6vw,34px); line-height:1.12; font-weight:600; letter-spacing:-.02em; }
h2.sec{ font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em; margin-bottom:var(--s3); }
.muted{ color:var(--muted); } .faint{ color:var(--faint); font-size:13px; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------- card ---------- */
.card{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--shadow-2); }
.card.flat{ box-shadow:none; background:var(--surface-2); }
.card h3{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.card-head{ display:flex; align-items:center; gap:var(--s3); padding-bottom:var(--s3); border-bottom:1px solid var(--rule-soft); margin-bottom:var(--s3); }

.hero{
  background:linear-gradient(150deg,var(--forest),#1b4b33 65%,#20573b);
  color:var(--parchment); border-radius:22px; padding:var(--s5);
  box-shadow:var(--shadow-3); position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,184,19,.20),transparent 68%);
}
.hero .eyebrow{ color:rgba(251,246,234,.62); }
.hero h1{ font-family:var(--serif); font-size:clamp(23px,4.4vw,31px); font-weight:600; line-height:1.15; letter-spacing:-.02em; }
.hero p{ color:rgba(251,246,234,.82); margin-top:var(--s2); max-width:58ch; }
.hero .btn.primary{ background:var(--amber); color:#221A03; }
.hero .btn{ background:transparent; border-color:rgba(251,246,234,.34); color:var(--parchment); }
.hero .btn:hover{ background:rgba(251,246,234,.12); }

/* ---------- buttons ---------- */
.btn{
  white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--r-pill); font-weight:650; font-size:14px;
  border:1px solid var(--rule); background:var(--surface); color:var(--text);
  transition:transform .12s var(--e-out), background .15s, border-color .15s;
}
.btn:hover{ background:var(--hover); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:0 2px 10px -2px rgba(214,150,10,.45); }
.btn.primary:hover{ background:var(--accent-2); }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.btn.ghost:hover{ color:var(--text); background:var(--hover); }
.btn.danger{ border-color:var(--coral-line); color:var(--coral-ink); background:var(--coral-wash); }
.btn.sm{ padding:7px 13px; font-size:13px; }
.btn.lg{ padding:14px 24px; font-size:15px; }
.btn.block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn svg{ width:16px; height:16px; }

/* ---------- action lane ---------- */
.lane{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s2); }
.act{
  display:flex; align-items:center; gap:var(--s3); width:100%; text-align:left;
  padding:13px var(--s4); border-radius:var(--r); border:1px solid var(--rule);
  background:var(--surface); transition:border-color .15s, background .15s, transform .12s var(--e-out);
}
.act:hover{ border-color:var(--accent-line); background:var(--hover); }
.act:active{ transform:translateY(1px); }
.act .ic{ width:36px; height:36px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent-ink); }
.act .ic svg{ width:18px; height:18px; }
.act .tx{ flex:1 1 auto; min-width:0; }
.act .t{ display:block; font-weight:650; font-size:15px; }
.act .m{ display:block; font-size:13px; color:var(--muted); }
.act .go{ color:var(--faint); flex:0 0 auto; }
.act.mint .ic{ background:var(--mint-wash); color:var(--mint-ink); }
.act.coral .ic{ background:var(--coral-wash); color:var(--coral-ink); }
.act.sky .ic{ background:var(--sky-wash); color:var(--sky-ink); }
.act.violet .ic{ background:var(--violet-wash); color:var(--violet-ink); }

/* ---------- pills, stats, lists ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill);
  font-size:12px; font-weight:650; background:var(--surface-3); color:var(--text-2); border:1px solid var(--rule-soft);
}
.pill.mint{ background:var(--mint-wash); color:var(--mint-ink); border-color:var(--mint-line); }
.pill.coral{ background:var(--coral-wash); color:var(--coral-ink); border-color:var(--coral-line); }
.pill.amber{ background:var(--accent-wash); color:var(--accent-ink); border-color:var(--accent-line); }
.pill.sky{ background:var(--sky-wash); color:var(--sky-ink); border-color:var(--sky-line); }
.pill.violet{ background:var(--violet-wash); color:var(--violet-ink); border-color:var(--violet-line); }
.stat{ display:grid; gap:2px; }
.stat .n{ font-family:var(--serif); font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.stat .l{ font-size:12px; color:var(--muted); }
.av{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font-size:13px; font-weight:700; color:#fff; background:var(--forest); }
.av.lg{ width:52px; height:52px; font-size:19px; }
.list{ display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.li{ display:flex; align-items:center; gap:var(--s3); padding:12px var(--s4); background:var(--surface); text-align:left; width:100%; }
.li:hover{ background:var(--hover); }
.li .tx{ flex:1 1 auto; min-width:0; }
.li .t{ display:block; font-weight:600; }
.li .m{ display:block; font-size:13px; color:var(--muted); }

/* ---------- forms ---------- */
label.f{ display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--text-2); }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],textarea,select{
  width:100%; padding:11px 14px; border-radius:var(--r); font:inherit; font-size:15px;
  background:var(--surface); color:var(--text); border:1px solid var(--rule);
}
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--accent-line); box-shadow:var(--ring); }
textarea{ min-height:92px; resize:vertical; line-height:23px; font-family:var(--mono); font-size:13px; }
.err{ color:var(--coral-ink); font-size:13px; font-weight:600; }
.ok{ color:var(--mint-ink); font-size:13px; font-weight:600; }
.drop{
  border:2px dashed var(--rule); border-radius:var(--r-lg); padding:var(--s6) var(--s4);
  text-align:center; background:var(--surface-2); transition:border-color .15s, background .15s;
}
.drop.over{ border-color:var(--accent); background:var(--accent-wash); }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; cursor:pointer; }
.check input{ width:18px; height:18px; margin-top:3px; accent-color:var(--accent); flex:none; }

/* ---------- board ----------

   One painted surface, not sixty four. The conic gradient tile
   is two squares by two squares, repeated four times each way,
   so the checker is drawn by the browser as a single background
   with no seams however awkward the board width is. The square
   divs on top are transparent: they carry the hit area, the
   highlights and the coordinate labels only. */
.boardwrap{ max-width:min(560px, 100%); width:100%; }
.board{
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  aspect-ratio:1; width:100%;
  border-radius:var(--r); overflow:hidden; border:1px solid var(--sq-edge); box-shadow:var(--shadow-3);
  touch-action:manipulation; user-select:none; position:relative;
  background-image:conic-gradient(
    var(--sq-dark)  0deg  90deg,
    var(--sq-light) 90deg 180deg,
    var(--sq-dark)  180deg 270deg,
    var(--sq-light) 270deg 360deg);
  background-size:25% 25%;
}
/* min-width and min-height of zero matter: without them a grid
   item refuses to shrink below the size of the piece inside it
   and the eight rows stop being equal. That is what a board with
   pieces on the back ranks and nothing in the middle looks like
   when it goes wrong. */
.sq{
  position:relative; display:grid; place-items:center; background:transparent;
  min-width:0; min-height:0;
}
.sq.sel::after{ content:""; position:absolute; inset:0; background:var(--sq-sel); }
.sq.last::after{ content:""; position:absolute; inset:0; background:var(--sq-last); }
.sq.chk::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle,var(--sq-check),transparent 72%); }
.sq.mk-good::after{ content:""; position:absolute; inset:0; background:var(--sq-good); }
.sq.mk-bad::after{ content:""; position:absolute; inset:0; background:var(--sq-bad); }
.sq svg{ width:100%; height:100%; position:relative; z-index:2; pointer-events:none; }
.sq .hint{ width:26%; height:26%; border-radius:50%; background:rgba(12,18,14,.62); z-index:1;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.78); }
/* A dot is dark in the middle and light round the edge, so it shows
   on the light and the dark squares of every board colour. */
.sq .hint.cap{ width:88%; height:88%; background:none; border:5px solid rgba(12,18,14,.55); box-sizing:border-box; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.7), inset 0 0 0 2px rgba(255,255,255,.7); }
.co{ position:absolute; font-size:9px; font-weight:700; z-index:3; opacity:.72; font-family:var(--mono); }
.co.f{ right:3px; bottom:1px; } .co.r{ left:3px; top:1px; }
.sq.l .co{ color:var(--co-dark); } .sq.d .co{ color:var(--co-light); }
.pc{ width:100%; height:100%; position:relative; z-index:3; cursor:grab; line-height:0; }
.pc svg{ width:100%; height:100%; display:block; pointer-events:none; }
.pc.drag{ position:fixed; z-index:999; pointer-events:none; cursor:grabbing; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.board.shake{ animation:shake .34s var(--e-out); }

/* the promotion chooser, over the square the pawn is going to */
.promoscrim{ position:absolute; inset:0; z-index:39; background:rgba(8,20,13,.42); }
.promo{
  position:absolute; z-index:40; width:12.5%; display:grid;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--shadow-3);
}
.promo button{ aspect-ratio:1; display:grid; place-items:center; padding:0; border-bottom:1px solid var(--rule-soft); }
.promo button:last-child{ border-bottom:0; }
.promo button:hover{ background:var(--accent-wash); }
.promo svg{ width:88%; height:88%; display:block; }
@keyframes shake{ 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(5px)} 50%{transform:translateX(-5px)} }
.mini{
  width:100%; aspect-ratio:1;
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--sq-edge);
  background-image:conic-gradient(
    var(--sq-dark)  0deg  90deg,
    var(--sq-light) 90deg 180deg,
    var(--sq-dark)  180deg 270deg,
    var(--sq-light) 270deg 360deg);
  background-size:25% 25%;
}
.mini .sq svg{ width:100%; height:100%; }
.mini .co{ display:none; }

/* ---------- the solve strip ---------- */
.strip{ display:flex; gap:5px; flex-wrap:wrap; }
.strip i{
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-style:normal;
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:var(--surface-3); color:var(--faint); border:1px solid var(--rule-soft);
}
.strip i.solved{ background:var(--mint); color:#062A1B; border-color:transparent; }
.strip i.failed{ background:var(--coral); color:#2B0A03; border-color:transparent; }
.strip i.now{ box-shadow:var(--ring); background:var(--accent-wash); color:var(--accent-ink); border-color:var(--accent-line); }

/* ---------- attempt budget ---------- */
.budget{ display:flex; gap:4px; align-items:center; }
.budget i{ width:9px; height:9px; border-radius:50%; background:var(--mint); display:block; }
.budget i.spent{ background:var(--track); }
.budget.low i{ background:var(--coral); }

/* ---------- the results table ---------- */
.tw{ overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); }
table.res{ border-collapse:collapse; width:100%; min-width:640px; }
table.res th,table.res td{ text-align:left; padding:11px var(--s3); border-bottom:1px solid var(--rule-soft); font-size:14px; vertical-align:middle; }
table.res th{ font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); font-family:var(--mono); white-space:nowrap; }
table.res tbody tr:hover{ background:var(--hover); cursor:pointer; }
table.res tbody tr:last-child td{ border-bottom:0; }
table.res td.n{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- the puzzle result cards, as in the reference ---------- */
.cards{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); }
.rescard{ border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.rescard .hd{ padding:6px var(--s3); background:var(--surface-3); font-family:var(--mono); font-size:12px; font-weight:500; text-align:center; color:var(--text-2); }
.rescard.solved .hd{ background:var(--mint-wash); color:var(--mint-ink); }
.rescard.failed .hd{ background:var(--coral-wash); color:var(--coral-ink); }
.rescard .bd{ padding:var(--s3); display:grid; gap:var(--s2); }
.rescard .turn{ display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.rescard .turn .dot{ width:11px; height:11px; border-radius:50%; border:1px solid var(--sq-edge); }
.rescard .turn .dot.w{ background:var(--sq-light); } .rescard .turn .dot.b{ background:#1A1A1A; }
.rescard .ans{ font-family:var(--mono); font-size:12px; line-height:1.45; color:var(--text-2); word-break:break-word; }
.metrics{ display:flex; gap:var(--s3); justify-content:space-between; padding:7px var(--s3); background:var(--surface-2); border-radius:var(--r-sm); font-family:var(--mono); font-size:12px; }
.metrics span{ display:inline-flex; align-items:center; gap:5px; }
.metrics .bad{ color:var(--coral-ink); } .metrics .good{ color:var(--mint-ink); }
.attempt{ border-radius:var(--r-sm); padding:8px 10px; font-family:var(--mono); font-size:12px; line-height:1.5; display:flex; gap:var(--s3); justify-content:space-between; align-items:flex-start; }
.attempt.right{ background:var(--mint-wash); color:var(--mint-ink); border:1px solid var(--mint-line); }
.attempt.wrong{ background:var(--surface-2); color:var(--muted); border:1px solid var(--rule-soft); }
.attempt .t{ flex:none; opacity:.8; }

/* ---------- the move replay ---------- */
.replay{ display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.mv{ display:grid; grid-template-columns:34px 1fr 74px 62px; gap:var(--s3); align-items:center; padding:9px var(--s3); background:var(--surface); font-family:var(--mono); font-size:13px; }
.mv .i{ color:var(--faint); font-size:11px; }
.mv .s{ font-weight:500; }
.mv.good .s{ color:var(--mint-ink); } .mv.bad .s{ color:var(--coral-ink); } .mv.rep .s{ color:var(--muted); font-style:italic; }
.mv .t{ text-align:right; color:var(--text-2); }
.mv .bar{ height:6px; border-radius:3px; background:var(--track); overflow:hidden; }
.mv .bar i{ display:block; height:100%; background:var(--sky); border-radius:3px; }
.mv.bad .bar i{ background:var(--coral); }

/* ---------- review grid after an upload ---------- */
.review{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); }
.rev{ border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.rev.off{ opacity:.6; filter:saturate(.45); }
.rev.bad{ border-color:var(--coral-line); }
.rev .hd{ display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--surface-3); font-size:12px; }
.rev .hd .n{ font-family:var(--mono); color:var(--muted); }
.rev .bd{ padding:10px; display:grid; gap:7px; }
.rev .ln{ font-family:var(--mono); font-size:11.5px; line-height:1.45; color:var(--text-2); word-break:break-word; }
.rev .why{ font-size:11.5px; line-height:1.45; color:var(--coral-ink); }
.rev .note{ font-size:11.5px; line-height:1.45; color:var(--muted); font-style:italic; }

/* ---------- empty, skeleton, toast ---------- */
.empty{ text-align:center; padding:var(--s7) var(--s4); color:var(--muted); }
.empty .big{ font-family:var(--serif); font-size:19px; color:var(--text); margin-bottom:6px; }
.skel{ background:var(--surface-3); border-radius:var(--r); height:68px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.55 } }
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
  background:var(--forest); color:var(--parchment); padding:11px 18px; border-radius:var(--r-pill);
  font-size:14px; font-weight:600; z-index:120; box-shadow:var(--shadow-3);
  opacity:0; transition:opacity .2s, transform .2s var(--e-out); max-width:90vw; text-align:center;
}
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.bad{ background:var(--coral); color:#fff; }

/* ---------- modal ---------- */
.scrim{ position:fixed; inset:0; background:rgba(8,20,13,.62); z-index:100; }
.modal{
  position:fixed; z-index:101; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,94vw); max-height:88vh; overflow:auto;
  background:var(--surface); border-radius:20px; box-shadow:var(--shadow-3); border:1px solid var(--rule);
}
.modal .mh{ display:flex; align-items:center; gap:var(--s3); padding:var(--s4); border-bottom:1px solid var(--rule-soft); position:sticky; top:0; background:var(--surface); }
.modal .mh h3{ font-family:var(--serif); font-size:19px; font-weight:600; }
.modal .mb{ padding:var(--s4); display:grid; gap:var(--s3); }
.modal .mf{ display:flex; gap:var(--s3); justify-content:flex-end; padding:var(--s4); border-top:1px solid var(--rule-soft); position:sticky; bottom:0; background:var(--surface); }
.picker{ max-height:240px; overflow:auto; border:1px solid var(--rule); border-radius:var(--r); }
.picker label{ display:flex; gap:10px; align-items:center; padding:9px var(--s3); border-bottom:1px solid var(--rule-soft); font-size:14px; cursor:pointer; }
.picker label:last-child{ border-bottom:0; }
.picker label:hover{ background:var(--hover); }
/* The row of weeks on a child's own screen. Its own style rather
   than the one from the finish overlay, which is drawn light
   because it sits on a dark scrim and would vanish on a card.
   The current week is outlined whether or not it is filled, so a
   week still running never reads as a week already missed. */
.weekdots{ display:flex; gap:5px; justify-content:flex-end; margin-top:6px; }
.weekdots i{ width:11px; height:11px; border-radius:3px; background:var(--rule); display:block; }
.weekdots i.on{ background:var(--mint); }
.weekdots i.now{ box-shadow:0 0 0 2px var(--accent-line); }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:8px 14px; border-radius:var(--r-pill); font-size:14px; font-weight:650;
  border:1px solid var(--rule); background:var(--surface); color:var(--text-2);
  min-height:40px;
}
.chip:hover{ background:var(--hover); color:var(--text); }
.chip.on{ background:var(--forest); color:var(--parchment); border-color:transparent; }
[data-theme="dark"] .chip.on{ background:var(--accent); color:var(--on-accent); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chip.on{ background:var(--accent); color:var(--on-accent); }
}

/* ============================================================
   The Fable moments
   Short, chess shaped, skippable. One per event, never stacked.
   ============================================================ */
.fx{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; pointer-events:none; }
.fx .scrimfx{ position:absolute; inset:0; background:rgba(8,20,13,.55); animation:fade .22s both; }
@keyframes fade{ from{ opacity:0 } }

/* the glyph stamp: !! for a first try, ! for a solve, # for mate */
.glyphwrap{ position:relative; display:grid; place-items:center; }
.glyph{
  font-family:var(--serif); font-weight:600; color:var(--amber); line-height:1;
  font-size:clamp(76px,17vw,150px); letter-spacing:-.04em;
  text-shadow:0 10px 40px rgba(0,0,0,.45);
  animation:stamp .5s var(--e-spring) both;
}
.glyph.mint{ color:var(--mint); } .glyph.sky{ color:var(--sky); }
@keyframes stamp{ 0%{ transform:scale(.3) rotate(-9deg); opacity:0 } 60%{ transform:scale(1.14) rotate(2deg); opacity:1 } 100%{ transform:scale(1) rotate(0) } }
.rays{ position:absolute; inset:-70px; pointer-events:none; }
.rays i{
  position:absolute; left:50%; top:50%; width:3px; height:54px; border-radius:2px;
  background:linear-gradient(to top,transparent,var(--amber));
  transform-origin:50% 100%; animation:ray .72s var(--e-out) both;
}
@keyframes ray{ 0%{ transform:rotate(var(--a)) translateY(-14px) scaleY(.2); opacity:0 } 40%{ opacity:1 } 100%{ transform:rotate(var(--a)) translateY(-104px) scaleY(1); opacity:0 } }
.fxcap{
  margin-top:var(--s4); text-align:center; color:var(--parchment);
  font-family:var(--serif); font-size:23px; font-weight:600; letter-spacing:-.01em;
  animation:rise .4s .12s var(--e-out) both; text-wrap:balance; max-width:20ch;
}
.fxsub{ margin-top:6px; text-align:center; color:rgba(251,246,234,.72); font-size:14px; animation:rise .4s .2s var(--e-out) both; }
@keyframes rise{ from{ transform:translateY(12px); opacity:0 } }

/* the king topples on a mate */
.king{ font-size:clamp(84px,19vw,168px); line-height:1; color:var(--parchment); animation:topple 1s .12s var(--e-out) both; transform-origin:50% 92%; }
@keyframes topple{ 0%{ transform:rotate(0) } 55%{ transform:rotate(-8deg) } 100%{ transform:rotate(74deg) translateX(14px) } }

/* the finish sequence */
.finish{ pointer-events:auto; display:grid; place-items:center; gap:var(--s4); padding:var(--s5); text-align:center; }
.seal{
  width:112px; height:112px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%,var(--accent-2),var(--accent) 58%,#C98F06);
  color:#2A1F02; font-family:var(--serif); font-size:52px; line-height:1;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.6), inset 0 -4px 14px rgba(0,0,0,.18);
  animation:seal .62s var(--e-spring) both;
}
@keyframes seal{ 0%{ transform:scale(.2) rotate(-25deg); opacity:0 } 70%{ transform:scale(1.1) rotate(6deg) } 100%{ transform:scale(1) rotate(0); opacity:1 } }
.bigscore{ font-family:var(--serif); font-size:clamp(44px,10vw,74px); font-weight:600; color:var(--parchment); line-height:1; letter-spacing:-.03em; }
.bigscore small{ font-size:.42em; color:rgba(251,246,234,.6); font-weight:400; }
.finline{ color:var(--parchment); font-size:17px; max-width:34ch; line-height:1.5; animation:rise .4s .3s var(--e-out) both; }
.finsub{ color:rgba(251,246,234,.7); font-size:14px; animation:rise .4s .4s var(--e-out) both; }
.finstrip{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; animation:rise .4s .5s var(--e-out) both; }
.finstrip i{ width:11px; height:11px; border-radius:3px; background:rgba(251,246,234,.22); display:block; }
.finstrip i.on{ background:var(--mint); }
.finstrip i.off{ background:var(--coral); }
.confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti i{ position:absolute; top:-16px; width:7px; height:11px; border-radius:1px; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(110vh) rotate(560deg); opacity:0 } }

/* the answer plays itself when the attempts run out */
.teach{ pointer-events:auto; background:var(--surface); border:1px solid var(--coral-line); border-radius:var(--r-lg); padding:var(--s4); display:grid; gap:var(--s3); }
.teach h4{ font-family:var(--serif); font-size:17px; font-weight:600; }

[data-motion="reduced"] .glyph,[data-motion="reduced"] .rays i,[data-motion="reduced"] .seal,
[data-motion="reduced"] .king,[data-motion="reduced"] .fxcap,[data-motion="reduced"] .fxsub,
[data-motion="reduced"] .finline,[data-motion="reduced"] .finsub,[data-motion="reduced"] .finstrip,
[data-motion="reduced"] .confetti{ animation:none !important; }
[data-motion="reduced"] .confetti{ display:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .confetti{ display:none; }
}

/* ============================================================
   Phone and tablet

   Three shapes, one stylesheet.

     desktop     the top row of tabs, board and panel side by side
     tablet      the same, narrower, board and panel still side by
                 side down to 820px
     phone       tabs move to a bar under the thumb, the results
                 table becomes a stack of cards, and the board
                 takes the full width

   The phone layout is not the desktop one squeezed. A child does
   homework on a phone held in one hand, so the things they touch
   most are at the bottom and everything is at least 44 pixels of
   target.
   ============================================================ */

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .page{ padding:var(--s4) var(--s4) var(--s8); }
  .split{ gap:var(--s4); grid-template-columns:minmax(0,1fr) 300px; }
  .cards{ grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); }
  .review{ grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); }
}
@media (max-width:860px){
  .split{ grid-template-columns:minmax(0,1fr); }
  .boardwrap{ max-width:min(560px,100%); margin-inline:auto; }
}

/* ---------- the bar under the thumb ----------
   Hidden above 720px, where the top row of tabs does the job. */
.tabbar{ display:none; }

@media (max-width:720px){
  /* chrome */
  .appbar{ padding:8px var(--s3); gap:var(--s2); top:env(safe-area-inset-top, 0px); }
  .appbar .brand b{ font-size:16px; }
  .brand .sub{ display:none; }
  .whoami .nm{ display:none; }
  .whoami .pill{ display:none; }
  #btn-out{ display:none; }          /* it lives in settings on a phone */
  .nav{ display:none; }              /* replaced by the bar below */

  .page{
    padding:var(--s4) var(--s3);
    padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .page.narrow{ max-width:100%; }

  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:35;
    background:var(--surface); border-top:1px solid var(--rule);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -6px 22px -12px rgba(0,0,0,.35);
  }
  .tabbar button{
    flex:1 1 0; min-width:0; display:grid; justify-items:center; gap:3px;
    padding:6px 2px; border-radius:var(--r); color:var(--faint);
    font-size:11px; font-weight:650; line-height:14px; min-height:52px;
  }
  .tabbar button svg{ width:22px; height:22px; }
  .tabbar button span{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .tabbar button[aria-current="true"]{ color:var(--accent-ink); background:var(--accent-wash); }

  /* type and spacing */
  h1.big{ font-size:clamp(23px,6.4vw,28px); }
  h2.sec{ font-size:18px; }
  .hero{ padding:var(--s4); border-radius:16px; }
  .hero h1{ font-size:clamp(21px,5.8vw,26px); }
  .card{ padding:var(--s3); border-radius:var(--r-lg); }
  .grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s2); }
  .stat .n{ font-size:24px; }

  /* every target a thumb has to hit */
  .btn{ min-height:44px; padding:11px 18px; }
  .btn.sm{ min-height:40px; }
  .act{ padding:14px var(--s3); min-height:62px; }
  .icon-btn{ width:40px; height:40px; }
  .li{ padding:14px var(--s3); min-height:60px; flex-wrap:wrap; }
  /* A student row carries two buttons now, Report and New
     password, and three things plus an avatar do not fit across
     a phone. The buttons drop to their own line and share it. */
  .li .tx{ flex:1 1 100%; order:2; }
  .li > .btn{ order:3; flex:1 1 0; min-width:0; justify-content:center; }
  .li > .av{ order:1; }
  /* A card head that carries a long button, such as "Send Ananya
     these 2 again", is wider than a phone, and the whole page
     then scrolls sideways by the difference. The button drops to
     its own line instead. This one is not new: it predates the
     register and shows up on the coach's results screen. */
  .card-head{ flex-wrap:wrap; }
  .card-head > .btn{ flex:1 1 100%; justify-content:center; }

  /* Everything else in a row has an order, so anything without
     one lands at the front. That put the three attendance chips
     above the child's name, which is a register you tap before
     you have read who it is. The chips go under the name and
     share the width, which also makes them thumb sized. */
  .li > .chips{ order:3; flex:1 1 100%; }
  .li > .chips .chip{ flex:1 1 0; min-width:0; text-align:center; }
  /* Same reason: the Came, Late and Missed word on a parent's
     register row belongs beside the date, not above it. */
  .li > .pill{ order:3; }
  .picker label{ padding:12px var(--s3); min-height:48px; }
  .check input{ width:22px; height:22px; }
  input[type=text],input[type=email],input[type=password],input[type=number],
  input[type=date],select,textarea{ font-size:16px; min-height:46px; }  /* 16px stops iOS zooming on focus */

  /* the board takes the room it needs */
  .boardwrap{ max-width:100%; }
  .board{ border-radius:var(--r-sm); }
  .co{ font-size:8px; }

  /* the results table becomes a stack of cards */
  .tw{ border:0; background:transparent; overflow:visible; }
  table.res{ min-width:0; width:100%; display:block; }
  table.res thead{ display:none; }
  table.res tbody{ display:grid; gap:var(--s2); }
  table.res tr{
    display:grid; grid-template-columns:1fr auto; gap:6px var(--s3);
    background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
    padding:var(--s3);
  }
  table.res td{ border:0; padding:0; font-size:14px; }
  table.res td:first-child{ grid-column:1 / -1; }
  table.res td:not(:first-child)::before{
    content:attr(data-label) "  ";
    color:var(--faint); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
    font-family:var(--mono); margin-right:6px;
  }
  table.res td:empty{ display:none; }
  table.res td:last-child{ justify-self:end; }
  table.res td:last-child::before{ content:none; }

  /* the puzzle cards and the review grid */
  .cards{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s2); }
  .review{ grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:var(--s2); }
  .rescard .bd,.rev .bd{ padding:8px; gap:6px; }
  .metrics{ padding:6px 8px; font-size:11px; gap:6px; }
  .attempt{ font-size:11px; padding:6px 8px; }

  /* the move replay */
  .mv{ grid-template-columns:26px minmax(0,1fr) 58px; gap:var(--s2); padding:10px var(--s3); }
  .mv .bar{ display:none; }

  /* modals become sheets that rise from the bottom */
  .modal{
    top:auto; bottom:0; left:0; transform:none; width:100%;
    max-height:90dvh; border-radius:20px 20px 0 0;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    animation:sheet .26s var(--e-out);
  }
  @keyframes sheet{ from{ transform:translateY(16px); opacity:0 } }
  .modal .mf{ flex-direction:column-reverse; }
  .modal .mf .btn{ width:100%; }
  .chip{ min-height:44px; }

  /* the solve animations */
  .fxcap{ font-size:20px; }
  .seal{ width:92px; height:92px; font-size:44px; }
}

/* very small, or a phone in landscape with almost no height */
@media (max-width:380px){
  .page{ padding-inline:var(--s2); }
  .tabbar button{ font-size:10px; }
  .grid{ grid-template-columns:1fr 1fr; }
}
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding:var(--s3); }
  .tabbar{ padding-bottom:2px; }
  .tabbar button{ min-height:44px; }
}

/* ---------- installed as an app ----------
   When it opens from the home screen there is no browser bar, so
   the top of the page is the top of the screen. */
@media (display-mode:standalone){
  .appbar{ padding-top:calc(10px + env(safe-area-inset-top, 0px)); }
}

/* ================================================================
   The monthly report

   This section has one job the rest of the stylesheet does not:
   it has to look right on paper. A coach will print it, attach
   it to an email, and a parent will read it on a phone screen or
   on an A4 sheet on the kitchen table. So the page is built as a
   sheet with real margins, and the print rules at the bottom
   take away everything that is not the report.
   ================================================================ */

.reportwrap{ max-width:900px; margin-inline:auto; width:100%; }

.sheet{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); overflow:hidden;
}
.sheethead{
  padding:var(--s5) var(--s5) var(--s4);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom:1px solid var(--rule-soft);
}
.sheethead .big{ margin:6px 0 2px; }
.brandline{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.brandline .mark{ font-size:17px; color:var(--accent-ink); letter-spacing:0; }

.stamp{
  flex:0 0 auto; display:grid; place-items:center; text-align:center;
  min-width:96px; padding:12px 14px;
  border:1px solid var(--accent-line); border-radius:var(--r);
  background:var(--accent-wash);
}
.stamp .n{ font-family:var(--serif); font-size:30px; line-height:1; font-weight:600; color:var(--text); }
.stamp .l{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

.sheetbody{ padding:var(--s5); display:grid; gap:var(--s4); }
.sheetbody > *{ margin:0; }
.sheetbody .lede{
  font-family:var(--serif); font-size:19px; line-height:1.55; color:var(--text);
}
.sheetbody p{ color:var(--text-2); line-height:1.65; max-width:68ch; }
.sheetbody .sec{ margin-top:var(--s3); }

.move{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px; border-radius:var(--r); background:var(--surface-2);
  border:1px solid var(--rule-soft); font-size:14px; color:var(--text-2);
}
.move svg{ flex:0 0 auto; margin-top:2px; color:var(--muted); }

/* the four numbers */
.figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.fig{
  padding:var(--s3); border:1px solid var(--rule-soft); border-radius:var(--r);
  background:var(--surface-2); text-align:center;
}
.fig .n{ display:block; font-family:var(--serif); font-size:22px; font-weight:600; color:var(--text); }
.fig .l{ display:block; font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.35; }

/* a theme, its bar, and the word that matters */
.themes{ display:grid; gap:7px; }
.th{
  display:grid; grid-template-columns:minmax(120px,1.25fr) minmax(70px,2fr) 52px 96px;
  align-items:center; gap:10px; font-size:14px;
}
.th .tl{ font-weight:600; color:var(--text); }
.th .tb{ height:8px; border-radius:var(--r-pill); background:var(--track); overflow:hidden; }
.th .tb i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--muted); }
.th .tb i[data-tone="sage"]{ background:var(--mint); }
.th .tb i[data-tone="amber"]{ background:var(--accent); }
.th .tb i[data-tone="coral"]{ background:var(--coral); }
.th .tv{ font-family:var(--mono); font-size:12.5px; color:var(--muted); text-align:right; }
.th .tg{
  justify-self:start; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap;
  border:1px solid var(--rule); color:var(--muted); background:var(--surface-2);
}
.th .tg[data-tone="sage"]{ color:var(--mint-ink); background:var(--mint-wash); border-color:var(--mint-line); }
.th .tg[data-tone="amber"]{ color:var(--accent-ink); background:var(--accent-wash); border-color:var(--accent-line); }
.th .tg[data-tone="coral"]{ color:var(--coral-ink); background:var(--coral-wash); border-color:var(--coral-line); }

.box.next{
  padding:var(--s4); border-radius:var(--r);
  background:var(--accent-wash); border:1px solid var(--accent-line);
}
.box.next h3{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 6px; }
.box.next p{ color:var(--text); max-width:none; }

/* the two boards */
.twoup{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.poscard{
  padding:var(--s4); border:1px solid var(--rule-soft); border-radius:var(--r);
  background:var(--surface-2); display:grid; gap:10px; justify-items:start;
  align-content:start;
}
.poscard h3{ font-size:14px; font-weight:700; color:var(--text); margin:0; }
/* A grid rather than a flex row on purpose. Two cards side by
   side are stretched to the same height, and a flex child would
   take that extra height with it, which pulls the board out of
   square and puts the pieces a fraction off their squares. */
.poscard .pb{ width:100%; display:grid; justify-items:center; align-items:start; }
.poscard .pb .board{ align-self:start; }
.poscard .ans{ font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--text-2); max-width:none; }
.poscard .ans b{ font-family:var(--sans); }
.poscard .faint{ font-size:12.5px; }

/* the sets */
.setlist{ display:grid; gap:2px; }
.setrow{
  display:grid; grid-template-columns:58px minmax(0,1fr) 52px 66px;
  gap:10px; align-items:center; padding:7px 10px; border-radius:var(--r-sm);
  font-size:13.5px; color:var(--text-2);
}
.setrow:nth-child(odd){ background:var(--surface-2); }
.setrow .d{ font-size:12px; color:var(--muted); }
.setrow .n{ font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.setrow .s, .setrow .m{ font-family:var(--mono); font-size:12.5px; text-align:right; color:var(--muted); }

.thin{ font-size:12.5px; }
.sheetfoot{
  padding:var(--s4) var(--s5) var(--s5);
  border-top:1px solid var(--rule-soft); background:var(--surface-2);
}
.sheetfoot p{ font-size:12px; line-height:1.6; max-width:none; }

label.f.inline{ display:flex; align-items:center; gap:8px; font-size:12px; margin:0; }
select.mon{
  width:auto; min-width:160px; padding:7px 10px; font-size:13px; font-weight:600;
  border-radius:var(--r-pill); border:1px solid var(--rule);
  background:var(--surface-2); color:var(--text);
}

@media (max-width:720px){
  .figs{ grid-template-columns:1fr 1fr; }
  .twoup{ grid-template-columns:1fr; }
  .sheetbody, .sheethead{ padding:var(--s4); }
  .sheetfoot{ padding:var(--s4); }
  .th{ grid-template-columns:minmax(0,1fr) 46px 90px; row-gap:4px; }
  .th .tb{ grid-column:1 / -1; order:3; }
  .setrow{ grid-template-columns:50px minmax(0,1fr) 44px; }
  .setrow .m{ display:none; }
}

/* ---------- on paper ----------
   Everything that is not the report comes off the page, the
   colours are forced so a browser does not helpfully remove
   them, and nothing is allowed to break across two sheets in
   the middle of a thought. */
@media print{
  @page{ size:A4; margin:14mm 13mm; }

  html, body{ background:#fff !important; }
  body::before{ display:none !important; }   /* the paper weave is for screens */
  .appbar, .nav, .tabbar, .noprint, .toast, .modal, .scrim, .demobar{ display:none !important; }
  .page{ padding:0 !important; max-width:none !important; }
  .reportwrap{ max-width:none; }

  .sheet{
    border:0; border-radius:0; box-shadow:none; background:#fff;
  }
  .sheethead{ background:#fff; padding:0 0 10mm; border-bottom:1px solid #d8d2c4; }
  .sheetbody{ padding:8mm 0 0; gap:6mm; }
  .sheetfoot{ background:#fff; padding:6mm 0 0; border-top:1px solid #e2ddd0; }

  .sheetbody .lede{ font-size:15pt; }
  .sheetbody p{ font-size:10.5pt; }
  .fig .n{ font-size:16pt; }
  .stamp{ background:#fff; border:1px solid #d8d2c4; }

  .box.next, .fig, .move, .poscard, .setrow, .th .tg, .th .tb i{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .sec, .box.next, .poscard, .twoup, .themes{ break-inside:avoid; page-break-inside:avoid; }
  h2.sec{ break-after:avoid; page-break-after:avoid; }
  .setrow:nth-child(odd){ background:#f6f3ea; }
  a[href]:after{ content:""; }

  /* A4 at 96dpi is about 700 pixels wide once the margins are
     off, which trips the phone rules further up this file. On
     paper that is wrong: the sheet is a page, not a phone, and
     stacking everything turns a two page report into four. So
     the desktop shape is put back here, a little tighter. */
  .figs{ grid-template-columns:repeat(4,1fr); gap:4mm; }
  .fig{ padding:3mm 2mm; }
  .fig .l{ font-size:8pt; }

  .th{
    grid-template-columns:minmax(0,1.2fr) minmax(40px,1.45fr) 40px 100px;
    gap:6px; font-size:10pt;
  }
  .th .tb{ grid-column:auto; order:0; }
  .th .tv{ font-size:9pt; }
  .th .tg{ font-size:8pt; padding:2px 7px; }

  .twoup{ grid-template-columns:1fr 1fr; gap:5mm; }
  .poscard{ padding:4mm; }
  .poscard .board{ max-width:52mm !important; }
  .poscard .ans{ font-size:9pt; }
  .poscard .faint{ font-size:8.5pt; }
  .chips .chip{ font-size:8.5pt; padding:2px 8px; min-height:0; }

  .setrow{ grid-template-columns:52px minmax(0,1fr) 44px 58px; font-size:9.5pt; padding:4px 8px; }
  .setrow .m{ display:block; }
  .sheetfoot p{ font-size:8.5pt; }
}

/* ================================================================
   Practice

   The child's own corner. It has to feel different from
   homework: no budget counting down, no deadline, more air.
   ================================================================ */

.themegrid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.themecard{
  display:grid; gap:6px; justify-items:start; text-align:left; width:100%;
  padding:var(--s4); cursor:pointer;
  transition:transform .16s var(--e-out), border-color .16s;
}
.themecard:hover{ transform:translateY(-2px); border-color:var(--accent-line); }
.themecard .ic{ color:var(--accent-ink); display:block; }
.themecard .tt{ font-weight:650; font-size:15px; color:var(--text); }
.themecard .tn{ font-size:12.5px; color:var(--muted); font-family:var(--mono); }

/* Twenty one days. A gap is a gap; it is not coloured red. */
.dots{ display:flex; gap:4px; flex-wrap:wrap; }
.dots i{
  width:11px; height:11px; border-radius:4px; background:var(--track);
  display:block; flex:0 0 auto;
}
.dots i.on{ background:var(--mint); box-shadow:0 0 0 2px var(--mint-wash); }

@media (max-width:720px){
  .themegrid{ grid-template-columns:1fr 1fr; }
  .themecard{ padding:var(--s3); }
  .themecard .tt{ font-size:14px; }
  .dots i{ width:9px; height:9px; }
}

/* ============================================================
   The live class
   ============================================================ */
.page.wide{ max-width:1320px; }
input[type=search]{
  width:100%; padding:11px 13px; border-radius:var(--r); border:1px solid var(--rule);
  background:var(--surface); color:var(--text); font:inherit;
}

/* The coach's drawing on the board. Arrows sit above the pieces
   and never take a tap, so the board underneath still works. */
.board .arrows{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }
.board .arrows .al{ stroke:rgba(224,69,58,.85); stroke-width:.16; stroke-linecap:round; }
.board .arrows .ah{ fill:rgba(224,69,58,.85); }
/* The five drawing colours: red, yellow, blue, purple, pink. */
.board .arrows .al-red{ stroke:rgba(224,69,58,.85); }     .board .arrows .ah-red{ fill:rgba(224,69,58,.85); }
.board .arrows .al-yellow{ stroke:rgba(245,190,20,.92); } .board .arrows .ah-yellow{ fill:rgba(245,190,20,.92); }
.board .arrows .al-blue{ stroke:rgba(40,110,235,.85); }   .board .arrows .ah-blue{ fill:rgba(40,110,235,.85); }
.board .arrows .al-purple{ stroke:rgba(140,70,220,.85); } .board .arrows .ah-purple{ fill:rgba(140,70,220,.85); }
.board .arrows .al-pink{ stroke:rgba(232,80,160,.85); }   .board .arrows .ah-pink{ fill:rgba(232,80,160,.85); }
.sq.drawfrom::before{ content:""; position:absolute; inset:0; z-index:1; box-shadow:inset 0 0 0 3px rgba(20,20,20,.35); pointer-events:none; }
/* A highlighted square is a ring and a hatch, not only a colour,
   so it still reads to a child who cannot tell the tint apart. */
.sq.hl::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  --hc:224,69,58;
  box-shadow:inset 0 0 0 4px rgba(var(--hc),.9);
  background:repeating-linear-gradient(45deg,rgba(var(--hc),.28) 0 5px,rgba(var(--hc),.12) 5px 11px);
}
.sq.hl-yellow::before{ --hc:245,190,20; } .sq.hl-blue::before{ --hc:40,110,235; }
.sq.hl-purple::before{ --hc:140,70,220; } .sq.hl-pink::before{ --hc:232,80,160; }
/* Pawns only: every other piece fades back. */
.board.focus-pawns .pc.dim{ opacity:.14; filter:grayscale(1); }
.sq.kb::before{ content:""; position:absolute; inset:2px; z-index:5; pointer-events:none;
  outline:3px solid var(--sky); outline-offset:-3px; border-radius:3px; }
.board-say, .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Choosing what a pawn becomes */
.promoscrim{ position:absolute; inset:0; z-index:8; background:rgba(10,24,16,.35); }
.promo{ position:absolute; z-index:9; width:12.5%; display:grid; grid-template-rows:repeat(4,1fr); height:50%;
  background:var(--surface); box-shadow:var(--shadow-3); border-radius:6px; overflow:hidden; }
.promo button{ border:0; background:var(--surface); padding:6%; cursor:pointer; }
.promo button:hover, .promo button:focus-visible{ background:var(--accent-wash); }
.promo button svg{ width:100%; height:100%; display:block; }

/* The room: board in the middle, everything else beside it */
.room{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,420px); gap:var(--s4); align-items:start; }
.room .stagewrap{ max-width:min(640px,100%); margin:0 auto; }
/* The class board grows to the height of the screen, with the five
   drawing colours in a column beside it; on a phone it takes the full
   width and the colours sit in a row above it. */
.room .stagerow{ display:flex; gap:10px; align-items:flex-start; justify-content:center; }
.room .stagerow .stagewrap{ flex:1 1 auto; min-width:0; max-width:min(100%, calc(100dvh - 290px), 820px); margin:0; }
.colours{ display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid rgba(0,0,0,.12); cursor:pointer; padding:0; }
.swatch[aria-checked="true"]{ box-shadow:0 0 0 3px var(--card, #fff), 0 0 0 5px var(--ink, #1c2a22); }
.sw-red{ background:#E0453A; } .sw-yellow{ background:#F5BE14; } .sw-blue{ background:#286EEB; }
.sw-purple{ background:#8C46DC; } .sw-pink{ background:#E850A0; }
.stepbar{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.stepbar .btn{ min-width:52px; min-height:44px; }
.palette{ margin:10px 0; }
.palette .pal{ width:40px; height:40px; border:1px solid var(--line, #ddd); border-radius:8px; background:var(--card, #fff); padding:3px; cursor:pointer; font-size:18px; }
.palette .pal svg{ width:100%; height:100%; }
.palette .pal.on{ outline:2px solid var(--forest, #1F5B3F); outline-offset:1px; }
@media (max-width:700px){
  .room .stagerow{ flex-direction:column-reverse; align-items:stretch; }
  .room .stagerow .stagewrap{ max-width:100%; }
  .colours{ flex-direction:row; justify-content:center; padding:0; }
}
.room .side .card{ position:sticky; top:72px; max-height:calc(100vh - 96px); overflow:auto; }
@media (max-width:1000px){
  .room{ grid-template-columns:minmax(0,1fr); }
  .room .side .card{ position:static; max-height:none; }
}

.netbar, .modebar{ display:flex; gap:10px; align-items:center; padding:10px 14px; border-radius:var(--r);
  font-size:14px; font-weight:600; border:1px solid var(--rule); background:var(--surface-2); color:var(--text-2); }
.netbar{ background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent-ink); }
.modebar.mint{ background:var(--mint-wash); border-color:var(--mint-line); color:var(--mint-ink); }
.modebar.sky{ background:var(--sky-wash); border-color:var(--sky-line); color:var(--sky-ink); }
.modebar.coral{ background:var(--coral-wash); border-color:var(--coral-line); color:var(--coral-ink); }
.netbar[hidden]{ display:none; }

.toolbar{ display:grid; gap:8px; }
.toolbar .btn[aria-pressed="true"]{ outline:2px solid var(--forest); outline-offset:1px; }
.movelist{ display:flex; flex-wrap:wrap; gap:2px 4px; font-family:var(--mono); font-size:14px; line-height:1.9; }
.movelist .mvno{ color:var(--faint); margin-left:4px; }
.movelist .cmv{ display:inline; width:auto;  border:0; background:none; color:var(--text); font:inherit; padding:0 5px; border-radius:5px; cursor:pointer; }
.movelist span.cmv{ cursor:default; }
.movelist .cmv.here{ background:var(--forest); color:var(--parchment); font-weight:700; }
.movelist button.cmv:hover{ background:var(--hover); }
.movelist button.cmv.here:hover{ background:var(--forest); }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--rule-soft); margin:calc(-1 * var(--s2)) 0 0; flex-wrap:wrap; }
.tab{ border:0; background:none; padding:10px 12px; font:inherit; font-weight:600; color:var(--muted);
  border-bottom:3px solid transparent; cursor:pointer; display:flex; gap:6px; align-items:center; }
.tab.on{ color:var(--text); border-bottom-color:var(--accent); }
.tab .cnt{ font-size:12px; background:var(--surface-3); border-radius:999px; padding:1px 7px; color:var(--text-2); }

.filters{ display:grid; gap:8px; }
.filters select{ flex:1 1 8rem; min-width:0; }
.puz{ display:grid; grid-template-columns:auto 88px minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:8px; border:1px solid var(--rule-soft); border-radius:var(--r); background:var(--surface); }
.puz.on{ border-color:var(--forest); box-shadow:inset 3px 0 0 var(--forest); }
.puz .tx .t{ display:block; font-weight:600; overflow-wrap:anywhere; }
.puz .tx .m{ display:block; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.puz .pick input{ width:20px; height:20px; }
.assignbar{ position:sticky; top:0; z-index:2; }
.samples{ display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; margin-top:var(--s3); }
.problems{ margin:8px 0 0 18px; font-size:13px; max-height:220px; overflow:auto; }
.problems li{ margin:3px 0; overflow-wrap:anywhere; }

.tablewrap{ overflow-x:auto; margin-top:8px; }
table.grid{ border-collapse:collapse; width:100%; font-size:13px; display:table; }
table.grid th .btn{ white-space:nowrap; }
table.grid th, table.grid td{ border:1px solid var(--rule-soft); padding:6px; text-align:center; vertical-align:top; }
table.grid th[scope=row]{ text-align:left; font-weight:600; white-space:nowrap; }
.cell{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:7px; font-weight:800;
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--rule-soft); }
.cell.mint{ background:var(--mint-wash); color:var(--mint-ink); border-color:var(--mint-line); }
.cell.coral{ background:var(--coral-wash); color:var(--coral-ink); border-color:var(--coral-line); }
.cell.amber{ background:var(--accent-wash); color:var(--accent-ink); border-color:var(--accent-line); }
.tiny{ font-size:11px; }
.hero.live{ outline:3px solid var(--amber); outline-offset:2px; }
@media (max-width:720px){
  .puz{ grid-template-columns:auto 64px minmax(0,1fr); }
  .puz > .btn{ grid-column:2 / -1; justify-self:start; }
}

/* ---------- questions to the whole class ----------
   Colours from the theme's own families: gold for the clock and
   the points, board green for right, terracotta for wrong, and sage, board green and terracotta
   for the visualisation levels. White and black moves are white and
   black chips in either theme, like the pieces. */
.quiz{ margin:0; border-top:4px solid var(--accent); }
.quiz.closed{ border-top-color:var(--mint); }
.qhead{ gap:8px; flex-wrap:wrap; align-items:center; }
.qnum{ font-family:var(--serif); font-size:22px; font-weight:600; }
.qkind{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--r-pill); font-size:13px; font-weight:600; border:1px solid; white-space:nowrap; }
.qkind.find{ background:var(--accent-wash); color:var(--accent-ink); border-color:var(--accent-line); }
.qkind.lv1{ background:var(--violet-wash); color:var(--violet-ink); border-color:var(--violet-line); }
.qkind.lv2{ background:var(--mint-wash); color:var(--mint-ink); border-color:var(--mint-line); }
.qkind.lv3{ background:var(--coral-wash); color:var(--coral-ink); border-color:var(--coral-line); }
.qclock{ display:inline-flex; align-items:center; gap:10px; padding:6px 12px; border-radius:var(--r-pill); background:var(--forest); color:var(--parchment); }
[data-theme="dark"] .qclock{ background:var(--surface-3); color:var(--text); }
.qclock .qt{ font-family:var(--mono); font-size:20px; font-weight:600; min-width:3.2em; text-align:center; }
.qclock .qbar{ width:90px; height:8px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden; }
.qclock .qbar i{ display:block; height:100%; background:var(--amber); border-radius:99px; transition:width .25s linear; }
.qclock.low{ background:var(--coral); color:#fff; }
.qclock.low .qbar i{ background:#fff; }
.qsum{ gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.qcount{ font-weight:700; padding:2px 10px; border-radius:var(--r-pill); }
.qcount.mint{ background:var(--mint-wash); color:var(--mint-ink); }
.qcount.coral{ background:var(--coral-wash); color:var(--coral-ink); }
.qcount.amber{ background:var(--accent-wash); color:var(--accent-ink); }
.qanswer{ font-size:14px; }
.qgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; margin-top:14px; }
.qtile{ border:1.5px solid var(--rule); border-radius:var(--r); padding:10px; background:var(--surface); display:grid; gap:8px; align-content:start; }
.qtile.thinking{ border-color:var(--accent-line); }
.qtile.solved{ border-color:var(--mint); background:linear-gradient(0deg, var(--mint-wash), var(--mint-wash)), var(--surface); }
.qtile.missed, .qtile.timeout{ border-color:var(--coral-line); }
.qtile-head{ gap:6px; align-items:center; min-width:0; }
.qtile-head b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.qtile-head .pill{ font-size:12px; padding:1px 8px; }
.qdot{ width:9px; height:9px; border-radius:50%; background:var(--rule); flex:none; }
.qdot.on{ background:var(--mint); box-shadow:0 0 0 3px var(--mint-wash); }
.qmini{ width:100%; }
.qmini .board{ border-radius:8px; }
.qstats{ display:flex; gap:10px; align-items:center; font-size:12.5px; font-family:var(--mono); white-space:nowrap; }
.qstats .ok{ color:var(--mint-ink); font-weight:600; } .qstats .no{ color:var(--coral-ink); font-weight:600; }
.qstats .pts{ margin-left:auto; color:var(--accent-ink); font-size:15px; }
.qtries{ display:flex; flex-wrap:wrap; gap:4px; }
.qtries span{ font-family:var(--mono); font-size:12px; padding:1px 7px; border-radius:6px; border:1px solid; }
.qtries .ok{ background:var(--mint-wash); color:var(--mint-ink); border-color:var(--mint-line); }
.qtries .no{ background:var(--coral-wash); color:var(--coral-ink); border-color:var(--coral-line); text-decoration:line-through; }
.qtable{ margin-top:16px; }
.qtable ol{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; }
.qtable li{ display:grid; grid-template-columns:28px minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:6px 10px; border-radius:var(--r-sm); background:var(--surface-2); }
.qtable .rk{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--surface-3); color:var(--text); }
.qtable li.top1 .rk{ background:var(--amber); color:var(--on-accent); }
.qtable li.top2 .rk{ background:#C9CED6; color:#1c232b; }
.qtable li.top3 .rk{ background:#D9A066; color:#2b1a08; }
.qtable .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studentq .qbody{ display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:var(--s4); margin-top:12px; align-items:start; position:relative; }
.qboard{ width:100%; }
.qside{ display:grid; gap:10px; align-content:start; }
.qfb{ border-radius:var(--r); padding:10px 12px; font-weight:500; border:1px solid; }
.qfb.ok{ background:var(--mint-wash); color:var(--mint-ink); border-color:var(--mint-line); }
.qfb.bad{ background:var(--coral-wash); color:var(--coral-ink); border-color:var(--coral-line); }
.qfb.info{ background:var(--sky-wash); color:var(--sky-ink); border-color:var(--sky-line); }
.qreveal{ border-radius:var(--r); padding:10px 12px; background:var(--accent-wash); border:1px solid var(--accent-line); }
.quiz .confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.quiz{ position:relative; }
.askform .chips{ flex-wrap:wrap; }
.askform .chip.lv1.on{ background:var(--sage); color:var(--forest); } .askform .chip.lv2.on{ background:var(--board-green); color:var(--parchment); } .askform .chip.lv3.on{ background:var(--terracotta); color:var(--parchment); }

.qgo{ justify-self:stretch !important; justify-content:center; font-size:17px; padding:12px; }
.viz-moves{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-family:var(--mono); }
.viz-moves .n{ color:var(--muted); font-size:.85em; margin-left:4px; }
.viz-moves .mv{ display:inline-block; padding:3px 9px; border-radius:8px; font-weight:600; }
.viz-moves .mv.w{ background:#FFFFFF; color:#14271D; border:1px solid #CFC6B1; }
.viz-moves .mv.b{ background:#1C2A22; color:#F5F0E3; border:1px solid #1C2A22; }
[data-theme="dark"] .viz-moves .mv.b{ border-color:#5D7466; }
.viz-moves .q{ display:inline-grid; place-items:center; min-width:40px; padding:3px 10px; border-radius:8px; font-weight:800; background:var(--accent); color:var(--on-accent); }
.viz-moves.big{ font-size:20px; gap:8px; }
.viz-turn{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; }
.viz-turn .dot{ width:15px; height:15px; border-radius:50%; flex:none; }
.viz-turn .dot.w{ background:#fff; border:1.5px solid #9C9281; } .viz-turn .dot.b{ background:#1C2A22; border:1.5px solid #1C2A22; }
.viz-input{ font-family:var(--mono); font-size:19px; letter-spacing:.04em; flex:1; min-width:0; }
@media (max-width:720px){
  .studentq .qbody{ grid-template-columns:minmax(0,1fr); }
  .qgrid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .qclock .qbar{ width:60px; }
}