@import url('/css/buddy.css');
/* Identity comes from the dev. mark: its slate, and the green dot, which is
   the one accent that recurs on every page. The four design-cycle colours
   (A blue, B green, C yellow, D red) are kept for status only. */
:root {
  --ink: #16222e;
  --ink-2: #24384a;
  --dot: #72dc5f;
  --head: var(--ink);
  --text: #24324d;
  --muted: #5d6b85;
  --paper: #f3f5f9;
  --surface: #ffffff;
  --line: #d8dee9;
  --a: #2f74b5;
  --a-dark: #245d94;
  --b: #23915f;
  --c: #f2c230;
  --d: #dc4f2a;
  --display: 'Urbanist', 'Segoe UI', sans-serif;
  --body: 'Onest', 'Segoe UI', sans-serif;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; } /* a focused or linked element clears the sticky bar */
/* no 300 ms wait after a tap, and no grey flash on it: the controls give their own feedback */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.55 var(--body);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--display); color: var(--head); margin: 0; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 650; }
h3 { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--a-dark); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; border-radius: 4px; }
/* keyboard readers jump over the bar; the link shows only while it has focus */
.skip { position: absolute; left: 16px; top: -200px; z-index: 100; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: var(--r-s); font: 600 .9rem var(--body); text-decoration: none; }
.skip:focus-visible { top: 16px; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 0.95rem/1 var(--body);
  padding: 12px 18px; border-radius: var(--r-s);
  border: 1.5px solid var(--ink); background: var(--ink); color: #fff;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn:disabled { opacity: .55; cursor: default; }
/* while a request runs the button keeps its words and gains a small turning ring */
.btn.busy::after { content: ''; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busyTurn .7s linear infinite; }
@keyframes busyTurn { to { transform: rotate(360deg); } }
.btn.quiet { background: transparent; color: var(--head); border-color: var(--line); }
.btn.quiet:hover { border-color: var(--head); background: transparent; }
.btn.go { background: var(--b); border-color: var(--b); }
.btn.go:hover { background: #1c7a50; border-color: #1c7a50; }
.btn.danger { background: transparent; color: var(--d); border-color: #f0c4b7; }
.btn.danger:hover, .btn.danger.armed { background: var(--d); border-color: var(--d); color: #fff; }
.btn.small { padding: 8px 12px; font-size: .85rem; }
.btn.wide { width: 100%; padding: 14px 18px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--a-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.field { display: grid; gap: 6px; }
.field > span { font-size: .875rem; font-weight: 600; color: var(--head); }
.field small { color: var(--muted); font-size: .8rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select {
  width: 100%; font: 400 1rem var(--body); color: var(--head);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface);
}
/* a dropdown's list takes the page's colours, never those of its own bar: white words on a dark bar became white
   words on a white list (Chrome on Windows), and the other way round in the dark theme (owner, 2026-10-26) */
option, optgroup { color: var(--head); background-color: var(--surface); }
/* the light pages are light: a browser's own "dark mode for sites" must not darken them by force (the dark theme says dark) */
:root:not([data-theme=dark]) { color-scheme: only light; }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px rgba(47, 116, 181, .2); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--a); margin: 0; flex: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 99px; background: #e8ecf3; color: var(--ink-2); white-space: nowrap;
}
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
/* the branch beside a name on the dashboard (admin.js branchTag) */
.branch-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.chip.active, .chip.approved { background: #dff2e8; color: #156241; }
.chip.pending, .chip.unverified { background: #fdf1c7; color: #7a5a00; }
.chip.suspended, .chip.rejected, .chip.paused, .chip.ended { background: #fbe2da; color: #a23412; }
.chip.teacher { background: #e1ecf7; color: var(--a-dark); }

.notice { padding: 12px 14px; border-radius: var(--r-s); font-size: .92rem; background: #e1ecf7; color: #16222e; border-left: 4px solid var(--a); }
.notice.error { background: #fbe2da; border-color: var(--d); }
.notice.ok { background: #dff2e8; border-color: var(--b); }
.notice.wait { background: #fdf1c7; border-color: var(--c); }

.toasts { position: fixed; inset: auto 16px 16px auto; display: grid; gap: 8px; z-index: 90; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r-s); font-size: .92rem; box-shadow: 0 12px 30px rgba(22, 34, 46, .28); border-left: 4px solid var(--b); }
.toast.error { border-color: var(--d); }

/* The wordmark: the dev. logo image, then "Academy" set on its baseline. */
.brand { display: inline-flex; align-items: baseline; gap: .42em; font: 500 1.3rem var(--display); color: var(--head); text-decoration: none; letter-spacing: -0.01em; }
.brand img { height: 1.02em; width: auto; display: block; }
/* dev. Hub's official logo: its arrows stand above the letters, so it takes a taller box, centred on the bar */
.brand img.hub-logo { height: 1.7em; align-self: center; }
/* the Hub: every provider's logo beside it at the same size as the Hub's own (owner, 2026-10-26) */
.brand:has(img.hub-logo) .brand-school img { height: auto; width: calc(1.7em * 1336 / 456); max-width: none; max-height: 2.6em; }
/* Page titles end on the green dot, the same full stop as in the logo. */
.dot::after { content: '.'; color: var(--dot); }

/* ---------- sign-in ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.auth-form { display: flex; flex-direction: column; padding: 32px clamp(20px, 6vw, 88px) 40px; background: var(--surface); }
.auth-form .view { margin: auto 0; padding: 40px 0; max-width: 420px; width: 100%; display: grid; gap: 22px; }
.auth-form .view > p { color: var(--muted); }
.auth-form form { display: grid; gap: 16px; }
.auth-form .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .92rem; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.roles label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-s); cursor: pointer; font-weight: 600; color: var(--head); }
.roles label:has(input:checked) { border-color: var(--a); background: #eef4fb; }
.class-card { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-m); background: var(--ink); color: #fff; }
.class-card strong { font: 650 1.15rem var(--display); }
.class-card span { color: #b9c6dc; font-size: .9rem; }

.auth-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brand.big { font-size: clamp(1.9rem, 3vw, 2.5rem); }
/* fixed partner logos: small, quiet, top right of the white side */
.partners { display: flex; align-items: center; gap: 18px; }
.partners img { height: 30px; width: auto; display: block; }
.partners img + img { padding-left: 18px; border-left: 1px solid var(--line); box-sizing: content-box; }
.terms { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--text); line-height: 1.45; }
.terms input { margin-top: 2px; }
.sub-links { display: grid; gap: 8px; justify-items: start; font-size: .95rem; color: var(--muted); }

.auth-foot { display: grid; gap: 18px; max-width: 420px; }
.publisher { display: grid; gap: 2px; padding-top: 18px; border-top: 1px solid var(--line); }
.publisher span:first-child { font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.publisher strong { font: 700 1.15rem var(--display); color: var(--head); letter-spacing: -0.005em; }
.publisher span:last-child { font: 500 .9rem var(--display); color: var(--muted); }
/* in the publisher's block, to the right of the name: the Certified Educator badge, small, with the signature
   slanting across its lower third */
.auth-foot { position: relative; }
.credential { position: absolute; right: 22px; top: 16px; }
.credential img { display: block; width: auto; max-width: none; user-select: none; pointer-events: none; }
.credential .cred-badge { height: 56px; }
.credential .cred-sign { position: absolute; height: 26px; left: 50%; bottom: 2px; transform: translateX(-50%) rotate(-12deg); }
/* on a wide screen the badge stands in the white space to the right of the block, as far right as the white side
   allows (--cred-room is the block's width plus what the badge and the signature's tip need), and the signature
   climbs across it from its lower left corner, with a white edge so it reads over the badge */
@media (min-width: 1260px) {
  .credential { --cred-room: 504px; right: auto; left: calc(100% + clamp(8px, 48.78vw - min(5vw, 72px) - var(--cred-room), 170px)); top: 50%; transform: translateY(-50%); }
  .credential .cred-badge { height: 78px; }
  .credential .cred-sign { height: 34px; left: 22%; bottom: -18px; transform: rotate(-32deg); transform-origin: left bottom; filter: drop-shadow(0 0 .5px #0f1b2d) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff); }
}
@media (min-width: 1500px) {
  .credential { --cred-room: 524px; }
  .credential .cred-sign { height: 38px; left: 30%; bottom: -20px; }
}
.legal-line { font-size: .74rem; color: #8590a3; }
.legal-line a { color: inherit; }

.auth-art { position: relative; overflow: hidden; background: var(--ink); color: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 720px; }
.auth-art::before, .auth-art::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.auth-art::before { width: 520px; height: 520px; left: -330px; top: -330px; background: rgba(114, 220, 95, .18); }
.auth-art::after { width: 520px; height: 520px; left: -250px; top: -390px; background: rgba(114, 220, 95, .11); }
.auth-art > * { position: relative; }
.slogan-block { padding: clamp(40px, 6vw, 84px) clamp(28px, 5vw, 72px) 0; display: grid; gap: 22px; z-index: 1; }
.slogan { font: 800 clamp(3rem, 6.6vw, 6.2rem)/.98 var(--display); letter-spacing: -0.035em; color: #fff; display: grid; }
/* each line rises out of its own mask, one after the other */
.slogan span { display: block; overflow: hidden; padding-bottom: .08em; }
.slogan span b { display: block; font-weight: inherit; transform: translateY(110%); }
.slogan i { font-style: normal; color: var(--dot); }
.slogan-sub { font: 500 clamp(1.05rem, 1.5vw, 1.35rem)/1.4 var(--display); color: #b4c2cf; max-width: 24ch; opacity: 0; }
body.ready .slogan span b { animation: rise .8s cubic-bezier(.2, .8, .2, 1) forwards; }
body.ready .slogan span:nth-child(2) b { animation-delay: .16s; }
body.ready .slogan span:nth-child(3) b { animation-delay: .32s; }
body.ready .slogan-sub { animation: fade .8s .75s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }

.gears { position: absolute; right: -90px; bottom: 170px; width: min(48%, 400px); opacity: .9; }
.gears svg { width: 100%; height: auto; display: block; overflow: visible; }
.gears .spin { transform-box: fill-box; transform-origin: center; animation: turn 80s linear infinite; }
.gears .spin.fast { animation-duration: 40s; animation-direction: reverse; }
@keyframes turn { to { transform: rotate(360deg); } }

/* Programme logos travel round a ring; the pointer steers its speed and direction. */
.orbit { grid-row: 3; height: 150px; position: relative; perspective: 900px; border-top: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(rgba(22, 34, 46, .2), rgba(11, 18, 25, .85)); cursor: ew-resize; }
.orbit img { position: absolute; left: 50%; top: 50%; height: 44px; width: auto; will-change: transform, opacity; pointer-events: none; }

/* ---------- opening sequence (about six seconds, once per visit) ---------- */
.opening { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: #fff; display: grid; place-items: center; overflow: hidden; }
.opening::before { content: ''; position: absolute; width: 140vmax; height: 140vmax; border-radius: 50%; left: -95vmax; top: -95vmax; background: rgba(114, 220, 95, .12); animation: drift 6s ease-out forwards; }
@keyframes drift { to { transform: translate(8vmax, 8vmax); } }
.intro-logo { position: absolute; width: min(46vw, 420px); height: auto; animation: logoIn 1.3s cubic-bezier(.2, .8, .2, 1) both, logoUp .7s 1.35s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes logoIn { from { opacity: 0; transform: scale(.82); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes logoUp { to { transform: translateY(calc(-50vh + 56px)) scale(.3); } }
.intro-lines { display: grid; gap: clamp(6px, 2.2vh, 26px); padding: 0 24px; width: min(880px, 100%); margin-top: 40px; }
.intro-lines p { display: flex; align-items: center; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; overflow: hidden; }
.intro-lines b { font: 800 clamp(2.4rem, min(8vw, 13vh), 6rem)/1 var(--display); letter-spacing: -0.035em; transform: translateY(115%); animation: rise .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.intro-lines b i { font-style: normal; color: var(--dot); }
.intro-lines span { display: flex; align-items: center; gap: 18px; font: 500 clamp(.95rem, 1.5vw, 1.25rem) var(--display); color: #b4c2cf; opacity: 0; animation: fade .5s forwards; }
.intro-lines span img { height: clamp(24px, 3.4vw, 38px); width: auto; }
.intro-lines p:nth-child(1) b { animation-delay: 1.9s; } .intro-lines p:nth-child(1) span { animation-delay: 2.3s; }
.intro-lines p:nth-child(2) b { animation-delay: 2.9s; } .intro-lines p:nth-child(2) span { animation-delay: 3.3s; }
.intro-lines p:nth-child(3) b { animation-delay: 3.9s; } .intro-lines p:nth-child(3) span { animation-delay: 4.3s; }
.intro-end { position: absolute; bottom: 12vh; font: 500 clamp(1rem, 1.6vw, 1.3rem) var(--display); color: #fff; opacity: 0; animation: fade .6s 4.8s forwards; }
.intro-skip { position: absolute; right: 22px; bottom: 20px; background: none; border: 1px solid rgba(255, 255, 255, .25); color: #c9d4de; font: 500 .82rem var(--body); padding: 8px 12px; border-radius: var(--r-s); cursor: pointer; }
.intro-skip:hover { color: #fff; border-color: #fff; }
.opening.out { animation: curtain .65s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes curtain { to { transform: translateY(-100%); } }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { min-height: 0; }
  .gears { display: none; }
  .slogan-block { padding-bottom: 28px; }
  .orbit { height: 110px; }
  .orbit img { height: 32px; }
  .auth-form .view { padding: 28px 0; }
}

/* ---------- shared bits ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.logo { display: block; width: auto; }
.file-pick { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .88rem; color: var(--muted); min-width: 0; }
.file-pick:focus-within .btn { outline: 3px solid var(--c); outline-offset: 2px; }
.date-field { display: inline-flex; gap: 6px; }
.date-field select { width: auto; padding: 8px 8px; font-size: .86rem; }
textarea { width: 100%; font: 400 .95rem/1.5 var(--body); color: var(--head); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); resize: vertical; min-height: 84px; }
textarea:focus-visible { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px rgba(47, 116, 181, .2); }

.bell-wrap { position: relative; }
.bell { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--head); cursor: pointer; }
.bell:hover { border-color: var(--head); }
.bell b { position: absolute; top: -4px; right: -4px; min-width: 18px; padding: 2px 4px; border-radius: 99px; background: var(--d); color: #fff; font-size: .68rem; line-height: 1.2; text-align: center; }
.notes { position: absolute; right: 0; top: 48px; width: min(360px, calc(100vw - 32px)); max-height: 440px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 24px 50px -18px rgba(22, 34, 46, .4); padding: 14px; display: grid; gap: 4px; z-index: 30; color: var(--text); }
.notes > strong { font: 700 1rem var(--display); color: var(--head); padding: 2px 6px 8px; }
.notes > p { color: var(--muted); font-size: .9rem; padding: 6px; }
.note { display: grid; gap: 2px; padding: 10px; border-radius: var(--r-s); font-size: .88rem; color: var(--text); text-decoration: none; white-space: normal; }
a.note:hover { background: var(--paper); }
.note.new { background: #eefbea; box-shadow: inset 3px 0 0 var(--dot); }
.note-title { font-weight: 600; color: var(--head); }
/* a teacher's message keeps its lines, on the bell and in the list of what was sent */
.note > span:not(.note-title), .msg-text { white-space: pre-line; overflow-wrap: anywhere; }
.note small { color: var(--muted); }
.me { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 .95rem var(--display); box-shadow: inset 0 -3px 0 var(--dot); }
@media (max-width: 640px) { .me strong { display: none; } }

/* ---------- profile ---------- */
.profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.profile form, .profile .card { display: grid; gap: 16px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .93rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--head); font-weight: 600; overflow-wrap: anywhere; }



/* ---------- programmes ---------- */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.doors { perspective: 1200px; }
.door { --tone: var(--ink); position: relative; transform-style: preserve-3d; will-change: transform; animation: doorIn .7s cubic-bezier(.2, .8, .2, 1) backwards; display: grid; gap: 14px; align-content: start; padding: 18px 18px 20px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--tone); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.door:hover, .door:focus-visible { box-shadow: 0 26px 44px -22px rgba(22, 34, 46, .55); }
.door:nth-child(2) { animation-delay: .08s; } .door:nth-child(3) { animation-delay: .16s; } .door:nth-child(4) { animation-delay: .24s; }
@keyframes doorIn { from { opacity: 0; transform: translateY(40px) rotateX(-18deg); } }

.door .logo { height: 48px; max-width: 100%; object-fit: contain; object-position: left center; }
.door p { color: var(--muted); font-size: .92rem; }
.door .count { font-size: .86rem; font-weight: 600; color: var(--head); }
[data-programme=myp] { --tone: #e1251b; }
[data-programme=pyp] { --tone: #f5a800; }
[data-programme=vex-iq] { --tone: #0077c8; }
[data-programme=vex-v5] { --tone: #d22630; }

.hero { position: relative; overflow: hidden; background: var(--hero-bg, #fff); color: var(--hero-text, var(--ink)); border-bottom: 1px solid var(--line); }
.hero-in { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; min-height: 440px; }
.hero-text { display: grid; gap: 18px; justify-items: start; }
.hero-text h1 { color: inherit; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; }
.hero-text p { color: var(--hero-soft, var(--muted)); font-size: 1.1rem; max-width: 46ch; }
.hero-logos { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-logos { align-items: center; gap: 22px; }
.hero-logos .logo { height: 54px; }
/* the grey VEX lettering needs a lift on the dark V5 page */
body[data-programme=vex-v5] .hero-logos .logo, body[data-programme=vex-iq] .hero-logos .logo { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)) brightness(1.25); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-facts span { font-size: .86rem; font-weight: 600; padding: 7px 12px; border-radius: 99px; background: var(--hero-chip, #eef1f6); color: var(--hero-text, var(--ink)); }
.hero-visual { position: relative; height: 400px; min-width: 0; }
.hero-visual canvas, .hero-visual svg { width: 100%; height: 100%; display: block; }
.hero-visual canvas { cursor: grab; touch-action: pan-y; }
.hero-visual .hint { position: absolute; right: 8px; bottom: 0; font-size: .8rem; color: var(--hero-soft, var(--muted)); }

body[data-programme=myp] { --hero-bg: linear-gradient(120deg, #ffffff 40%, #e6f1fb); }
body[data-programme=pyp] { --hero-bg: linear-gradient(120deg, #fffdf5 40%, #ffeeb8); }
/* VEX IQ: bright plastic blue, with the round pin holes of an IQ beam */
body[data-programme=vex-iq] { --hero-text: #fff; --hero-soft: #d5e9f8; --hero-chip: rgba(255, 255, 255, .16);
  --hero-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='6' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E"), linear-gradient(135deg, #0a8ae0, #005a9e); }
/* VEX V5: dark machined metal, with the square holes of a C-channel */
body[data-programme=vex-v5] { --hero-text: #fff; --hero-soft: #b9bec6; --hero-chip: rgba(255, 255, 255, .1);
  --hero-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect x='10' y='10' width='10' height='10' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"), linear-gradient(135deg, #1b1e23, #0d0f12 70%, #3a0d11); }
body[data-programme=vex-v5] .hero { border-bottom: 4px solid #d22630; }
.blocks rect { transform-box: fill-box; transform-origin: center; }
@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; min-height: 0; }
  .hero-visual { height: 300px; }
}

/* ---------- legal ---------- */
.legal { max-width: 1080px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px) 96px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal nav { position: sticky; top: 92px; display: grid; gap: 8px; font-size: .9rem; }
.legal nav a { color: var(--muted); text-decoration: none; }
.legal nav a:hover { color: var(--head); text-decoration: underline; }
.legal article { display: grid; gap: 34px; max-width: 68ch; }
.legal article header { display: grid; gap: 12px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal article header p { color: var(--muted); }
.legal section { display: grid; gap: 12px; scroll-margin-top: 90px; }
.legal section p, .legal section li { line-height: 1.7; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal .copyright { padding: 20px 22px; border-radius: var(--r-m); background: var(--ink); color: #dfe7ee; display: grid; gap: 6px; }
.legal .copyright strong { color: #fff; font: 700 1.2rem var(--display); }
@media (max-width: 800px) { .legal { grid-template-columns: 1fr; gap: 28px; } .legal nav { position: static; } }
.site-foot { border-top: 1px solid var(--line); padding: 18px clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; font-size: .76rem; color: #8590a3; }
.site-foot a { color: var(--muted); }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.logo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; display: grid; gap: 12px; }
.logo-card .logo { height: 60px; max-width: 100%; object-fit: contain; margin: 6px auto; }
.logo-card select { padding: 9px 10px; font-size: .9rem; }


/* ---------- signed-in shell ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 40px); background: rgba(243, 245, 249, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--muted); min-width: 0; }
.top .who strong { color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap { max-width: 1180px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 80px; display: grid; gap: 56px; }
.intro { display: grid; gap: 10px; max-width: 62ch; }
.intro p { color: var(--muted); font-size: 1.05rem; }
.section { display: grid; gap: 22px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head p { color: var(--muted); }
.empty { padding: 28px; border: 1.5px dashed var(--line); border-radius: var(--r-m); color: var(--muted); max-width: 60ch; }
.empty strong { display: block; color: var(--head); font: 650 1.1rem var(--display); margin-bottom: 4px; }

/* ---------- the shelf ---------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 44px 36px; }
.book { display: grid; gap: 18px; text-decoration: none; color: inherit; align-content: start; }
.book-stage { perspective: 1400px; padding: 0 14px 0 0; }
.book-3d { position: relative; aspect-ratio: 210 / 297; transform-style: preserve-3d; transform: rotateY(-22deg); transform-origin: left center; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.book:hover .book-3d, .book:focus-visible .book-3d { transform: rotateY(-6deg); }
.book-3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px 6px 6px 3px; background: #e6eaf1; box-shadow: inset 5px 0 8px -4px rgba(0, 0, 0, .35); display: block; }
/* page block and back cover give the cover real thickness */
.book-3d::before { content: ''; position: absolute; top: 1.2%; bottom: 1.2%; right: 0; width: 26px; transform: translateX(13px) rotateY(90deg) translateX(13px); transform-origin: right center; background: repeating-linear-gradient(90deg, #fff 0 2px, #d9dde5 2px 3px); }
.book-3d::after { content: ''; position: absolute; inset: 0; transform: translateZ(-26px); background: var(--ink); border-radius: 3px 6px 6px 3px; box-shadow: 18px 22px 34px -10px rgba(22, 34, 46, .45); }
.book-3d img { transform: translateZ(0); }
.book.teacher .book-3d::after { background: var(--a-dark); }
.book-info { display: grid; gap: 8px; }
.book-info .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.book-info .until { font-size: .86rem; color: var(--muted); }
.meter { height: 5px; border-radius: 99px; background: #dfe4ed; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--b); border-radius: inherit; }

/* ---------- teacher: student books and teacher guides, each on a shelf of its own ---------- */
.shelves { display: grid; gap: 30px; }
.kind { --tone: var(--b); --tint: #e4f4ec; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); animation: doorIn .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.kind.teacher { --tone: var(--a); --tint: #e3eefa; animation-delay: .12s; }
.kind-head { display: flex; align-items: center; gap: 16px; padding: 18px clamp(16px, 3vw, 28px); border-radius: var(--r-l) var(--r-l) 0 0; background: linear-gradient(100deg, var(--tint), transparent 80%); border-bottom: 1px solid var(--line); }
.kind-icon { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--tone); color: #fff; box-shadow: 0 12px 20px -12px var(--tone); }
.kind-head h3 { font-size: 1.3rem; font-weight: 700; }
.kind-head p { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.kind-count { margin-left: auto; flex: none; padding: 6px 13px; border-radius: 99px; background: var(--surface); border: 1.5px solid var(--tone); color: var(--tone); font: 700 .82rem var(--display); white-space: nowrap; }
.kind .shelf { padding: 32px clamp(16px, 3vw, 28px) 34px; }
[data-theme=dark] .kind { --tint: rgba(35, 145, 95, .2); --tone: #3fb980; }
[data-theme=dark] .kind.teacher { --tint: rgba(47, 116, 181, .24); --tone: #5a9fdc; }
[data-theme=dark] .kind-icon { color: #0f1820; }
@media (max-width: 520px) {
  .kind-head { flex-wrap: wrap; gap: 12px; }
  .kind-head > div { flex: 1; min-width: 0; }
  .kind-count { margin-left: 66px; }
}

/* ---------- classes (teacher) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; display: grid; gap: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.card .sub { color: var(--muted); font-size: .9rem; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { font-size: .85rem; padding: 9px 10px; min-width: 0; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.people li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid #edf0f5; font-size: .9rem; }
.people li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people small { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.new-class { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; display: grid; gap: 16px; max-width: 560px; }
.checks { display: grid; gap: 8px; }
.checks label { display: flex; gap: 10px; align-items: center; font-size: .95rem; }

/* ---------- admin ---------- */
.admin { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100dvh; }
.side { background: var(--ink); color: #c6d2e6; padding: 24px 14px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.side .brand { color: #fff; padding: 0 10px; }
.side nav { display: grid; gap: 2px; }
.side nav button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: 500 .96rem var(--body); padding: 10px 12px; border-radius: var(--r-s); cursor: pointer; }
.side nav button:hover { color: #fff; }
.side nav button[aria-current=page] { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.side nav b { background: var(--c); color: var(--head); font-size: .75rem; min-width: 22px; text-align: center; padding: 2px 6px; border-radius: 99px; }
.side .foot { margin-top: auto; display: grid; gap: 8px; padding: 0 10px; font-size: .85rem; }
.side .foot a, .side .foot button { color: #c6d2e6; text-align: left; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.main { padding: clamp(20px, 4vw, 44px); display: grid; gap: 28px; align-content: start; min-width: 0; }
.main > header { display: grid; gap: 6px; }
.main > header p { color: var(--muted); max-width: 70ch; }
.stats { display: flex; flex-wrap: wrap; gap: 10px 36px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.stats div { display: flex; align-items: baseline; gap: 8px; }
.stats b { font: 700 1.6rem var(--display); color: var(--head); }
.stats span { color: var(--muted); font-size: .9rem; }
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: .82rem; padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 13px 16px; border-bottom: 1px solid #edf0f5; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td .name { font-weight: 600; color: var(--head); }
td small { color: var(--muted); display: block; }
td .actions { justify-content: flex-end; flex-wrap: nowrap; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters input, .filters select { width: auto; padding: 9px 12px; font-size: .92rem; }
.inline-date { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.inline-date input { width: auto; padding: 7px 9px; font-size: .88rem; }
.book-row { display: flex; gap: 14px; align-items: center; }
.book-row img { width: 44px; aspect-ratio: 210 / 297; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); background: #e6eaf1; }
.upload { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.upload h3, .upload .full { grid-column: 1 / -1; }
.switch { display: flex; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px; max-width: 640px; }
.switch p { color: var(--muted); font-size: .92rem; }
.switch strong { color: var(--head); }

dialog { border: 0; border-radius: var(--r-l); padding: 0; width: min(560px, calc(100vw - 32px)); color: var(--text); box-shadow: 0 30px 80px rgba(22, 34, 46, .35); }
dialog::backdrop { background: rgba(22, 34, 46, .55); }
dialog form { display: grid; gap: 18px; padding: 26px; }
dialog .grant { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #edf0f5; }
dialog .grant small { color: var(--muted); display: block; }
dialog .grant-unit { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 99px; background: var(--unit); color: #fff; font-weight: 800; font-size: .8rem; vertical-align: 1px; }
dialog .grant-prog { margin: 18px 0 2px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
dialog .grant input[type=date] { width: auto; padding: 8px 10px; font-size: .88rem; }
dialog .actions { justify-content: flex-end; }

@media (max-width: 860px) {
  .admin { grid-template-columns: 1fr; }
  .side { position: static; height: auto; padding: 14px; gap: 12px; }
  .side nav { grid-auto-flow: column; overflow-x: auto; justify-content: start; }
  .side nav button { white-space: nowrap; }
  .side .foot { margin: 0; display: flex; gap: 16px; }
}

/* ---------- reader ---------- */
.reader { background: #0f1820; color: #dbe3f0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.reader .bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #16222e; border-bottom: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.reader .bar .title { font: 650 1rem var(--display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.reader .bar .spacer { flex: 1; }
.tool { background: transparent; border: 1px solid rgba(255, 255, 255, .16); color: #dbe3f0; font: 500 .86rem var(--body); padding: 8px 11px; border-radius: var(--r-s); cursor: pointer; white-space: nowrap; text-decoration: none; }
.tool:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.tool[aria-pressed=true] { background: #fff; color: var(--head); border-color: #fff; }
.tool:disabled { opacity: .4; cursor: default; }
.zoom { display: flex; align-items: center; gap: 4px; }
.zoom output { min-width: 46px; text-align: center; font-size: .86rem; }
.body { position: relative; display: flex; min-height: 0; }
.viewport { position: relative; flex: 1; min-width: 0; display: grid; }
.rail { flex: none; width: 148px; overflow-y: auto; padding: 14px 12px; background: #121c26; border-right: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 12px; align-content: start; }
.rail button { background: none; border: 2px solid transparent; border-radius: 6px; padding: 3px; cursor: pointer; display: grid; gap: 4px; color: #93a3bf; font: 500 .75rem var(--body); }
.rail canvas { width: 100%; aspect-ratio: 210 / 297; background: #1f2e3c; border-radius: 3px; display: block; }
.rail button[aria-current=true] { border-color: var(--c); color: #fff; }
.stage { overflow: auto; min-height: 0; display: grid; place-items: safe center; padding: 18px; }
/* the reader zooms a pinch itself (reader.js): the browser keeps to scrolling there */
.body .stage { touch-action: pan-x pan-y; }
.sheet { display: flex; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); background: #fff; transition: opacity .12s; }
.sheet.turning { opacity: .25; }
.sheet canvas { display: block; height: calc(var(--fit, 600px) * var(--zoom, 1)); width: auto; pointer-events: none; }
.sheet canvas + canvas { border-left: 1px solid #cfd5e0; }
.nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 76px; border: 0; border-radius: var(--r-s); background: rgba(22, 34, 46, .78); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.nav:hover { background: var(--a); }
.nav:disabled { opacity: 0; pointer-events: none; }
.nav.prev { left: 14px; } .nav.next { right: 14px; }
.scrub { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #16222e; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .86rem; }
.scrub input[type=range] { flex: 1; accent-color: var(--c); min-width: 0; }
.scrub .count { white-space: nowrap; min-width: 90px; text-align: right; }
.shield { position: fixed; inset: 0; z-index: 50; background: #0f1820; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; }
.shield h2 { color: #fff; }
.shield p { color: #93a3bf; max-width: 46ch; }
.shield .btn { background: #fff; color: var(--head); border-color: #fff; }
@media (max-width: 760px) {
  .rail { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; }
  .reader .bar .title, .tool.wide-only, .zoom output { display: none; }
  .nav { width: 38px; height: 60px; }
  /* a phone: the bar keeps to the screen; two fingers zoom there, so − and + go, and what is left over scrolls sideways */
  .reader .bar { gap: 6px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; }
  .reader .bar::-webkit-scrollbar { display: none; }
  .reader .bar > :not(.spacer) { flex: none; }
  .reader .bar .tool { padding: 6px 10px; font-size: .8rem; }
  .reader .bar .zoom { display: none; }
}
@media print { body { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- motion between pages ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .28s cubic-bezier(.6, 0, .8, .4) both; }
::view-transition-new(root) { animation: vtIn .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: scale(.975); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(26px) scale(1.015); } }
.list-rows { display: grid; gap: 8px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); text-decoration: none; color: inherit; font-size: .93rem; }
a.list-row:hover { border-color: var(--head); }
.list-row div { min-width: 0; display: grid; gap: 2px; }
.list-row small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
.code { font: 700 1.5rem var(--display); letter-spacing: .14em; color: var(--head); }

/* ---------- questions in the reader ---------- */
.pg { position: relative; display: block; line-height: 0; }
.pg + .pg { border-left: 1px solid #cfd5e0; }
.pg .mark { position: absolute; border: 2px solid var(--c); background: rgba(242, 194, 48, .22); border-radius: 4px; cursor: pointer; padding: 0; }
.pg .mark.teacher { border-color: var(--b); background: rgba(35, 145, 95, .2); }
.pg .mark.on { box-shadow: 0 0 0 4px rgba(114, 220, 95, .55); }
.pg .mark.draft { border-style: dashed; border-color: var(--a); background: rgba(47, 116, 181, .18); pointer-events: none; }
.sheet.marking .pg { cursor: crosshair; }
/* the reader's own marks on a page (public/js/ink.js): a layer over the picture, live only while drawing */
.pg .ink { position: absolute; inset: 0; pointer-events: none; line-height: 1.35; }
.pg .ink svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg .ink.drawing { pointer-events: auto; touch-action: none; cursor: crosshair; }
.pg .ink.tool-text { cursor: text; }
.pg .ink.tool-erase { cursor: pointer; }
.pg .ink.tool-erase path { pointer-events: stroke; }
.ink-box { position: absolute; font: 500 calc(var(--fit, 700px) * var(--zoom, 1) * .019 * var(--s, 1)) / 1.35 var(--body); color: var(--ink, #16222e); background: rgba(255, 255, 255, .62); border-radius: 4px; padding: .2em .35em; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: auto; user-select: text; -webkit-user-select: text; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #16222e) 35%, transparent); }
.ink-box.editing { padding: 0; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1.5px var(--ink, #16222e); }
.ink-box textarea { display: block; width: 100%; min-height: 1.6em; resize: none; overflow: hidden; border: 0; background: transparent; color: inherit; font: inherit; padding: .2em .35em; outline: none; }
.ink-box.sized { overflow: auto; }
.ink-box.editing.sized { overflow: visible; }
.ink-box.sized textarea { height: 100% !important; overflow: auto; }
.ink-move { position: absolute; left: -9px; top: -9px; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--ink, #16222e); border: 2px solid #fff; cursor: move; touch-action: none;
  background-image: radial-gradient(circle, #fff 1.2px, transparent 1.6px); background-size: 5px 5px; background-position: center; }
.ink-size { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; border-radius: 3px; background: var(--ink, #16222e); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; }
.ink-draft { position: absolute; border: 1.5px dashed var(--a); background: rgba(47, 116, 181, .08); border-radius: 4px; pointer-events: none; }
.ink-x { position: absolute; top: -.7em; right: -.7em; width: 1.4em; height: 1.4em; border-radius: 50%; border: 0; background: var(--ink, #16222e); color: #fff; font: 700 .8em/1 var(--body); cursor: pointer; display: grid; place-items: center; }
.ink-bar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: #121c26; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7); }
.ink-bar[hidden] { display: none; }
/* the games of the lesson on the page: the button stands out on the lesson's last page */
.tool.lesson-games[hidden] { display: none; }
.tool.lesson-games.due { background: var(--a); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.lg-list { display: grid; gap: 10px; }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.lg-row > div:first-child { display: grid; gap: 2px; min-width: 0; }
.lg-row .actions { flex-wrap: wrap; gap: 6px; }
.ink-bar .tool.on { background: var(--a); color: #fff; }
/* the pen, floating on the book (ink.js): hidden while drawing, when the bar has "Done" */
.ink-fab { position: absolute; right: 18px; bottom: 18px; z-index: 6; width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--a); color: #fff; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55); }
.ink-fab:hover { filter: brightness(1.08); }
.ink-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ink-fab[hidden] { display: none; }
/* a phone: the bar keeps to one thin row along the bottom and scrolls sideways, so the page stays in sight */
@media (max-width: 760px) {
  .ink-bar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 6px 8px; border-radius: 12px; scrollbar-width: none; }
  .ink-bar::-webkit-scrollbar { display: none; }
  .ink-bar > * { flex: none; }
  .ink-bar .tool { padding: 6px 9px; font-size: .78rem; }
  .ink-colour { width: 22px; height: 22px; }
  .ink-fab { right: 12px; bottom: 12px; width: 48px; height: 48px; }
}
.ink-colour { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: var(--ink); cursor: pointer; padding: 0; }
.ink-colour.on { border-color: #fff; box-shadow: 0 0 0 2px var(--a); }
.ink-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .15); margin: 0 4px; }
.ink-whose { display: flex; align-items: center; gap: 6px; color: #c6d2e6; font-size: .85rem; white-space: nowrap; }
.ink-whose select { font: inherit; }
.ink-note { color: #c6d2e6; font-size: .88rem; }
.ink-box.editing.on { box-shadow: 0 0 0 2px var(--ink, #16222e), 0 0 0 5px rgba(114, 220, 95, .45); }
.ink-letters { display: inline-flex; align-items: center; gap: 4px; color: #c6d2e6; font-size: .82rem; }
.ink-letters output { min-width: 3.2em; text-align: center; }
.sheet.marking .mark { pointer-events: none; }
.qa { flex: none; width: min(360px, 100vw); background: #121c26; border-left: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; min-height: 0; user-select: text; -webkit-user-select: text; }
.qa header { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.qa h2 { color: #fff; font-size: 1.05rem; }
.qa-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; font-size: .9rem; line-height: 1.5; }
.qa-item { text-align: left; background: #1a2733; border: 1px solid transparent; color: #dbe3f0; border-radius: var(--r-s); padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; font: inherit; }
.qa-item:hover { border-color: rgba(255, 255, 255, .3); }
.qa-item small, .msg small { color: #93a3bf; }
.msg { background: #1a2733; border-radius: var(--r-s); padding: 10px 12px; display: grid; gap: 6px; }
.msg.mine { background: #22384a; }
.msg p { white-space: pre-wrap; overflow-wrap: anywhere; color: #eef3f8; }
.msg a { color: #9fd4ff; overflow-wrap: anywhere; }
.msg img { max-width: 100%; border-radius: 6px; display: block; }
.qa-form { padding: 12px 16px 16px; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 10px; }
.qa-form textarea { background: #0f1820; border-color: rgba(255, 255, 255, .16); color: #fff; min-height: 76px; }
.qa-form .file-pick { color: #93a3bf; }
.qa-form .btn { background: #fff; color: var(--head); border-color: #fff; }
.qa-form .btn.quiet, .qa .file-pick .btn { background: transparent; color: #dbe3f0; border-color: rgba(255, 255, 255, .2); }
.qa-note { color: #93a3bf; }
.tool b { background: var(--c); color: var(--head); border-radius: 99px; padding: 1px 6px; font-size: .72rem; margin-left: 4px; }
@media (max-width: 760px) { .qa { position: absolute; z-index: 6; top: 0; bottom: 0; right: 0; } }
/* ---------- dark theme ---------- */
:root[data-theme=dark] {
  color-scheme: dark;
  --head: #eef3f8;
  --text: #c6d1dc;
  --muted: #8fa0b2;
  --paper: #0f1820;
  --surface: #18242f;
  --line: #2c3c4b;
}
[data-theme=dark] .brand img[src$='dev-dark.png'] { content: url(/brand/dev-light.png); }
[data-theme=dark] .brand img[src$='dev-hub-logo.png'] { content: url(/hub-brand/dev-hub-logo-light.png); }
[data-theme=dark] .btn:not(.go):not(.danger):not(.quiet) { background: #eef3f8; border-color: #eef3f8; color: #16222e; }
[data-theme=dark] .top { background: rgba(15, 24, 32, .9); }
[data-theme=dark] .chip { background: rgba(255, 255, 255, .09); color: #c6d1dc; }
[data-theme=dark] .chip.active, [data-theme=dark] .chip.approved { background: rgba(35, 145, 95, .25); color: #8fe3b9; }
[data-theme=dark] .chip.pending, [data-theme=dark] .chip.unverified { background: rgba(242, 194, 48, .2); color: #f6d981; }
[data-theme=dark] .chip.suspended, [data-theme=dark] .chip.rejected, [data-theme=dark] .chip.paused, [data-theme=dark] .chip.ended { background: rgba(220, 79, 42, .25); color: #ffb39e; }
[data-theme=dark] .chip.teacher { background: rgba(47, 116, 181, .28); color: #a9d0f5; }
[data-theme=dark] .roles label:has(input:checked) { background: rgba(47, 116, 181, .2); }
[data-theme=dark] .note.new { background: rgba(114, 220, 95, .12); }
[data-theme=dark] td, [data-theme=dark] .people li, [data-theme=dark] dialog .grant { border-color: var(--line); }
[data-theme=dark] .meter { background: #2c3c4b; }
[data-theme=dark] body[data-programme=myp] { --hero-bg: linear-gradient(120deg, #18242f 40%, #17324d); --hero-text: #eef3f8; --hero-soft: #a9b8c6; --hero-chip: rgba(255, 255, 255, .1); }
[data-theme=dark] body[data-programme=pyp] { --hero-bg: linear-gradient(120deg, #18242f 40%, #4a3a0c); --hero-text: #eef3f8; --hero-soft: #a9b8c6; --hero-chip: rgba(255, 255, 255, .1); }
dialog { background: var(--surface); }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--head); cursor: pointer; flex: none; }
.icon-btn:hover { border-color: var(--head); }
.theme-float { position: absolute; top: 18px; right: 18px; z-index: 3; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- sign-in: everything on one screen ---------- */
.auth { height: 100dvh; min-height: 0; overflow: hidden; }
.auth-form { padding: 20px clamp(20px, 5vw, 72px) 16px; overflow-y: auto; min-height: 0; }
.auth-form .view { padding: 14px 0; gap: 14px; max-width: 440px; }
.auth-form .view h1 { font-size: clamp(1.6rem, 3.4vh, 2.1rem); }
.auth-form form { gap: 12px; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password] { padding: 10px 12px; }
.auth-form .btn.wide { padding: 12px 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brand.big { font-size: 1.5rem; }
.partners img { height: 24px; }
.auth-foot { gap: 8px; max-width: 440px; }
.publisher { padding-top: 12px; }
.publisher strong { font-size: 1.02rem; }
.publisher span:last-child { font-size: .84rem; }
.sub-links { gap: 5px; font-size: .92rem; }

.auth-art { min-height: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.slogan-block { padding: clamp(24px, 7vh, 80px) clamp(28px, 5vw, 72px) 0; gap: 2.4vh; }
.slogan { font-size: clamp(2.4rem, min(6.4vw, 12.5vh), 6.2rem); }
.gears { right: -30px; bottom: calc(18vh + 20px); width: min(44%, 42vh); }
.orbit { height: 18vh; min-height: 96px; max-height: 150px; }
.orbit img { height: clamp(28px, 5.5vh, 44px); }
@media (max-width: 900px) {
  .auth { height: auto; overflow: visible; }
  .auth-art { height: auto; }
}

/* opening sequence: the wordmark, then the three lines, nothing else */
.opening { place-items: center start; padding-left: clamp(28px, 14vw, 240px); }
.intro-stack { position: relative; display: grid; gap: clamp(14px, 4vh, 40px); }
.intro-brand { display: flex; align-items: baseline; gap: .3em; font: 300 clamp(2.2rem, min(5vw, 9vh), 4rem)/1 var(--display); letter-spacing: -0.02em; color: #fff; animation: logoIn 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.intro-brand img { height: .98em; width: auto; display: block; }
.intro-lines { margin: 0; padding: 0; width: auto; gap: 0; }
.intro-lines p { overflow: hidden; padding-bottom: .08em; }
.intro-lines b { font-size: clamp(2.8rem, min(9vw, 17vh), 7.5rem); line-height: .98; display: block; }
.intro-lines p:nth-child(1) b { animation-delay: 1.2s; }
.intro-lines p:nth-child(2) b { animation-delay: 2.1s; }
.intro-lines p:nth-child(3) b { animation-delay: 3s; }

/* ---------- calm backdrop: the two green arcs from the brand artwork ---------- */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.backdrop::before, .backdrop::after { content: ''; position: absolute; border-radius: 50%; right: -260px; top: -300px; width: 640px; height: 640px; background: rgba(114, 220, 95, .09); animation: breathe 14s ease-in-out infinite alternate; }
.backdrop::after { right: -140px; top: -400px; background: rgba(114, 220, 95, .06); animation-delay: -7s; }
@keyframes breathe { to { transform: scale(1.07) translate(-14px, 10px); } }

/* ---------- top navigation ---------- */
.tabs { display: flex; gap: 4px; margin-left: 12px; }
.tabs a { padding: 8px 14px; border-radius: 99px; font-size: .92rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.tabs a:hover { color: var(--head); }
.tabs a[aria-current=page] { background: var(--head); color: var(--paper); }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- switches ---------- */
.sw { appearance: none; -webkit-appearance: none; width: 38px !important; height: 22px !important; border-radius: 99px; background: #c3ccd8; position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.sw:checked { background: var(--b); }
.sw:checked::after { transform: translateX(16px); }

/* ---------- questions list ---------- */
.q-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.q-filters select { width: auto; padding: 9px 12px; font-size: .9rem; }
.pills { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.pills button { border: 0; background: none; font: 600 .86rem var(--body); color: var(--muted); padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.pills button[aria-pressed=true] { background: var(--head); color: var(--paper); }
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.q-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--b); border-radius: var(--r-m); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.q-card.waiting { border-left-color: var(--c); }
.q-card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(22, 34, 46, .5); }
.q-card .avatar { grid-row: span 3; }
.q-card .q-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.q-card .q-top strong { color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-card p { color: var(--text); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-card .q-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .8rem; color: var(--muted); align-items: center; }

/* ---------- classes ---------- */
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.klass { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.klass-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-left: 6px solid var(--muted); flex-wrap: wrap; }
.klass.open .klass-head { border-left-color: var(--b); }
.klass.waiting .klass-head { border-left-color: var(--c); }
.klass.closed .klass-head { border-left-color: var(--d); }
.klass-head h2 { font-size: 1.35rem; }
.klass-head .grow { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.klass-head .grow span { color: var(--muted); font-size: .9rem; }
.klass-stats { display: flex; gap: 22px; }
.klass-stats div { display: grid; text-align: center; }
.klass-stats b { font: 700 1.3rem var(--display); color: var(--head); }
.klass-stats span { font-size: .76rem; color: var(--muted); }
.klass-body { padding: 0 24px 22px; display: grid; gap: 18px; }
/* the classes as small cards side by side; the one that is open takes the whole row */
#class-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
#class-list > .empty, .klass.shown { grid-column: 1 / -1; }
.klass-head[role=button] { cursor: pointer; }
.klass-head[role=button]:focus-visible { outline: 2px solid var(--a); outline-offset: -2px; }
.klass:not(.shown) { transition: border-color .15s, box-shadow .15s; }
.klass:not(.shown):hover { border-color: var(--a); box-shadow: 0 10px 24px -16px rgba(22, 34, 46, .45); }
.klass:not(.shown) .klass-head { padding: 14px 16px; gap: 8px 12px; }
.klass:not(.shown) .klass-head h2 { font-size: 1.1rem; }
.klass:not(.shown) .klass-head .grow { flex: 1 1 100%; min-width: 0; }
.klass:not(.shown) .klass-head .grow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
.klass:not(.shown) .klass-stats { gap: 14px; margin-right: auto; }
.klass:not(.shown) .klass-stats b { font-size: 1.05rem; }
.klass-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.klass-tools .danger { margin-left: auto; }
.klass-open { font-style: normal; color: var(--muted); transition: transform .15s; }
.klass.shown .klass-open { transform: rotate(180deg); }
.klass-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.klass-row input[type=text] { flex: 1; min-width: 200px; padding: 10px 12px; font-size: .9rem; }
.callout { background: #fdf1c7; color: #5c4400; border-radius: var(--r-s); padding: 12px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: .92rem; }
.callout .code { color: #16222e; }
.roster { width: 100%; border-collapse: collapse; font-size: .92rem; }
.roster th { padding: 8px 10px; }
.roster td { padding: 10px; border-bottom: 1px solid var(--line); }
.roster tr:last-child td { border-bottom: 0; }
/* the sign-in sheet of a class: the brand, the class and its code, then a plain table */
.logins-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--r-m); background: var(--paper); box-shadow: inset 0 -3px 0 var(--dot); }
.logins-head > div { display: grid; gap: 2px; }
.logins-head > div:not(.logins-code) { flex: 1 1 200px; }
.logins-head small { color: var(--muted); font-size: .8rem; }
.logins-code b { font: 800 1.4rem var(--display); letter-spacing: .14em; color: var(--head); }
.roster.logins td:first-child { min-width: 0; width: 2.5em; color: var(--muted); }
.roster.logins th { text-align: left; }
.roster.logins code { font-size: .92rem; }
.pin { font: 700 .95rem var(--display); letter-spacing: .12em; background: #fdf1c7; color: #5c4400; padding: 3px 8px; border-radius: 6px; }
.ghost-x { border: 0; background: none; color: var(--muted); font: 600 .84rem var(--body); cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.ghost-x:hover, .ghost-x.armed { color: #fff; background: var(--d); }
.klass-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- profile ---------- */
.profile-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.id-card { background: var(--ink); color: #fff; border-radius: var(--r-l); padding: 28px 24px; display: grid; gap: 14px; justify-items: center; text-align: center; position: sticky; top: 92px; overflow: hidden; }
.id-card::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; left: -190px; top: -200px; background: rgba(114, 220, 95, .2); }
.id-card > * { position: relative; }
.id-card .photo { width: 128px; height: 128px; border-radius: 50%; background: #24384a; display: grid; place-items: center; font: 700 3rem var(--display); overflow: hidden; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 6px 0 0 var(--dot); }
.id-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.id-card h2 { color: #fff; font-size: 1.35rem; }
.id-card .mail { color: #a9b8c6; font-size: .88rem; overflow-wrap: anywhere; }
.id-card .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.id-card .btn:hover { border-color: #fff; }
.panels { display: grid; gap: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px 24px; display: grid; gap: 16px; }
.panel h2 { font-size: 1.2rem; }
.panel .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.phone-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 8px; }
.locked { background: var(--paper) !important; color: var(--muted) !important; cursor: not-allowed; }
.teach { display: grid; gap: 12px; }
.teach div { display: grid; gap: 4px; }
.teach span { color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } .id-card { position: static; } }

/* ---------- programme pages: motion ---------- */
.cycle-svg .ring { transform-box: fill-box; transform-origin: center; animation: turn 90s linear infinite; }
.cycle-svg .seg { stroke-dasharray: 270; stroke-dashoffset: 270; animation: draw 1s cubic-bezier(.3, .7, .2, 1) forwards; transition: stroke-width .2s; cursor: pointer; }
.cycle-svg .seg:nth-of-type(2) { animation-delay: .18s; } .cycle-svg .seg:nth-of-type(3) { animation-delay: .36s; } .cycle-svg .seg:nth-of-type(4) { animation-delay: .54s; }
.cycle-svg .seg:hover, .cycle-svg .seg.on { stroke-width: 56; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.cycle-svg .centre { transition: opacity .25s; }
.blocks .blk { transform-box: fill-box; transform-origin: left center; animation: drop .6s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.blocks .blk.run rect { filter: brightness(1.18) drop-shadow(0 0 10px rgba(114, 220, 95, .9)); }
.blocks .sprite { transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes drop { from { opacity: 0; transform: translateY(-46px) rotate(-4deg); } }
.hero-text > * { animation: heroIn .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.hero-text > :nth-child(2) { animation-delay: .08s; } .hero-text > :nth-child(3) { animation-delay: .16s; } .hero-text > :nth-child(4) { animation-delay: .24s; } .hero-text > :nth-child(5) { animation-delay: .32s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } }

/* VEX IQ: text and logos on a light side, the blue plastic panel behind the robot */
body[data-programme=vex-iq] { --hero-bg: #fff; --hero-text: var(--ink); --hero-soft: var(--muted); --hero-chip: #e6f1fa; }
body[data-programme=vex-iq] .hero::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 56%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='6' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"), linear-gradient(135deg, #0a8ae0, #005a9e);
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
body[data-programme=vex-iq] .hero-in { z-index: 1; }
body[data-programme=vex-iq] .hero-logos .logo { filter: none; }
body[data-programme=vex-iq] .hero-visual .hint, body[data-programme=vex-iq] .build-step { color: #fff; }
[data-theme=dark] body[data-programme=vex-iq] { --hero-bg: #18242f; --hero-text: #eef3f8; --hero-soft: #a9b8c6; --hero-chip: rgba(255, 255, 255, .1); }
@media (max-width: 860px) { body[data-programme=vex-iq] .hero::after { width: 100%; top: 52%; clip-path: none; } }
.build-step { position: absolute; left: 8px; bottom: 0; font: 600 .86rem var(--display); color: var(--hero-soft, var(--muted)); }
.hero-visual .hint { display: flex; gap: 12px; align-items: center; }
.hero-visual .hint button { background: none; border: 1px solid currentColor; color: inherit; font: 600 .78rem var(--body); padding: 5px 10px; border-radius: 99px; cursor: pointer; }
.hero-link { font-size: .86rem; color: var(--hero-soft, var(--muted)); max-width: 40ch; }
.hero-link a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .cycle-svg .seg { stroke-dashoffset: 0; }
}

/* ---------- sign-in, third pass: tighter form, larger slogan, gears beside it ---------- */
.auth-form .view { max-width: 350px; gap: 12px; }
.auth-form .view h1 { font-size: clamp(1.45rem, 3vh, 1.8rem); }
.auth-form .field > span { font-size: .8rem; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password], .auth-form input[type=number] { padding: 9px 12px; font-size: .94rem; }
/* schools (SaaS): the two links under the doors, and the programmes of a school that registers */
.school-links { font-size: .88rem; color: var(--muted); }
.school-progs { border: 0; margin: 0; padding: 0; min-width: 0; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.school-progs legend { padding: 0; margin-bottom: 6px; font-size: .8rem; font-weight: 600; color: var(--head); }
.auth-form .btn.wide { padding: 11px 16px; font-size: .92rem; }
.auth-form .view > p, .sub-links { font-size: .88rem; }
.auth-foot { max-width: 350px; }
#view-register, #view-class-register { max-width: 440px; }

.auth-art { grid-template-rows: minmax(0, 1fr) auto; }
.art-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 1vw; padding-left: clamp(36px, 7vw, 120px); min-height: 0; overflow: hidden; }
.slogan-block { padding: 0; gap: 2.6vh; }
.slogan { font-size: clamp(2.8rem, min(7vw, 14.5vh), 7.4rem); }
.slogan-sub { font-size: clamp(1.1rem, min(1.7vw, 3.2vh), 1.6rem); max-width: 22ch; }
.gears { position: static; width: auto; margin-right: -9%; opacity: 1; align-self: center; }
.gears svg { width: 100%; height: auto; max-height: 62vh; }
.orbit { grid-row: 2; }
@media (max-width: 900px) { .art-main { grid-template-columns: 1fr; padding: 28px 24px; } }

/* feedback on the sign-in form */
.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.shake input:not([type=checkbox]):not([type=radio]) { border-color: var(--d); box-shadow: 0 0 0 3px rgba(220, 79, 42, .18); transition: border-color .2s, box-shadow .2s; }
.notice:not([hidden]) { animation: noticeIn .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-8px); } }
.btn.ok { background: var(--b) !important; border-color: var(--b) !important; color: #fff !important; transition: background .25s, border-color .25s; }
.btn.ok svg { width: 22px; height: 22px; }
.btn.ok path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .4s .1s ease-out forwards; }
/* the green dot grows from a point until it covers the screen */
.wipe { position: fixed; z-index: 200; border-radius: 50%; background: var(--dot); transform: translate(-50%, -50%) scale(1); transition: transform .6s cubic-bezier(.7, 0, .2, 1); pointer-events: none; }

/* ---------- opening sequence, second version ---------- */
.opening { place-items: center; padding: 0; transition: opacity .45s; }
.opening::before { display: none; }
.opening.gone { opacity: 0; }
.intro-stack { gap: clamp(10px, 3vh, 30px); justify-items: start; }
.intro-brand { font-size: clamp(1.4rem, min(3vw, 5.5vh), 2.4rem); color: #8fa3b5; animation: introBrand .9s cubic-bezier(.2, .8, .2, 1) both; padding-left: .06em; }
@keyframes introBrand { from { opacity: 0; transform: translateY(-18px); } }
.iline { position: relative; display: block; width: max-content; font: 800 clamp(3rem, min(12.5vw, 23vh), 12rem)/.98 var(--display); letter-spacing: -0.04em; margin: 0; }
.iline .base { color: rgba(255, 255, 255, .13); opacity: 0; animation: fade .6s forwards; }
.iline .fill { position: absolute; inset: 0; color: var(--dot); clip-path: inset(0 100% 0 0); animation: sweep 1s linear forwards; white-space: nowrap; }
/* the dot crosses the word, painting it green; the word then settles to white and the dot becomes its full stop */
.iline .idot { position: absolute; left: 0; top: .36em; width: .17em; height: .17em; margin-left: -.085em; border-radius: 50%; background: var(--dot); box-shadow: 0 0 .5em rgba(114, 220, 95, .8); opacity: 0; animation: travel 1s linear forwards; }
@keyframes sweep { 0% { clip-path: inset(0 100% 0 0); color: var(--dot); } 72% { clip-path: inset(0 0 0 0); color: var(--dot); } 100% { clip-path: inset(0 0 0 0); color: #fff; } }
@keyframes travel { 0% { left: 0; top: .36em; opacity: 1; } 72% { left: 100%; top: .36em; opacity: 1; } 86% { left: calc(100% + .12em); top: .2em; } 100% { left: calc(100% + .12em); top: .615em; opacity: 1; box-shadow: none; } }
.iline:nth-child(1) .base { animation-delay: .5s; } .iline:nth-child(2) .base { animation-delay: .62s; } .iline:nth-child(3) .base { animation-delay: .74s; }
.iline:nth-child(1) .fill, .iline:nth-child(1) .idot { animation-delay: 1.2s; }
.iline:nth-child(2) .fill, .iline:nth-child(2) .idot { animation-delay: 2.3s; }
.iline:nth-child(3) .fill, .iline:nth-child(3) .idot { animation-delay: 3.4s; }

/* ---------- programme hero, second pass ---------- */
.hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
.hero-text { gap: 14px; }
.hero-logos { gap: 0; margin-bottom: 14px; align-items: center; }
.hero-logos .logo { height: 30px; filter: none !important; }
.hero-logos .logo + .logo { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(128, 140, 155, .4); box-sizing: content-box; }
.hero-text h1 .ch { display: inline-block; animation: chIn .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 38ms + .1s); white-space: pre; }
@keyframes chIn { from { opacity: 0; transform: translateY(.55em) rotate(6deg); } }
/* robotics pages get a squarer, engineered headline face */
body[data-programme^=vex] .hero-text h1 { font-family: 'Chakra Petch', var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
body[data-programme=vex-iq] .hero-text h1 { color: #0077c8; }
[data-theme=dark] body[data-programme=vex-iq] .hero-text h1 { color: #4fb4f5; }
/* the blue panel now belongs to the robot's column, so it can never run under the text */
body[data-programme=vex-iq] .hero::after { display: none; }
body[data-programme=vex-iq] .hero-visual::before { content: ''; position: absolute; top: -300px; bottom: -300px; left: -4%; right: -60vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='6' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"), linear-gradient(135deg, #0a8ae0, #005a9e);
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
.hero-visual canvas { position: relative; }
.robot-controls { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; align-items: center; gap: 14px; font: 600 .82rem var(--body); color: #fff; }
.robot-controls span { display: inline-flex; align-items: center; gap: 8px; opacity: .9; }
.robot-controls span::before { content: '↔'; display: inline-block; font-size: 1.1rem; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.robot-controls button { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .55); color: #fff; font: inherit; padding: 7px 14px; border-radius: 99px; cursor: pointer; animation: pulse 2.6s ease-in-out infinite; }
.robot-controls button:hover { background: #fff; color: #16222e; animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, .12); } }
@media (max-width: 860px) { body[data-programme=vex-iq] .hero-visual::before { left: -50vw; clip-path: none; } }

.phone-row { grid-template-columns: 118px 1fr; }

/* ---------- demo account card ---------- */
.demo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 24px; display: grid; gap: 20px; }
.demo-card header { display: grid; gap: 6px; }
.demo-card header p { color: var(--muted); font-size: .92rem; max-width: 72ch; }
/* one row, every control the same height, labels on one line */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.6fr); gap: 16px; align-items: end; }
.demo-grid .field > span { line-height: 1.2; }
.demo-grid input, .demo-grid select { height: 46px; padding: 0 14px; font-size: .95rem; min-width: 0; width: 100%; }
.demo-grid .date-field { display: grid; grid-template-columns: .75fr 1.35fr .95fr; gap: 8px; width: 100%; }
.demo-foot { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .demo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .demo-grid { grid-template-columns: 1fr; } }

/* ---------- sign-in doors: who are you? ---------- */
.auth-form .view:not([hidden]) { animation: viewIn .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateX(14px); } }
.doors-auth { display: grid; gap: 10px; }
.pick { --tone: var(--a); display: grid; gap: 2px; text-align: left; padding: 14px 44px 14px 18px; border-radius: var(--r-m); border: 1.5px solid var(--line); border-left: 5px solid var(--tone); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; position: relative; transition: transform .15s, border-color .15s, box-shadow .15s; }
.pick strong { font: 700 1.08rem var(--display); color: var(--head); }
.pick span { font-size: .84rem; color: var(--muted); }
.pick::after { content: ''; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: translateY(-50%) rotate(45deg); transition: right .15s, border-color .15s; }
.pick:hover, .pick:focus-visible { transform: translateX(4px); border-color: var(--tone); box-shadow: 0 12px 24px -18px rgba(22, 34, 46, .6); }
.pick:hover::after { right: 14px; border-color: var(--tone); }
.pick[data-tone=student] { --tone: var(--a); }
.pick[data-tone=teacher] { --tone: var(--ink-2); }
.pick[data-tone=new] { --tone: var(--dot); }
/* a PYP class link: the class's names, big enough for a small finger */
.kids-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 12px; }
.kid { display: grid; justify-items: center; gap: 8px; min-height: 132px; padding: 16px 10px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--surface); color: var(--head); font: 700 1.05rem var(--display); cursor: pointer; transition: transform .15s, border-color .15s; }
.kid b { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--school-accent, var(--a)) 16%, var(--surface)); color: var(--school-accent, var(--a)); font-size: 1.9rem; }
.kid span { overflow-wrap: anywhere; text-align: center; }
.kid:hover, .kid:focus-visible { transform: translateY(-3px); border-color: var(--school-accent, var(--a)); }
@media (prefers-reduced-motion: reduce) { .kid { transition: none; } .kid:hover { transform: none; } }
[data-theme=dark] .pick[data-tone=teacher] { --tone: #8fa3b5; }
.code-input { font: 700 1.25rem var(--display) !important; letter-spacing: .32em; text-transform: uppercase; text-align: center; }
/* first-time student: the class the code opened, then the login fields */
.class-found { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-m); background: #e9f7ef; border: 1.5px solid #b9e2cb; animation: noticeIn .35s cubic-bezier(.2, .8, .2, 1); }
.class-found .tick { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--b); position: relative; }
.class-found .tick::after { content: ''; position: absolute; left: 11px; top: 7px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.class-found div { display: grid; min-width: 0; flex: 1; }
.class-found strong { font: 700 1rem var(--display); color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-found span { font-size: .82rem; color: var(--muted); }
.class-found .link { font-size: .84rem; }
.first-login { display: grid; gap: 12px; animation: viewIn .4s cubic-bezier(.2, .8, .2, 1); }

/* ---------- the class code, shown large to the teacher ---------- */
.class-code { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--r-m); background: var(--paper); border: 1.5px dashed var(--line); }
.class-code .label { display: grid; gap: 2px; font-size: .84rem; color: var(--muted); flex: 1; min-width: 200px; }
.class-code .label strong { font: 700 .95rem var(--display); color: var(--head); }
.class-code .digits, .kids-box .digits { display: flex; gap: 6px; }
/* the class number: big on the teacher's screen and in the child's box */
.kids-digits { font: 800 2rem var(--display); letter-spacing: .4em; text-align: center; max-width: 9ch; }
.class-code .digits b, .kids-box .digits b { width: 44px; height: 56px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: #fff; font: 800 1.7rem var(--display); box-shadow: inset 0 -4px 0 var(--dot); }
.klass.waiting .class-code .digits b, .klass.closed .class-code .digits b { opacity: .45; }
@media (max-width: 520px) { .class-code .digits b { width: 36px; height: 48px; font-size: 1.35rem; } }

/* ---------- phones: the top bar and the reader bar ---------- */
.top .out svg { display: none; }
@media (max-width: 640px) {
  .top { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .top .brand { font-size: 1.12rem; }
  .top .who { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  /* sections drop to a row of their own, under the brand and the buttons */
  .top .tabs { order: 3; flex: 1 0 100%; margin-left: 0; }
  .top .tabs a { flex: 1; text-align: center; }
  .top .bell, .top .icon-btn { width: 36px; height: 36px; }
  .top .btn.small { height: 36px; padding: 0 11px; }
  .top .out { width: 36px; padding: 0; border-radius: 50%; }
  .top .out span { display: none; }
  .top .out svg { display: block; }
  /* the notification list spans the screen instead of hanging off the bell */
  .bell-wrap { position: static; }
  .notes { left: 14px; right: 14px; top: calc(100% + 6px); width: auto; max-height: 70dvh; }
  .klass-head { padding: 16px; gap: 12px; }
  .klass-body { padding: 0 16px 18px; }
  .panel { padding: 18px 16px; }
}
@media (max-width: 760px) {
  .reader .bar { gap: 6px; padding: 8px 10px; overflow-x: auto; }
  .reader .bar .tool { padding: 8px 9px; font-size: .8rem; }
  .scrub { gap: 10px; padding: 8px 12px; }
  .scrub .count { min-width: 0; }
}
@media (max-width: 440px) { .grid2 { grid-template-columns: 1fr; } }

/* the slogan: each line stays whole, sized to the column it sits in */
.slogan-block { container-type: inline-size; min-width: 0; }
/* the first size is for browsers without container units */
.slogan { font-size: clamp(2.2rem, min(4.6vw, 14.5vh), 7.4rem); font-size: clamp(2.2rem, min(21cqw, 14.5vh), 7.4rem); justify-items: start; }
.slogan span b { white-space: nowrap; }

/* warning over the book while its pages are blurred */
.blur-note { position: absolute; z-index: 4; top: 12px; left: 12px; right: 12px; margin: 0 auto; max-width: 560px; display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-m); background: #fdf1c7; color: #5c4400; border-left: 5px solid var(--d); font-size: .9rem; line-height: 1.45; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.blur-note strong { font: 700 1.05rem var(--display); color: #16222e; }

/* programme page on a phone: one column (the second-pass hero rule above set two again) */
@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; gap: 20px; }
  .hero-text h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* ---------- Python editor beside the book ---------- */
.py { --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace; flex: none; width: min(560px, 46vw); background: #121c26; border-left: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; min-height: 0; min-width: 0; user-select: text; -webkit-user-select: text; }
.py > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.py-name { display: grid; min-width: 0; }
.py-name strong { font: 700 1rem var(--display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.py-name strong::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); margin-right: 8px; vertical-align: 1px; }
.py-name span { font-size: .76rem; color: #93a3bf; }
.py > header .actions { flex-wrap: nowrap; gap: 6px; }
.py .tool { padding: 7px 10px; font-size: .8rem; }
.py-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.py-editor { flex: 1.3 1 0; min-height: 0; overflow: hidden; background: #0f1820; }
.py-editor .CodeMirror { height: 100%; font: 400 14px/1.6 var(--mono); }
.py-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #16222e; border-block: 1px solid rgba(255, 255, 255, .08); }
.py-run { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r-s); background: var(--dot); color: #0f2a0a; font: 700 .9rem var(--body); padding: 9px 18px 9px 14px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.py-run::before { content: ''; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.py-run:hover { box-shadow: 0 0 0 4px rgba(114, 220, 95, .22); }
.py-run:active { transform: scale(.97); }
.py-run:disabled { opacity: .5; cursor: default; box-shadow: none; }
.py-status { flex: 1; min-width: 0; font-size: .8rem; color: #93a3bf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.py-save { display: grid; gap: 10px; padding: 14px; background: #1a2733; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.py-save .field > span { color: #dbe3f0; }
.py-save small { color: #93a3bf; font-size: .8rem; }
.py-save input[type=text] { background: #0f1820; border-color: rgba(255, 255, 255, .16); color: #fff; padding: 9px 12px; font-size: .92rem; }
.py-save .btn { background: #fff; color: #16222e; border-color: #fff; }
.py-save .btn.quiet { background: transparent; color: #dbe3f0; border-color: rgba(255, 255, 255, .2); }
.py-console { flex: 1 1 0; min-height: 0; overflow: auto; padding: 12px 14px; background: #0a1118; color: #dbe3f0; font: 400 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.py-console:empty::before { content: 'Output appears here when you press Run.'; color: #5b6f84; }
.py-console .in { color: var(--dot); }
.py-console .err { color: #ff9d85; }
.py-console .hint { color: #5b6f84; }
.py-console input[type=text] { width: min(60%, 260px); padding: 0 2px; border: 0; border-bottom: 1px dashed var(--dot); border-radius: 0; background: transparent; color: var(--dot); font: inherit; }
.py-console input[type=text]:focus-visible { box-shadow: none; border-color: var(--dot); }
.py-list { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start; font-size: .9rem; }
.py-list .tool { justify-self: start; }
/* editor colours: the brand slate, with the design-cycle colours for syntax */
.cm-s-dev.CodeMirror { background: #0f1820; color: #e6edf5; }
.cm-s-dev .CodeMirror-gutters { background: #0f1820; border-right: 1px solid rgba(255, 255, 255, .06); }
.cm-s-dev .CodeMirror-linenumber { color: #4f6378; }
.cm-s-dev .CodeMirror-cursor { border-left: 2px solid var(--dot); }
.cm-s-dev .CodeMirror-selected, .cm-s-dev.CodeMirror-focused .CodeMirror-selected { background: rgba(114, 220, 95, .2); }
.cm-s-dev .cm-keyword { color: #7fb7f0; font-weight: 600; }
.cm-s-dev .cm-string { color: #8fe3a0; }
.cm-s-dev .cm-number { color: #f6d981; }
.cm-s-dev .cm-comment { color: #6f8296; font-style: italic; }
.cm-s-dev .cm-builtin { color: #c9a6ff; }
.cm-s-dev .cm-def { color: #ffc48a; }
.cm-s-dev .cm-operator { color: #c6d1dc; }
.cm-s-dev .CodeMirror-matchingbracket { color: #fff !important; background: rgba(114, 220, 95, .3); }
.cm-s-dev .py-errline { background: rgba(220, 79, 42, .22); box-shadow: inset 3px 0 0 var(--d); }
.viewport { min-height: 0; }
@media (max-width: 760px) {
  /* on a phone the book stays on top and the editor takes the lower part */
  .body.coding { flex-direction: column; }
  .py { width: 100%; height: 60%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .py-editor .CodeMirror { font-size: 13px; }
}

/* ---------- My files ---------- */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; align-items: start; }
.file-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--dot); border-radius: var(--r-m); padding: 18px; display: grid; gap: 12px; min-width: 0; }
.file-card header { display: grid; gap: 8px; }
.file-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.file-card .tags .chip { white-space: normal; line-height: 1.25; }
.file-card pre { margin: 0; font: 400 12.5px/1.55 'JetBrains Mono', Consolas, monospace; white-space: pre; overflow: auto; max-height: 220px; border-radius: var(--r-s); padding: 12px 14px; }
.code-view { background: #0f1820; color: #e6edf5; }
/* the reader's Copy list: a piece of code, a table or a formula, each with its own button */
.piece { display: grid; gap: 6px; min-width: 0; }
.piece + .piece { margin-top: 14px; }
.piece-head { display: flex; align-items: center; gap: 10px; }
.piece-head .btn { margin-left: auto; }
.piece-head small { color: var(--muted); }
.piece pre { margin: 0; font: 400 12.5px/1.55 'JetBrains Mono', Consolas, monospace; white-space: pre; overflow: auto; max-height: 240px; border-radius: var(--r-s); padding: 12px 14px; tab-size: 14; font-variant-ligatures: none; }
.out-view { display: grid; gap: 4px; }
.out-view small, .file-card footer small { color: var(--muted); font-size: .8rem; }
.out-view pre { background: var(--paper); color: var(--text); border: 1px solid var(--line); max-height: 140px; white-space: pre-wrap; }
.file-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* ---------- notes editor beside the book ---------- */
.notepad { flex: none; width: min(560px, 46vw); background: #121c26; border-left: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; min-height: 0; min-width: 0; user-select: text; -webkit-user-select: text; }
.notepad { position: relative; }
.np-grip { position: absolute; z-index: 5; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; touch-action: none; }
.np-grip::after { content: ''; position: absolute; top: 50%; left: 3px; width: 4px; height: 44px; margin-top: -22px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.np-grip:hover::after, .np-grip:focus-visible::after, .notepad.resizing .np-grip::after { background: var(--a); }
.notepad.resizing { user-select: none; -webkit-user-select: none; }
.notepad > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.notepad > header .actions { flex-wrap: nowrap; gap: 6px; }
.notepad .tool { padding: 7px 10px; font-size: .8rem; }
.notepad .py-name strong::before { background: var(--c); }
.note-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; background: #16222e; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nt-group { display: inline-flex; gap: 2px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .12); }
.nt { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #dbe3f0; font: 600 .95rem var(--body); cursor: pointer; list-style: none; }
.nt::-webkit-details-marker { display: none; }
.nt:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nt-style { width: auto; padding: 6px 28px 6px 10px; font-size: .82rem; background-color: #0f1820; border-color: rgba(255, 255, 255, .16); color: #dbe3f0; }
.nt-a { border-bottom: 3px solid var(--d); line-height: 1.1; padding: 0 2px; }
.nt-a.mark { border-bottom: 0; background: #fff3a3; color: #16222e; border-radius: 3px; padding: 0 4px; }
.nt-menu { position: relative; }
.nt-swatches { position: absolute; z-index: 6; top: 36px; left: 0; display: grid; grid-template-columns: repeat(3, 26px); gap: 6px; padding: 8px; background: #fff; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.nt-swatches button { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(22, 34, 46, .2); cursor: pointer; padding: 0; }
.nt-swatches button.none { background: linear-gradient(135deg, #fff 44%, var(--d) 45% 55%, #fff 56%) !important; }
.note-paper { flex: 1 1 0; min-height: 0; overflow: auto; background: #1a2733; padding: 14px; }
.note-edit { min-height: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); cursor: text; }
.note-edit:focus-visible { outline: 2px solid var(--dot); outline-offset: 4px; }
.note-edit:empty::before { content: 'Write your notes for this page here, in your own words.'; color: #9aa7b8; }
.note-save::before { display: none; }
.note-save { padding: 9px 18px; margin-left: auto; }
/* a note, wherever it is shown: always dark text on white paper, as it was written */
.note-view { background: #fff; color: #16222e; border-radius: var(--r-s); padding: 18px 20px; font: 400 .95rem/1.6 var(--body); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.note-view > :first-child { margin-top: 0; }
.note-view > :last-child { margin-bottom: 0; }
.note-view p, .note-view div { margin: 0 0 .5em; }
.note-view h1, .note-view h2, .note-view h3 { color: #16222e; margin: .7em 0 .35em; }
.note-view h1 { font-size: 1.5rem; }
.note-view h2 { font-size: 1.22rem; }
.note-view h3 { font-size: 1.05rem; }
.note-view ul, .note-view ol { margin: 0 0 .6em; padding-inline-start: 1.5em; }
.note-view blockquote { margin: 0 0 .6em; padding: 6px 14px; border-inline-start: 4px solid var(--c); background: #fbf6e4; border-radius: 0 6px 6px 0; }
.note-view hr { border: 0; border-top: 1.5px solid #d8dee9; margin: .9em 0; }
@media (max-width: 760px) {
  .notepad { width: 100% !important; height: 60%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .np-grip { display: none; }
}

/* ---------- pop-up windows ---------- */
dialog.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: hidden; user-select: text; -webkit-user-select: text; }
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal.wide { width: min(720px, calc(100vw - 32px)); }
.modal > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal > header h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.modal-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--head); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.modal-x:hover { border-color: var(--head); }
.modal-body { padding: 20px 22px 22px; display: grid; gap: 16px; overflow-y: auto; }
.modal-body pre { margin: 0; font: 400 12.5px/1.55 'JetBrains Mono', Consolas, monospace; overflow: auto; max-height: 46dvh; border-radius: var(--r-s); padding: 12px 14px; }
.modal-body .note-view { border: 1px solid var(--line); max-height: 56dvh; overflow: auto; }
.modal-meta { color: var(--muted); font-size: .9rem; }
.modal .actions { justify-content: flex-end; }

/* ---------- files sent with a question or shared in a group ---------- */
.shared-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 11px 5px 5px; border-radius: 99px; border: 1px solid #cfd8e3; background: #f5f7fa; color: #16222e; font: 500 .82rem var(--body); text-decoration: none; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
span.file-chip { cursor: default; }
.file-chip b { flex: none; padding: 2px 9px; border-radius: 99px; background: var(--b); color: #fff; font: 700 .7rem var(--display); letter-spacing: .02em; }
.file-chip.note b { background: #b8860b; }
.file-chip.page b { background: var(--a); }
.file-chip.upload b { background: #5d6b85; }
.file-chip.off { opacity: .55; }
button.file-chip:hover, a.file-chip:hover { border-color: #16222e; }
.file-chip button { border: 0; background: none; color: #5d6b85; font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 0 0 2px; }
.attacher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pick-folder { display: grid; gap: 2px; }
.pick-folder > strong { display: flex; justify-content: space-between; gap: 10px; font: 700 .86rem var(--display); color: var(--head); padding: 4px 0; }
.pick-folder > strong .link { font: 500 .8rem var(--body); }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); cursor: pointer; font-size: .92rem; }
.pick-row:hover { background: var(--paper); }
.pick-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-row small { color: var(--muted); white-space: nowrap; }
.pick-people { display: grid; gap: 10px; max-height: 220px; overflow-y: auto; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--r-s); }
.ref-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 8px; align-items: center; }
.ref-row input, .ref-row select { padding: 9px 10px; font-size: .9rem; }
.msg .shared-chips { margin-top: 2px; }

/* ---------- My files: a folder for each book ---------- */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .95rem; color: var(--muted); }
.crumbs strong { color: var(--head); }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 26px 22px; }
.folder { display: grid; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: transform .18s; animation: doorIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.folder:hover, .folder:focus-visible { transform: translateY(-4px); }
.folder-tab { justify-self: start; padding: 7px 18px 6px; border-radius: 12px 12px 0 0; background: var(--ink); color: #fff; font: 800 .9rem var(--display); letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 3px 0 var(--dot); }
.folder-body { display: grid; gap: 12px; padding: 20px; min-height: 150px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 0 var(--r-m) var(--r-m) var(--r-m); box-shadow: 0 16px 30px -22px rgba(22, 34, 46, .55); }
.folder:hover .folder-body { border-color: var(--head); }
.folder-body strong { font: 700 1.18rem/1.2 var(--display); color: var(--head); }
.folder-body small { color: var(--muted); font-size: .8rem; }
.folder-counts { display: flex; flex-wrap: wrap; gap: 6px; }
[data-theme=dark] .folder-tab { background: #eef3f8; color: #16222e; }
[data-theme=dark] .folder-body { border-top-color: #eef3f8; }
.file-section { display: grid; gap: 18px; padding: 22px clamp(14px, 3vw, 26px) 26px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); --tone: #b8860b; }
.file-section.code { --tone: var(--b); }
.file-section + .file-section { margin-top: 26px; }
.file-section > header { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding-left: 14px; border-left: 5px solid var(--tone); }
.file-section > header h2 { font-size: 1.3rem; }
.file-section > header p { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; }
.file-section .file-card { background: var(--paper); border-top-color: var(--tone); }
.file-card .note-view { max-height: 240px; overflow: auto; border: 1px solid var(--line); }
.unit-set { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.unit-set input { width: 64px; padding: 7px 8px; font-size: .85rem; }

/* ---------- discussion groups ---------- */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.group-card { display: grid; gap: 10px; align-content: start; text-align: left; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--a); border-radius: var(--r-m); font: inherit; color: var(--text); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.group-card:hover, .group-card:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 32px -22px rgba(22, 34, 46, .55); }
.group-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.group-top strong { font: 700 1.15rem var(--display); color: var(--head); overflow-wrap: anywhere; }
.group-task { color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.group-last { font-size: .88rem; padding: 9px 12px; border-radius: var(--r-s); background: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-card small { color: var(--muted); font-size: .8rem; }
.group-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
/* the side keeps to its column: its one track is the column's width, never its widest content (Firefox sizes an
   auto track by what is inside, so the panels grew under the chat) */
.group-side { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.group-side > * { min-width: 0; }
.group-layout > * { min-width: 0; }
.panel.task > header { display: flex; align-items: center; gap: 12px; }
.panel.task > header > div { flex: 1; min-width: 0; }
.panel.task > header small, .task-part > small { color: var(--muted); font-size: .8rem; }
.panel.task .kind-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--a); }
.task-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--head); }
.task-part { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.who-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-row .avatar { width: 28px; height: 28px; font-size: .8rem; }
.group-side .people li { align-items: center; flex-wrap: wrap; }
.add-member select { width: 100%; padding: 9px 12px; font-size: .9rem; }
.danger-zone { display: flex; justify-content: flex-end; }
.chat { display: flex; flex-direction: column; height: min(72dvh, 760px); min-height: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; position: sticky; top: 84px; }
.posts { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.no-posts { margin: auto; padding: 0 20px 20px; color: var(--muted); text-align: center; }
.post { display: flex; gap: 10px; align-items: flex-end; max-width: min(84%, 620px); }
.post .avatar { width: 30px; height: 30px; font-size: .82rem; }
.post.mine { align-self: flex-end; }
.bubble { display: grid; gap: 5px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.post.mine .bubble { border-radius: 16px 16px 4px 16px; background: #e4f4ec; border-color: #b9e2cb; }
.bubble > small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: .76rem; }
.bubble > small b { color: var(--head); font-size: .84rem; }
.bubble p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--head); }
.bubble .gone { color: var(--muted); font-style: italic; }
/* the teacher's voice stands apart from the students' */
.post.teacher .bubble { background: #16222e; border-color: #16222e; box-shadow: inset 4px 0 0 var(--dot); }
.post.teacher .bubble p, .post.teacher .bubble > small b { color: #fff; }
.post.teacher .bubble > small { color: #a9b8c6; }
.post.teacher .avatar { background: var(--dot); color: #0f2a0a; box-shadow: none; }
.role-tag { padding: 1px 8px; border-radius: 99px; background: var(--dot); color: #0f2a0a; font: 800 .66rem var(--display); letter-spacing: .05em; text-transform: uppercase; }
.post.warning { align-self: center; max-width: min(92%, 560px); display: grid; gap: 3px; padding: 12px 16px; border-radius: var(--r-m); background: #fbe2da; border: 1px solid #f0c4b7; border-left: 5px solid var(--d); color: #16222e; text-align: left; }
.post.warning strong { color: #a23412; font: 700 .95rem var(--display); }
.post.warning p { white-space: pre-wrap; overflow-wrap: anywhere; }
.post.warning small { color: #7a5140; font-size: .76rem; }
.post-tools { display: flex; gap: 12px; font-size: .78rem; }
.post-tools .link { color: var(--d); }
.post-tools .link.armed { font-weight: 700; }
.chat-form { display: grid; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid var(--line); background: var(--paper); }
.chat-form textarea { min-height: 58px; max-height: 160px; }
.chat-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-form > small { color: var(--muted); font-size: .78rem; }
[data-theme=dark] .post.mine .bubble { background: rgba(35, 145, 95, .22); border-color: rgba(35, 145, 95, .4); }
[data-theme=dark] .post.teacher .bubble { background: #eef3f8; border-color: #eef3f8; }
[data-theme=dark] .post.teacher .bubble p, [data-theme=dark] .post.teacher .bubble > small b { color: #16222e; }
[data-theme=dark] .post.teacher .bubble > small { color: #5d6b85; }
@media (max-width: 900px) {
  .group-layout { grid-template-columns: 1fr; }
  .chat { position: static; height: 70dvh; }
}
/* ---------- tasks: a lane for each unit ---------- */
.unit-lane { display: grid; gap: 16px; padding: 20px clamp(14px, 3vw, 24px) 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); animation: doorIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.unit-lane + .unit-lane { margin-top: -30px; }
.unit-lane > header { display: flex; align-items: center; gap: 16px; }
.unit-lane > header h2 { font-size: 1.3rem; }
.unit-lane > header p { color: var(--muted); font-size: .88rem; }
/* the same tile the book covers carry */
.unit-tile { flex: none; width: 58px; height: 66px; display: grid; place-content: center; justify-items: center; gap: 1px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--c); }
.unit-tile small { font: 800 .58rem var(--display); letter-spacing: .22em; color: var(--c); padding-left: .22em; }
.unit-tile b { font: 800 1.7rem/1 Georgia, 'Times New Roman', serif; }
.task-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.task-tile { display: grid; gap: 10px; align-content: start; text-align: left; padding: 16px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--paper); font: inherit; color: var(--text); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.task-tile:hover, .task-tile:focus-visible { transform: translateY(-3px); border-color: var(--head); box-shadow: 0 16px 28px -22px rgba(22, 34, 46, .6); }
.task-tile.closed { opacity: .78; }
.task-tile strong { font: 700 1.05rem/1.25 var(--display); color: var(--head); overflow-wrap: anywhere; }
.tile-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tile-top .due { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--b); }
.tile-top .due.over { color: var(--d); }
.tile-foot { font-size: .84rem; color: var(--muted); }
/* the class a task was set for, on the teacher's tile: in the colour of the tile's top edge */
/* a discussion group's card: its programme (a dot in the programme's colour) and its class, then who is in it */
.group-place { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.prog { --tone: var(--ink); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--head); }
.chip.prog i { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); flex: none; }
.chip.prog[data-prog=myp] { --tone: #e1251b; } .chip.prog[data-prog=pyp] { --tone: #f5a800; } .chip.prog[data-prog=vex-iq] { --tone: #0077c8; } .chip.prog[data-prog=vex-v5] { --tone: #d22630; }
.group-place .chip.klass { font-weight: 700; color: var(--head); box-shadow: inset 0 0 0 1.5px var(--line); }
.group-people { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.group-closes { font-size: .84rem; font-weight: 600; color: var(--d); }
.group-people b { color: var(--text); font-weight: 600; }
.tile-top .chip.klass { font-weight: 700; color: var(--head); background: color-mix(in srgb, var(--unit, var(--a)) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--unit, var(--a)); }
.type-chip { padding: 3px 10px; border-radius: 99px; font: 800 .68rem var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--a); }
.type-chip.summative { background: var(--d); }
.type-chip.quiz { background: #8a3fc9; }
.page-head .tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-layout { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); }
.task-main { display: grid; gap: 18px; min-width: 0; }
.task-img { max-width: 100%; border-radius: var(--r-s); border: 1px solid var(--line); display: block; }
.file-chip.criterion b { background: var(--ink); }
.answer-box { min-height: 220px; }
.answer-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line); color: var(--head); font-size: .94rem; }
.panel.marked { border-left: 5px solid var(--b); }
.mark-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mark-chip { display: grid; gap: 1px; padding: 8px 14px; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line); min-width: 92px; }
.mark-chip small { color: var(--muted); font-size: .72rem; }
.mark-chip b { font: 800 1.05rem var(--display); color: var(--head); }
.mark-chip.lv1 { border-left: 4px solid var(--d); } .mark-chip.lv2 { border-left: 4px solid var(--c); }
.mark-chip.lv3 { border-left: 4px solid var(--a); } .mark-chip.lv4 { border-left: 4px solid var(--b); }
.mark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.mark-grid select, .mark-grid input { padding: 9px 10px; }
.table-wrap { overflow-x: auto; }
.marks-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.marks-table th { text-align: left; font: 700 .78rem var(--display); color: var(--muted); padding: 8px 10px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.marks-table td { padding: 10px; border-bottom: 1px solid var(--line); }
.marks-table .num { text-align: center; white-space: nowrap; }
.due-pick { display: grid; gap: 8px; }
.due-pick .date-field { display: grid; grid-template-columns: .8fr 1.3fr 1fr; gap: 6px; }
.due-pick select { padding: 9px 8px; font-size: .9rem; }
.when-pick { display: grid; gap: 8px; }
.when-pick > select { padding: 9px 8px; font-size: .9rem; }
.when-late { color: #a3301a; font-weight: 600; white-space: normal !important; overflow: visible !important; }
.grid2:has(.when-pick) { align-items: start; }
.tt-todo + .tt-todo { margin-top: 16px; }
.tt-todo h3 { font-size: .95rem; margin: 0 0 6px; }
.tt-todo .tt-form .when-pick { flex: 1 1 260px; }
:root[data-theme=dark] .when-late { color: #ff9b85; }
.assess { display: grid; gap: 14px; padding: 14px 16px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); }
.crit-list { display: grid; gap: 4px; }
.crit { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-s); cursor: pointer; font-size: .92rem; }
.crit:hover { background: var(--surface); }
.crit b:empty { display: none; }
.crit b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 800 .78rem var(--display); }
.crit span { flex: 1; }
.crit .num-field { width: 76px; padding: 6px 8px; font-size: .88rem; }
.ref-row.two { grid-template-columns: 110px auto; justify-content: start; }
.back-task { background: var(--c); color: #16222e; border-color: var(--c); font-weight: 700; }
.back-task:hover { color: #16222e; border-color: #fff; }

/* ---------- the marks board ---------- */
.boards { display: grid; gap: 28px; }
.marks-board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.board-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding: 22px clamp(16px, 3vw, 28px); background: var(--ink); color: #fff; box-shadow: inset 0 -5px 0 var(--dot); }
.marks-board.myp .board-head { box-shadow: inset 0 -5px 0 var(--a); background: linear-gradient(100deg, #16222e 55%, #1d3f63); }
.board-head small { font: 800 .74rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: #a9c8e8; }
.board-head h2 { color: #fff; font-size: 1.6rem; }
.board-meta { display: flex; gap: 16px; font-size: .84rem; color: #c6d1dc; }
.board-part { padding: 22px clamp(16px, 3vw, 28px); display: grid; gap: 12px; }
.board-part + .board-part { border-top: 1px solid var(--line); }
.board-part > header { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.board-part > header h3 { font-size: 1.15rem; }
.board-part > header p { color: var(--muted); font-size: .86rem; flex-basis: 100%; }
table.board { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
table.board th { text-align: left; font: 700 .76rem var(--display); letter-spacing: .03em; color: var(--muted); padding: 9px 10px; border-bottom: 2px solid var(--line); vertical-align: bottom; }
table.board td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.board td.date { white-space: nowrap; color: var(--muted); font-size: .84rem; }
table.board td a { font-weight: 600; color: var(--head); text-decoration: none; display: block; }
table.board td a:hover { text-decoration: underline; }
table.board td small { color: var(--muted); font-size: .78rem; }
table.board td.none { text-align: center; color: var(--muted); padding: 20px; }
table.board .num { text-align: center; white-space: nowrap; }
table.board .bar-col { min-width: 150px; }
.evidence { display: grid; gap: 6px; min-width: 200px; }
.evidence p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .86rem; }
/* MYP criteria columns: the design-cycle colours */
.crit-head { text-align: center !important; width: 78px; }
.crit-head b { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 4px; border-radius: 50%; color: #fff; font: 800 1rem var(--display); }
.crit-head small { display: block; font: 500 .66rem/1.2 var(--body); letter-spacing: 0; color: var(--muted); }
.crit-head.cA b { background: var(--a); } .crit-head.cB b { background: var(--b); } .crit-head.cC b { background: var(--c); color: #16222e; } .crit-head.cD b { background: var(--d); }
td.level { text-align: center; vertical-align: middle !important; }
td.level b { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 10px; font: 800 1.1rem var(--display); color: var(--head); }
td.level.cA b { background: rgba(47, 116, 181, .16); } td.level.cB b { background: rgba(35, 145, 95, .16); }
td.level.cC b { background: rgba(242, 194, 48, .28); } td.level.cD b { background: rgba(220, 79, 42, .16); }
td.level.off { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(93, 107, 133, .1) 6px 7px); }
td.level .todo { color: var(--muted); }
table.board tfoot th { border-bottom: 0; border-top: 2px solid var(--head); color: var(--head); font-size: .84rem; text-align: right; vertical-align: middle; }
table.board tfoot td { border-bottom: 0; border-top: 2px solid var(--head); }
td.final { display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: center; justify-content: start; font-size: .84rem; }
td.final span { color: var(--muted); }
td.final b { font: 800 1rem var(--display); color: var(--head); }
td.final .grade { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.25rem; box-shadow: inset 0 -4px 0 var(--dot); }
.gauge { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--muted); }
.gauge .meter { flex: 1; min-width: 90px; height: 8px; }
.gauge b { color: var(--head); font: 800 .95rem var(--display); min-width: 44px; text-align: right; }
[data-theme=dark] .unit-tile, [data-theme=dark] td.final .grade, [data-theme=dark] .crit b, [data-theme=dark] .file-chip.crit b { background: #eef3f8; color: #16222e; }
[data-theme=dark] .unit-tile small { color: #8a6a00; }
@media (max-width: 900px) { .task-layout { grid-template-columns: 1fr; } }
/* ---------- tasks: rows by kind, the clock, question cards ---------- */
.type-row { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line); }
.type-row h3 { display: flex; align-items: center; gap: 8px; font-size: .95rem; padding-left: 10px; border-left: 4px solid var(--a); }
.type-row.summative h3 { border-color: var(--d); } .type-row.quiz h3 { border-color: #8a3fc9; }
.type-row h3 span { padding: 1px 8px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); font: 700 .74rem var(--body); color: var(--muted); }
.task-tile { border-top: 4px solid var(--a); }
.task-tile.summative { border-top-color: var(--d); } .task-tile.quiz { border-top-color: #8a3fc9; } .task-tile.practice { border-top-color: var(--practice); text-decoration: none; color: inherit; }
/* the practice of an exam: a teal of its own, used for nothing else (the exams are red, the formative tasks blue, the quizzes purple) */
:root { --practice: #0a8f93; } :root[data-theme=dark] { --practice: #4fd1d4; }
.type-chip.practice { background: var(--practice); } [data-theme=dark] .type-chip.practice { color: #06282a; } .type-row.practice h3 { border-color: var(--practice); }
.td2-note.pr { background: color-mix(in srgb, var(--practice) 18%, #fff); } :root[data-theme=dark] .td2-note.pr { background: color-mix(in srgb, var(--practice) 22%, #12201f); }
.task-main.solo { max-width: 620px; margin: 0 auto; }
.gate { text-align: center; justify-items: center; gap: 14px; padding: 34px 28px; border-top: 5px solid var(--c); }
.gate-clock { width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; background: var(--ink); color: #fff; font: 800 2rem/1 var(--display); box-shadow: 0 0 0 6px rgba(242, 194, 48, .35); animation: pulse 2s ease-in-out infinite; }
.gate-clock small { font: 700 .7rem var(--display); letter-spacing: .12em; color: var(--c); text-transform: uppercase; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(242, 194, 48, 0); } }
.warn-list { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; text-align: left; }
.warn-end { font-weight: 700; color: var(--d); }
.gate .actions { justify-content: center; }
.timer { position: sticky; top: 76px; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; border-radius: var(--r-m); background: var(--ink); color: #c6d1dc; font-size: .88rem; box-shadow: 0 14px 28px -18px rgba(22, 34, 46, .8); }
.timer > b { font: 800 1.5rem var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.timer .gauge { margin-left: auto; min-width: 170px; color: #c6d1dc; }
.timer .gauge b { color: #fff; }
.timer.soon { background: var(--d); color: #fff; animation: shake .5s; }
.saved-note { color: var(--muted); font-size: .82rem; }
.qcard { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-m); border: 1px solid var(--line); border-left: 5px solid var(--a); background: var(--paper); }
.qcard + .qcard { margin-top: 2px; }
.qcard.info { border-left-color: var(--muted); background: transparent; }
.qcard > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.q-no { font: 800 .82rem var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--head); margin-right: auto; }
.card-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--head); }
.qcard pre { margin: 0; font: 400 13px/1.55 'JetBrains Mono', Consolas, monospace; white-space: pre; overflow: auto; max-height: 320px; border-radius: var(--r-s); padding: 12px 14px; }
.choices { display: grid; gap: 6px; }
.choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--a); background: rgba(47, 116, 181, .09); }
.q-text { min-height: 96px; }
.qcard .pr-how { margin: 0; padding: 10px 16px 10px 2.2em; background: var(--paper); border-radius: var(--r-m); display: grid; gap: 4px; max-width: 75ch; }
.qcard textarea.code { font: 400 .9rem/1.5 'JetBrains Mono', Consolas, monospace; white-space: pre; overflow-x: auto; tab-size: 4; min-height: 160px; } /* formulas and code keep their lines and spaces */
.code-answer { display: grid; gap: 6px; }
.code-edit { border-radius: var(--r-s); overflow: hidden; border: 1px solid #1f2e3c; }
.code-edit .CodeMirror { height: auto; min-height: 120px; font: 400 14px/1.6 'JetBrains Mono', Consolas, monospace; }
.code-edit .CodeMirror-scroll { min-height: 120px; max-height: 360px; }
.code-answer .py-bar { border: 0; border-radius: var(--r-s); }
.code-answer > small, .qcard.marking > small { color: var(--muted); font-size: .76rem; }
.code-out { background: #0a1118; color: #dbe3f0; min-height: 44px; white-space: pre-wrap !important; }
.code-out.err { color: #ff9d85; }
.code-out .py-input { display: block; width: 100%; margin-top: 4px; background: transparent; color: inherit; border: 0; border-bottom: 1px dashed #5d6b85; font: inherit; padding: 2px 0; outline: none; }
/* a ready assessment: the Teacher Guide's own text, code and tables */
.ready-blocks { display: grid; gap: 10px; }
.ready-blocks pre, .code-answer .CodeMirror { font-variant-ligatures: none; } /* >= and == as typed, never one glyph */
.ready-head { font-size: 1.05rem; color: var(--head); padding-top: 4px; }
.ready-table { border-collapse: collapse; font-size: .88rem; }
.ready-table th, .ready-table td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
.ready-table th { background: var(--paper); color: var(--head); }
.ready-list { display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.ready-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; }
.ready-item:has(input:checked) { border-color: var(--a); box-shadow: inset 0 0 0 1px var(--a); }
.ready-item span { display: grid; gap: 2px; }
.ready-item small { color: var(--muted); font-size: .8rem; }
.ready-item small.made { color: var(--a-dark); }
.ready-item .chip { display: inline-flex; margin-left: 8px; vertical-align: 2px; } /* "Summative B" beside the unit name */
.ready-panel .card-head { flex-wrap: wrap; }
.ready-panel .card-head .btn { white-space: normal; text-align: left; }
.ready-set { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ready-set .field { flex: 1 1 200px; min-width: 0; }
/* a mark the computer suggests, until the teacher saves it */
.suggest-note { margin: 0; padding: 8px 12px; border-radius: var(--r-s); background: color-mix(in srgb, #f2c230 16%, var(--surface)); font-size: .86rem; }
input.suggested { border-color: #d9a300; background: color-mix(in srgb, #f2c230 12%, var(--surface)); }
.suggest-chip { margin-left: 6px; font-size: .72rem; }
/* the units of a Final report: a drop-down of check boxes */
.unit-drop { position: relative; }
.unit-drop > summary { cursor: pointer; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); list-style: none; }
.unit-drop > summary::-webkit-details-marker { display: none; }
.unit-drop > summary::after { content: "\25BE"; float: right; color: var(--muted); }
.unit-drop-list { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; display: grid; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
/* an exam being answered: the questions cannot be selected (the answers can) */
.exam-on .qcard .ready-blocks, .exam-on .qcard .card-text, .exam-on .qcard .pr-how, .exam-on .task-text { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* the tool of an exam beside its questions: the Python editor, PyLab or Excel */
.tool-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(46vw, 760px); display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -10px 0 30px -18px rgba(0, 0, 0, .35); }
.tool-panel[hidden] { display: none; }
.tool-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tool-panel > header h2 { font-size: 1rem; }
.tool-panel > header small { color: var(--muted); font-size: .8rem; }
.tool-body { overflow: auto; padding: 12px; min-height: 0; }
.with-tool main { margin-right: min(46vw, 760px); }
@media (max-width: 900px) { .tool-panel { width: 100vw; } .with-tool main { margin-right: 0; } }
.code-out.key { background: #0f2a1c; color: #a6e3a1; }
/* building the cards */
.builder { display: grid; gap: 14px; }
.qcard.edit { background: var(--surface); }
.card-tools { display: inline-flex; align-items: center; gap: 6px; }
.card-tools .nt { color: var(--head); border: 1px solid var(--line); }
.card-tools .nt:hover { background: var(--paper); color: var(--head); }
.inline-field { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.inline-field input { width: 74px; padding: 6px 8px; font-size: .88rem; }
.inline-field select { width: auto; padding: 6px 28px 6px 8px; font-size: .88rem; }
textarea.mono { font: 400 13px/1.5 'JetBrains Mono', Consolas, monospace; white-space: pre; }
.type-boxes { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.choice-edit { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.choice-edit input[type=text] { flex: 1; padding: 8px 10px; font-size: .92rem; }
.answer-card { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-s); background: #e9f7ef; border: 1px dashed #8fcfa9; }
.answer-card > strong { font: 700 .9rem var(--display); color: #156241; }
[data-theme=dark] .answer-card { background: rgba(35, 145, 95, .14); border-color: rgba(35, 145, 95, .5); }
[data-theme=dark] .answer-card > strong { color: #8fe3b9; }
.builder-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.builder-foot small { color: var(--muted); }
.card-pic { display: grid; gap: 6px; justify-items: start; }
details.panel > summary { cursor: pointer; font: 700 1.1rem var(--display); color: var(--head); }
details.panel[open] > summary { margin-bottom: 4px; }
.choice-review { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.choice-review li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--surface); }
.choice-review li small { margin-left: auto; font-weight: 700; }
.choice-review li.picked { border-color: var(--d); }
.choice-review li.right { border-color: var(--b); background: rgba(35, 145, 95, .1); }
.choice-review li.picked.right { border-color: var(--b); }
.choice-review li small + small { margin-left: 0; color: var(--b); }

/* the warning every account accepts once */
dialog.modal.warning { border-top: 6px solid var(--d); }
dialog.modal.warning > header h2 { color: var(--d); }
.warn-list b { color: var(--head); }

/* ---------- top of the class: a climb to the summit ---------- */
.top5:empty { display: none; }
.top5 { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 18px clamp(16px, 3vw, 26px) 0; border-radius: var(--r-l); background: linear-gradient(180deg, #16222e, #1c3243 70%, #24465a); color: #fff; overflow: hidden; }
.top5 > header { display: grid; gap: 4px; align-content: center; padding-bottom: 18px; }
.top5 > header small { font: 800 .7rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dot); }
.top5 h2 { color: #fff; font-size: 1.25rem; }
.my-rank { color: #c6d1dc; font-size: .86rem; }
.my-rank b { color: var(--dot); font: 800 1rem var(--display); }
.climb-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: .84rem; }
.climb-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; color: #dbe3f0; animation: viewIn .5s backwards; }
.climb-list li:nth-child(2) { animation-delay: .08s; } .climb-list li:nth-child(3) { animation-delay: .16s; } .climb-list li:nth-child(4) { animation-delay: .24s; } .climb-list li:nth-child(5) { animation-delay: .32s; }
.climb-list b { font: 800 .74rem var(--display); color: #a9b8c6; }
.climb-list li:first-child b { color: var(--c); }
.climb-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.climb-list i { font: 800 .86rem var(--display); font-style: normal; color: #fff; }
.climb-list li.me { background: rgba(114, 220, 95, .16); }
.mountain { position: relative; aspect-ratio: 600 / 220; container-type: size; max-height: 240px; justify-self: center; width: 100%; max-width: 660px; }
.peak { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.peak .ridge { fill: #2f5068; }
.peak .ridge.far { fill: #27445a; }
.peak .snow { fill: #eef3f8; }
.peak .trail { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; stroke-dashoffset: 0; animation: trail 2.6s linear backwards; }
@keyframes trail { from { stroke-dasharray: 0 900; } to { stroke-dasharray: 2 7; } }
.peak .flag { transform-origin: 300px 24px; animation: plant .6s cubic-bezier(.2, 1.4, .4, 1) 3s backwards; }
.peak .flag line { stroke: #fff; stroke-width: 2; }
.peak .flag path { fill: var(--dot); transform-origin: 300px 7px; animation: wave 1.4s ease-in-out 3.6s infinite alternate; }
@keyframes plant { from { transform: scaleY(0); opacity: 0; } }
@keyframes wave { to { transform: skewY(-9deg) scaleX(.88); } }
/* each climber walks up from the foot of the mountain to their camp */
.climber { position: absolute; display: grid; justify-items: center; gap: 2px; transform: translate(-50%, -50%); animation: walk 1.7s cubic-bezier(.3, .1, .2, 1) var(--d) backwards; z-index: 1; }
@keyframes walk { from { transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.55); opacity: 0; } 12% { opacity: 1; } }
.climber .face { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #16222e; color: #fff; font: 800 .9rem var(--display); border: 2.5px solid #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .35); animation: step .3s ease-in-out var(--d) 6 alternate; }
@keyframes step { to { transform: translateY(-5px) rotate(4deg); } }
.climber .face img { width: 100%; height: 100%; object-fit: cover; }
.climber .tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 2px; border-radius: 99px; background: rgba(15, 24, 32, .82); color: #fff; font: 600 .68rem var(--body); white-space: nowrap; }
.climber .tag b { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: #5d6b85; font: 800 .62rem var(--display); }
.climber.r1 { z-index: 2; }
.climber.r1 .face { width: 44px; height: 44px; border-color: var(--c); animation: step .3s ease-in-out var(--d) 6 alternate, summit 2.2s ease-in-out 3.4s infinite; }
@keyframes summit { 50% { box-shadow: 0 0 0 7px rgba(242, 194, 48, .22), 0 0 22px rgba(242, 194, 48, .7); } }
.climber.r1 .tag b { background: var(--c); color: #16222e; } .climber.r2 .tag b { background: #cfd8e3; color: #16222e; } .climber.r3 .tag b { background: #d08a4e; }
.climber.me .tag { background: var(--dot); color: #0f2a0a; }
.boards, .top5 { margin-top: -20px; }
@media (max-width: 760px) {
  .top5 { grid-template-columns: 1fr; }
  .top5 > header { padding-bottom: 0; }
  .climber .tag { display: none; }
}
/* the quiz average, large */
.big-pct { display: flex; align-items: center; gap: 12px; }
.big-pct b { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font: 800 1.4rem var(--display); color: var(--head);
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 77%), conic-gradient(#8a3fc9 calc(var(--p) * 1%), var(--line) 0); }
.big-pct span { color: var(--muted); font-size: .84rem; max-width: 12ch; }
.board-part.quizzes .gauge .meter i { background: #8a3fc9; }
/* the report card bar above a student's board */
.report-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--dot); }
.report-bar div { display: grid; gap: 2px; max-width: 60ch; }
.report-bar strong { font: 700 1.05rem var(--display); color: var(--head); }
.report-bar span { color: var(--muted); font-size: .88rem; }
/* ---------- the guided tour ---------- */
.tour { position: fixed; inset: 0; z-index: 80; }
/* the lit part: everything around it is dimmed by its shadow */
.tour-light { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 24, 32, .72), 0 0 0 3px var(--dot); transition: left .3s, top .3s, width .3s, height .3s; pointer-events: none; }
.tour-card { position: fixed; display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--r-m); background: #fff; color: #24324d; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border-top: 5px solid var(--dot); transition: left .3s, top .3s; user-select: text; }
.tour-card small { font: 800 .7rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: #5d6b85; }
.tour-card strong { font: 700 1.15rem var(--display); color: #16222e; }
.tour-card p { font-size: .93rem; line-height: 1.5; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.tour-actions span { display: flex; gap: 8px; }
.tour-actions .link { font-size: .84rem; color: #5d6b85; }
.tour-card .btn:not(.quiet) { background: #16222e; border-color: #16222e; color: #fff; }
.tour-card .btn.quiet { color: #16222e; border-color: #d8dee9; background: transparent; }
.tour-btn { font: 800 1rem var(--display); }
/* ---------- maths and flowchart shapes in a card ---------- */
.math { font-family: 'Cambria Math', Cambria, Georgia, 'Times New Roman', serif; font-size: 1.08em; white-space: nowrap; }
.math sup, .math sub { font-size: .72em; line-height: 0; }
.frac { display: inline-grid; vertical-align: middle; text-align: center; margin: 0 3px; font-size: .9em; line-height: 1.15; }
.frac > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 4px 1px; }
.frac > span:last-child { padding: 1px 4px 0; }
.sqrt > span { border-top: 1.5px solid currentColor; padding: 0 3px; margin-left: -1px; }
.math-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.math-bar small { color: var(--muted); font-size: .76rem; margin-right: 6px; }
.math-bar .nt { color: var(--head); border: 1px solid var(--line); width: 30px; height: 30px; font-size: .9rem; }
.math-bar .nt:hover { background: var(--paper); color: var(--head); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; padding: 4px 0; }
.flow-shape { display: grid; place-items: center; min-width: 96px; min-height: 46px; padding: 8px 18px; border: 2px solid var(--a); background: rgba(47, 116, 181, .1); color: var(--head); font: 600 .86rem var(--body); text-align: center; }
.flow-shape.oval { border-radius: 99px; border-color: var(--b); background: rgba(35, 145, 95, .12); }
.flow-shape.box { border-radius: 6px; }
.flow-shape.circle { border-radius: 50%; min-width: 54px; min-height: 54px; padding: 6px; border-color: var(--muted); background: transparent; }
.flow-shape.slant { transform: skewX(-14deg); border-color: #8a3fc9; background: rgba(138, 63, 201, .1); }
.flow-shape.slant > span { transform: skewX(14deg); display: block; }
.flow-shape.diamond { border: 0; background: var(--c); color: #16222e; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); min-width: 130px; min-height: 78px; padding: 8px 30px; }
.flow-arrow { width: 34px; height: 2px; background: var(--muted); position: relative; flex: none; }
.flow-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 8px solid var(--muted); border-block: 5px solid transparent; }
.choice-edit select { width: auto; padding: 8px 28px 8px 10px; font-size: .9rem; }

/* ---------- report cards for a class, and the archive ---------- */
.sets { margin-top: -20px; }
.set-row { flex-wrap: wrap; }
.set-row .actions { justify-content: flex-end; }
.archive > summary { cursor: pointer; font: 700 1rem var(--display); color: var(--head); padding: 6px 0; }
.archive-year { display: grid; gap: 10px; padding: 10px 0 4px 14px; border-left: 3px solid var(--line); margin-top: 8px; }
.archive-year h3 { font-size: 1.2rem; }
.archive-group { display: grid; gap: 6px; }
.archive-group > small { font: 700 .78rem var(--display); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.report-card .board-head { box-shadow: inset 0 -5px 0 var(--dot); }
.report-card .board-part { gap: 14px; }
table.board td.pre { white-space: pre-wrap; font-size: .86rem; }
#cards:empty { display: none; }
/* ---------- the top bar never squeezes its sections ----------
   A teacher has six sections, and a demo account one more button. When they
   do not fit beside the brand and the account buttons, the sections take a
   row of their own under them instead of breaking into two lines each. */
.top .tabs { flex: none; }
.top .tabs a { white-space: nowrap; }
.top .who { flex: 0 1 auto; flex-wrap: nowrap; }
.top .who .btn { white-space: nowrap; flex: none; }
.top .me { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }
.top .me strong { max-width: 14ch; }
@media (max-width: 1120px) {
  .top { flex-wrap: wrap; row-gap: 8px; }
  .top .tabs { order: 3; flex: 1 0 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .top .tabs::-webkit-scrollbar { display: none; }
}
/* six sections, or the demo's extra button, need the second row sooner */
@media (max-width: 1440px) {
  .top:has(.tabs a:nth-child(6)), .top:has(.who .btn.go) { flex-wrap: wrap; row-gap: 8px; }
  .top:has(.tabs a:nth-child(6)) .tabs, .top:has(.who .btn.go) .tabs { order: 3; flex: 1 0 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
}
/* ---------- a student's indicators on the class card, and their page ---------- */
.roster td:first-child { min-width: 320px; }
.roster a.name { color: var(--head); font-weight: 700; text-decoration: none; }
.roster a.name:hover { text-decoration: underline; }
.roster td:first-child > small { display: block; color: var(--muted); font-size: .8rem; }
.indicators { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; font-size: .82rem; color: var(--muted); }
.presence { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--muted); }
.presence i { width: 9px; height: 9px; border-radius: 50%; background: #b9c2cf; flex: none; }
.presence.on { color: #156241; }
.presence.on i { background: var(--b); box-shadow: 0 0 0 0 rgba(35, 145, 95, .6); animation: live 1.8s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 8px rgba(35, 145, 95, 0); } }
.presence small { font-weight: 400; color: var(--muted); }
.indicators .stat { display: inline-flex; align-items: center; gap: 6px; }
.indicators .stat > b { font: 800 1rem var(--display); color: var(--head); }
.indicators .stat span { display: grid; line-height: 1.15; color: var(--head); font-weight: 600; }
.indicators .stat small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.indicators .stat small.hot { color: #7a5a00; font-weight: 700; }
.stat-ring { --tone: var(--a); width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--surface) 72%, transparent 73%), conic-gradient(var(--tone) calc(var(--p) * 1%), var(--line) 0); }
.stat-ring b { font: 800 .64rem var(--display); color: var(--head); }
.stat-ring.b { --tone: var(--b); } .stat-ring.c { --tone: var(--c); } .stat-ring.d { --tone: var(--d); }
.stat-ring.large { width: 78px; height: 78px; }
.stat-ring.large b { font-size: 1.15rem; }
.student-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.avatar.xl { width: 84px; height: 84px; font-size: 2.2rem; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: -24px; }
.stat-tile { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--a); animation: doorIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.stat-tile.b { border-top-color: var(--b); animation-delay: .06s; } .stat-tile.c { border-top-color: var(--c); animation-delay: .12s; } .stat-tile.d { border-top-color: var(--d); animation-delay: .18s; }
.stat-tile .big { width: 78px; text-align: center; font: 800 2.3rem/1 var(--display); color: var(--head); flex: none; }
.stat-tile strong { display: block; font: 700 1rem var(--display); color: var(--head); }
.stat-tile small { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.marks-table td a { font-weight: 600; color: var(--head); text-decoration: none; }
.marks-table td a:hover { text-decoration: underline; }
.marks-table small.under { display: block; color: var(--muted); font-size: .78rem; }
.chat-form.closed { background: var(--surface); }
.qa-body .tool.armed { border-color: var(--d); color: #ffb39e; }
/* marking a discussion group */
.mark-rows { display: grid; gap: 8px; }
.mark-row { display: grid; grid-template-columns: minmax(120px, 1fr) 90px minmax(0, 1.6fr); gap: 10px; align-items: center; }
.mark-row strong { font-weight: 600; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-row input { padding: 8px 10px; font-size: .9rem; }
.marks-board.groups .board-head { box-shadow: inset 0 -5px 0 #8a3fc9; }
@media (max-width: 520px) { .mark-row { grid-template-columns: 1fr 90px; } .mark-row input[type=text] { grid-column: 1 / -1; } }
/* ---------- task cards: maths pad, shapes, live preview, code answers ---------- */
.math .katex { font-size: 1.12em; }
.math-pad { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line); }
.math-pad .math-bar small { min-width: 40px; }
.math-pad .math-bar .nt { background: var(--surface); width: auto; min-width: 32px; padding: 0 7px; font-family: 'Cambria Math', Cambria, Georgia, serif; }
.math-hint { color: var(--muted); font-size: .78rem; }
.card-preview { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-s); border: 1.5px dashed var(--a); background: rgba(47, 116, 181, .05); }
.card-preview > small { font: 800 .66rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--a-dark); }
.shape-add { display: inline-flex; align-items: center; gap: 8px; }
.flow-shape.mini { min-width: 22px; min-height: 14px; width: 22px; height: 14px; padding: 0; border-width: 1.5px; }
.flow-shape.mini.circle { width: 15px; min-width: 15px; height: 15px; }
.flow-shape.mini.diamond, .flow-shape.mini.triangle, .flow-shape.mini.hexagon { min-width: 20px; width: 20px; height: 16px; min-height: 16px; padding: 0; }
.flow-shape.triangle { border: 0; background: var(--d); color: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); min-width: 110px; min-height: 90px; padding: 44px 26px 8px; }
.flow-shape.hexagon { border: 0; background: var(--b); color: #fff; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); min-width: 124px; min-height: 76px; padding: 8px 30px; }
.flow-shape.circle { background: rgba(93, 107, 133, .12); }
.code-hint { color: var(--muted); font-size: .8rem; }
.code-answer .py-bar { flex-wrap: wrap; }
.code-answer .py-status.ok { color: var(--dot); font-weight: 700; }
.flow-step { display: inline-flex; align-items: center; }

/* looking at a report before downloading it */
dialog.modal.report { width: min(860px, calc(100vw - 32px)); }
.report-view { max-height: 66dvh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); background: #5d6b85; padding: 14px; }
.report-view img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
/* number fields always show Latin digits, left to right */
.num-field { direction: ltr; font-variant-numeric: tabular-nums; }

/* ---------- entertainment: leaderboard, class goal, badges ---------- */
.fun-strip { gap: 20px; }
.fun-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: start; }
.fun-cols > div { display: grid; gap: 12px; }
.star-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.star-board li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line); }
.star-board li.me { border-color: var(--b); box-shadow: inset 4px 0 0 var(--b); }
.star-board li > b { width: 20px; font: 800 .95rem var(--display); color: var(--muted); }
.star-board li:first-child > b { color: #b98a00; }
.star-board li > span:not(.avatar) { flex: 1; min-width: 0; font-weight: 600; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star-board li strong { display: inline-flex; align-items: center; gap: 4px; font: 800 1rem var(--display); color: var(--head); }
.star-board .star { width: 16px; }
.class-goal { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-m); background: rgba(47, 116, 181, .09); border: 1px solid rgba(47, 116, 181, .25); }
.class-goal > div:first-child { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.class-goal strong { font: 700 1.05rem var(--display); color: var(--head); }
.class-goal span { color: var(--muted); font-size: .88rem; }
.class-goal .meter { height: 12px; }
.class-goal .meter i { background: linear-gradient(90deg, var(--a), var(--dot)); transition: width .6s; }
.class-goal.reached { background: rgba(35, 145, 95, .12); border-color: rgba(35, 145, 95, .4); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.badge { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-s); border: 1px dashed var(--line); color: var(--muted); }
.badge > i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--line); color: var(--muted); font-style: normal; font-size: 1.1rem; }
.badge span { display: grid; line-height: 1.25; min-width: 0; }
.badge b { color: var(--head); font-size: .9rem; }
.badge small { font-size: .74rem; }
.badge.earned { border-style: solid; border-color: var(--c); background: rgba(242, 194, 48, .12); }
.badge.earned > i { background: var(--c); color: #16222e; animation: starPop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.fun-class { display: grid; gap: 14px; }
.fun-class .card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.goal-form { display: flex; align-items: end; gap: 10px; padding: 0; }
.goal-form .field { width: 170px; }
.goal-form input { padding: 8px 10px; font-size: .92rem; }
.mission-tile { border-top: 4px solid var(--a); }
.mission-tile.finale { border-top-color: var(--d); background: linear-gradient(160deg, rgba(220, 79, 42, .1), transparent 55%), var(--paper); }
.live-card.mission > b { background: var(--c); color: #16222e; }

/* ---------- entertainment: its pages, each with a look of its own ---------- */
.fun-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -32px; }
.fun-nav a { padding: 9px 16px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--head); font: 600 .9rem var(--body); text-decoration: none; }
.fun-nav a:hover { border-color: var(--head); }
.fun-nav a[aria-current=page] { background: var(--head); border-color: var(--head); color: var(--paper); }
.fun-hero { --tone: var(--dot); --bg: #16222e; display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); padding: clamp(22px, 4vw, 38px); border-radius: var(--r-l); background: var(--bg); color: #dbe3f0; overflow: hidden; position: relative; }
.fun-hero::after { content: ''; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: var(--tone); opacity: .16; }
.fun-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.fun-hero p { max-width: 62ch; margin-top: 6px; }
.hero-ico { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--tone); color: #16222e; }
.hero-ico svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fun-hero.quizzes { --tone: #c9a6ff; --bg: linear-gradient(120deg, #3a1c66, #6a2fb0); }
.fun-hero.missions { --tone: var(--c); --bg: linear-gradient(120deg, #0f1820, #1d3552); }
.fun-hero.progress { --tone: var(--c); --bg: linear-gradient(120deg, #1b4f7f, #2f74b5); }
.fun-hero.classes { --tone: #7fe0d6; --bg: linear-gradient(120deg, #114c4c, #1f8a8a); }
.fun-hero.reports { --tone: #ffc48a; --bg: linear-gradient(120deg, #4a2a12, #8a4f1f); }
.card-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.card-kind { display: grid; gap: 4px; padding: 14px 16px; text-align: left; border-radius: var(--r-m); border: 1.5px solid var(--line); border-top: 5px solid var(--a); background: var(--paper); color: var(--text); font: inherit; cursor: pointer; }
.card-kind.games { border-top-color: #1f8a8a; } .card-kind.full { border-top-color: #8a3fc9; } .card-kind.final { border-top-color: #c2571a; }
.card-kind strong { font: 700 1.05rem var(--display); color: var(--head); }
.card-kind span { font-size: .84rem; color: var(--muted); }
.card-kind[aria-checked=true] { border-color: var(--head); background: var(--surface); box-shadow: 4px 4px 0 var(--dot); }

/* ---------- the class dashboard ---------- */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: -24px; }
.kpis.mini { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { --tone: var(--a); position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .15s, box-shadow .15s; animation: doorIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.kpi:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -22px rgba(22, 34, 46, .6); }
.kpi:nth-child(2) { animation-delay: .06s; } .kpi:nth-child(3) { animation-delay: .12s; } .kpi:nth-child(4) { animation-delay: .18s; } .kpi:nth-child(5) { animation-delay: .24s; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tone); }
.kpi.b { --tone: var(--b); } .kpi.c { --tone: var(--c); } .kpi.d { --tone: var(--d); } .kpi.q { --tone: #8a3fc9; }
.kpi-ico { position: absolute; right: 10px; top: 10px; color: var(--tone); opacity: .9; }
.kpi-num { flex: none; min-width: 78px; text-align: center; font: 800 2.5rem/1 var(--display); color: var(--head); }
.kpi > div { min-width: 0; display: grid; gap: 2px; }
.kpi strong { font: 700 .98rem var(--display); color: var(--head); padding-right: 22px; }
.kpi small { color: var(--muted); font-size: .8rem; }
.dash-table td { vertical-align: middle; }
.dash-row { cursor: pointer; transition: background .12s; }
.dash-row:hover, .dash-row:focus-visible { background: rgba(47, 116, 181, .07); }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.who-cell > span:not(.avatar) { display: grid; line-height: 1.25; }
.who-cell b { color: var(--head); }
.who-cell small, .dash-table td > small { color: var(--muted); font-size: .76rem; display: block; }
.crit-row { display: inline-flex; gap: 5px; }
.crit-dot { --tone: var(--a); display: grid; justify-items: center; width: 34px; padding: 3px 0 4px; border-radius: 9px; background: color-mix(in srgb, var(--tone) 16%, transparent); border-bottom: 3px solid var(--tone); line-height: 1.1; }
.crit-dot small { font: 800 .62rem var(--display); color: var(--muted); }
.crit-dot b { font: 800 1rem var(--display); color: var(--head); }
.crit-dot.none { opacity: .45; }
.grade-pill { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--line); color: var(--head); font: 800 1.1rem var(--display); }
.grade-pill.g1, .grade-pill.g2 { background: var(--d); color: #fff; } .grade-pill.g3, .grade-pill.g4 { background: var(--c); color: #16222e; }
.grade-pill.g5, .grade-pill.g6 { background: var(--a); color: #fff; } .grade-pill.g7 { background: var(--b); color: #fff; }
.star-count { display: inline-flex; align-items: center; gap: 4px; font: 800 1rem var(--display); color: var(--head); }
.star-count .ico { width: 17px; height: 17px; fill: var(--c); stroke: #b98a00; }
.help-pair { display: grid; line-height: 1.2; white-space: nowrap; }
.crit-bars { display: grid; gap: 6px; }
.crit-bars > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; align-items: center; gap: 12px; }
.crit-bars small { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crit-bars b { font: 800 1rem var(--display); color: var(--head); text-align: right; }
.steps { --tone: var(--a); display: inline-flex; gap: 3px; }
.steps i { width: 18px; height: 10px; border-radius: 3px; background: var(--line); }
.steps i.on { background: var(--tone); }
/* the understanding map: a coloured square for a student and a lesson */
.heat { display: inline-grid; place-items: center; align-content: center; min-width: 46px; height: 40px; padding: 0 6px; border-radius: 9px; background: var(--line); color: var(--head); font: 700 .74rem var(--display); letter-spacing: 1px; text-decoration: none; transition: transform .12s; }
.heat small { font-size: .6rem; letter-spacing: 0; opacity: .7; line-height: 1; }
td .heat:hover, a.heat:hover { transform: scale(1.12); }
.heat.none { background: transparent; border: 1.5px dashed var(--line); }
.heat.going { background: #fdf1c7; color: #7a5a00; }
.heat.stuck { background: var(--d); color: #fff; }
.heat.done { background: #bfe6d0; color: #0f4f33; }
.heat.done.best { background: var(--b); color: #fff; }
.heat.done.hard { background: #f6c9a4; color: #7a3a10; }
.heat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.heat-table { border-collapse: separate; border-spacing: 5px; }
.heat-table th { font-weight: 600; text-align: left; white-space: nowrap; color: var(--head); font-size: .88rem; padding: 2px 8px 2px 0; }
.heat-table thead th:not(:first-child) { text-align: center; vertical-align: bottom; font: 800 .9rem var(--display); min-width: 56px; }
.heat-table thead th small { display: block; max-width: 74px; margin: 0 auto; font: 500 .62rem/1.15 var(--body); color: var(--muted); white-space: normal; }
.heat-table td { text-align: center; padding: 0; }
.heat-table tfoot th, .heat-table tfoot td { padding-top: 8px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--muted); }
.heat-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--muted); }
.heat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.heat-legend .heat { min-width: 18px; width: 18px; height: 18px; padding: 0; border-radius: 5px; }
.seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); }
.seg button { padding: 7px 14px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: 600 .86rem var(--body); cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--head); color: var(--paper); }
.quiz-result { display: grid; gap: 10px; }
.q-bar { display: grid; grid-template-columns: minmax(0, 1fr) 90px 46px; align-items: center; gap: 10px; font-size: .86rem; }
.q-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-bar .meter { height: 8px; }
.q-bar b { text-align: right; font: 800 .86rem var(--display); color: var(--head); }
.q-bar.low .meter i { background: var(--d); }
.mini-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--muted); }
.mini-facts span { display: inline-flex; align-items: center; gap: 6px; }
.mini-facts .ico { width: 18px; height: 18px; }
.star-board li small { color: var(--muted); font-size: .76rem; }
.my-progress .stats { background: var(--paper); }
[data-theme=dark] .heat.going { background: rgba(242, 194, 48, .25); color: #f6d981; }
[data-theme=dark] .heat.done { background: rgba(35, 145, 95, .35); color: #b9f0d2; }
[data-theme=dark] .heat.done.hard { background: rgba(220, 120, 60, .35); color: #ffd2b0; }

/* ---------- a team mission: the race ---------- */
.mission-story { max-width: 56ch; font-size: 1.08rem; color: #dbe3f0; }
.mission-clock, .task-clock { display: grid; justify-items: end; line-height: 1.05; }
.mission-clock small, .task-clock small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #93a3bf; }
.mission-clock b { font: 800 clamp(2rem, 6vw, 3.2rem) var(--display); color: var(--dot); font-variant-numeric: tabular-nums; }
.mission-clock.late b { color: #ff9d85; animation: beat 1s ease-in-out infinite; }
.task-clock small { color: var(--muted); }
.task-clock b { font: 800 2.2rem var(--display); color: var(--head); font-variant-numeric: tabular-nums; }
.task-clock b.late { color: var(--d); }
.my-task { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: left; padding: 18px 22px; border-radius: var(--r-m); background: rgba(242, 194, 48, .14); border: 1.5px solid rgba(242, 194, 48, .6); }
.my-task > div { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.my-task small { font: 800 .72rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.my-task strong { font: 700 1.3rem var(--display); color: #fff; }
.my-task span { color: #b4c2cf; font-size: .92rem; }
.my-task.done { background: rgba(35, 145, 95, .2); border-color: rgba(114, 220, 95, .5); }
.my-task.done small { color: var(--dot); }
.team-lanes { width: 100%; display: grid; gap: 14px; }
.team-lane { display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--r-m); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); text-align: left; }
.team-lane.mine { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.team-lane.reached { background: rgba(35, 145, 95, .16); border-color: rgba(114, 220, 95, .5); }
.team-lane > header { display: flex; align-items: center; gap: 12px; }
.team-lane > header > div { flex: 1; min-width: 0; display: grid; }
.team-lane > header strong { font: 700 1.15rem var(--display); color: #fff; }
.team-lane > header small { color: #a9b8c6; font-size: .84rem; }
.team-rank { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font: 800 1.1rem var(--display); }
.team-lane.reached .team-rank { background: var(--c); color: #16222e; }
/* the rocket flies along the track as the team's tasks are finished */
.track { position: relative; height: 46px; margin: 0 30px 0 4px; }
.track > i { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 99px; background: linear-gradient(90deg, var(--dot) calc(var(--p) * 100%), rgba(255, 255, 255, .12) 0); transition: background .8s; }
.track .goal { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); padding: 3px 6px; border-radius: 6px; background: var(--c); color: #16222e; font: 800 .62rem var(--display); letter-spacing: .1em; }
.track .ship { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 30px; margin: -24px 0 0 -15px; transition: left .9s cubic-bezier(.3, 1.3, .5, 1); }
.rocket { display: block; width: 30px; transform: rotate(90deg); }
.rocket .hull { fill: #eef3f8; } .rocket .window { fill: var(--a); } .rocket .fin { fill: var(--d); }
.rocket .flame { fill: var(--c); transform-origin: 20px 44px; animation: flame .25s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scaleY(.55); } }
.team-lane.reached .ship { animation: arrive 1s ease-in-out infinite alternate; }
@keyframes arrive { to { transform: translateY(-5px) scale(1.12); } }
.crew { display: flex; flex-wrap: wrap; gap: 8px; }
.crew-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: #fff; font-size: .86rem; max-width: 100%; }
.crew-chip .avatar { width: 28px; height: 28px; font-size: .8rem; }
.crew-chip > span:not(.avatar) { display: grid; line-height: 1.2; min-width: 0; }
.crew-chip small { color: #a9b8c6; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.crew-chip em { font-style: normal; font-size: .74rem; color: #a9b8c6; }
.crew-chip.me { box-shadow: inset 0 0 0 2px var(--c); }
.crew-chip.done { background: rgba(35, 145, 95, .45); }
.crew-chip.done em { color: var(--dot); font-weight: 800; font-size: 1rem; }

/* what a player reads before pressing Ready */
.briefing { width: min(680px, 100%); margin: 0; padding: 18px 22px 18px 44px; display: grid; gap: 8px; text-align: left; border-radius: var(--r-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #c6d1dc; font-size: .98rem; }
.briefing b { color: #fff; }
.briefing li::marker { color: var(--c); font-weight: 800; }
/* the lobby of a team mission: the teams the site drew */
.lobby-teams { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.lobby-team { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border-radius: var(--r-m); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); text-align: left; }
.lobby-team.mine { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.lobby-team header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lobby-team header strong { font: 700 1.1rem var(--display); color: #fff; }
.lobby-team header small { color: #a9b8c6; font-size: .78rem; }
.lobby-team .btn { justify-self: start; }
.lobby-team .crew { min-height: 38px; }
.team-score { flex: none; display: grid; justify-items: end; line-height: 1.05; color: #a9b8c6; font-size: .7rem; }
.team-score b { font: 800 1.5rem var(--display); color: var(--c); font-variant-numeric: tabular-nums; }
.help-btn { margin-left: 4px; padding: 4px 10px; border: 0; border-radius: 99px; background: var(--c); color: #16222e; font: 700 .74rem var(--body); cursor: pointer; }
.hint-list { display: grid; gap: 6px; }
.hint-list small { color: var(--muted); font-size: .76rem; }
.hint-list p { padding: 8px 12px; border-radius: var(--r-s); background: rgba(242, 194, 48, .16); border-left: 4px solid var(--c); color: var(--head); font-size: .9rem; overflow-wrap: anywhere; }
.ask-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ask-row .sub { flex: 1; min-width: 200px; font-size: .86rem; }
.leaders.wide { width: min(720px, 100%); }
/* the teacher watching one team: a column for each player */
dialog.modal.watching { width: min(1180px, calc(100vw - 32px)); }
.watch { display: grid; gap: 14px; }
.watch-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.watch-player { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-m); border: 1px solid var(--line); border-top: 4px solid var(--c); background: var(--paper); min-width: 0; }
.watch-player.done { border-top-color: var(--b); }
.watch-player > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.watch-player > header > div { flex: 1; min-width: 0; display: grid; }
.watch-player > header strong { color: var(--head); font: 700 1.02rem var(--display); }
.watch-player > header small, .watch-player .gave { color: var(--muted); font-size: .78rem; }
.watch-player .out-view p { font-size: .88rem; color: var(--text); }
.watch-player pre { max-height: 260px; }
/* the player's team beside their task: a staircase to the cup */
.crew-panel { gap: 10px; }
.crew-panel:empty { display: none; }
.crew-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.crew-panel > header strong { font: 700 1.1rem var(--display); color: var(--head); }
.crew-panel > header span { color: var(--muted); font-size: .86rem; }
.stairs { width: min(100%, 340px); height: auto; justify-self: center; overflow: visible; }
.stairs .stair { fill: var(--line); transition: fill .5s; }
.stairs .stair.lit { fill: var(--b); }
.stairs .cup path { fill: #c9a227; opacity: .45; transition: opacity .5s; }
.stairs .cup .ear { fill: none; stroke: #c9a227; stroke-width: 3; }
.stairs .cup.won path { opacity: 1; }
.stairs .cup.won { animation: beat 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
.stairs .climber { transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.stairs .dot-body { fill: var(--dot); stroke: #3f9a30; stroke-width: 2; }
.stairs .dot-face { fill: #16222e; }
.crew-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.crew-list li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-s); font-size: .88rem; }
.crew-list li .avatar { width: 26px; height: 26px; font-size: .75rem; }
.crew-list li span:not(.avatar) { flex: 1; min-width: 0; color: var(--head); font-weight: 600; }
.crew-list li em { font-style: normal; color: var(--muted); font-size: .8rem; }
.crew-list li.done { background: rgba(35, 145, 95, .12); }
.crew-list li.done em { color: var(--b); font-weight: 700; }

/* ---------- sign-in page: the field ----------
   The slogan, happening. A robotics field seen from above and to one side,
   large enough to run off the panel; Dot drives round it as the program
   beside it runs, and each corner lights a stage of the design cycle drawn
   on the floor. The code window lies flat, in front of the field. */
.art-main { position: relative; }
/* kept clear of the slogan: it starts past the middle of the panel and runs off its right edge */
.lap-field { position: absolute; right: -11%; top: 53%; width: min(50%, 80vh); aspect-ratio: 1; margin-top: calc(min(50%, 80vh) / -2); opacity: 0; pointer-events: none; }
body.ready .lap-field { animation: fade 1.1s .5s forwards; }
body.ready .field-code { animation: fade .8s .9s forwards; }
.field-board { position: absolute; inset: 0; display: grid; place-items: center; }
.field-board svg { width: 88%; height: auto; overflow: visible; transform: rotateX(57deg) rotateZ(-45deg); filter: drop-shadow(-26px 40px 30px rgba(0, 0, 0, .55)); }
body.ready .field-board svg { animation: boardIn 1.3s .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes boardIn { from { transform: rotateX(57deg) rotateZ(-90deg) scale(.7); } }
.lap-field .plate { fill: #1c2b39; stroke: #33495d; stroke-width: 2; }
.lap-field .floor-tile { fill: #1f3040; }
.lap-field .track-tile { fill: #2b4257; }
.lap-field .stage-arc { fill: none; stroke-width: 24; opacity: .16; transition: opacity .5s; }
.lap-field .stage-arc.lit { opacity: 1; }
.lap-field .stage-hub { fill: var(--dot); opacity: .2; transition: opacity .4s; transform-origin: 0 0; }
.lap-field .stage-hub.lit { opacity: 1; animation: hubPulse .7s ease-in-out 3; }
@keyframes hubPulse { 50% { transform: scale(1.6); } }
.lap-field .pad { transition: opacity .4s, r .4s; }
.lap-field .pad.taken { opacity: 0; }
.lap-field .bot { transition: transform .43s linear; }
.lap-field .bot-turn { transition: transform .35s ease; }
.lap-field .bot-body { fill: var(--dot); stroke: #3f9a30; stroke-width: 3; filter: drop-shadow(0 0 14px rgba(114, 220, 95, .75)); }
.lap-field .bot-face { fill: #16222e; }
.lap-field .bot-eye { fill: #fff; }
.field-code { position: relative; z-index: 1; justify-self: start; width: max-content; max-width: 100%; opacity: 0; animation: none; border-radius: 14px; overflow: hidden; background: rgba(10, 17, 24, .86); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.code-top { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 500 .74rem var(--body); color: #8fa3b5; }
.code-top b { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.field-code pre { margin: 0; padding: 10px 0 12px; font: 500 clamp(.68rem, .95vw, .86rem)/1.7 'JetBrains Mono', Consolas, monospace; color: #dbe3f0; }
.code-line { display: block; padding: 0 14px 0 0; white-space: pre; border-left: 3px solid transparent; transition: background .12s; }
.code-line i { display: inline-block; width: 30px; padding-right: 10px; text-align: right; font-style: normal; color: #4f6378; }
.code-line.now { background: rgba(114, 220, 95, .16); border-left-color: var(--dot); color: #fff; }
/* a phone has no room beside the slogan: the field goes, the slogan and its program stay */
@media (max-width: 900px) {
  .lap-field { display: none; }
  .field-code pre { font-size: .78rem; }
}

/* ---------- where a person is signed in from ---------- */
.where { display: block; color: var(--muted); font-size: .8rem; }
.indicators .where { display: inline; }
td .presence { font-size: .86rem; }

/* ---------- games: the hub ---------- */
.game-tile { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--paper); color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
a.game-tile:hover, a.game-tile:focus-visible { transform: translateY(-3px); border-color: var(--head); box-shadow: 0 16px 28px -22px rgba(22, 34, 46, .6); }
.game-tile.done { border-left: 4px solid var(--b); }
.game-tile > strong { font: 700 1.12rem/1.2 var(--display); color: var(--head); }
.game-tile .concept { font-size: .84rem; font-weight: 700; color: var(--a-dark); margin-top: -6px; }
.game-tile > p { font-size: .88rem; color: var(--muted); }
.game-tile > .btn { justify-self: start; }
.game-tile .tile-top .due { color: var(--muted); }
.gauge .star { width: 17px; flex: none; }
.star { fill: var(--line); }
.star.on { fill: var(--c); }
.game-classes { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.game-classes > small { color: var(--muted); font-size: .8rem; }
.game-class { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-class .toggle span { display: grid; line-height: 1.25; }
.game-class .toggle b { color: var(--head); }
.game-class .toggle small, .quiz-foot .toggle small { color: var(--muted); font-size: .76rem; }
.game-class .link { font-size: .82rem; }
.star-cell { background: none; border: 0; padding: 2px 4px; font-size: 1rem; letter-spacing: 1px; color: #c79a00; cursor: pointer; }
.star-cell.none { color: var(--muted); cursor: default; }
[data-theme=dark] .game-tile .concept { color: #8fc0ee; }

/* a grade's lane holds a shelf for each of its units */
.unit-shelf { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.shelf-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shelf-head > div { min-width: 0; display: grid; gap: 1px; }
.shelf-head h3 { font-size: 1.08rem; }
.shelf-head small { color: var(--muted); font-size: .84rem; }
.all-switches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.all-switches > small { color: var(--muted); font-size: .8rem; }
.unit-lane > header:has(.all-switches) { flex-wrap: wrap; }
.unit-body > .all-switches { margin: 0; }
/* the units of a grade as cards: the number first, opened with a click, an open one takes the whole row */
.unit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.unit-shelf.unit-card[style] { display: block; padding: 0; margin: 0; border: 1px solid var(--line); border-top: 5px solid var(--unit); border-radius: var(--r-m, 14px); background: var(--paper); transition: box-shadow .2s, transform .2s; }
.unit-card:not([open]):hover { transform: translateY(-2px); box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--unit) 70%, transparent); }
.unit-card[open] { grid-column: 1 / -1; }
.unit-card > summary.shelf-head { list-style: none; cursor: pointer; padding: 14px 16px; margin: 0; align-items: center; flex-wrap: nowrap; border: 0; border-radius: inherit; }
.unit-card > summary::-webkit-details-marker { display: none; }
.unit-card > summary::after { content: ''; flex: none; margin-left: auto; width: 9px; height: 9px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.unit-card[open] > summary::after { transform: rotate(-135deg); }
.unit-card > summary:focus-visible { outline: 2px solid var(--unit); outline-offset: 2px; }
.unit-card .unit-num { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--unit); color: #fff; line-height: 1; }
.unit-card .unit-num small { color: #fff; font: 800 .55rem var(--display); letter-spacing: .14em; opacity: .85; }
.unit-card .unit-num b { color: #fff; font: 800 1.45rem var(--display); }
.unit-body { display: grid; gap: 12px; padding: 0 16px 16px; }
.shelf-sims { display: flex; gap: 6px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .unit-card, .unit-card > summary::after { transition: none; } .unit-card:not([open]):hover { transform: none; } }
.unit-tag { flex: none; padding: 6px 12px; border-radius: 99px; background: var(--c); color: #16222e; font: 800 .72rem var(--display); letter-spacing: .12em; text-transform: uppercase; }
/* a playground game of grades 1 and 2 */
.game-tile.mini { background: linear-gradient(160deg, rgba(242, 194, 48, .16), transparent 60%), var(--paper); }
.game-icon { display: inline-block; margin-right: 8px; font-size: 1.5rem; line-height: 1; vertical-align: -3px; }
.peeked { display: block; color: var(--muted); font-size: .7rem; }
/* the solution of a level, locked while the player thinks */
.help-step { flex: 1 0 100%; display: grid; gap: 6px; }
.help-step p { color: var(--head); font-weight: 600; }
.help-step pre { margin: 0; padding: 10px 14px; border-radius: var(--r-s); font: 400 13px/1.55 'JetBrains Mono', Consolas, monospace; overflow: auto; }
.help-ask { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.help-ask > span { flex: 1; min-width: 200px; }
.help-ask em { font-style: normal; color: var(--a-dark); }
/* the helps of a level: typed, never copied, and what each one costs */
.help-step pre.no-copy { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.help-no { display: inline-block; padding: 1px 8px; margin-right: 2px; border-radius: 99px; background: var(--head); color: var(--paper); font-size: .74rem; letter-spacing: .04em; }
.help-ladder { flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.help-ladder li { display: grid; gap: 1px; padding: 6px 8px; border-radius: var(--r-s); border: 1px solid var(--line); font-size: .78rem; text-align: center; }
.help-ladder li b { color: var(--head); }
.help-ladder li span { color: #b8860b; }
.help-ladder li.past { opacity: .45; }
.help-ladder li.now { border-color: var(--head); box-shadow: inset 0 0 0 1px var(--head); }
.solution-lock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-s); border: 1.5px dashed var(--line); font-size: .86rem; color: var(--muted); }
.solution-lock:empty { display: none; }
.solution-lock > span:not(.lock) { flex: 1; min-width: 200px; }
.solution-lock b { color: var(--head); }
.solution-lock .lock { flex: none; width: 16px; height: 13px; margin-top: 7px; border-radius: 3px; background: var(--muted); position: relative; }
.solution-lock .lock::before { content: ''; position: absolute; left: 3px; top: -8px; width: 10px; height: 10px; border: 2.5px solid var(--muted); border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box; }

/* a live quiz that is waiting: on the Games page, and across the bottom of every other page */
.live-card, .live-call { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--r-m); background: #16222e; color: #fff; text-decoration: none; box-shadow: 0 18px 40px -18px rgba(22, 34, 46, .7); }
.live-card > i, .live-call > i { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--d); animation: liveDot 1.4s ease-out infinite; }
@keyframes liveDot { from { box-shadow: 0 0 0 0 rgba(220, 79, 42, .7); } to { box-shadow: 0 0 0 12px rgba(220, 79, 42, 0); } }
.live-card > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.live-card strong, .live-call strong { font: 700 1.05rem var(--display); color: #fff; }
.live-card small { color: #b4c2cf; font-size: .86rem; }
.live-card > b, .live-call > b { flex: none; padding: 9px 16px; border-radius: 99px; background: var(--dot); color: #0f2a0a; font-size: .88rem; white-space: nowrap; }
.live-call { position: fixed; z-index: 80; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); font-size: .9rem; color: #b4c2cf; animation: callIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.live-call > span { min-width: 0; }
@keyframes callIn { from { transform: translate(-50%, 140%); } }

/* writing a quiz */
.quiz-new { padding: 0; }
.pick-class { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.pick-class:hover { border-color: var(--head); }
.quiz-meta { grid-template-columns: minmax(0, 1fr) 120px; }
.quiz-cards { display: grid; gap: 18px; margin-top: -30px; }
.quiz-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-option { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-s); border: 1px solid var(--line); border-left: 6px solid var(--a); background: var(--paper); }
.quiz-option.o1 { border-left-color: var(--b); } .quiz-option.o2 { border-left-color: var(--c); } .quiz-option.o3 { border-left-color: var(--d); }
.quiz-option b { font: 800 .9rem var(--display); color: var(--head); }
.quiz-option input[type=text] { padding: 8px 10px; font-size: .93rem; }
.quiz-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: end; }
.quiz-foot .field.time { width: 170px; }
.quiz-foot .toggle span { display: grid; line-height: 1.3; }
.add-question { justify-self: start; }
@media (max-width: 640px) { .quiz-options, .quiz-meta { grid-template-columns: 1fr; } }

/* ---------- games: playing a level ---------- */
.levels { display: flex; flex-wrap: wrap; gap: 8px; }
.level-pill { display: grid; justify-items: center; gap: 3px; min-width: 62px; padding: 8px 10px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--surface); color: var(--head); font: inherit; cursor: pointer; }
.level-pill b { font: 800 1.1rem/1 var(--display); }
.level-pill small { font-size: .66rem; color: var(--muted); }
.level-pill[aria-current=step] { border-color: var(--head); box-shadow: 3px 3px 0 var(--dot); }
.level-pill:disabled { opacity: .5; cursor: default; }
.stars { display: inline-flex; gap: 1px; }
.stars .star { width: 13px; }
.stars.big { gap: 8px; justify-content: center; }
.stars.big .star { width: 62px; }
.stars.big .star.on { animation: starPop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes starPop { from { transform: scale(0) rotate(-60deg); opacity: 0; } }
.play { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: -24px; }
.play-world { display: grid; gap: 14px; min-width: 0; }
.stage-holder { padding: clamp(10px, 2vw, 20px); border-radius: var(--r-l); background: #0f1820; background-image: radial-gradient(circle at 20% 0, rgba(114, 220, 95, .1), transparent 55%); }
.stage { position: relative; width: 100%; max-width: calc(var(--cols) * 76px); margin: 0 auto; }
.stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.stage.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.stage .tile { fill: #20323f; }
.stage .tile.odd { fill: #253a4a; }
.stage .tile.red { fill: #c8492a; } .stage .tile.green { fill: #23915f; } .stage .tile.blue { fill: #2f74b5; } .stage .tile.yellow { fill: #e2b32a; }
.stage .shade { fill: rgba(0, 0, 0, .32); }
.stage .pole { stroke: #eef3f8; stroke-width: 3.5; stroke-linecap: round; }
.stage .cloth { fill: var(--c); transform-origin: -8px -13px; animation: wave 1.6s ease-in-out infinite alternate; }
@keyframes wave { to { transform: skewY(9deg) scaleX(.9); } }
.stage .sign rect { fill: #f5e6b8; stroke: #8a6a00; stroke-width: 2; }
.stage .sign path { stroke: #8a6a00; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.stage .gem { animation: bob 1.5s ease-in-out infinite alternate; }
.stage .gem path { fill: #37c2f5; }
.stage .gem .shine { fill: #b9ecff; }
@keyframes bob { to { transform: translateY(-5px); } }
.stage .got .gem { animation: gemOut .45s ease-out forwards; }
@keyframes gemOut { to { transform: translateY(-34px) scale(1.5); opacity: 0; } }
.stage .door rect { fill: #9a6a3a; stroke: #5e3f1d; stroke-width: 3; }
.stage .door .hole { fill: #2b1c0c; stroke: #2b1c0c; stroke-width: 5; stroke-linecap: round; }
.stage .guard rect { fill: var(--d); }
.stage .guard .visor { fill: #16222e; }
.stage .guard .aerial { stroke: var(--d); stroke-width: 3; stroke-linecap: round; }
.stage .eye { fill: #fff; }
.stage .gate.open { animation: gateOpen .5s ease-in forwards; }
@keyframes gateOpen { to { transform: scale(.2) rotate(25deg); opacity: 0; } }
.stage .gate.no { animation: shake .4s; }
.stage .dot-move, .stage .dot-turn { transition: transform .28s cubic-bezier(.4, .1, .3, 1); }
.stage .dot-body { fill: var(--dot); stroke: #3f9a30; stroke-width: 2.5; }
.stage .dot-face { fill: #16222e; }
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles .bubble { position: absolute; z-index: 2; transform: translate(-50%, -105%); max-width: 260px; padding: 5px 11px; border-radius: 12px; background: #fff; color: #16222e; font: 700 .8rem 'JetBrains Mono', Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 18px rgba(0, 0, 0, .4); animation: bubbleIn .25s ease-out; }
.bubbles .bubble.value { background: var(--c); }
@keyframes bubbleIn { from { opacity: 0; transform: translate(-50%, -70%) scale(.7); } }
.verdict { padding: 11px 16px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line); font-weight: 600; color: var(--head); font-size: .94rem; }
.verdict.ok { border-left-color: var(--b); background: rgba(35, 145, 95, .1); }
.verdict.bad { border-left-color: var(--d); background: rgba(220, 79, 42, .1); }
.verdict.warn { border-left-color: var(--c); background: rgba(242, 194, 48, .16); }
.mission { gap: 10px; }
.mission > small { font: 800 .7rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mission .must { font-size: .9rem; color: var(--muted); }
.mission .must b { color: var(--head); }
.worlds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.worlds { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.world-chip { padding: 5px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--paper); color: var(--head); font: 600 .8rem var(--body); cursor: pointer; }
.world-chip[aria-pressed=true] { border-color: var(--head); }
.world-chip[data-state=ok] { background: var(--b); border-color: var(--b); color: #fff; }
.world-chip[data-state=ok]::after { content: ' ✓'; }
.world-chip[data-state=bad] { background: var(--d); border-color: var(--d); color: #fff; }
.hint summary { cursor: pointer; font-weight: 600; color: var(--a-dark); font-size: .9rem; }
.hint p { margin-top: 6px; font-size: .9rem; color: var(--muted); }
[data-theme=dark] .hint summary { color: #8fc0ee; }
.coder { --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-l); overflow: hidden; background: #121c26; position: sticky; top: 124px; }
.coder > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.coder > header .py-name { flex: 1; }
.coder .py-editor { flex: none; height: clamp(260px, 46vh, 480px); }
.tool-btn { flex: none; padding: 7px 11px; border-radius: var(--r-s); border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #dbe3f0; font: 600 .78rem var(--body); cursor: pointer; }
.tool-btn:hover { border-color: #fff; }
.tool-btn.armed { background: var(--d); border-color: var(--d); color: #fff; }
.cm-s-dev .game-line { background: rgba(114, 220, 95, .16); box-shadow: inset 3px 0 0 var(--dot); }
.game-out { margin: 0; padding: 10px 14px; max-height: 150px; overflow: auto; background: #0a1118; color: #dbe3f0; font: 400 13px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid rgba(255, 255, 255, .08); }
.game-out.err { color: #ff9d85; }
.cmds { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.cmds small { flex: 1 0 100%; color: #93a3bf; font-size: .74rem; }
.cmd { padding: 5px 9px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #dbe3f0; font: 400 .78rem var(--mono); cursor: pointer; }
.cmd:hover { background: rgba(114, 220, 95, .22); }
dialog.modal.win { overflow: hidden; }
.modal.win .modal-body { justify-items: center; text-align: center; }
.modal.win .actions { justify-content: center; }
.win-text { color: var(--muted); max-width: 40ch; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px; animation: confetti 2s linear forwards; }
@keyframes confetti { to { transform: translateY(105vh) rotate(700deg); } }
@media (max-width: 900px) {
  .play { grid-template-columns: 1fr; }
  .coder { position: static; }
  .coder .py-editor { height: 300px; }
}

/* ---------- a live quiz ---------- */
.live-page { background: #0f1820; }
.live { min-height: calc(100dvh - 66px); display: grid; justify-items: center; align-content: start; padding: clamp(18px, 4vw, 44px) clamp(14px, 4vw, 40px) 90px; color: #e6edf5;
  background: radial-gradient(circle at 15% -10%, rgba(114, 220, 95, .14), transparent 45%), radial-gradient(circle at 100% 0, rgba(47, 116, 181, .2), transparent 50%), #0f1820; }
.live h1, .live h2, .live h3 { color: #fff; }
.live-stage { width: min(960px, 100%); display: grid; gap: 20px; justify-items: center; text-align: center; }
.live-stage h1 { font-size: clamp(2rem, 6vw, 3.6rem); }
.live-kicker { font: 800 .8rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dot); }
.live-note { color: #a9b8c6; }
.live-head { width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-align: left; }
.live-head > div { flex: 1; min-width: 0; display: grid; }
.live-head small { color: #93a3bf; font-size: .8rem; }
.live-head strong { color: #fff; font: 700 1.05rem var(--display); }
.live .chip.plain { background: rgba(255, 255, 255, .1); color: #dbe3f0; }
.live .btn:not(.go):not(.danger):not(.quiet) { background: #eef3f8; border-color: #eef3f8; color: #16222e; }
.live .btn.quiet { color: #dbe3f0; border-color: rgba(255, 255, 255, .25); }
.live .btn.quiet.armed { background: var(--d); border-color: var(--d); color: #fff; }
.live .actions { justify-content: center; }
.btn.big { padding: 17px 30px; font-size: 1.1rem; border-radius: var(--r-m); }
.players { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 60px; align-content: start; }
.player-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; animation: chipIn .4s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes chipIn { from { transform: scale(.4); opacity: 0; } }
.ready-n { font: 800 clamp(7rem, 30vw, 15rem)/1 var(--display); color: var(--dot); animation: beat 1s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.12); } }
.clock { width: 100%; display: flex; align-items: center; gap: 14px; }
.clock b { min-width: 2.4ch; font: 800 2.1rem/1 var(--display); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.clock span { flex: 1; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.clock i { display: block; height: 100%; border-radius: inherit; background: var(--dot); transition: width .2s linear; }
.clock.late i { background: var(--d); }
.clock.late b { color: #ff9d85; }
.live-q { font-size: clamp(1.35rem, 3.6vw, 2.2rem); max-width: 34ch; line-height: 1.25; }
.live-code { width: min(720px, 100%); margin: 0; padding: 14px 18px; border-radius: var(--r-m); text-align: left; font: 400 14.5px/1.6 'JetBrains Mono', Consolas, monospace; overflow: auto; max-height: 42dvh; border: 1px solid rgba(255, 255, 255, .1); }
.live .pybox { width: min(720px, 100%); text-align: left; }
.live .pybox .code-out { margin: 0; padding: 10px 14px; border-radius: var(--r-s); font: 400 13px/1.55 'JetBrains Mono', Consolas, monospace; max-height: 160px; overflow: auto; }
.answers { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answer { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; border: 0; border-radius: var(--r-m); background: var(--a); color: #fff; font: 700 1.05rem/1.3 var(--body); text-align: left; overflow-wrap: anywhere; transition: transform .12s, opacity .2s; }
.answer.o1 { background: var(--b); } .answer.o2 { background: #b98a00; } .answer.o3 { background: var(--d); }
.answer > b { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 0, 0, .22); font: 800 1.05rem var(--display); }
.answer > span { flex: 1; min-width: 0; }
button.answer { cursor: pointer; }
button.answer:hover:not(:disabled) { transform: translateY(-3px); }
button.answer:disabled { cursor: default; opacity: .5; }
.answer.mine, button.answer.mine:disabled { opacity: 1; box-shadow: inset 0 0 0 4px #fff; }
.answer.wrong { opacity: .38; }
.answer.right { opacity: 1; box-shadow: inset 0 0 0 4px var(--dot), 0 0 30px rgba(114, 220, 95, .35); }
.answer.right > b::after { content: '✓'; position: absolute; top: 6px; right: 12px; font-size: 1.3rem; color: var(--dot); }
.answer em { flex: none; width: 30%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-style: normal; font-weight: 800; }
.answer em i { display: block; height: 8px; min-width: 4px; border-radius: 99px; background: rgba(255, 255, 255, .8); }
.result { display: grid; gap: 4px; padding: 16px 28px; border-radius: var(--r-m); background: rgba(220, 79, 42, .2); border: 1px solid rgba(220, 79, 42, .5); animation: chipIn .4s cubic-bezier(.3, 1.5, .5, 1); }
.result.right { background: rgba(35, 145, 95, .25); border-color: rgba(114, 220, 95, .5); }
.result strong { font: 800 1.7rem var(--display); color: #fff; }
.result span { font-weight: 700; color: #fff; }
.result small { color: #b4c2cf; }
.leaders { list-style: none; margin: 0; padding: 0; width: min(560px, 100%); display: grid; gap: 6px; }
.leaders li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-s); background: rgba(255, 255, 255, .07); text-align: left; animation: doorIn .4s ease-out backwards; }
.leaders li:nth-child(2) { animation-delay: .08s; } .leaders li:nth-child(3) { animation-delay: .16s; } .leaders li:nth-child(4) { animation-delay: .24s; } .leaders li:nth-child(5) { animation-delay: .32s; }
.leaders li.me { box-shadow: inset 0 0 0 2px var(--dot); }
.leaders li > b { width: 22px; color: #93a3bf; font: 800 .95rem var(--display); }
.leaders li > span:not(.avatar) { flex: 1; min-width: 0; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaders li small { color: var(--dot); font-weight: 700; }
.leaders li strong { font: 800 1.05rem var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.podium { width: min(620px, 100%); display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-top: 10px; }
.podium-step { flex: 1; min-width: 0; display: grid; gap: 10px; }
.podium-who { display: grid; justify-items: center; gap: 4px; animation: fadeUp .6s ease-out backwards; }
.podium-who .avatar { width: 58px; height: 58px; font-size: 1.5rem; }
.podium-who strong { color: #fff; font: 700 1rem var(--display); overflow-wrap: anywhere; }
.podium-who span:not(.avatar) { color: #a9b8c6; font-size: .84rem; }
.podium-block { display: grid; place-items: center; border-radius: 14px 14px 0 0; background: #c3ccd8; color: #16222e; height: 120px; transform-origin: bottom; animation: growUp .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.podium-block b { font: 800 3rem var(--display); }
.p1 .podium-block { height: 172px; background: var(--c); }
.p3 .podium-block { height: 86px; background: #c98a52; }
.p3 .podium-block { animation-delay: .3s; } .p3 .podium-who { animation-delay: .8s; }
.p2 .podium-block { animation-delay: 1.3s; } .p2 .podium-who { animation-delay: 1.8s; }
.p1 .podium-block { animation-delay: 2.3s; } .p1 .podium-who { animation-delay: 2.9s; }
@keyframes growUp { from { transform: scaleY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } }
.live-stage.over .confetti { position: fixed; z-index: 1; }
.live-stage.over .confetti i { animation-delay: 3s; animation-fill-mode: both; }
.live .review { width: 100%; text-align: left; }
.live .list-row { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #e6edf5; }
.live .list-row strong { color: #fff; }
.live .list-row small { color: #a9b8c6; }
.live .gauge { flex: none; width: min(220px, 40%); }
.live .gauge b { color: #fff; min-width: 70px; }
.live .meter { background: rgba(255, 255, 255, .15); }
@media (max-width: 620px) { .answers { grid-template-columns: 1fr; } .answer { min-height: 60px; } }

/* ---------- admin dashboard, second layout: an overview first, people as tidy rows ---------- */
.side nav button { justify-content: flex-start; gap: 11px; }
.side nav button svg { flex: none; width: 18px; height: 18px; opacity: .75; }
.side nav button[aria-current=page] svg { opacity: 1; color: var(--dot); }
.side nav button span { flex: 1; }
.side nav .nav-label { font: 600 .68rem var(--body); letter-spacing: .09em; text-transform: uppercase; color: #7f90a8; padding: 14px 12px 4px; }
.side .foot .who { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.side .foot .who small { display: block; color: #93a4bd; font-weight: 400; font-size: .76rem; }
.main { gap: 24px; max-width: 1320px; width: 100%; }
.main > h2 { font-size: 1.2rem; margin-bottom: -10px; }

.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.adm-kpi { --tone: var(--a); position: relative; display: grid; gap: 2px; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); text-decoration: none; color: var(--text); overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; }
.adm-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tone); }
a.kpi:hover { transform: translateY(-2px); border-color: var(--tone); box-shadow: 0 10px 24px rgba(22, 34, 46, .08); }
.adm-kpi b { font: 700 2.1rem/1 var(--display); color: var(--head); letter-spacing: -.02em; }
.adm-kpi span { font-weight: 600; color: var(--head); font-size: .93rem; }
.adm-kpi small { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-kpi.b { --tone: var(--b); } .adm-kpi.c { --tone: var(--c); } .adm-kpi.d { --tone: var(--d); } .adm-kpi.tone-live { --tone: var(--dot); } .adm-kpi.ok { --tone: #b9c2cf; }
.adm-kpi.d b { color: var(--d); }

.adm-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.adm-col { display: grid; gap: 18px; min-width: 0; }
.adm-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px 16px; display: grid; gap: 12px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
/* a wide table inside scrolls in its own frame, it never widens the panel (and with it the page) */
.adm-panel > * { min-width: 0; }
.adm-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.adm-panel > header h2 { font-size: 1.08rem; }
.adm-panel > header a { font-size: .84rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.adm-panel > header a:hover { text-decoration: underline; }
.adm-empty { color: var(--muted); font-size: .92rem; padding: 8px 0 6px; }
.adm-todo { display: grid; gap: 6px; }
.adm-todo-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border-radius: var(--r-s); background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--head); text-decoration: none; font-weight: 600; font-size: .93rem; }
.adm-todo-row:hover { background: color-mix(in srgb, var(--c) 28%, var(--surface)); }
.adm-todo-row b { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; font: 700 .95rem var(--display); }
.adm-todo-row i { font-style: normal; color: var(--muted); font-size: 1.2rem; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mini-list li { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); min-width: 0; }
.mini-list li:first-child { border-top: 0; }
.mini-list li > span:not(.chip):not(.person-avatar) { flex: 1; min-width: 0; display: grid; }
.mini-list strong { color: var(--head); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-list small { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-list time { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.mini-list.feed i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--b); }
.mini-list.feed i.bad { background: var(--d); }

.queue { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.queue div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--muted); font-size: .9rem; font-weight: 600; }
.queue b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--paper); color: var(--muted); font: 700 1rem var(--display); }
.queue .has { color: var(--head); border-color: var(--c); }
.queue .has b { background: var(--c); color: var(--ink); }
.fold { display: grid; gap: 12px; }
.fold > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .15s; }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary h2 { font-size: 1.08rem; }
.fold > .sub { color: var(--muted); font-size: .9rem; }
.filters-count { color: var(--muted); font-size: .86rem; margin-left: auto; }

.people-list { display: grid; gap: 8px; }
.person { display: grid; grid-template-columns: 44px minmax(150px, 1.15fr) auto minmax(150px, 1.1fr) minmax(150px, 1fr) auto; align-items: center; gap: 6px 16px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 72px; }
.person:hover { border-color: #b9c4d4; }
.person.locked { border-left: 4px solid var(--d); }
.person > div { min-width: 0; display: grid; gap: 1px; }
.person strong { color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-access > span { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-on { color: var(--a-dark) !important; font-weight: 600; }
.person-seen .presence { font-size: .88rem; }
.person .person-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.person .actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.person-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--b) 18%, var(--surface)); color: #156241; font: 700 .92rem var(--display); letter-spacing: .02em; }
.person-avatar.teacher { background: color-mix(in srgb, var(--a) 18%, var(--surface)); color: var(--a-dark); }
.person-avatar.small { width: 32px; height: 32px; border-radius: 9px; font-size: .78rem; }
@media (max-width: 1180px) {
  .person { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .person .person-access, .person .person-seen { grid-column: 2 / -1; }
  .person .actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

dialog.modal.manage { width: min(600px, calc(100vw - 32px)); }
.manage h3 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--body); font-weight: 700; margin-top: 4px; }
.manage-who { display: flex; align-items: center; gap: 12px; }
.manage-who > div { flex: 1; min-width: 0; display: grid; }
.manage-who strong { color: var(--head); }
.manage-who small { color: var(--muted); font-size: .84rem; }
.manage-alert { background: #fbe2da; color: #a23412; border-radius: var(--r-s); padding: 10px 12px; font-size: .9rem; font-weight: 600; }
.manage-list { display: grid; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.manage-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.manage-row:first-child { border-top: 0; }
/* a student's classes in the same list: rows that are read, not pressed, and the line that adds one */
div.manage-row { cursor: default; }
.manage-list > small { padding: 10px 14px; color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line); }
.manage-list > small:first-child { border-top: 0; }
.manage-add select { flex: 1; min-width: 0; }
.manage-row:hover { background: var(--paper); }
.manage-row > span { display: grid; gap: 1px; min-width: 0; }
.manage-row strong { color: var(--head); font-size: .95rem; }
.manage-row small { color: var(--muted); font-size: .82rem; }
.modal .actions.start { justify-content: flex-start; }

/* ---------- focus mode, on the teacher's class card ---------- */
.focus-box { border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; background: var(--paper); }
.focus-box.on { border-color: var(--b); background: color-mix(in srgb, var(--b) 10%, var(--surface)); }
.kids-box .kids-url { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.kids-box .kids-url code { overflow-wrap: anywhere; font-size: .85rem; }
.focus-box .toggle { align-items: flex-start; gap: 12px; }
.focus-box .toggle > span { display: grid; gap: 2px; }
.focus-box strong { color: var(--head); font-size: .98rem; }
.focus-box small { color: var(--muted); font-size: .85rem; max-width: 78ch; }
.focus-state { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }

/* ---------- dialogs scroll inside themselves, never the page behind ---------- */
html:has(dialog[open]) { overflow: hidden; }
dialog.modal { overscroll-behavior: contain; }
.modal-body { min-height: 0; flex: 1 1 auto; grid-auto-rows: max-content; align-content: start; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
dialog#grant-dialog { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }

/* ---------- dashboard: demo accounts ---------- */
.demo-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.demo-notes div { display: grid; gap: 3px; padding: 14px 16px; border-radius: var(--r-m); background: color-mix(in srgb, var(--a) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--a) 25%, var(--line)); }
.demo-notes b { color: var(--head); font-family: var(--display); }
.demo-notes span { color: var(--muted); font-size: .88rem; }
.demo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.demo-acct { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--a); border-radius: var(--r-m); }
.demo-acct.off { border-top-color: #b9c2cf; }
.demo-acct > header { display: flex; align-items: center; gap: 12px; }
.demo-acct > header > div { flex: 1; min-width: 0; display: grid; }
.demo-acct small { color: var(--muted); }
.demo-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.demo-facts div { display: grid; gap: 1px; padding: 9px 10px; border-radius: var(--r-s); background: var(--paper); min-width: 0; }
.demo-facts small { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.demo-facts b { color: var(--head); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-facts .warn { background: #fbe2da; } .demo-facts .warn b { color: #a23412; }
.demo-school { color: var(--muted); font-size: .88rem; }
.demo-acct .actions { margin-top: auto; }
.btn.admin-back { background: var(--c); border-color: var(--c); color: var(--ink); }

/* ---------- dashboard: classes, one shelf for each programme, cards of one size ---------- */
.shelf-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: -8px; }
.shelf-head h2 { font-size: 1.25rem; }
.shelf-head span { color: var(--muted); font-size: .88rem; }
.adm-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 16px; align-items: stretch; }
.adm-class { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); min-width: 0; transition: box-shadow .15s, border-color .15s; }
.adm-class > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adm-class > header > div { min-width: 0; display: grid; gap: 2px; }
.adm-class h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-class small { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klass-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.klass-nums div { display: grid; padding: 8px 10px; border-radius: var(--r-s); background: var(--paper); }
.klass-nums b { font: 700 1.15rem var(--display); color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klass-nums span { color: var(--muted); font-size: .76rem; }
.klass-books { color: var(--muted); font-size: .86rem; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.klass-people { list-style: none; margin: 0; padding: 0; display: grid; min-height: 196px; align-content: start; }
.klass-people li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); min-width: 0; }
.klass-people li:first-child { border-top: 0; }
.klass-people li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.klass-people strong { color: var(--head); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klass-people .none { color: var(--muted); font-size: .9rem; }
.klass-people .extra { display: none; }
.klass-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 36px; padding: 8px; border: 1px dashed var(--line); border-radius: var(--r-s); background: transparent; color: var(--a-dark); font: 600 .86rem var(--body); cursor: pointer; }
.klass-more:hover { border-color: var(--a); background: color-mix(in srgb, var(--a) 7%, var(--surface)); }
.klass-more.none { border-color: transparent; cursor: default; }
.klass-more i { font-style: normal; transition: transform .15s; }
.adm-class > footer { margin-top: auto; display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
/* opened: the card takes the whole row and lists everyone in columns */
.adm-pick { max-height: 44dvh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); }
.adm-pick label[hidden], .adm-pick[hidden] { display: none; }
.adm-pick small { color: var(--muted); }
.adm-class.open { grid-column: 1 / -1; border-color: var(--a); box-shadow: 0 14px 34px rgba(22, 34, 46, .1); }
.adm-class.open .klass-people { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 28px; }
.adm-class.open .klass-people .extra { display: flex; animation: klass-in .2s ease-out both; }
.adm-class.open .klass-people li { border-top: 1px solid var(--line); }
.adm-class.open .klass-more i { transform: rotate(180deg); }
@keyframes klass-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- dashboard: performance ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; justify-self: start; }
.seg button { border: 0; background: transparent; color: var(--muted); font: 600 .9rem var(--body); padding: 8px 16px; border-radius: 9px; cursor: pointer; }
.seg button:hover { color: var(--head); }
.seg button[aria-selected=true] { background: var(--ink); color: #fff; }
.pulse-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; background: var(--ink); color: #c6d2e6; border-radius: var(--r-m); text-decoration: none; font-size: .9rem; }
.pulse-link b { color: #fff; font: 700 1.05rem var(--display); } .pulse-link i { font-style: normal; font-size: 1.4rem; color: var(--dot); }
.pulse-link:hover { box-shadow: 0 10px 24px rgba(22, 34, 46, .2); }
.pulse-top { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.pulse-box > header, .pulse-health > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pulse-box > header small, .pulse-health > header small { color: var(--muted); font-size: .82rem; }
.health-body { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; }
.score-ring { width: 130px; height: 130px; }
.score-ring .track { fill: none; stroke: var(--line); stroke-width: 11; }
.score-ring .fill { fill: none; stroke: var(--b); stroke-width: 11; stroke-linecap: round; }
.score-ring.fair .fill { stroke: var(--c); } .score-ring.low .fill { stroke: var(--d); } .score-ring.none .fill { stroke: transparent; }
.score-ring .num { font: 700 34px var(--display); fill: var(--head); } .score-ring .of { font: 500 11px var(--body); fill: var(--muted); }
.health-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.health-parts li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.health-parts span { font-weight: 600; color: var(--head); font-size: .9rem; display: grid; }
.health-parts small { color: var(--muted); font-weight: 400; font-size: .74rem; }
.health-parts b { font: 700 1rem var(--display); color: var(--head); }
.meter-bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: 99px; background: var(--a); }
.pulse-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pulse-tiles.small { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pulse-tile { --tone: var(--a); position: relative; display: grid; gap: 2px; align-content: start; padding: 16px 16px 14px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; min-width: 0; }
.pulse-box .pulse-tile { background: var(--paper); border-color: transparent; }
.pulse-tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tone); }
.pulse-tile.b { --tone: var(--b); } .pulse-tile.c { --tone: var(--c); } .pulse-tile.d { --tone: var(--d); } .pulse-tile.tone-live { --tone: var(--dot); } .pulse-tile.ok { --tone: #b9c2cf; }
.pulse-tile b { font: 700 1.55rem/1.1 var(--display); color: var(--head); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pulse-tiles.small .pulse-tile b { font-size: 1.3rem; }
.pulse-tile span { font-weight: 600; color: var(--head); font-size: .88rem; }
.pulse-tile small { color: var(--muted); font-size: .78rem; }
.delta.up { color: #156241 !important; font-weight: 600; } .delta.down { color: #a23412 !important; font-weight: 600; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; } .chart .axis { font: 500 11px var(--body); fill: var(--muted); }
.chart .bar.students { fill: var(--a); } .chart .bar.teachers { fill: var(--c); }
.chart g:hover .bar { opacity: .78; }
.chart .people-line { fill: none; stroke: var(--b); stroke-width: 2; stroke-dasharray: 4 4; } .chart .people-dot { fill: var(--b); }
.chart .line { fill: none; stroke-width: 2.5; } .chart .line.students, .chart .dot.students { stroke: var(--a); fill: var(--a); } .chart .line.teachers, .chart .dot.teachers { stroke: var(--c); fill: var(--c); }
.chart .line { fill: none !important; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.legend .k { display: inline-flex; align-items: center; gap: 6px; } .legend .k::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--a); }
.legend .k.teachers::before { background: var(--c); } .legend .k.people::before { background: none; height: 0; border-top: 2px dashed var(--b); border-radius: 0; }
.chart-foot { color: var(--muted); font-size: .86rem; }
.pulse-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; align-items: start; }
table.pulse-people td, table.pulse-people th { padding: 9px 10px; }
table.pulse-people td:first-child { display: flex; align-items: center; gap: 10px; min-width: 240px; }
table.pulse-people .rank { width: 18px; color: var(--muted); font-size: .78rem; text-align: right; }
table.pulse-people .who { display: grid; min-width: 0; } table.pulse-people .who strong { color: var(--head); } table.pulse-people .who small { white-space: nowrap; }
table.pulse-people .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.pulse-people .sel { background: color-mix(in srgb, var(--a) 10%, var(--surface)); font-weight: 700; color: var(--head); }
.spark { width: 84px; height: 24px; } .spark polyline { fill: none; stroke: var(--a); stroke-width: 1.8; stroke-linejoin: round; }
.voice-top { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.voice-avg { display: grid; justify-items: center; gap: 2px; } .voice-avg b { font: 700 3rem/1 var(--display); color: var(--head); } .voice-avg small { color: var(--muted); font-size: .8rem; }
.five { display: inline-flex; gap: 1px; } .five i { font-style: normal; color: var(--line); font-size: 1rem; } .five i.on { color: var(--c); } .five i.half { color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.spread { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spread li { display: grid; grid-template-columns: 28px 1fr 26px; gap: 8px; align-items: center; font-size: .82rem; color: var(--muted); }
.spread .meter-bar { grid-column: auto; height: 8px; } .spread .meter-bar i { background: var(--c); } .spread b { color: var(--head); text-align: right; }
.voice-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.voice-facts div { display: grid; padding: 9px 11px; border-radius: var(--r-s); background: var(--paper); }
.voice-facts small { color: var(--muted); font-size: .74rem; } .voice-facts b { font: 700 1.1rem var(--display); color: var(--head); }
.game-stars, .said-list { list-style: none; margin: 0; padding: 0; display: grid; }
.game-stars li { display: grid; grid-template-columns: 1fr auto 34px 80px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.game-stars li:first-child, .said-list li:first-child { border-top: 0; }
.game-stars span { color: var(--head); font-weight: 600; } .game-stars b { text-align: right; color: var(--head); } .game-stars small { color: var(--muted); text-align: right; }
.said-list li { display: grid; gap: 4px; padding: 11px 0; border-top: 1px solid var(--line); }
.said-list li > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .said-list small { color: var(--muted); } .said-list .five { margin-left: auto; }
.said-list p { color: var(--text); font-size: .93rem; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .pulse-top { grid-template-columns: 1fr; } }

/* ---------- support: the teacher's window and the administrator's page ---------- */
.icon-btn.support-btn { position: relative; }
dialog.modal.support textarea { min-height: 110px; }
.support-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn.recording { background: var(--d); border-color: var(--d); color: #fff; animation: rec 1.2s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .7; } }
.rec-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--d); }
.support-tray { display: grid; gap: 8px; }
.support-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); min-width: 0; }
.support-file img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.support-file audio { height: 34px; max-width: 240px; } .support-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.support-list { display: grid; gap: 10px; }
.support-list > h3 { margin-top: 6px; }
.support-ticket { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.support-ticket.open { border-left: 4px solid var(--c); }
.support-ticket > summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; }
.support-ticket > summary::-webkit-details-marker { display: none; }
.support-ticket > summary .who { flex: 1; min-width: 0; display: grid; } .support-ticket > summary strong { flex: 1; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket > summary small { color: var(--muted); white-space: nowrap; }
.support-thread { display: grid; gap: 8px; padding: 4px 16px 14px; }
.support-msg { justify-self: start; max-width: min(640px, 92%); display: grid; gap: 4px; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: var(--paper); }
.support-msg.staff { justify-self: end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--b) 14%, var(--surface)); }
.support-msg small { color: var(--muted); font-size: .76rem; } .support-msg p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--head); }
.support-msg img { max-width: 100%; max-height: 260px; border-radius: 8px; border: 1px solid var(--line); display: block; } .support-msg audio { max-width: 100%; }
.support-reply { display: flex; gap: 8px; padding: 0 16px 14px; flex-wrap: wrap; } .support-reply input { flex: 1; min-width: 180px; }
.support-answer { display: grid; gap: 10px; padding: 0 16px 16px; } .support-answer textarea { min-height: 84px; } .support-answer .actions { justify-content: flex-end; }
.game-stars span { display: grid; } .game-stars span small { text-align: left; font-weight: 400; }

/* ---------- dashboard: programmes ---------- */
.prog-form { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); align-items: start; }
.prog-fields { display: grid; gap: 14px; } .prog-fields textarea, .prog-edit textarea { min-height: 76px; }
.prog-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }
.prog-side { display: grid; gap: 8px; } .prog-side small { color: var(--muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.colour-pick { display: inline-flex; align-items: center; gap: 10px; }
.colour-pick input[type=color] { width: 56px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); cursor: pointer; }
.colour-pick code { font-size: .86rem; color: var(--muted); }
.prog-list { display: grid; gap: 14px; }
.prog-card { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); align-items: start; }
.prog-edit { display: grid; gap: 12px; }
.prog-built { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.prog-form .door, .prog-card .door, .prog-built .door { animation: none; transform: none; }
.door span.logo { display: block; height: 48px; }
.hero-badge { display: grid; place-items: center; width: 100%; min-height: 240px; }
.hero-badge .logo { max-width: min(320px, 80%); max-height: 220px; height: auto; object-fit: contain; filter: none; }
@media (max-width: 900px) { .prog-form, .prog-card { grid-template-columns: 1fr; } }

/* Marks and Reports: the row that joins the two pages */
.marks-nav { margin-bottom: 0; }

/* ---------- class dashboard: roomier tiles and live-quiz cards ---------- */
.kpis:not(.mini) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpis:not(.mini) .kpi { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 18px 16px 22px; }
.kpis:not(.mini) .kpi-num { min-width: 0; text-align: left; }
.kpis:not(.mini) .kpi strong { padding-right: 0; }
.kpis:not(.mini) .kpi > div { width: 100%; }
.cards:has(> .quiz-result) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 20px; }
.quiz-result { gap: 12px; padding: 22px 24px; }
.quiz-result .card-head { align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.quiz-result .card-head > div { min-width: 0; }
.quiz-result .card-head h3 { overflow-wrap: anywhere; }
.quiz-result .card-head > :last-child { flex: none; }
.q-bar { grid-template-columns: minmax(0, 1fr) minmax(110px, 30%) 52px; gap: 14px; font-size: .9rem; padding: 4px 0; }
.q-bar > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.q-bar .meter { height: 10px; }
@media (max-width: 560px) { .q-bar { grid-template-columns: minmax(0, 1fr) 52px; } .q-bar .meter { grid-column: 1 / -1; order: 3; } }
/* one quiz alone takes the whole width, its questions in two columns */
.cards:has(> .quiz-result:only-child) { grid-template-columns: 1fr; }
@media (min-width: 900px) { .quiz-result:only-child { grid-template-columns: 1fr 1fr; column-gap: 44px; } .quiz-result:only-child .card-head { grid-column: 1 / -1; } }

/* ---------- class dashboard: squares you can click, and the groups read from them ---------- */
button.heat { border: 0; cursor: pointer; font: 700 .74rem var(--display); transition: transform .12s, box-shadow .12s; }
button.heat.none { border: 1.5px dashed var(--line); }
button.heat:hover { transform: scale(1.12); }
button.heat:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.heat.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.heat.pop { animation: heat-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes heat-pop { 0% { transform: scale(1); } 40% { transform: scale(1.32) rotate(-4deg); } 100% { transform: scale(1); } }
.heat.big { min-width: 64px; height: 56px; font-size: 1rem; flex: none; }
.heat-why { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); animation: why-in .25s ease-out; }
@keyframes why-in { from { opacity: 0; transform: translateY(-6px); } }
.heat-why.hint { align-items: center; color: var(--muted); font-size: .9rem; border-style: dashed; background: transparent; }
.heat-why.hint .ico { width: 20px; height: 20px; flex: none; }
.heat-why > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.heat-why strong { color: var(--head); font: 700 1rem var(--display); } .heat-why small { color: var(--muted); }
.heat-why p { color: var(--text); font-size: .93rem; } .heat-why p b { color: var(--head); }
.heat-why ul { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.heat-why li { padding: 4px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: .8rem; color: var(--head); }
@media (prefers-reduced-motion: reduce) { .heat.pop, .heat-why { animation: none; } }
.sort-block { display: grid; gap: 12px; }
.sort-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .sort-head small { color: var(--muted); font-size: .84rem; }
.sort-bar { display: flex; height: 26px; border-radius: 99px; overflow: hidden; gap: 2px; }
.sort-bar i { display: grid; place-items: center; font: 800 .8rem var(--display); font-style: normal; color: #fff; min-width: 26px; }
.tone-d { --tone: var(--d); --soft: color-mix(in srgb, var(--d) 11%, var(--surface)); } .tone-c { --tone: #c79a00; --soft: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.tone-b { --tone: var(--b); --soft: color-mix(in srgb, var(--b) 11%, var(--surface)); } .tone-n { --tone: #8793a6; --soft: var(--paper); }
.sort-bar i { background: var(--tone); }
.sort-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.sort-col { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--r-m); background: var(--soft); border-top: 4px solid var(--tone); min-width: 0; }
.sort-col > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sort-col > header strong { color: var(--head); font: 700 1rem var(--display); }
.sort-col > header b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; background: var(--tone); color: #fff; font: 800 .85rem var(--display); }
.sort-col > small { color: var(--muted); font-size: .8rem; min-height: 3.6em; }
.sort-none { color: var(--muted); font-size: .86rem; }
.sort-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.sort-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; font-weight: 600; color: var(--head); font-size: .92rem; }
.sort-item > summary::-webkit-details-marker { display: none; }
.sort-item > summary::after { content: '▾'; color: var(--muted); transition: transform .15s; }
.sort-item[open] > summary::after { transform: rotate(180deg); }
.sort-item > summary span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sort-item > summary b { font: 700 .78rem var(--display); color: var(--muted); white-space: nowrap; }
.sort-item:hover { border-color: var(--tone); }
.sort-item ul { margin: 0; padding: 2px 12px 6px 28px; display: grid; gap: 4px; font-size: .84rem; color: var(--text); }
.sort-item .sort-next { margin: 0 12px 8px; padding: 8px 10px; border-radius: 8px; background: var(--soft); font-size: .84rem; color: var(--head); }
.sort-item .link { margin: 0 12px 10px; font-size: .82rem; }
.sort-rules { color: var(--muted); font-size: .8rem; padding-top: 10px; border-top: 1px solid var(--line); } .sort-rules b { color: var(--head); }

/* ---------- top bar: a demo account's actions in one menu, so the bar stays on one row ---------- */
.demo-menu { position: relative; flex: none; }
.demo-menu > summary { display: inline-flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; padding: 7px 12px; border-radius: 99px; background: var(--c); color: var(--ink); font: 700 .84rem var(--body); white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.demo-menu > summary::-webkit-details-marker { display: none; }
.demo-menu > summary i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.demo-menu > summary .demo-role { font-weight: 500; opacity: .8; }
.demo-menu > summary b { font-size: .7rem; transition: transform .15s; }
.demo-menu[open] > summary b { transform: rotate(180deg); }
.demo-menu > summary:hover { box-shadow: 0 6px 14px -6px rgba(22, 34, 46, .5); }
.demo-menu > summary:active { transform: scale(.95); }
.demo-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 250px; padding: 6px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 18px 40px -12px rgba(22, 34, 46, .4); animation: why-in .16s ease-out; }
.demo-pop button { display: grid; gap: 1px; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: inherit; }
.demo-pop button:hover, .demo-pop button:focus-visible { background: var(--paper); }
.demo-pop strong { color: var(--head); font-size: .92rem; } .demo-pop small { color: var(--muted); font-size: .78rem; }
@media (max-width: 720px) { .demo-menu > summary .demo-role { display: none; } }

/* ---------- Entertainment's row of pages: buttons that answer a press, and the dashboard set apart ---------- */
.fun-nav { align-items: center; }
.fun-nav a { position: relative; overflow: hidden; transition: transform .12s, box-shadow .15s, border-color .15s, background .15s; }
.fun-nav a:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -10px rgba(22, 34, 46, .55); }
.fun-nav a:active { transform: scale(.94); box-shadow: none; }
.fun-nav a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; }
.fun-nav a:active::after { opacity: .14; }
.fun-nav a[aria-current=page] { animation: nav-in .28s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes nav-in { from { transform: scale(.9); } }
/* the class dashboard is not a game: it reads the results. It stands at the far end, in its own colours. */
.fun-nav .dash-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; border-color: var(--a); color: var(--a-dark); background: color-mix(in srgb, var(--a) 9%, var(--surface)); padding-left: 13px; }
.fun-nav .dash-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fun-nav .dash-link::before { content: ''; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.fun-nav .dash-link { overflow: visible; }
.fun-nav .dash-link:hover { border-color: var(--a-dark); }
.fun-nav .dash-link[aria-current=page] { background: var(--a); border-color: var(--a); color: #fff; }
@media (max-width: 760px) { .fun-nav .dash-link { margin-left: 0; } .fun-nav .dash-link::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .fun-nav a, .fun-nav a[aria-current=page] { animation: none; transition: none; } }

/* ---------- sounds: the opening's button, and the tests in Settings ---------- */
.intro-sound { position: absolute; right: 22px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(255, 255, 255, .28); color: #c9d4de; font: 500 .84rem var(--body); padding: 8px 14px; border-radius: 99px; cursor: pointer; animation: fade .4s both; }
.intro-sound::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 0 rgba(114, 220, 95, .6); animation: sound-pulse 1.4s infinite; }
.intro-sound:hover { color: #fff; border-color: #fff; }
@keyframes sound-pulse { to { box-shadow: 0 0 0 9px rgba(114, 220, 95, 0); } }
.sound-tests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.switch > div > label { cursor: pointer; }
/* the site's sections inside the dashboard look like its other entries */
.side nav a { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font: 500 .96rem var(--body); padding: 10px 12px; border-radius: var(--r-s); transition: background .15s, color .15s; }
.side nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.side nav a svg { flex: none; width: 18px; height: 18px; opacity: .75; }
.side nav a span { flex: 1; }
.side nav a::after { content: '↗'; font-size: .8rem; opacity: .45; }
@media (max-width: 900px) { .side nav a { white-space: nowrap; } }

/* ---------- a class card's two approvals, and a demo's programmes ---------- */
.klass-sws { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.klass-sw { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s; }
.klass-sw.on { border-color: color-mix(in srgb, var(--b) 45%, var(--line)); background: color-mix(in srgb, var(--b) 7%, var(--surface)); }
.klass-sw span { display: grid; min-width: 0; } .klass-sw b { font-size: .86rem; color: var(--head); } .klass-sw small { font-size: .74rem; color: var(--muted); }
@media (max-width: 420px) { .klass-sws { grid-template-columns: 1fr; } }
.enroll-wait { padding: 10px 12px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-radius: 0 var(--r-s) var(--r-s) 0; }
.demo-progs { display: grid; gap: 6px; margin-top: 4px; } .demo-progs > strong { font-size: .88rem; color: var(--head); } .demo-progs > small { color: var(--muted); font-size: .82rem; }
.prog-sws { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.prog-sw { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer; }
.prog-sw span { display: grid; line-height: 1.15; } .prog-sw b { font-size: .86rem; color: var(--head); } .prog-sw small { font-size: .72rem; color: var(--muted); }
.prog-sw.none { opacity: .55; cursor: not-allowed; }
.prog-sw:has(.sw:checked) { border-color: color-mix(in srgb, var(--b) 50%, var(--line)); background: color-mix(in srgb, var(--b) 7%, var(--surface)); }

/* ---------- staff and permissions ---------- */
.page-actions { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.perm-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 18px; }
.perm-legend > div { display: grid; gap: 3px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lv); border-radius: var(--r-s); }
.perm-legend b { color: var(--head); font-size: .92rem; } .perm-legend small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.l1 { --lv: var(--a); } .l2 { --lv: var(--b); } .l3 { --lv: var(--c); } .l4 { --lv: var(--d); } .perm-level.owner { --lv: var(--ink); }
.perm-badge { justify-self: start; font: 700 .68rem var(--body); letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--lv); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.l3 .perm-badge { color: var(--ink); }
.staff-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.staff-card { display: grid; gap: 12px; align-content: start; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.staff-card.owner { border-top: 3px solid var(--ink); } .staff-card.off { opacity: .7; }
.staff-card header { display: flex; align-items: center; gap: 12px; } .staff-card header > div { flex: 1; min-width: 0; }
.staff-card h3 { font: 700 1.05rem var(--display); color: var(--head); } .staff-card h3 small { font-weight: 500; color: var(--muted); } .staff-card header small { color: var(--muted); font-size: .82rem; }
.staff-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.staff-facts dt { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .staff-facts dd { margin: 0; font-size: .88rem; color: var(--head); overflow-wrap: anywhere; }
.perm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-pill { display: inline-flex; align-items: baseline; gap: 4px; font-size: .78rem; color: var(--muted); padding: 4px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--lv) 45%, var(--line)); background: color-mix(in srgb, var(--lv) 8%, var(--surface)); }
.perm-pill b { color: var(--head); }
.perm-dialog { width: min(980px, 96vw); }
.perm-form { display: grid; gap: 14px; }
.perm-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: start; }
.perm-top .field small { color: var(--muted); font-size: .78rem; }
.perm-level { border: 1px solid var(--line); border-left: 4px solid var(--lv); border-radius: var(--r-s); background: var(--surface); overflow: hidden; }
.perm-level > header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: color-mix(in srgb, var(--lv) 7%, var(--surface)); border-bottom: 1px solid var(--line); }
.perm-level > header > div { flex: 1; display: grid; } .perm-level > header strong { color: var(--head); font-size: .95rem; } .perm-level > header small { color: var(--muted); font-size: .78rem; }
.perm-level > header > b { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.perm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 14px; padding: 4px 14px 8px; }
.perm { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.perm > span { display: grid; gap: 1px; } .perm b { font-size: .9rem; color: var(--head); } .perm small { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.perm .sw { margin-top: 2px; } .perm.locked { cursor: default; } .perm.locked .sw { opacity: .55; cursor: not-allowed; }
.perm-lock { flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--ink); position: relative; margin-top: 2px; }
.perm-lock::after { content: ''; position: absolute; left: 14px; top: 8px; width: 10px; height: 8px; border-radius: 2px; background: #fff; box-shadow: 0 -5px 0 -2px var(--ink), 0 -5px 0 0 #fff; }
.hand-over { font: 600 1.05rem/1.7 'JetBrains Mono', ui-monospace, monospace; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-s); padding: 14px 16px; user-select: all; white-space: pre-wrap; }

/* ---------- Library: the two views, and scope and sequence ---------- */
.lib-tabs { display: flex; width: fit-content; max-width: 100%; gap: 6px; padding: 5px; margin: 0 0 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; box-shadow: 0 10px 24px -18px rgba(22, 34, 46, .5); }
.lib-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--muted); font: 600 .95rem var(--body); padding: 10px 20px; border-radius: 99px; cursor: pointer; transition: background .18s, color .18s, transform .12s; }
.lib-tabs button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lib-tabs button:hover { color: var(--head); } .lib-tabs button:active { transform: scale(.95); }
.lib-tabs button[aria-selected=true] { background: var(--ink); color: #fff; }
.lib-tabs button.special[aria-selected=true] { background: linear-gradient(120deg, var(--ink), #24506b); box-shadow: inset 0 0 0 1px rgba(114, 220, 95, .5); }
.lib-tabs button.special[aria-selected=true] svg { color: var(--dot); }
.lib-tabs button.special:not([aria-selected=true])::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); animation: sound-pulse 1.6s infinite; }
.scope-section .section-head .sub { margin-top: 4px; color: var(--muted); }
/* the student's path */
.path { display: grid; gap: 16px; }
.path-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.path-say { flex: 1; min-width: 240px; display: grid; gap: 3px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--dot); border-radius: var(--r-m); }
.path-say strong { font: 700 1.15rem var(--display); color: var(--head); } .path-say span { color: var(--muted); }
.path-overall { --size: 78px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--surface) 76%, transparent 78%), conic-gradient(var(--b) calc(var(--pct) * 1%), var(--line) 0); }
.path-overall b { font: 800 1.1rem var(--display); color: var(--head); line-height: 1; } .path-overall small { font-size: .56rem; color: var(--muted); max-width: 50px; line-height: 1.1; }
.path-scroll { overflow-x: auto; padding-bottom: 6px; border-radius: var(--r-l, 22px); }
.path-stage { position: relative; min-width: 760px; aspect-ratio: 1000 / 400; background: radial-gradient(600px 240px at 12% 0%, rgba(114, 220, 95, .16), transparent 70%), radial-gradient(520px 260px at 95% 100%, rgba(47, 116, 181, .12), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.path-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.road { fill: none; stroke: #dfe5ee; stroke-width: 20; stroke-linecap: round; }
.road.edge { stroke: #c9d2df; stroke-width: 26; opacity: .5; }
.road.done { stroke: var(--dot); stroke-width: 20; transition: stroke-dasharray 1.4s ease-out; }
:root[data-theme=dark] .road { stroke: #2c3a4c; } :root[data-theme=dark] .road.edge { stroke: #1d2836; }
.stop { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; width: 118px; z-index: 2; }
.stop-ring { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--surface) 72%, transparent 74%), conic-gradient(var(--tone) calc(var(--pct) * 1%), #cfd7e3 0); box-shadow: 0 0 0 3px var(--surface), 0 6px 14px -6px rgba(22, 34, 46, .5); transition: transform .18s; }
.stop-ring b { font: 800 1.05rem var(--display); color: var(--tone); }
.stop-name { font: 600 .72rem/1.2 var(--body); color: var(--head); text-align: center; background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 2px 6px; border-radius: 6px; max-width: 118px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stop:hover .stop-ring { transform: scale(1.12); } .stop:active .stop-ring { transform: scale(.94); }
.stop[aria-pressed=true] .stop-ring { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--tone); }
.stop.full .stop-ring { background: var(--tone); } .stop.full .stop-ring b { color: #fff; }
.stop.soon .stop-ring { background: var(--surface); border: 2px dashed #b9c3d1; box-shadow: 0 0 0 3px var(--surface); } .stop.soon .stop-ring b { color: #9aa6b6; } .stop.soon .stop-name { color: var(--muted); font-weight: 500; }
.stop.here .stop-ring { animation: stop-here 1.8s ease-in-out infinite; }
@keyframes stop-here { 50% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 11px color-mix(in srgb, var(--tone) 28%, transparent); } }
.path-stage.kid .stop-ring { width: 60px; height: 60px; } .path-stage.kid .stop-ring b { font-size: 1.3rem; } .path-stage.kid .stop-name { font-size: .78rem; }
.path-walker { position: absolute; width: 46px; transform: translate(-50%, -112%); z-index: 3; pointer-events: none; filter: drop-shadow(0 8px 8px rgba(22, 34, 46, .28)); }
.path-stage.kid .path-walker { width: 58px; }
.path-bot { display: block; width: 100%; }
.bot-body { fill: var(--dot); } .bot-eye { fill: var(--ink); } .bot-smile { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; } .bot-line { stroke: var(--ink); stroke-width: 2.4; } .bot-tip { fill: var(--c); }
.path-walker.walking .path-bot { animation: bot-step .32s ease-in-out infinite; } .path-walker.arrived .path-bot { animation: bot-bob 2.2s ease-in-out infinite; }
@keyframes bot-step { 50% { transform: translateY(-5px) rotate(4deg); } } @keyframes bot-bob { 50% { transform: translateY(-4px); } }
.path-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); }
.path-legend span { display: inline-flex; align-items: center; gap: 7px; } .path-legend i { width: 11px; height: 11px; border-radius: 50%; background: var(--tone); }
.path-detail, .scope-detail { display: grid; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); animation: why-in .2s ease-out; }
.pd-head { display: flex; align-items: center; gap: 14px; }
.pd-n { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--tone); color: #fff; font: 800 1.3rem var(--display); }
.pd-head > div { flex: 1; min-width: 0; } .pd-head small { color: var(--tone); font-weight: 700; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; } .pd-head h3 { font: 700 1.25rem var(--display); color: var(--head); }
.pd-pct { font: 800 1.7rem var(--display); color: var(--head); }
.pd-parts { display: grid; gap: 8px; } .pd-parts > div { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 12px; font-size: .9rem; } .pd-parts small { color: var(--muted); } .pd-parts b { text-align: right; color: var(--head); }
.pd-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); } .pd-level em { font-style: normal; }
.level-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 99px; font: 700 .82rem var(--body); color: var(--head); background: color-mix(in srgb, var(--tone) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone) 55%, var(--line)); }
.pd-note { padding: 12px 14px; border-radius: var(--r-s); background: var(--paper); color: var(--head); line-height: 1.5; }
@media (max-width: 560px) { .pd-parts > div { grid-template-columns: 1fr 44px; } .pd-parts .meter { grid-column: 1 / -1; order: 3; } }
/* the plan as a table */
.scope-view { display: grid; gap: 16px; }
.scope { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; background: var(--surface); }
.scope th, .scope td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; vertical-align: top; }
.scope .strand { padding: 10px 12px; background: var(--tone); color: #fff; font: 700 .9rem var(--display); text-align: center; }
.scope .unit { padding: 7px 10px; font: 700 .76rem var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--head); background: color-mix(in srgb, var(--tone) 14%, var(--surface)); text-align: center; }
.scope .corner { padding: 10px 12px; background: var(--ink); color: #fff; font: 700 .85rem var(--display); }
.scope tbody th { padding: 10px 12px; text-align: left; background: var(--paper); min-width: 84px; } .scope tbody th b { display: block; font: 800 1.1rem var(--display); color: var(--head); } .scope tbody th small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.scope-cell { display: grid; gap: 7px; align-content: space-between; width: 100%; min-height: 62px; height: 100%; padding: 9px 10px; text-align: left; font: 500 .84rem/1.3 var(--body); color: var(--head); background: none; border: 0; border-top: 3px solid transparent; }
button.scope-cell { cursor: pointer; transition: background .15s; } button.scope-cell:hover { background: color-mix(in srgb, var(--tone) 8%, var(--surface)); }
button.scope-cell.open { border-top-color: var(--tone); } button.scope-cell[aria-pressed=true] { background: color-mix(in srgb, var(--tone) 14%, var(--surface)); box-shadow: inset 0 0 0 2px var(--tone); }
.cell-bar { position: relative; display: block; height: 16px; border-radius: 99px; background: var(--paper); overflow: hidden; }
.cell-bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--tone, var(--b)) 55%, var(--surface)); border-radius: 99px; } .cell-bar b { position: relative; display: block; font-size: .68rem; line-height: 16px; padding: 0 7px; color: var(--head); }
.cell-bar.big { height: 24px; --tone: var(--b); } .cell-bar.big b { line-height: 24px; font-size: .8rem; }
/* what is built for a unit: chips under its title, and a mark on the cell where a book landed */
.scope td.built-cell { background: color-mix(in srgb, var(--tone) 5%, var(--surface)); }
.scope td.has-book { box-shadow: inset 4px 0 0 var(--tone); }
.cell-built { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 9px; }
.built { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font: 700 .66rem/1.5 var(--body); letter-spacing: .02em; color: var(--head); background: color-mix(in srgb, var(--tone, var(--a)) 16%, var(--surface)); text-decoration: none; white-space: nowrap; }
.built.book { background: var(--tone, var(--a)); color: #fff; } a.built.book:hover { filter: brightness(1.12); }
.built.guide { background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
a.built.games:hover { background: color-mix(in srgb, var(--tone, var(--a)) 30%, var(--surface)); }
.built.sim { background: var(--ink); color: #fff; }
.scope-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; font-size: .82rem; color: var(--muted); } .scope-legend .built { --tone: var(--a); }
.scope-classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.scope-class { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); } .scope-class.off { opacity: .75; }
.scope-class h4 { display: flex; justify-content: space-between; align-items: baseline; font: 700 1.02rem var(--display); color: var(--head); } .scope-class h4 small { font: 500 .78rem var(--body); color: var(--muted); } .scope-class p { font-size: .88rem; }
.level-row { display: flex; flex-wrap: wrap; gap: 6px; }
.scope-admin { margin-bottom: 22px; } .panel-card { display: grid; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); max-width: 860px; } .panel-card h3 { font: 700 1.1rem var(--display); color: var(--head); } .panel-card small { color: var(--muted); }
.scope-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
@media (prefers-reduced-motion: reduce) { .stop.here .stop-ring, .path-walker .path-bot, .lib-tabs button.special::after { animation: none !important; } }

/* ---------- Library: the programmes, the questions and the classes stand on the same columns ---------- */
.lib-tabs { margin-bottom: -20px; }
.lib-tabs button { white-space: nowrap; }
#lib-books { display: grid; gap: 56px; min-width: 0; }
#lib-books .doors, #lib-books .q-grid, #lib-books .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
/* a question and a class are two programmes wide, so every edge meets one above it */
@media (min-width: 561px) { #lib-books .q-card, #lib-books .cards > .card, #lib-books .q-grid > .empty { grid-column: span 2; } }
#questions .section-head { align-items: center; }
/* the number of books sits on the same line in every card, however long the description */
.door { grid-template-rows: auto auto 1fr auto; }
.q-card { align-content: start; min-width: 0; }
.q-card .avatar { align-self: start; }
.q-card .q-top, .q-card p, .q-card .q-meta { min-width: 0; }
.q-card .q-top .chip { flex: none; white-space: nowrap; }
@media (max-width: 480px) { .lib-tabs { width: 100%; } .lib-tabs button { flex: 1 1 auto; justify-content: center; padding: 10px 12px; font-size: .9rem; } }

/* ---------- Dashboard: the bar of the site above the sections ---------- */
.adm-body { min-width: 0; display: flex; flex-direction: column; }
.adm-body > .main { flex: 1; }
.adm-body > .top .tabs { margin-left: 0; }
.main > header .guide-btn { margin-top: 12px; width: fit-content; justify-self: start; }
.upload .actions.with-guide, .prog-fields .actions.with-guide { grid-column: 1 / -1; }

/* ---------- "How to": the steps of making something, beside the button that makes it ---------- */
.guide-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 5px 14px 5px 6px; border-radius: 99px; border: 1.5px solid var(--dot); background: color-mix(in srgb, var(--dot) 14%, var(--surface)); color: var(--head); font: 700 .86rem var(--body); white-space: nowrap; cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s; }
.guide-btn i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #16222e; color: var(--dot); }
.guide-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guide-btn:hover, .guide-btn:focus-visible { background: color-mix(in srgb, var(--dot) 28%, var(--surface)); box-shadow: 0 10px 20px -12px rgba(22, 34, 46, .7); transform: translateY(-1px); }
.guide-btn.compact { padding: 2px; }
.guide-btn.compact i { width: 22px; height: 22px; } .guide-btn.compact svg { width: 14px; height: 14px; }
.fun-hero .guide-btn { position: relative; z-index: 1; margin-left: auto; background: rgba(255, 255, 255, .14); color: #fff; }
.fun-hero .guide-btn:hover { background: rgba(255, 255, 255, .26); }
.actions.with-guide { flex-wrap: wrap; }
.modal.guide .modal-body { display: grid; gap: 14px; }
.guide-lead { color: var(--muted); }
.guide-steps { list-style: none; counter-reset: guide; display: grid; gap: 8px; margin: 0; padding: 0; }
.guide-steps li { counter-increment: guide; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }
.guide-steps li::before { content: counter(guide); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #16222e; color: var(--dot); font: 800 .95rem var(--display); }
.guide-steps strong { align-self: center; font: 700 1rem var(--display); color: var(--head); }
.guide-steps p { grid-column: 2; font-size: .92rem; line-height: 1.5; }
.guide-note { padding: 12px 14px; border-radius: var(--r-s); border-left: 4px solid var(--dot); background: color-mix(in srgb, var(--dot) 13%, var(--surface)); font-size: .9rem; line-height: 1.5; }
@media (max-width: 600px) { .fun-hero { flex-wrap: wrap; } .fun-hero .guide-btn { margin-left: 0; } }

/* ---------- PYP: a garden in place of the ranking (a plant for each piece of work) ---------- */
.top5.garden { grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); align-items: start; padding-bottom: 18px; background: linear-gradient(180deg, #14323a, #1c4a45 70%, #2a6a4c); }
.top5.garden > header { padding-bottom: 0; gap: 8px; }
.top5.garden .meter { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; } .top5.garden .meter i { display: block; height: 100%; background: var(--dot); border-radius: 99px; }
.garden-key { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.garden-key li { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: var(--r-s); background: rgba(255, 255, 255, .08); font-size: .72rem; color: #cfe3da; }
.garden-key li b { font: 800 1.05rem var(--display); color: #fff; } .garden-key .plant { width: 26px; height: 31px; }
.garden-total { font-size: .86rem; color: #cfe3da; } .garden-total b { color: #fff; }
.garden-beds { display: grid; gap: 8px; align-content: start; max-height: 330px; overflow-y: auto; padding-right: 4px; }
.bed-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 10px; border-radius: var(--r-s); background: rgba(255, 255, 255, .07); }
.bed-row strong { font-size: .88rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bed { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.bed-plant { display: grid; justify-items: center; gap: 2px; width: 74px; } .bed-plant small { font-size: .68rem; line-height: 1.2; color: #cfe3da; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bed-row .bed-plant { width: 34px; } .bed-row .bed-plant small { display: none; } .bed-row .plant { width: 30px; height: 36px; }
.plant { width: 46px; height: 55px; } .plant .soil { fill: #5a3d22; } .plant .pip { fill: #c9a56a; } .plant .stem { stroke: #72dc5f; stroke-width: 3; stroke-linecap: round; fill: none; }
.plant .leaf { fill: #72dc5f; } .plant .budtip { fill: #f2a900; } .plant .petal { fill: #ff8fb1; } .plant .heart { fill: #ffd34d; }
.plant.sprout, .plant.bud, .plant.bloom { animation: plant-up .6s cubic-bezier(.2, .8, .2, 1) backwards; transform-origin: 50% 90%; }
@keyframes plant-up { from { transform: scaleY(.3); opacity: 0; } }
@media (max-width: 700px) { .top5.garden { grid-template-columns: 1fr; } .bed-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .plant { animation: none !important; } }

/* ---------- PYP in Entertainment: sticker album, class picture, class gallery, learner profile badges ---------- */
.fun-hero.album { --tone: #ffd34d; --bg: linear-gradient(120deg, #7a2a5c, #c2437a); }
.fun-hero.picture { --tone: #9ad7ff; --bg: linear-gradient(120deg, #16223c, #2a4a8a); }
.fun-hero.gallery { --tone: #ffc48a; --bg: linear-gradient(120deg, #5a2a12, #b8621f); }
.fun-hero.badges { --tone: #b8f0a8; --bg: linear-gradient(120deg, #123a3a, #1f7a5c); }
.buddy.ribbon { position: relative; }
.buddy.ribbon::after { content: '★'; position: absolute; right: -4px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #dc4f2a; color: #ffd34d; font-size: .8rem; box-shadow: 0 0 0 2px #fff, 0 6px 0 -2px #dc4f2a; }
.album-top { display: flex; align-items: center; gap: 22px; } .album-top > div:last-child { flex: 1; display: grid; gap: 8px; min-width: 0; }
.album-buddy { flex: none; width: 96px; }
.album-top .meter, .pic-side .meter { height: 10px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.album-top .meter i, .pic-side .meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f2a900, #ff8fb1); }
.album-page { display: grid; gap: 14px; }
.album-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; } .album-head .sub { flex-basis: 100%; color: var(--muted); }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.sticker { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: var(--r-m); border: 2px dashed var(--line); background: var(--paper); text-align: center; }
.sticker small { font-size: .74rem; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sticker-art { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; background: var(--surface); color: #b9c2cf; border: 2px solid var(--line); font-weight: 800; }
.sticker.got { border-style: solid; border-color: #f2a900; background: color-mix(in srgb, #f2a900 9%, var(--surface)); }
.sticker.got small { color: var(--head); font-weight: 600; }
.sticker.got .sticker-art { background: #fff; border-color: #f2a900; box-shadow: 0 5px 0 -1px #f2a90055; transform: rotate(-5deg); }
.sticker.got:nth-child(even) .sticker-art { transform: rotate(4deg); }
.sticker.gold .sticker-art { background: linear-gradient(135deg, #fff3bf, #ffd34d); border-color: #c98a00; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.lp-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 10px 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--paper); text-align: center; color: var(--text); font: inherit; }
.lp-card strong { font: 700 .95rem var(--display); color: var(--head); } .lp-card small { font-size: .74rem; line-height: 1.3; color: var(--muted); }
.lp-card.got { background: var(--surface); }
.lp-count { position: absolute; top: 8px; right: 10px; padding: 1px 7px; border-radius: 99px; background: var(--ink); color: #fff; font-size: .74rem; }
.lp-choose .lp-card { cursor: pointer; border-width: 2px; } .lp-choose .lp-card[aria-checked=true] { border-color: var(--head); box-shadow: 4px 4px 0 var(--dot); }
.lp-badge { width: 60px; height: 71px; }
.lp-badge .lp-ribbon { fill: color-mix(in srgb, var(--tone) 70%, #000); } .lp-badge .lp-body { fill: var(--tone); } .lp-badge .lp-ring { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.lp-badge .lp-sign path { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-badge.off { filter: grayscale(1); opacity: .32; }
.lp-give { display: grid; gap: 14px; }
.lp-rows { display: grid; gap: 6px; }
.lp-row { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }
.lp-mine { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .lp-mine span { display: inline-flex; align-items: center; gap: 2px; } .lp-mine .lp-badge { width: 30px; height: 36px; } .lp-mine b { font-size: .78rem; color: var(--muted); }
.lp-mine small { color: var(--muted); }
.pic-panel { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 22px; align-items: center; }
.pic-side { display: grid; gap: 10px; align-content: center; } .pic-count { font: 700 1.15rem var(--display); color: var(--head); }
.class-pic { width: 100%; border-radius: var(--r-m); border: 1px solid var(--line); display: block; background: #16223c; }
.pic-cover rect { fill: #24465a; stroke: #16222e; stroke-width: 2; } .pic-cover text { fill: #7fa2b8; font: 800 26px var(--display); }
.class-pic.done { box-shadow: 0 0 0 4px var(--dot), 0 20px 40px -20px rgba(22, 34, 46, .6); }
.pic-class { display: grid; gap: 14px; } .pic-form { display: grid; gap: 14px; }
.scene-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.scene-card { display: grid; gap: 6px; padding: 6px 6px 8px; border-radius: var(--r-m); border: 2px solid var(--line); background: var(--paper); font: 600 .86rem var(--body); color: var(--head); cursor: pointer; }
.scene-card svg { width: 100%; border-radius: 8px; display: block; } .scene-card[aria-checked=true] { border-color: var(--head); box-shadow: 4px 4px 0 var(--dot); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.work { display: grid; gap: 8px; align-content: start; padding: 10px 10px 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--paper); min-width: 0; }
.work.mine { border: 2px solid var(--dot); }
.work > strong { color: var(--head); } .work > small { color: var(--muted); font-size: .8rem; } .work > p { font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.work-pic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); display: block; }
.work-pic.none { display: grid; place-items: center; font: 800 2.4rem var(--display); color: #b9c2cf; }
.kind-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.kind-bar button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); font-size: 1.15rem; cursor: pointer; transition: transform .12s, border-color .12s; }
.kind-bar button:hover { transform: scale(1.12); } .kind-bar button[aria-pressed=true] { border-color: #f2a900; background: color-mix(in srgb, #f2a900 22%, var(--surface)); transform: scale(1.1); }
.kind-got { display: flex; gap: 6px 12px; flex-wrap: wrap; min-height: 24px; align-items: center; } .kind-got span { display: inline-flex; align-items: center; gap: 3px; } .kind-got b { font-size: .82rem; color: var(--head); } .kind-got small { color: var(--muted); font-size: .78rem; }
.gallery-project { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line); }
@media (max-width: 760px) { .pic-panel { grid-template-columns: 1fr; } .lp-row { grid-template-columns: 1fr; } .album-top { flex-direction: column; align-items: flex-start; } }

/* ---------- the rating of a book ----------
   Its own look, apart from the yellow stars of the site's monthly rating: the mark in a
   dark seal with a ring that fills, and five bookmarks in teal filled as far as the mark goes. */
.bk-mark { --bk: #12a594; --bk-deep: #0b6f66; display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.bk-seal { --p: 0; position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font: 800 1.02rem var(--display); letter-spacing: -.01em;
  background: radial-gradient(circle at 50% 50%, #16222e 0 62%, transparent 63%), conic-gradient(var(--bk, #12a594) calc(var(--p) * 1%), #d8dee9 0); box-shadow: 0 6px 14px -8px rgba(22, 34, 46, .7); }
.bk-seal::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 12px; transform: translateX(-50%); background: var(--bk, #12a594); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%); }
.bk-side { display: grid; gap: 3px; }
.bk-ribs { display: inline-flex; gap: 3px; }
.bk-rib { width: 12px; height: 17px; display: block; }
.bk-rib .bg { fill: #d8dee9; } .bk-rib .fg { fill: var(--bk); }
.bk-side small { font-size: .74rem; color: var(--muted); line-height: 1; }
.bk-mark.none .bk-seal { background: radial-gradient(circle at 50% 50%, var(--paper) 0 62%, transparent 63%), conic-gradient(#d8dee9 0 100%); color: var(--muted); box-shadow: none; }
.bk-mark.none .bk-seal::after { background: #d8dee9; }
.bk-mark.small .bk-seal { width: 36px; height: 36px; font-size: .84rem; } .bk-mark.small .bk-seal::after { width: 12px; height: 9px; bottom: -5px; }
.bk-mark.small .bk-rib { width: 9px; height: 13px; }
.bk-under { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px 10px 12px; border-radius: var(--r-s); background: color-mix(in srgb, #12a594 8%, var(--surface)); border: 1px solid color-mix(in srgb, #12a594 28%, var(--line)); }
.bk-mine { font-size: .76rem; font-weight: 700; color: #0b6f66; }
[data-theme=dark] .bk-rib .bg { fill: #3a4a5c; } [data-theme=dark] .bk-seal { background: radial-gradient(circle at 50% 50%, #0f1820 0 62%, transparent 63%), conic-gradient(var(--bk, #12a594) calc(var(--p) * 1%), #3a4a5c 0); }
[data-theme=dark] .bk-mine { color: #6fe0d2; }
/* the window at the last page */
.modal.bk-rate .modal-body { display: grid; gap: 16px; }
.bk-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); background: linear-gradient(120deg, #0f2b33, #0b6f66); color: #d7efeb; }
.bk-head img { width: 64px; aspect-ratio: 210 / 297; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .7); background: #e6eaf1; }
.bk-head h3 { color: #fff; font-size: 1.2rem; } .bk-head small { font: 800 .68rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: #7fe3d6; } .bk-head p { font-size: .88rem; margin-top: 2px; }
.bk-live { display: grid; justify-items: center; gap: 12px; min-width: 120px; text-align: center; } .bk-live small { font: 500 .74rem var(--body); letter-spacing: 0; text-transform: none; color: #d7efeb; max-width: 130px; }
.bk-seal.big { --bk: #5ef0dc; width: 72px; height: 72px; font-size: 1.6rem; background: radial-gradient(circle at 50% 50%, #0a1f24 0 66%, transparent 67%), conic-gradient(#5ef0dc calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0); }
.bk-seal.big::after { width: 22px; height: 16px; bottom: -10px; background: #5ef0dc; }
.bk-rows { display: grid; gap: 8px; }
.bk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 78px; gap: 10px 16px; align-items: center; padding: 11px 14px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--paper); border-left: 4px solid var(--tone, #12a594); }
.bk-row.c-content { --tone: #2f74b5; } .bk-row.c-clarity { --tone: #12a594; } .bk-row.c-ideas { --tone: #8a3fc9; } .bk-row.c-design { --tone: #e0558a; } .bk-row.c-practice { --tone: #e8762c; }
.bk-row > div:first-child { display: grid; gap: 1px; min-width: 0; } .bk-row strong { color: var(--head); font: 700 .98rem var(--display); } .bk-row > div:first-child span { font-size: .84rem; color: var(--muted); }
.bk-pick { display: inline-flex; gap: 5px; }
.bk-pick button { position: relative; width: 30px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .12s; }
.bk-pick button svg { width: 100%; height: 100%; display: block; fill: #d8dee9; transition: fill .12s; }
.bk-pick button i { position: absolute; left: 0; right: 0; top: 7px; text-align: center; font: 800 .82rem var(--display); font-style: normal; color: #5d6b85; }
.bk-pick button:hover { transform: translateY(-2px); } .bk-pick button:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; border-radius: 4px; }
.bk-pick button.on svg { fill: var(--tone, #12a594); } .bk-pick button.on i { color: #fff; }
.bk-word { font-weight: 700; color: var(--head); font-size: .84rem; text-align: right; }
.bk-why { padding: 12px 14px; border-radius: var(--r-s); background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-left: 4px solid var(--c); }
.bk-why > span { font-weight: 700; color: var(--head); }
.tool.rate-tool { border-color: #12a594; color: #7fe3d6; font-weight: 700; } .tool.rate-tool.done { border-color: rgba(255, 255, 255, .16); color: #dbe3f0; font-weight: 500; }
@media (max-width: 640px) { .bk-head { grid-template-columns: 48px minmax(0, 1fr); } .bk-head img { width: 48px; } .bk-live { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; }
  .bk-row { grid-template-columns: 1fr; } .bk-word { text-align: left; } .bk-pick button { width: 34px; height: 46px; } }
/* in the dashboard */
.bk-panel { gap: 10px; }
.bk-book { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }
.bk-book > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px 14px; cursor: pointer; list-style: none; } .bk-book > summary::-webkit-details-marker { display: none; }
.bk-book > summary .who { display: grid; min-width: 0; } .bk-book > summary small { color: var(--muted); font-size: .8rem; }
.bk-detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 4px 14px 12px; align-items: start; }
.bk-bars { display: grid; gap: 6px; } .bk-bar { display: grid; grid-template-columns: 190px minmax(60px, 1fr) 34px; gap: 10px; align-items: center; font-size: .86rem; }
.bk-bar .meter-bar { grid-column: auto; height: 8px; } .bk-bar .meter-bar i { background: #12a594; } .bk-bar .meter-bar i.low { background: var(--d); } .bk-bar b { text-align: right; color: var(--head); }
.bk-split { display: flex; gap: 10px; } .bk-split > div { display: grid; justify-items: center; gap: 1px; padding: 8px 14px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); min-width: 92px; }
.bk-split small { font: 800 .64rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .bk-split b { font: 800 1.3rem var(--display); color: var(--head); } .bk-split span { font-size: .74rem; color: var(--muted); }
.bk-said { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 6px; }
.bk-said li { display: grid; gap: 4px; padding: 9px 12px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #12a594; }
.bk-said li.low { border-left-color: var(--d); }
.bk-said li > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .bk-said small { color: var(--muted); font-size: .8rem; } .bk-num { margin-left: auto; font: 800 1.05rem var(--display); color: var(--head); }
.bk-each { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: .78rem; } .bk-each span { padding: 2px 8px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
.bk-each span.low { background: color-mix(in srgb, var(--d) 12%, var(--surface)); border-color: color-mix(in srgb, var(--d) 40%, var(--line)); color: var(--head); font-weight: 600; }
.bk-reason { font-size: .9rem; color: var(--text); } .bk-reason b { color: var(--head); }
@media (max-width: 760px) { .bk-detail { grid-template-columns: 1fr; } .bk-bar { grid-template-columns: 1fr 60px 30px; } }

/* ---------- one word, one meaning ----------
   A class that is a state or a kind of one thing must not be, on its own, the name of
   another thing. Where two met, the second meaning is taken off here.
   (The squares of the understanding map were "done top", and took the whole look of the
   bar at the top of the page, ".top": they are "done best" now.) */
.file-chip.code { letter-spacing: normal; }                           /* ".code" is the class code in big spaced letters */
.stage .door { animation: none; transition: none; will-change: auto; } /* ".door" is a programme's card in the library */
.person.locked { cursor: auto; }                                       /* ".locked" is a field that cannot be typed in */

/* ---------- one row for the bars of sections ----------
   From 1120 to 1600 wide the top bar of a teacher or a demo keeps to one row: the sections
   sit tighter, the bar has less room at its sides, the name gives way to the photo and
   "Sign out" to its sign. Under 1340 it tightens once more (smaller words, and the demo's
   button says "Demo" alone). The widths are measured, not guessed: the parts need about
   1275, and about 1095 when tightened. Narrower than 1120 the sections take a row of their
   own (the rule further up). Whatever the width, the sections can never lie over the
   buttons: if they still do not fit, their row slides. */
@media (min-width: 1120px) and (max-width: 1600px) {
  .top:has(.tabs a:nth-child(6)), .top:has(.who .btn.go) { flex-wrap: nowrap; gap: 10px; padding-left: 20px; padding-right: 20px; }
  .top:has(.tabs a:nth-child(6)) .tabs, .top:has(.who .btn.go) .tabs { order: 0; flex: 0 1 auto; margin-left: 6px; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .top:has(.tabs a:nth-child(6)) .tabs::-webkit-scrollbar { display: none; }
  .top:has(.tabs a:nth-child(6)) .tabs a { flex: none; padding: 8px 10px; font-size: .88rem; }
  .top:has(.tabs a:nth-child(6)) .who { gap: 8px; flex: none; }
  .top:has(.tabs a:nth-child(6)) .me strong { display: none; }
  .top:has(.tabs a:nth-child(6)) .out { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
  .top:has(.tabs a:nth-child(6)) .out span { display: none; }
  .top:has(.tabs a:nth-child(6)) .out svg { display: block; }
}
@media (min-width: 1120px) and (max-width: 1339px) {
  .top:has(.tabs a:nth-child(6)), .top:has(.who .btn.go) { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .top:has(.tabs a:nth-child(6)) .brand { font-size: 1.12rem; }
  .top:has(.tabs a:nth-child(6)) .tabs { margin-left: 2px; gap: 0; }
  .top:has(.tabs a:nth-child(6)) .tabs a { padding: 8px 7px; font-size: .83rem; }
  .top:has(.tabs a:nth-child(6)) .who { gap: 6px; }
  .top:has(.tabs a:nth-child(6)) .demo-menu > summary .demo-role { display: none; }
}
/* The pages of Entertainment and of Marks and Reports: with seven or more they sit tighter,
   and from 1160 wide they keep to one row. Narrower than that they wrap, as any row of pages. */
@media (min-width: 761px) {
  .fun-nav:has(a:nth-child(7)) { gap: 5px; }
  .fun-nav:has(a:nth-child(7)) a { white-space: nowrap; padding: 8px 11px; font-size: .84rem; }
  .fun-nav:has(a:nth-child(7)) .dash-link { padding-left: 10px; gap: 6px; }
  .fun-nav:has(a:nth-child(7)) .dash-link::before { display: none; }
}
@media (min-width: 1160px) {
  .fun-nav:has(a:nth-child(7)) { flex-wrap: nowrap; }
  .fun-nav:has(a:nth-child(7)) a { flex: none; }
}

/* ---------- PYP: a rubric row in the teacher's words, and the mark a rubric makes ---------- */
.crit-own { margin: -2px 0 8px 30px; padding: 8px 12px; border-left: 3px solid var(--line); display: grid; gap: 8px; }
.crit-own > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--a-dark); }
.crit-own[open] { border-left-color: var(--dot); background: var(--paper); border-radius: 0 var(--r-s) var(--r-s) 0; }
.crit-own textarea { min-height: 0; font-size: .86rem; }
.over-title { font: 800 .72rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--a-dark); }
.mark-pill { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 8px; border-radius: 99px; background: var(--soft, var(--paper)); border: 2px solid var(--tone, var(--line)); color: var(--head); font: 800 1rem var(--display); }
.rubric-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .84rem; color: var(--muted); }
.rubric-mark b { padding: 3px 10px; border-radius: 99px; background: var(--ink); color: #fff; font: 700 .86rem var(--display); }

/* ---------- PYP: a final project as its rubric (a row for each criterion, a column for each level) ---------- */
.rubric-card { display: grid; gap: 10px; }
.rubric-card + .rubric-card { margin-top: 12px; padding-top: 18px; border-top: 1px dashed var(--line); }
.rubric-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.rubric-top strong { font: 700 1.05rem var(--display); color: var(--head); } .rubric-top small { color: var(--muted); }
.rubric-grid { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.rubric-grid th, .rubric-grid td { padding: 9px 11px; border-radius: var(--r-s); font-size: .84rem; line-height: 1.4; text-align: left; vertical-align: top; }
.rubric-grid thead th { background: var(--paper); font: 700 .74rem var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--head); }
.rubric-grid thead th:first-child, .rubric-grid tbody th { width: 21%; }
.rubric-grid thead th.lv1 { box-shadow: inset 0 3px 0 var(--d); } .rubric-grid thead th.lv2 { box-shadow: inset 0 3px 0 var(--c); }
.rubric-grid thead th.lv3 { box-shadow: inset 0 3px 0 var(--a); } .rubric-grid thead th.lv4 { box-shadow: inset 0 3px 0 var(--b); }
.rubric-grid tbody th { font-weight: 700; color: var(--head); }
.rubric-grid td { border: 1px solid var(--line); color: var(--muted); }
.rubric-grid td.on { color: var(--head); font-weight: 600; border-width: 2px; }
.rubric-grid td.on.lv1 { border-color: var(--d); background: color-mix(in srgb, var(--d) 12%, var(--surface)); }
.rubric-grid td.on.lv2 { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.rubric-grid td.on.lv3 { border-color: var(--a); background: color-mix(in srgb, var(--a) 12%, var(--surface)); }
.rubric-grid td.on.lv4 { border-color: var(--b); background: color-mix(in srgb, var(--b) 13%, var(--surface)); }

/* ---------- tracing a capture (admin, Books) ---------- */
.trace { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--line, #dfe3f0); border-radius: 14px; background: var(--card, #fff); }
.trace h3 { margin: 0 0 6px; }
.trace p { margin: 0 0 12px; max-width: 78ch; color: var(--muted, #5b6182); }
.trace .actions { align-items: center; flex-wrap: wrap; gap: 14px; }
.trace-gain { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.trace-view { display: block; max-width: 100%; height: auto; margin-top: 14px; border: 1px solid var(--line, #dfe3f0); border-radius: 8px; }

/* ---------- the sections of the top bar: the gliding pill, and the words that open a menu of cards ---------- */
.tabs { position: relative; align-items: center; }
.tabs a, .tab-group { position: relative; z-index: 1; }
/* a soft pill that follows the pointer from section to section */
.tabs-ink { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--head) 9%, transparent); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.3, 1.35, .5, 1), width .3s cubic-bezier(.3, 1.35, .5, 1), opacity .18s; }
.tabs-ink.on { opacity: 1; }
.tab-group { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 14px; border: 0; border-radius: 99px; background: none; font: 600 .92rem var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.tab-group:hover, .tab-group[aria-expanded=true] { color: var(--head); }
.tab-group svg { transition: transform .22s; opacity: .8; }
.tab-group[aria-expanded=true] svg { transform: rotate(180deg); }
.tab-group[aria-current=page] { background: var(--head); color: var(--paper); }
/* the page that is open, named beside the word of its group, after the green dot */
.tab-group em { font-style: normal; font-weight: 500; opacity: .82; display: inline-flex; align-items: center; gap: 6px; }
.tab-group em::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.tab-pop { position: fixed; z-index: 60; width: min(340px, calc(100vw - 20px)); padding: 8px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(22, 34, 46, .2); transform-origin: var(--notch, 40px) top; animation: tab-pop .2s cubic-bezier(.2, 1.25, .4, 1); }
.tab-pop[hidden] { display: none; }
.tab-pop::before { content: ''; position: absolute; top: -7px; left: calc(var(--notch, 40px) - 6px); width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.tab-card { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 12px; text-decoration: none; color: inherit;
  animation: tab-card .28s cubic-bezier(.2, 1, .4, 1) both; animation-delay: calc(var(--n) * 45ms + 30ms); }
.tab-card > i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); color: var(--head); transition: background .18s, color .18s, transform .22s cubic-bezier(.3, 1.5, .5, 1); }
.tab-card strong { display: flex; align-items: center; gap: 7px; font: 650 .96rem var(--display); color: var(--head); }
.tab-card small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; }
.tab-card:hover, .tab-card:focus-visible { background: var(--paper); }
.tab-card:focus-visible { outline: 3px solid var(--c); outline-offset: -3px; }
.tab-card:hover > i, .tab-card:focus-visible > i, .tab-card[aria-current=page] > i { background: #16222e; color: var(--dot); }
.tab-card:hover > i, .tab-card:focus-visible > i { transform: rotate(-7deg) scale(1.06); }
.tab-card[aria-current=page] strong::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
@keyframes tab-pop { from { opacity: 0; transform: translateY(-8px) scale(.95); } }
@keyframes tab-card { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) { .tabs-ink, .tab-group svg, .tab-card > i { transition: none; } .tab-pop, .tab-card { animation: none; } }
/* a teacher's bar, with its sections grouped, is one row down to a small tablet */
@media (min-width: 761px) and (max-width: 1360px) {
  .top.grouped { flex-wrap: nowrap; gap: 10px; }
  .top.grouped .tabs { order: 0; flex: 0 1 auto; margin-left: 6px; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .top.grouped .who { gap: 8px; flex: none; }
  .top.grouped .me strong { display: none; }
  .top.grouped .out { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
  .top.grouped .out span { display: none; }
  .top.grouped .out svg { display: block; }
}
@media (max-width: 1120px) {
  .top.grouped .tab-group em { display: none; }
  .top.grouped .tabs a, .top.grouped .tab-group { padding: 8px 10px; font-size: .88rem; }
}
@media (max-width: 760px) { .top .tabs .tab-group { flex: 1; justify-content: center; } }

/* ---------- the MYP unit planner (the teacher's Unit Plan page, and its review in the dashboard) ---------- */
.up-wrap { max-width: 1320px; gap: 26px; }
.up-intro, .up-hint { color: var(--muted); max-width: 86ch; }
.up-intro { margin-top: 6px; }
.up-hint { font-size: .9rem; }
.up-hint code { font: 600 .85rem Consolas, monospace; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; color: var(--head); }
.up-list { display: grid; gap: 10px; }
.up-list h2 { font-size: 1.2rem; }
.up-back { font-size: .86rem; font-weight: 600; text-decoration: none; }
.up-back:hover { text-decoration: underline; }
.up-saved { font-size: .82rem; color: inherit; opacity: .75; min-width: 5.5em; text-align: right; }
.up-saved:empty { display: none; }
.up-state { padding: 12px 16px; border-radius: var(--r-s); border: 1px solid var(--line); border-left: 5px solid var(--muted); background: var(--surface); font-size: .93rem; }
.up-state.submitted { border-left-color: var(--a); }
.up-state.returned { border-left-color: var(--d); }
.up-state.approved { border-left-color: #23915f; }
.up-feedback { border-left: 5px solid var(--d); }
.up-tools { grid-template-columns: 1fr auto; align-items: center; }
.up-tools p { color: var(--muted); font-size: .92rem; max-width: 80ch; margin-top: 4px; }
.up-history { border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 14px; background: var(--surface); }
.up-history summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.up-history > div { margin-top: 10px; display: grid; gap: 4px; }
.up-history small { color: var(--muted); }

/* the planner itself: the school's form, with its grey label cells */
.up-form { display: grid; gap: 10px; min-width: 0; overflow-x: auto; }
.up-form h3 { font: 700 1.02rem var(--display); margin: 10px 0 0 4px; }
.up-table { width: 100%; min-width: 880px; table-layout: fixed; border-collapse: collapse; background: var(--surface); font-size: .86rem; }
.up-table th, .up-table td { border: 1px solid #8a94a3; padding: 6px 8px; vertical-align: top; text-align: left; white-space: normal; }
.up-table th { background: #d9d9d9; color: #16222e; font: 700 .86rem/1.35 var(--body); }
:root[data-theme=dark] .up-table th { background: #2c3c4b; color: #eef3f8; }
:root[data-theme=dark] .up-table th, :root[data-theme=dark] .up-table td { border-color: #4a5c6e; }
.up-text { display: grid; gap: 6px; line-height: 1.4; overflow-wrap: anywhere; }
.up-text.bold { font-weight: 700; }
.up-text ul { margin: 0; padding-left: 26px; display: grid; gap: 5px; }
.up-sub { font-weight: 700; margin-bottom: 4px; }
.up-lead { color: var(--muted); font-size: .84rem; margin-bottom: 4px; }
.up-edit { position: relative; }
.up-edit + .up-edit, .up-edit + .up-dates, .up-pick.wide + .up-edit { margin-top: 6px; }
.up-edit textarea { font: 400 .86rem/1.4 var(--body); padding: 6px 34px 6px 8px; border-width: 1px; border-radius: 6px; resize: none; overflow: hidden; min-height: 32px; display: block; }
.up-edit textarea.bold { font-weight: 700; }
.up-edit.plain textarea { padding-right: 8px; }
.up-head td:last-child { padding: 6px 3px; }
.up-head td:last-child textarea { padding: 6px 2px; text-align: center; }
.up-ai { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 6px; padding: 3px 6px; font: 800 .68rem var(--display); letter-spacing: .04em; cursor: pointer; background: linear-gradient(135deg, #8a3fc9, #2f74b5); color: #fff; opacity: .78; }
.up-ai:hover, .up-ai:focus-visible { opacity: 1; }
.up-dates { display: flex; flex-wrap: wrap; gap: 6px; }
/* a cell that must be filled before the plan is sent, while it is still empty */
/* (!important: the themes give every field their own background, and this mark must show in each of them) */
.up-need textarea, .up-need select { background: color-mix(in srgb, var(--c) 24%, var(--surface)) !important; border: 2px solid var(--c) !important; }
.up-pick.up-need > span { color: var(--head); }
.up-todo { padding: 10px 16px; border-radius: var(--r-s); border: 1px solid var(--c); border-left: 5px solid var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--head); font-size: .93rem; font-weight: 600; }
/* the PYP monthly plan: the unit's title between the tables, the objectives beside the unit's dates, a session's date under its name */
.up-title { margin: 10px 0; text-align: center; }
.up-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); gap: 12px; }
.up-session th select { display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 400; }
@media (max-width: 700px) { .up-split { grid-template-columns: minmax(0, 1fr); } }
.up-pick { display: grid; gap: 2px; font-size: .74rem; color: var(--muted); font-weight: 600; }
.up-pick select, .up-lesson-head select, .up-lesson-head input { padding: 5px 6px; font-size: .82rem; border-width: 1px; border-radius: 6px; width: auto; }
.up-pick.wide select { width: 100%; }
.up-lessons { display: grid; gap: 8px; margin-top: 8px; }
.up-lesson { display: grid; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }
.up-lesson-head { display: flex; gap: 6px; align-items: center; }
.up-lesson-head input { flex: 1; min-width: 80px; font-weight: 700; }
.up-x { border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.up-x:hover { color: var(--d); background: var(--paper); }

/* the AI window of a cell, and the review window of the dashboard */
dialog.modal.up-ai-window { width: min(680px, calc(100vw - 32px)); }
.up-quick { cursor: pointer; border: 1px solid var(--line); background: var(--paper); color: var(--head); padding: 7px 10px; }
.up-quick:hover { border-color: var(--a); }
.up-answer { border: 1px solid var(--line); border-left: 4px solid #8a3fc9; border-radius: var(--r-s); padding: 12px 14px; display: grid; gap: 8px; max-height: 40dvh; overflow: auto; font-size: .92rem; }
.up-left { color: var(--muted); margin-right: auto; }
dialog.modal.up-review-window { width: min(1240px, calc(100vw - 24px)); }
.up-review { display: grid; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.adm-panel .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.adm-panel h3 { font-size: .98rem; margin-top: 6px; }
.up-own { display: flex; gap: 6px; align-items: center; }
.up-own input { width: 68px; padding: 6px 8px; font-size: .86rem; }
.adm-panel input[type=month] { width: 100%; font: 400 .95rem var(--body); color: var(--head); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
@media (max-width: 720px) { .up-tools { grid-template-columns: 1fr; } }

/* ---------- a programme's zone, a unit's colour (tasks, marks, games) ----------
   Each programme stands apart: a band in its colour with its logo, a frame tinted with it, and its own work
   inside. Each unit inside has a colour of its own: on the edge of its lane, on its number, on its tag. */
.prog-zones { display: grid; gap: 34px; }
.prog-zone { --tone: #16222e; --on: #fff; display: grid; gap: 18px; padding-bottom: 20px; border-radius: var(--r-l); border: 1.5px solid color-mix(in srgb, var(--tone) 38%, var(--line));
  background: color-mix(in srgb, var(--tone) 5%, var(--paper)); overflow: hidden; }
.prog-zone[hidden] { display: none; }
.prog-zone[data-prog=myp] { --tone: #e1251b; } .prog-zone[data-prog=pyp] { --tone: #f5a800; --on: #16222e; }
.prog-zone[data-prog=vex-iq] { --tone: #0077c8; } .prog-zone[data-prog=vex-v5] { --tone: #d22630; }
.prog-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px clamp(14px, 3vw, 24px); background: var(--tone); color: var(--on); }
.prog-band .logo { height: 34px; width: auto; background: #fff; border-radius: 9px; padding: 5px 9px; flex: none; }
.prog-band small { display: block; font: 800 .62rem var(--display); letter-spacing: .2em; text-transform: uppercase; opacity: .82; }
.prog-band h2 { color: var(--on); font-size: 1.22rem; }
.prog-band .count { margin-left: auto; padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--on) 16%, transparent); font: 600 .82rem var(--body); white-space: nowrap; }
.prog-zone > :not(.prog-band) { margin-inline: clamp(10px, 2vw, 18px); }
.prog-zone .unit-lane + .unit-lane { margin-top: 0; }
.prog-zone .marks-board { margin-top: 0; }
.prog-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.prog-pick button { --tone: var(--ink); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--head); font: 600 .88rem var(--body); cursor: pointer; }
.prog-pick button[data-prog=myp] { --tone: #e1251b; } .prog-pick button[data-prog=pyp] { --tone: #f5a800; } .prog-pick button[data-prog=vex-iq] { --tone: #0077c8; } .prog-pick button[data-prog=vex-v5] { --tone: #d22630; }
.prog-pick button i { width: 10px; height: 10px; border-radius: 50%; background: var(--tone); }
.prog-pick button.on { border-color: var(--tone); box-shadow: inset 0 0 0 1.5px var(--tone); }
/* the teacher's list of tasks: the programmes, and beside them the list of the classes of the one chosen */
.list-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.class-pick { display: inline-flex; align-items: center; gap: 8px; font: 600 .88rem var(--body); color: var(--muted); }
.class-pick select { padding: 8px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--head); font: 600 .88rem var(--body); cursor: pointer; }
.unit-lane[style*='--unit'] { border-left: 7px solid var(--unit); }
.unit-lane[style*='--unit'] > header .unit-tile { background: var(--unit); box-shadow: 4px 4px 0 color-mix(in srgb, var(--unit) 30%, var(--surface)); }
.unit-lane[style*='--unit'] > header .unit-tile small { color: #fff; opacity: .85; }
.unit-lane[style*='--unit'] .task-tile { border-top-color: var(--unit); } .unit-lane[style*='--unit'] .task-tile.practice { border-top-color: var(--practice); }
.unit-shelf[style*='--unit'] { border-top: 0; border-left: 6px solid var(--unit); padding: 4px 0 4px 16px; margin-top: 16px; }
.unit-shelf[style*='--unit'] .unit-tag { background: var(--unit); color: #fff; }
.unit-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-dots i { font: 700 .72rem var(--body); font-style: normal; padding: 2px 9px; border-radius: 99px; color: #fff; background: var(--unit); }
[data-theme=dark] .prog-zone { background: color-mix(in srgb, var(--tone) 9%, var(--paper)); }

/* ---------- "About this report": what a report tells you ---------- */
.help-btn { border-color: var(--a); background: color-mix(in srgb, var(--a) 10%, var(--surface)); color: var(--head); font: 600 .84rem var(--body); cursor: pointer; }
.help-btn i { background: var(--a); color: #fff; }
.help-btn:hover, .help-btn:focus-visible { background: color-mix(in srgb, var(--a) 20%, var(--surface)); }
.help-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.help-head { font-size: 1rem; margin-top: 4px; }
.help-rows { display: grid; gap: 10px; margin: 0; }
.help-rows dt { font: 700 .95rem var(--display); color: var(--head); padding-left: 12px; border-left: 4px solid var(--a); }
.help-rows dd { margin: 2px 0 0 16px; color: var(--text); font-size: .92rem; }
h2 > .help-btn.compact { vertical-align: middle; }
#lu .row .help-btn { border: 1.5px solid var(--a); border-radius: 99px; min-height: 0; padding: 4px 12px 4px 5px; background: color-mix(in srgb, var(--a) 10%, var(--surface)); }
#lu .row .help-btn i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--a); color: #fff; }
#lu .row .help-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* a book waiting to join a class (the administrator's class card) */
.adm-asked { margin: 8px 0; padding: 10px 12px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: .88rem; }
.adm-asked-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 6px; }
/* the books of a class, under their programmes (the teacher's Classes page) */
.book-group { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 12px 12px; margin: 10px 0; }
.book-group legend label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.book-group .checks { margin-top: 6px; padding-left: 26px; }
/* the books of a subject on its card: a plain list, as tall as it needs */
.adm-subject-books { min-height: 0; }
.adm-subject-books li > span { display: grid; min-width: 0; }
.adm-linked { margin: 0; padding: 7px 10px; border-radius: var(--r-s); background: color-mix(in srgb, var(--a) 9%, var(--surface)); font-size: .84rem; color: var(--text); }
.manage-add input[type=text] { flex: 1; min-width: 0; }
/* the administrator's notes, in English or Arabic */
.adm-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.adm-note { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); display: grid; gap: 8px; }
.adm-note h2 { font-size: 1.1rem; }
.adm-note h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }
.adm-note ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; font-size: .92rem; line-height: 1.55; }
.adm-note ul.mind li::marker { color: var(--c); }
.adm-notes[dir=rtl] { font-family: 'Segoe UI', Tahoma, var(--body); }
.adm-notes[dir=rtl] h3 { letter-spacing: 0; }
/* a teacher in the subject form: the name, then the branch, programmes and classes on a line of their own */
.adm-teacher { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; min-width: 0; }
.adm-teacher small:last-child { grid-column: 1 / -1; }
.adm-pick label { align-items: flex-start; }
.adm-pick label > input { margin-top: 3px; }
.adm-subject-facts b { font-size: 1rem; }

/* ---------- the Excel games (sheet.html) ---------- */
.xl-title { color: var(--head); }
.sheet-holder { padding: clamp(8px, 1.6vw, 16px); border-radius: var(--r-l); background: #0f1820; background-image: radial-gradient(circle at 20% 0, rgba(35, 145, 95, .16), transparent 55%); overflow: auto; }
.xl { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font: 400 .86rem/1.3 var(--body); background: #fff; color: #16222e; border-radius: 8px; overflow: hidden; }
.xl th, .xl td { border-right: 1px solid #d5dbe4; border-bottom: 1px solid #d5dbe4; padding: 5px 9px; text-align: left; white-space: nowrap; min-width: 58px; height: 30px; }
.xl th { background: #eef1f6; color: #4a5568; font: 700 .72rem var(--display); text-align: center; letter-spacing: .04em; }
.xl th.corner { min-width: 34px; }
.xl th.is-target { background: rgba(35, 145, 95, .18); color: #1b6b47; }
.xl tbody th { min-width: 34px; }
.xl td.head { font-weight: 700; background: #f7f9fc; }
.xl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.xl td.bool { text-align: center; font: 600 .78rem var(--display); color: #3b4c66; letter-spacing: .04em; }
.xl td.err { color: #c2371a; font-weight: 700; }
.xl td.cell { cursor: cell; }
.xl td.cell:hover { outline: 1.5px solid var(--a); outline-offset: -1.5px; }
.xl td.target { background: rgba(114, 220, 95, .13); box-shadow: inset 0 0 0 1px rgba(35, 145, 95, .35); }
.xl td.at { box-shadow: inset 0 0 0 2.5px var(--b); background: rgba(114, 220, 95, .2); }
.xl tr.lit td.cell { background: #fff2b3; }
.xl tr.lit td.cell.target { background: #ffe680; }
.xl td.rejected { background: #ffd9d2; color: #a32d13; box-shadow: inset 0 0 0 1.5px #dc4f2a; }
.xl td.rejected::after { content: ' ✕'; font-size: .7rem; }
.xl td.wrong { animation: cellWrong 1.5s ease-out; }
@keyframes cellWrong { 0%, 60% { background: #ffb3a3; box-shadow: inset 0 0 0 2.5px var(--d); } 100% { background: inherit; } }
.sheet-coder { position: sticky; top: 76px; }
.sheet-coder > header .py-name span { display: block; font-size: .74rem; color: #93a3bf; margin-top: 2px; }
.fx-bar { display: flex; align-items: center; gap: 0; margin: 0 14px; border-radius: var(--r-s); overflow: hidden; border: 1.5px solid rgba(255, 255, 255, .18); background: #0a1118; }
.fx-bar:focus-within { border-color: var(--dot); box-shadow: 0 0 0 3px rgba(114, 220, 95, .2); }
.fx-name { flex: none; min-width: 52px; padding: 10px 10px; text-align: center; font: 800 .8rem var(--display); color: #0f2a0a; background: var(--dot); }
.fx-label { flex: none; padding: 0 10px; font: italic 700 .9rem 'Georgia', serif; color: #93a3bf; }
.fx-input { flex: 1; min-width: 0; border: 0; background: transparent; color: #e6edf5; font: 400 15px/1.5 'JetBrains Mono', Consolas, monospace; font-variant-ligatures: none; padding: 10px 10px 10px 0; outline: none; }
.fx-input::placeholder { color: #4f6177; }
.fx-out { margin: 10px 14px 4px; min-height: 22px; font-size: .86rem; color: #dbe3f0; }
.fx-out code { font: 600 .86rem 'JetBrains Mono', Consolas, monospace; color: var(--dot); }
.fx-out .bad { color: #ff9d85; }
.fx-out .muted { color: #93a3bf; }
.mission .task-cell { font-size: .92rem; color: var(--head); padding: 8px 12px; border-radius: var(--r-s); background: rgba(35, 145, 95, .1); border-left: 4px solid var(--b); }
@media (max-width: 900px) { .sheet-coder { position: static; } }
.sheet-coder .cmd, .fx-out code { font-variant-ligatures: none; }

/* ---------- the phases of a level: practice, scored attempt, after ---------- */
.phase { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-radius: var(--r-s); font-size: .9rem; color: var(--text); border: 1.5px solid var(--line); background: var(--paper); }
.phase b { color: var(--head); }
.phase.practice { border-color: var(--a); background: rgba(47, 116, 181, .09); }
.phase.scored { border-color: var(--c); background: rgba(242, 194, 48, .16); }
.phase.after { border-color: var(--b); background: rgba(35, 145, 95, .1); }
.phase .btn { margin-left: auto; }
.phase-count { color: var(--muted); }
#phase:empty { display: none; }

/* ---------- the data-analysis tasks: heading menus, pivots, charts, fixes, questions ---------- */
.sheet-holder { max-height: min(62vh, 560px); }
.xl td.lit-cell { background: #fff2b3; }
.xl td.changed { box-shadow: inset 0 0 0 2px var(--d); font-weight: 700; }
.xl tbody th.filtered { color: #1d5fb8; font-weight: 700; }
.xl-menus td.head { position: relative; padding-right: 26px; }
.hd-arrow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 1px solid #c6cfdb; border-radius: 3px; background: #fff; color: #4a5568; font-size: .7rem; line-height: 1; cursor: pointer; padding: 0; }
.hd-arrow.on { background: var(--a); border-color: var(--a); color: #fff; }
.xl-menu { position: absolute; left: 0; top: 100%; z-index: 20; min-width: 220px; max-height: 300px; overflow: auto; padding: 8px; border-radius: 8px; background: #fff; color: #16222e; border: 1px solid #c6cfdb; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); text-align: left; font-weight: 400; white-space: normal; }
.xl-menu .menu-head { font: 700 .74rem var(--display); color: #4a5568; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px 8px; }
.xl-menu .menu-item { display: block; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; color: #16222e; font: 500 .86rem var(--body); cursor: pointer; }
.xl-menu .menu-item:hover { background: #eef3fa; }
.xl-menu .menu-item.go { margin-top: 6px; background: var(--b); color: #fff; text-align: center; font-weight: 700; }
.xl-menu .menu-item.quiet { color: #5d6b85; }
.xl-menu .menu-check { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: .86rem; cursor: pointer; }
.xl-menu .menu-check.all { border-bottom: 1px solid #e3e8ef; margin-bottom: 4px; font-weight: 600; }
.xl-menu .menu-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: .84rem; }
.xl-menu .menu-row select, .xl-menu .menu-num { padding: 4px 6px; border: 1px solid #c6cfdb; border-radius: 4px; font: inherit; }
.xl-menu .menu-num { width: 80px; }
.xl-menu .menu-close { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border: 0; background: transparent; color: #5d6b85; font-size: 1rem; cursor: pointer; }
.extra-holder:empty { display: none; }
.extra-holder { padding: 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); overflow: auto; }
.extra-holder .chart { width: 100%; height: auto; max-height: 340px; }
.pivot-empty { display: grid; gap: 6px; padding: 24px; border: 1.5px dashed var(--line); border-radius: var(--r-s); color: var(--muted); font-weight: 600; text-align: center; }
.pivot-empty small { font-weight: 400; }
.pivot { border-collapse: collapse; font: 400 .86rem var(--body); color: #16222e; background: #fff; min-width: 320px; }
.pivot th, .pivot td { border: 1px solid #d5dbe4; padding: 5px 10px; white-space: nowrap; }
.pivot thead th { background: #dde9f7; text-align: left; font-weight: 700; }
.pivot tbody th { background: #f3f6fa; text-align: left; font-weight: 600; }
.pivot .num { text-align: right; font-variant-numeric: tabular-nums; }
.pivot tr.grand th, .pivot tr.grand td { font-weight: 700; background: #dde9f7; border-top: 2px solid #9fb6d1; }
.stale-note { margin: 8px 0 0; font-size: .82rem; color: var(--d); font-weight: 600; }
.cfg { display: grid; gap: 10px; padding: 12px 14px; color: #dbe3f0; font-size: .88rem; }
.cfg p { margin: 0; }
.cfg .sub { color: #93a3bf; font-size: .8rem; }
.cfg-state { color: #fff; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-f { padding: 3px 10px; border-radius: 99px; background: rgba(114, 220, 95, .2); color: var(--dot); font-size: .8rem; font-weight: 600; }
.cfg-field { display: grid; gap: 3px; }
.cfg-field span { font-size: .74rem; color: #93a3bf; letter-spacing: .04em; text-transform: uppercase; }
.cfg-input { width: 100%; padding: 8px 10px; border-radius: var(--r-s); border: 1.5px solid rgba(255, 255, 255, .18); background: #0a1118; color: #e6edf5; font: 400 .95rem var(--body); }
.cfg-input.rng { font-family: 'JetBrains Mono', Consolas, monospace; font-variant-ligatures: none; }
.cfg-input:focus-visible { outline: none; border-color: var(--dot); box-shadow: 0 0 0 3px rgba(114, 220, 95, .2); }
.cfg-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cfg-row .cfg-field.small { flex: 1; min-width: 120px; }
.cfg-check { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; cursor: pointer; }
.cfg-row.checks { gap: 16px; }
.chart-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.ct-type { display: grid; gap: 2px; padding: 8px 6px; border-radius: var(--r-s); border: 1.5px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #dbe3f0; cursor: pointer; text-align: center; }
.ct-type b { font: 700 .86rem var(--display); }
.ct-type small { font-size: .66rem; color: #93a3bf; }
.ct-type.on { border-color: var(--dot); background: rgba(114, 220, 95, .14); color: #fff; }
.pv-pane { display: grid; gap: 10px; padding: 12px 14px; color: #dbe3f0; font-size: .86rem; }
.pv-pane > strong { color: #fff; }
.pv-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pv-fields li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.pv-btns { display: inline-flex; gap: 4px; }
.pv-btns button { padding: 3px 7px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; background: transparent; color: #dbe3f0; font: 600 .7rem var(--body); cursor: pointer; }
.pv-btns button:hover { border-color: var(--dot); color: var(--dot); }
.pv-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-area { display: grid; gap: 4px; }
.pv-area small { font-size: .7rem; color: #93a3bf; letter-spacing: .05em; text-transform: uppercase; }
.pv-drop { min-height: 40px; padding: 6px; border: 1.5px dashed rgba(255, 255, 255, .2); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pv-drop em { font-size: .74rem; color: #6f8197; }
.pv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 9px; border-radius: 99px; background: var(--a); color: #fff; font-size: .78rem; font-weight: 600; }
.pv-chip button { border: 0; background: transparent; color: #fff; font-size: .9rem; cursor: pointer; padding: 0 2px; }
.pv-chip select { border: 0; border-radius: 4px; padding: 1px 4px; font: 600 .74rem var(--body); background: rgba(255, 255, 255, .2); color: #fff; }
.fix-list, .pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fix-list .cfg-check { width: 100%; padding: 7px 10px; border-radius: var(--r-s); background: rgba(255, 255, 255, .05); }
.pick-opt { display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 10px; padding: 9px 12px; border-radius: var(--r-s); border: 1.5px solid rgba(255, 255, 255, .14); cursor: pointer; font-size: .9rem; }
.pick-opt.on { border-color: var(--dot); background: rgba(114, 220, 95, .12); }
.pick-opt b { font: 800 .9rem var(--display); color: var(--dot); }
.chart text { font-family: var(--body); fill: #24324d; }
.chart .ct-title { font: 700 14px var(--display); fill: #16222e; }
.chart .ct-tick { font-size: 11px; fill: #5d6b85; }
.chart .ct-label { font-size: 11px; font-weight: 600; }
.chart .ct-units { font-size: 11px; fill: #5d6b85; }
.chart .ct-warn { font-size: 10px; fill: #dc4f2a; font-weight: 700; }
.chart .ct-axis { stroke: #8f9bb0; stroke-width: 1.2; }
.chart .ct-grid { stroke: #e3e8ef; stroke-width: 1; }
.chart .ct-trend { stroke: #dc4f2a; stroke-width: 2; stroke-dasharray: 6 4; }
[data-theme=dark] .extra-holder { background: #fff; }
.pv-chip { white-space: nowrap; }
.play-world.chart-first .extra-holder { order: -1; }
.sheet-holder[hidden] { display: none; }
@media (max-width: 900px) { .pv-areas { grid-template-columns: 1fr; } }

/* ---------- sign-in art: one button stops the lap and the ring ---------- */
.art-pause { position: absolute; right: 18px; top: 16px; z-index: 5; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(22, 34, 46, .6); color: #dbe5ee; font: 500 .78rem var(--body); cursor: pointer; }
.art-pause:hover, .art-pause[aria-pressed=true] { color: #fff; border-color: #fff; }
@media (max-width: 900px) { .art-pause { display: none; } }

/* ---------- files that come with a book (reader) ---------- */
.files-panel .qa-body { gap: 12px; }
.files-panel .btn.quiet { color: #fff; border-color: rgba(255, 255, 255, .3); justify-self: start; }
.files-panel .btn.quiet:hover { border-color: #fff; }
.file-card { background: #1a2733; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-s); padding: 10px 12px; display: grid; gap: 8px; color: #dbe3f0; }
.file-card.held { border-color: rgba(242, 194, 48, .45); }
.file-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.file-text strong { color: #fff; overflow-wrap: anywhere; font-size: .9rem; }
.file-text small { color: #93a3bf; font-size: .78rem; }
.file-badge { flex: none; display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 5px; border-radius: 6px; background: #2f74b5; color: #fff; font: 700 .68rem var(--body); letter-spacing: .03em; }
.file-badge.csv { background: #23915f; }
.file-badge.xlsx, .file-badge.xls { background: #1d6f42; }
.file-badge.pdf { background: #dc4f2a; }
.file-badge.ipynb, .file-badge.py { background: #8a6d00; }
.file-badge.zip { background: #5d6b85; }
.file-go { justify-self: start; color: #9fc8f0; font-size: .8rem; }
.file-lock { display: grid; gap: 6px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; }
.file-lock small { color: #f2c230; }
.file-lock .toggle { color: #dbe3f0; }
.files-sub { color: #fff; font-size: .9rem; margin-top: 4px; }
.page-files { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 120px); pointer-events: none; }
.file-chip-page { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 99px; background: rgba(18, 28, 38, .92); color: #fff; text-decoration: none; font: 600 .82rem var(--body); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); border: 1px solid rgba(114, 220, 95, .55); }
.file-chip-page:hover { border-color: var(--dot); }
.file-chip-page .file-badge { height: 22px; min-width: 30px; font-size: .62rem; }
.file-chip-page b { color: var(--dot); }
@media (prefers-reduced-motion: no-preference) {
  .file-chip-page { animation: chipIn .35s ease-out both; }
  @keyframes chipIn { from { opacity: 0; transform: translateY(-6px); } }
}
/* the administrator's file list for a book */
.bf-list { display: grid; gap: 8px; }
.bf-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1.4fr) 110px auto auto auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.bf-row input[type=text] { padding: 6px 8px; font-size: .86rem; }
.bf-name { display: grid; min-width: 0; } .bf-name strong { overflow-wrap: anywhere; font-size: .9rem; } .bf-name small { color: var(--muted); }
dialog.modal.bf-dialog { width: min(980px, 96vw); max-width: 96vw; }
.bf-add { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 150px; gap: 10px 12px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.bf-add .toggle { grid-column: 1 / 3; } .bf-add > .btn { justify-self: end; }
.bf-add input[type=file] { width: 100%; min-width: 0; }
@media (max-width: 760px) { .bf-row, .bf-add { grid-template-columns: 1fr; } }

/* ---------- reader: the Excel sheet beside a Grade 6 or 7 Excel book (js/sheet-pad.js) ---------- */
.xl-panel { flex: none; width: min(620px, 50vw); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper); border-left: 1px solid rgba(255, 255, 255, .08); }
.xl-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #121c26; }
.xl-panel > header h2 { margin: 0; font-size: 1rem; color: #fff; }
/* the full spreadsheet (Univer, public/js/sheet-pad.js): its toolbar, the sheet, the charts under it; Wide spreads it over the book */
.xl-panel.xu-wide { width: min(1400px, calc(100vw - 60px)); }
.xl-panel .xp-host { display: flex; flex-direction: column; overflow: hidden; }
.xu-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: #121c26; border-top: 1px solid rgba(255, 255, 255, .06); }
.xu-bar .tool[aria-pressed="true"] { background: var(--a); color: #fff; }
.xu-note { color: #9fb0c3; font-size: .8rem; }
.xu-box { flex: 1; min-height: 360px; padding: 0; position: relative; background: #fff; color: #16222e; }
/* only the sheet itself fills the box: Univer's other layers (its popups and floating panels) keep their own size */
.xu-box > div:first-child { position: absolute; inset: 0; }
.xu-charts { flex: none; max-height: 42%; overflow: auto; display: grid; gap: 10px; padding: 10px; background: var(--paper); }
.xu-charts:empty { display: none; }
.xu-chart { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: #16222e; }
.xu-chart figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 .85rem var(--body); margin-bottom: 6px; }
.xu-chart figcaption .tool { color: #16222e; border-color: var(--line); background: var(--surface); }
.xu-canvas { position: relative; height: 240px; }
/* the PowerPoint simulator (public/js/slides-pad.js): its bars, the slides on the side, the slide, its notes; and the show */
.sp-panel { width: min(760px, 56vw); }
.sp-pad { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #eef1f5; color: #16222e; outline: none; }
.sp-bar, .sp-format { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 10px; }
.sp-bar { background: #121c26; border-top: 1px solid rgba(255, 255, 255, .06); }
.sp-format { background: #fff; border-bottom: 1px solid var(--line); min-height: 46px; }
.sp-format .tool, .sp-slide-tools .tool { color: #16222e; background: #fff; border-color: #c9d2dd; }
.sp-format .tool.on, .sp-bar .tool[aria-pressed="true"] { background: var(--a); color: #fff; border-color: var(--a); }
.sp-b { font-weight: 800; } .sp-i { font-style: italic; font-family: Georgia, serif; } .sp-u { text-decoration: underline; }
.sp-select { font: inherit; font-size: .85rem; padding: 5px 8px; border-radius: 8px; border: 1px solid #c9d2dd; background: #fff; color: #16222e; max-width: 170px; }
.sp-bar .sp-select { background: #1d2a37; color: #fff; border-color: rgba(255, 255, 255, .15); }
.sp-size { width: 4.2em; font: inherit; font-size: .85rem; padding: 5px 6px; border-radius: 8px; border: 1px solid #c9d2dd; }
.sp-colour { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: #4b5a6b; }
.sp-colour input[type=color] { width: 30px; height: 28px; padding: 0; border: 1px solid #c9d2dd; border-radius: 6px; background: #fff; cursor: pointer; }
.sp-colour input[type=range] { width: 80px; }
.sp-hint { color: #5d6b85; font-size: .85rem; }
.sp-note { color: #9fb0c3; font-size: .8rem; }
.sp-menu { position: relative; }
.sp-menu summary { list-style: none; cursor: pointer; }
.sp-menu summary::-webkit-details-marker { display: none; }
.sp-menu-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 210px; max-height: 340px; overflow: auto; display: grid; background: #fff; border: 1px solid #c9d2dd; border-radius: 10px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); padding: 4px; }
.sp-menu-list button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px; font: inherit; font-size: .88rem; color: #16222e; cursor: pointer; }
.sp-menu-list button:hover, .sp-menu-list button:focus-visible { background: #eef4fb; }
.sp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(118px, 150px) minmax(0, 1fr); }
.sp-side { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #e6eaf0; }
.sp-slide-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.sp-slide-tools .tool { padding: 4px 7px; font-size: .78rem; }
.sp-slide-tools .sp-select { max-width: 100%; width: 100%; font-size: .78rem; }
.sp-thumbs { flex: 1; overflow: auto; display: grid; align-content: start; gap: 8px; padding: 6px 8px 12px; }
.sp-thumb { position: relative; display: grid; gap: 2px; padding: 4px; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; text-align: left; }
.sp-thumb img { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); background: #fff; }
.sp-thumb b { position: absolute; left: -2px; top: 2px; font-size: .7rem; color: #5d6b85; }
.sp-thumb small { font-size: .7rem; color: #5d6b85; }
.sp-thumb.on { border-color: var(--a); background: #fff; }
.sp-main { min-width: 0; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 12px; }
.sp-stage { width: 100%; display: flex; justify-content: center; }
.sp-stage .canvas-container { box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .45); }
.sp-notes { width: 100%; min-height: 70px; resize: vertical; border: 1px solid #c9d2dd; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .9rem; background: #fff; color: #16222e; }
.sp-table-edit { display: grid; gap: 4px; margin: 8px 0; }
.sp-table-edit input { min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .85rem; }
.sp-chart-data { width: 100%; font: 500 .88rem 'JetBrains Mono', Consolas, monospace; }
.sp-show { position: fixed; inset: 0; z-index: 2147483000; background: #000; display: grid; place-items: center; outline: none; cursor: pointer; }
.sp-show-frame { line-height: 0; }
.sp-show-frame.in-fade { animation: sp-fade .6s ease both; }
.sp-show-frame.in-push { animation: sp-push .6s ease both; }
.sp-show-frame.in-zoom { animation: sp-zoom .6s ease both; }
@keyframes sp-fade { from { opacity: 0; } }
@keyframes sp-push { from { transform: translateX(100%); } }
@keyframes sp-zoom { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sp-show-frame { animation: none !important; } }
.sp-show-count { position: fixed; right: 18px; bottom: 14px; color: rgba(255, 255, 255, .55); font: 600 .85rem var(--body); }
.sp-show-x { position: fixed; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.4rem; cursor: pointer; }
.xp-host { flex: 1; min-height: 0; overflow: auto; }
.xl-pad { display: grid; gap: 10px; padding: 12px; color: var(--text); }
.xp-bar { display: flex; align-items: center; gap: 8px; }
.xp-name { flex: none; min-width: 64px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font: 600 .82rem 'JetBrains Mono', Consolas, monospace; color: var(--head); text-align: center; }
.xp-fxlabel { flex: none; font: italic 700 .9rem var(--body); color: #1d6f42; }
.xp-fx { flex: 1; min-width: 0; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--head); font: 500 .9rem 'JetBrains Mono', Consolas, monospace; }
.xp-fx:focus { outline: 2px solid #1d6f42; outline-offset: 1px; border-color: #1d6f42; }
.xp-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.xl-pad .xp-btn { background: var(--surface); border: 1px solid var(--line); color: var(--head); font-size: .8rem; padding: 7px 11px; }
.xl-pad .xp-btn:hover { border-color: #1d6f42; color: #1d6f42; }
[data-theme=dark] .xl-pad .xp-btn:hover { border-color: #3fb980; color: #3fb980; }
.xl-pad .xp-btn:focus-visible { outline: 2px solid #1d6f42; outline-offset: 2px; }
.xp-note { min-height: 1.2em; font-size: .82rem; color: #a23412; }
[data-theme=dark] .xp-note { color: #ffb39e; }
.xp-scroll { overflow: auto; max-height: 52vh; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.xp-grid { display: grid; grid-template-columns: 36px repeat(10, minmax(72px, 1fr)); font-size: .82rem; min-width: 760px; }
.xp-grid > div { padding: 5px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 28px; }
.xp-head, .xp-corner { position: sticky; top: 0; z-index: 1; background: var(--paper); color: var(--muted); font-weight: 700; text-align: center; }
.xp-head.xp-row { position: sticky; left: 0; top: auto; }
.xp-cell { cursor: cell; color: var(--head); background: var(--surface); font-variant-numeric: tabular-nums; }
.xp-cell.num { text-align: right; }
.xp-cell.on { background: rgba(29, 111, 66, .12); }
.xp-cell.at { box-shadow: inset 0 0 0 2px #1d6f42; }
.xp-cell.err { color: #a23412; }
[data-theme=dark] .xp-cell.on { background: rgba(63, 185, 128, .18); }
[data-theme=dark] .xp-cell.at { box-shadow: inset 0 0 0 2px #3fb980; }
[data-theme=dark] .xp-cell.err { color: #ffb39e; }
.xp-chart:empty { display: none; }
.xp-chart { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.xp-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--head); }
.xp-chart svg { width: 100%; height: auto; }
.xp-help { font-size: .78rem; color: var(--muted); }
@media (max-width: 760px) { .xl-panel { width: 100%; height: 60%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); } .xp-scroll { max-height: none; } }

/* ---------- dashboard → People: locked accounts, teachers, then students by class; a person opens in a window ---------- */
.pp-page { display: grid; gap: 40px; margin: 24px 0 40px; }
/* Classes: students with two accounts */
.dup-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 18px; padding: 14px 18px; border: 1px solid #e2b93b; border-radius: 14px; background: #fff8e1; }
.dup-panel strong { color: #7a5a00; font: 700 1rem var(--display); }
.dup-panel p { color: #6b5a2a; font-size: .9rem; max-width: 70ch; }
[data-theme=dark] .dup-panel { background: rgba(242, 194, 48, .12); border-color: rgba(242, 194, 48, .45); }
[data-theme=dark] .dup-panel strong { color: #f2d27a; } [data-theme=dark] .dup-panel p { color: #e6d6a8; }
dialog.modal.dup-dialog { width: min(860px, calc(100vw - 32px)); }
.dup-list { display: grid; gap: 18px; }
.dup-group { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.dup-card { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.dup-card:has(input:checked) { border-color: var(--b); box-shadow: 0 0 0 2px rgba(35, 145, 95, .25); }
.dup-card strong { color: var(--head); } .dup-card small { color: var(--muted); font-size: .8rem; }
.dup-card ul { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 2px; font-size: .86rem; color: var(--text); }
.dup-pick { display: flex; align-items: center; gap: 8px; font: 700 .8rem var(--body); color: var(--head); }
.dup-work { font-variant-numeric: tabular-nums; }
.pp-branches { flex-wrap: wrap; margin: 4px 0 12px; border-radius: 18px; }
.pp-section > header { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.pp-section h2 { font: 700 1.35rem/1.2 var(--display); color: var(--head); letter-spacing: -0.01em; }
.pp-section > .sub { margin: -6px 0 14px; }
.pp-locked > header { border-bottom-color: rgba(220, 79, 42, .45); }
.pp-locked h2 { color: #b23a17; }
[data-theme=dark] .pp-locked h2 { color: #ff9b7d; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pp-person { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 10px 34px 10px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1); }
.pp-person:hover { border-color: var(--head); transform: translateY(-1px); box-shadow: 0 10px 20px -16px rgba(22, 34, 46, .5); }
.pp-person:focus-visible { outline: 3px solid var(--a); outline-offset: 2px; }
.pp-person.locked { border-color: rgba(220, 79, 42, .5); background: #fdf1ec; }
[data-theme=dark] .pp-person.locked { background: rgba(220, 79, 42, .14); }
.pp-who { display: grid; min-width: 0; }
.pp-who strong { color: var(--head); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-who small { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-note { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 99px; font: 700 .7rem var(--body); background: #fdf1c7; color: #7a5a00; }
.pp-note.locked, .pp-note.suspended { background: #fbe2da; color: #a23412; }
[data-theme=dark] .pp-note { background: rgba(242, 194, 48, .2); color: #f2d27a; }
[data-theme=dark] .pp-note.locked, [data-theme=dark] .pp-note.suspended { background: rgba(220, 79, 42, .22); color: #ffb39e; }
.pp-dot { position: absolute; right: 13px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #c3ccd8; }
.pp-person.on .pp-dot { background: #23915f; box-shadow: 0 0 0 3px rgba(35, 145, 95, .18); }
[data-theme=dark] .pp-dot { background: #4a5b6c; }
[data-theme=dark] .pp-person.on .pp-dot { background: #3fb980; }
/* students: a card a class */
.pp-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
/* min-width 0 and a minmax(0) column: a long class name is cut by its ellipsis instead of widening the card past the page */
.pp-class { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.pp-class > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px; }
.pp-class h3 { font: 700 1.02rem var(--display); color: var(--head); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-live { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-live i { width: 8px; height: 8px; border-radius: 50%; background: #c3ccd8; }
.pp-live.on { color: #156241; }
.pp-live.on i { background: #23915f; }
.pp-live small { font-weight: 500; color: var(--muted); }
[data-theme=dark] .pp-live.on { color: #8fe3b9; }
.pp-class ul { list-style: none; display: grid; gap: 4px; max-height: 340px; overflow: auto; }
.pp-class .pp-person { border-color: transparent; padding: 7px 32px 7px 6px; border-radius: 10px; }
.pp-class .pp-person:hover { border-color: var(--line); box-shadow: none; transform: none; background: var(--paper); }
dialog.modal.person-dialog { width: min(620px, calc(100vw - 32px)); }
.pp-books { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.pp-books h3 { font: 700 1rem var(--display); color: var(--head); }
.pp-books ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pp-books li { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: center; }
.pp-book { display: grid; min-width: 0; }
.pp-book strong { color: var(--head); font-size: .92rem; }
.pp-book small, .pp-reach small { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.pp-reach { display: grid; gap: 4px; }
@media (max-width: 520px) { .pp-books li { grid-template-columns: 1fr; } }
/* in the window the row becomes a sheet: who, then each part on a line of its own, the buttons last */
dialog.modal.person-dialog .person { grid-template-columns: 44px minmax(0, 1fr); gap: 16px 14px; padding: 0; border: 0; background: none; align-items: start; }
dialog.modal.person-dialog .person.locked { border-left: 0; }
dialog.modal.person-dialog .person > :not(.person-avatar):not(.person-who) { grid-column: 1 / -1; }
dialog.modal.person-dialog .person strong, dialog.modal.person-dialog .person small, dialog.modal.person-dialog .person-access > span { white-space: normal; overflow: visible; }
dialog.modal.person-dialog .person-who strong { font-size: 1.05rem; }
dialog.modal.person-dialog .person-access, dialog.modal.person-dialog .person-seen { gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
dialog.modal.person-dialog .person .actions { justify-content: flex-start; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .pp-grid, .pp-classes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pp-person { transition: none; } .pp-person:hover { transform: none; } }

/* ---------- dashboard → Classes: a small card a class; it opens the whole class in a window ---------- */
.adm-classes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* the classes under the branch switch: the same spacing as the page, so each programme line clears its cards */
.cls-shelves { display: grid; gap: 24px; }
/* a long status ("Waiting for approval") drops under the name instead of cutting the teacher's name */
.adm-class.compact > header { flex-wrap: wrap; }
.adm-class.compact > header > div { flex: 1 1 170px; }
.adm-class.compact > header > div small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-class.compact { cursor: pointer; gap: 10px; transition: border-color .2s, box-shadow .25s cubic-bezier(.2, .8, .2, 1), transform .25s cubic-bezier(.2, .8, .2, 1); }
.adm-class.compact:hover { border-color: var(--head); transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(22, 34, 46, .5); }
.adm-class.compact:focus-visible { outline: 3px solid var(--a); outline-offset: 3px; }
.adm-class.compact.wants { border-color: #e2b93b; }
.adm-class.compact .klass-books { min-height: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.klass-flag { justify-self: start; align-self: start; padding: 3px 10px; border-radius: 99px; background: #fdf1c7; color: #7a5a00; font: 700 .76rem var(--body); }
[data-theme=dark] .klass-flag { background: rgba(242, 194, 48, .2); color: #f2d27a; }
dialog.modal.klass-dialog { width: min(760px, calc(100vw - 32px)); }
.klass-dialog .modal-body { display: flex; flex-direction: column; gap: 14px; }
/* (the body scrolls: its parts keep their height, else Firefox squeezes the student list under the switches) */
.klass-dialog .modal-body > * { flex-shrink: 0; }
.klass-dialog .modal-body > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.klass-dialog .modal-body > header h3 { display: none; }
.klass-dialog .klass-people .extra { display: flex; }
.klass-sub { font: 700 1rem var(--display); color: var(--head); margin-top: 6px; }
/* Edit class (the class window): its rows wrap on a phone instead of pushing the window wider */
.klass-edit { display: grid; gap: 8px; }
.klass-edit .manage-row { flex-wrap: wrap; gap: 8px 12px; }
.klass-edit .manage-add select, .klass-edit .manage-add input[type=text] { min-width: 180px; }
@media (prefers-reduced-motion: reduce) { .adm-class.compact { transition: none; } .adm-class.compact:hover { transform: none; } }

/* ---------- dashboard → Books: covers by programme and grade; a cover opens the book's panel ---------- */
.bk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 8px; }
.bk-tools input { flex: 1 1 240px; max-width: 360px; }
.bk-tools .btn { margin-left: auto; }
.bk-shelves { display: grid; gap: 44px; margin: 24px 0 40px; }
.bk-prog > header { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bk-prog h2 { font: 700 1.35rem/1.2 var(--display); color: var(--head); letter-spacing: -0.01em; }
.bk-count { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.bk-grade { margin-top: 22px; }
.bk-grade h3 { font: 650 .95rem var(--display); color: var(--muted); margin-bottom: 14px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 26px 22px; }
.bk-card { --tone: var(--b); display: grid; gap: 7px; align-content: start; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; border-radius: var(--r-s); }
.bk-card.teacher { --tone: var(--a); }
.bk-cover { position: relative; display: block; aspect-ratio: 210 / 297; border-radius: 3px 7px 7px 3px; overflow: hidden; background: var(--paper);
  box-shadow: inset 4px 0 0 rgba(0, 0, 0, .14), 0 10px 22px -12px rgba(22, 34, 46, .55); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); }
.bk-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-card:hover .bk-cover, .bk-card:focus-visible .bk-cover { transform: translateY(-5px); box-shadow: inset 4px 0 0 rgba(0, 0, 0, .14), 0 18px 30px -14px rgba(22, 34, 46, .6); }
.bk-card:focus-visible { outline: 3px solid var(--tone); outline-offset: 4px; }
.bk-card.off .bk-cover img { filter: grayscale(1); opacity: .55; }
.bk-flag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 99px; background: rgba(22, 34, 46, .82); color: #fff; font: 700 .7rem var(--body); }
.bk-own { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #16222e; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); }
.bk-own svg { width: 15px; height: 15px; }
.bk-title { font: 650 .9rem/1.3 var(--display); color: var(--head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-meta { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.bk-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
/* the panel of one book */
dialog.modal.bk-dialog { width: min(820px, calc(100vw - 32px)); }
.bk-detail { --tone: var(--b); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: start; }
.bk-detail.teacher { --tone: var(--a); }
.bk-big img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; border-radius: 4px 9px 9px 4px; background: var(--paper); box-shadow: inset 5px 0 0 rgba(0, 0, 0, .14), 0 18px 34px -16px rgba(22, 34, 46, .6); }
.bk-info { display: grid; gap: 16px; justify-items: start; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chips .bk-kind { color: var(--tone); }
.bk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 22px; width: 100%; }
.bk-facts dt { font-size: .76rem; color: var(--muted); }
.bk-facts dd { font: 650 .95rem var(--display); color: var(--head); font-variant-numeric: tabular-nums; }
.bk-part { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; justify-items: start; }
.bk-part h3 { font: 700 1rem var(--display); color: var(--head); }
.bk-part .switch { width: 100%; }
.bk-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.bk-unit { display: grid; gap: 6px; font-size: .86rem; color: var(--muted); }
.bk-row input { width: 120px; }
.bk-note { margin-top: 22px; }
.bk-upload { display: grid; gap: 14px; }
@media (max-width: 640px) {
  .bk-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 16px; }
  .bk-detail { grid-template-columns: 1fr; }
  .bk-big { max-width: 170px; }
  .bk-tools .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .bk-cover { transition: none; } }

/* ---------- dark mode: colours that had no dark version (found by a contrast sweep, 2026-10-15) ---------- */
/* links and every "a-dark" text: a light blue on the dark background */
:root[data-theme=dark] { --a-dark: #8cc0f2; }
/* a count on yellow is read in dark ink, in both themes (the menu of the dashboard, the tool badges) */
.side nav b, .tool b { color: #16222e; }
/* yellow marks in the class report: dark ink on the yellow, in both themes */
i.tone-c, .sort-col.tone-c > header b { color: #16222e; }
/* greens meant for a light page */
[data-theme=dark] .presence.on, [data-theme=dark] .delta.up, [data-theme=dark] .answer-card > strong { color: #8fe3b9 !important; }
[data-theme=dark] .person-avatar { color: #8fe3b9; }
[data-theme=dark] .person-avatar.teacher { color: #a9d0f5; }
/* the empty stars of a rating */
[data-theme=dark] .five i { color: #6b8196; }
/* the "Trace a capture" box read an undefined colour and stayed white */
.trace { background: var(--surface); }
/* the demo account's warning facts */
[data-theme=dark] .demo-facts .warn { background: rgba(220, 79, 42, .22); }
[data-theme=dark] .demo-facts .warn b { color: #ffb39e; }
[data-theme=dark] .demo-facts .warn small { color: #f3c2b4; }
/* a unit tile in its unit's colour keeps white figures (the dark rule above paints tiles light) */
[data-theme=dark] .unit-lane[style*='--unit'] > header .unit-tile { color: #fff; }
[data-theme=dark] .unit-lane[style*='--unit'] > header .unit-tile small { color: rgba(255, 255, 255, .85); }
/* the dashboard's settings in groups (Simulators, The site) */
.adm-sub { font-size: 1.05rem; margin: 18px 0 2px; color: var(--head); }

/* invitations by link (SaaS phase 2): the form, the link shown once, and the open links */
.invite-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.invite-panel .perm-list { margin-top: 10px; }
.invite-result { display: grid; gap: 8px; margin-top: 12px; }
.invite-result input { width: 100%; font-family: "JetBrains Mono", monospace; font-size: .82rem; }
.invite-list { display: grid; gap: 6px; }
.invite-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.invite-row small { color: var(--muted); }
.invite-panel h4 { margin: 16px 0 4px; }

/* subscriptions (SaaS phase 3): the meters of what a school uses, and where it stands */
.sub-meter { display: grid; gap: 6px; margin: 10px 0; }
.sub-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.sub-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green, #23915f); }
.sub-state.grace { border-left: 4px solid #f2c230; }
.sub-state.readonly, .sub-state.suspended { border-left: 4px solid #dc4f2a; }
.sub-dialog .invite-form { margin: 8px 0; }
.sub-progs { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sub-danger { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }

/* the owner viewing a school as its director (SaaS phase 4): said at the top of every dashboard page */
.view-as-bar { position: sticky; top: 0; z-index: 1000; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; padding: 8px 16px; background: #f2c230; color: #16222e; font-weight: 600; font-size: .9rem; }

/* a school's own sign-in page (SaaS phase 5): its logo and its colour */
.school-logo { max-height: 56px; max-width: 180px; object-fit: contain; }
#main[style*="--school-accent"] .btn.wide { background: var(--school-accent); border-color: var(--school-accent); }
#main[style*="--school-accent"] .dot::after { color: var(--school-accent); }
#main[style*="--school-accent"] .pick { border-left-color: var(--school-accent); }
.identity-preview { display: flex; align-items: center; min-height: 64px; margin: 8px 0; }
.announce-wait { padding: 10px 0; border-top: 1px solid var(--line); }
.announce-window section + section { margin-top: 16px; }

/* the first school moved to its own address (SaaS phase 5): the bar on every page and the card */
.moved-bar { position: sticky; top: 0; z-index: 999; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; justify-content: center; padding: 9px 16px; background: var(--b); color: #fff; font-weight: 600; font-size: .92rem; text-align: center; }
.moved-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.moved-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; margin-bottom: 18px; border-radius: var(--r-m, 14px); border: 2px solid var(--b); background: #eef8f2; color: var(--ink); }
.moved-card > strong { font-size: 1.1rem; }
.moved-card p { margin: 0; }
.moved-card .moved-link { display: block; padding: 14px 16px; border-radius: var(--r-s, 10px); background: #fff; border: 1.5px dashed var(--b); color: var(--b); font-weight: 700; font-size: 1.25rem; text-align: center; word-break: break-all; text-decoration: none; }
.moved-card .moved-link:hover, .moved-card .moved-link:focus-visible { background: var(--b); color: #fff; }
.moved-card .btn { align-self: flex-start; }
:root[data-theme="dark"] .moved-card { background: #12261c; color: #e8f2ec; }
:root[data-theme="dark"] .moved-card .moved-link { background: #0d1a14; }

/* a school's logo beside dev.'s (SaaS phase 5) */
/* in a top bar dev.'s logo and the school's stay on one line; only the narrow side menu puts the school's under */
.brand:has(.brand-school) { flex-wrap: nowrap; align-items: center; }
.side .brand:has(.brand-school) { flex-wrap: wrap; row-gap: 4px; }
/* a logo: beside dev.'s, after a thin line */
.brand .brand-school.logo { display: inline-flex; align-items: center; margin-left: 4px; padding-left: 10px; border-left: 1.5px solid currentColor; align-self: stretch; }
.brand .brand-school img { height: 44px; width: auto; max-width: 160px; object-fit: contain; display: block; }
.brand .brand-school img.on-dark { display: none; }
/* dark places: the side menu always, the top bar in the dark theme */
.side .brand .brand-school img.on-light, :root[data-theme=dark] .top .brand .brand-school img.on-light { display: none; }
.side .brand .brand-school img.on-dark, :root[data-theme=dark] .top .brand .brand-school img.on-dark { display: block; }
/* only a name: a small line of its own under dev.'s, cut with an ellipsis when long */
.brand .brand-school.name { margin-left: 4px; padding-left: 10px; border-left: 1.5px solid currentColor; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .78rem var(--body, inherit); letter-spacing: .01em; opacity: .85; }
/* in the dashboard's narrow side menu the school's logo stands under dev.'s, on its own line */
.side .brand .brand-school.logo { flex-basis: 100%; justify-content: center; margin: 10px 0 0; padding: 0; border-left: 0; }
.side .brand .brand-school img { height: 72px; max-width: 190px; }
/* with the school's logo under it, dev.'s logo in the side menu is centred too */
.side .brand:has(.brand-school) { display: flex; justify-content: center; }
.side .brand .brand-school.name { flex-basis: 100%; max-width: 100%; margin: 4px 0 0; padding: 0; border-left: 0; text-align: center; }
/* a simulator's work saved in My files: its name in the simulator's header, its card in My files */
.work-name { flex: 1; min-width: 0; color: #9fb0c3; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 10px; }
.xl-panel > header .tool + .tool, .pylab-panel > header .tool + .tool { margin-left: 6px; }
.work-view { color: var(--muted); font-size: .9rem; margin: 6px 0 10px; }
.file-chip.work b { background: color-mix(in srgb, var(--b) 18%, var(--surface)); }
.cal-past td { opacity: .55; }
/* a programme's books, a grade at a time: the grade's chip and colour above its shelf */
.grade-shelves { display: grid; gap: 34px; }
.grade-shelf { border-top: 3px solid var(--grade); padding-top: 14px; }
.grade-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.grade-chip { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: var(--grade); color: #fff; font: 700 .95rem var(--display); letter-spacing: .01em; }
.grade-count { color: var(--muted); font-size: .85rem; }
.kind .grade-shelves { padding: 22px clamp(16px, 3vw, 28px) 30px; }
.kind .grade-shelves .shelf { padding: 0; }
/* a grade's card: its student books, then its teacher guides, each a row of its own */
.grade-shelf { border: 1px solid var(--line); border-top: 4px solid var(--grade); border-radius: var(--r-l, 18px); padding: 18px clamp(14px, 2.5vw, 26px) 26px; background: var(--surface); }
.grade-row + .grade-row { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line); }
.grade-kind { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font: 700 1rem var(--display); color: var(--head); }
.grade-kind span { font: 600 .78rem var(--body); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.bk-kind { margin: 10px 0 8px; font: 700 .85rem var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* the Active Board (public/js/board.js): a bar across the bottom of any page while a teacher's board is live for this student */
.board-call { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 16px; border-radius: 99px; background: var(--ink); color: #fff; text-decoration: none; box-shadow: 0 18px 40px -16px rgba(22, 34, 46, .6); max-width: calc(100vw - 32px); }
.board-call b { background: var(--c); color: var(--ink); padding: 6px 12px; border-radius: 99px; font-size: .85rem; white-space: nowrap; }
/* the Active Board beside a book (reader.js setupBoard; its own styles come with /css/board.css) */
.xl-panel.bd-side { width: 50vw; }
.bd-side > header .actions { display: flex; gap: 6px; }
.bd-host { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.bd-host .bd-view { height: 100%; min-height: 380px; }
.bd-host .bd-card, .bd-host .bd-head { margin-bottom: 12px; }
/* the Active Board starting: the student is told in the middle of the screen (core.js followBoards) */
dialog.board-live { max-width: 440px; text-align: center; }
dialog.board-live .modal-body { display: grid; gap: 12px; justify-items: center; padding: 28px 26px 24px; }
dialog.board-live h2 { font-size: 1.5rem; }
dialog.board-live p { margin: 0; color: var(--text); }
dialog.board-live .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.board-live-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--d); box-shadow: 0 0 0 0 rgba(220, 79, 42, .5); animation: boardLive 1.6s ease-out infinite; }
@keyframes boardLive { to { box-shadow: 0 0 0 16px rgba(220, 79, 42, 0); } }
@media (prefers-reduced-motion: reduce) { .board-live-dot { animation: none; } }

/* Dax (public/js/dax.js): the day's questions left, at the foot of the Library page */
.dax-left { margin: 28px auto 0; width: fit-content; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font: 600 .85rem var(--body); }
.dax-chip { border: 1px solid var(--line); background: none; color: inherit; font: inherit; padding: 5px 12px; border-radius: 99px; cursor: pointer; }
.dax-chip:hover { color: var(--ink); border-color: var(--muted); }
.dax-chip[aria-pressed="true"] { color: #050607; background: #73dc5e; border-color: #73dc5e; }
.dax-chip[hidden], .dax-note:empty { display: none; }
.dax-note { font-weight: 500; }
.dax-left[hidden] { display: none; }
/* Dax's look (public/js/dax-avatar.js): centre screen over the dimmed page while awake; asleep, at most a breathing dot */
.dax-stage { position: fixed; inset: 0; z-index: 900; opacity: 0; transition: opacity .6s ease; background: #050607; }
.dax-stage.on { opacity: .96; }
.dax-stage[hidden] { display: none; }
.dax-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dax-dot { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 890; width: 8px; height: 8px; border-radius: 50%; background: #73dc5e; box-shadow: 0 0 10px #73dc5e; opacity: 0; pointer-events: none; }
.dax-dot.on { animation: dax-breathe 3.2s ease-in-out infinite; }
.dax-dot[hidden] { display: none; }
@keyframes dax-breathe { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dax-stage { transition: none; } .dax-dot.on { animation: none; opacity: .7; } }
/* Dax open (public/js/dax.js): over its stage, a name and two buttons on top; at the foot what is said (seen only with the
   sound off; screen readers always hear it) and, when typing, the question box */
.dax-hud { position: fixed; inset: 0; z-index: 901; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); font-family: var(--body); }
.dax-hud[hidden] { display: none; }
.dax-top { display: flex; align-items: center; gap: 10px; width: min(1200px, 100%); margin: 0 auto; }
.dax-name { margin-right: auto; font: 400 11px ui-monospace, Menlo, monospace; letter-spacing: .32em; color: rgba(255, 255, 255, .5); }
.dax-name::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: #73dc5e; vertical-align: middle; }
.dax-btn { pointer-events: auto; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(216, 222, 232, .16); border-radius: 99px; background: rgba(5, 6, 7, .6); color: #d8dee8; font: 400 11px ui-monospace, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.dax-btn:hover { border-color: rgba(216, 222, 232, .4); color: #fff; }
.dax-btn:focus-visible, .dax-q:focus-visible, .dax-send:focus-visible { outline: 1px solid #73dc5e; outline-offset: 3px; }
.dax-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(760px, 100%); margin: 0 auto; }
.dax-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.dax-hud.muted .dax-cap { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; min-height: 2.8em; text-align: center; font-weight: 300; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.4; text-wrap: balance; }
.dax-form { display: none; pointer-events: auto; align-items: center; gap: 6px; width: min(560px, 100%); padding: 6px; border: 1px solid rgba(216, 222, 232, .16); border-radius: 99px; background: rgba(5, 6, 7, .6); }
.dax-hud.typing .dax-form { display: flex; }
.dax-q { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 300 16px var(--body); padding: 10px 12px; }
.dax-q::placeholder { color: rgba(255, 255, 255, .45); }
.dax-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #73dc5e; color: #050607; font-size: 18px; cursor: pointer; }
.dax-send:hover { background: #8be678; }
.dax-consent { max-width: 440px; border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--surface); color: var(--ink); }
.dax-consent::backdrop { background: rgba(5, 6, 7, .6); }
.dax-consent h2 { margin: 0 0 10px; font-size: 1.15rem; }
.dax-consent p { margin: 0 0 10px; color: var(--muted); line-height: 1.5; }
.dax-consent-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* Dax in the owner's dashboard (public/js/admin-dax.js) */
.dax-place { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--head); }
.dax-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dax-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dax-num { width: 84px; }
.dax-form-row { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.dax-form-row input { width: 110px; margin-left: 6px; }
.dax-meter { height: 8px; }
.dax-progress { font-weight: 600; color: var(--head); }
.dax-upload { position: relative; overflow: hidden; justify-self: start; }
.dax-upload .dax-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dax-chart { display: flex; align-items: end; gap: 3px; height: 140px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dax-chart span { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--a); }
.dax-chart span:hover { background: var(--head); }

/* the green dot where something waits (core.js watchDots): on a tab, and in the corner of the card itself */
.tabs a.has-dot, .tab-group.has-dot, .tab-card.has-dot, .task-tile.has-dot, .group-card.has-dot, .ug-card.has-dot { position: relative; }
.tabs a.has-dot::after, .tab-group.has-dot::after, .tab-card.has-dot::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--paper); pointer-events: none; }
.task-tile.has-dot::after, .group-card.has-dot::after, .ug-card.has-dot::after { content: ''; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .tabs a.has-dot::after, .tab-group.has-dot::after, .task-tile.has-dot::after, .group-card.has-dot::after, .ug-card.has-dot::after { animation: dot-pulse 2.4s ease-in-out infinite; } }
@keyframes dot-pulse { 50% { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px color-mix(in srgb, var(--dot) 35%, transparent); } }

/* =====================================================================================================
   Themes (Dashboard, Themes). The site's own look is "old" and needs no rule. Each theme below has a
   light and a dark version ([data-theme=dark]); the games, the reader and the sign-in intro keep their worlds.
   ===================================================================================================== */
/* ---- shared by the new themes: no shape around the tabs; the open one is underlined (::before; ::after is the dot) ---- */
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution], [data-skin=colours]) .tabs-ink { display: none; }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution], [data-skin=colours]) :is(.tabs a, .tab-group) { background: none !important; border-radius: 0; }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution], [data-skin=colours]) :is(.tabs a, .tab-group)::before {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 3px; border-radius: 3px; background: var(--skin-line, var(--dot));
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution], [data-skin=colours]) :is(.tabs a, .tab-group)[aria-current=page]::before { transform: scaleX(1); }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution], [data-skin=colours]) :is(.tabs a, .tab-group):hover::before { transform: scaleX(.4); }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution], [data-skin=colours]) :is(.tabs a, .tab-group)[aria-current=page]:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { :root[data-skin] :is(.tabs a, .tab-group)::before { transition: none; } }
/* the dark bars: the logo, the words and the round buttons in light colours */
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top { backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .1); }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .brand { color: #f2f6f4; }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .brand img[src$='dev-dark.png'] { content: url(/brand/dev-light.png); }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .brand img[src$='dev-hub-logo.png'] { content: url(/hub-brand/dev-hub-logo-light.png); }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top :is(.tabs a, .tab-group) { color: var(--skin-tab, #b5c4d3); }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top :is(.tabs a, .tab-group):is(:hover, [aria-current=page], [aria-expanded=true]) { color: #fff; }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .who { color: var(--skin-tab, #b5c4d3); }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .who strong { color: #fff; }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top :is(.icon-btn, .bell, .btn.quiet) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #f2f6f4; }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top :is(.icon-btn, .bell, .btn.quiet):hover { border-color: rgba(255, 255, 255, .5); }

/* ---- dev.: forest green, the logo's rounded-square dot, glass ---- */
:root[data-skin=dev] { --paper: #f1f6ef; --surface: #ffffff; --head: #0d1f15; --text: #1e3127; --muted: #4f6a5b; --line: #d5e5cf; --skin-tab: #c3e6cb; --skin-line: #72dc5f; }
:root[data-skin=dev][data-theme=dark] { --paper: #07150d; --surface: #0f2318; --head: #eef8ec; --text: #cfe2d3; --muted: #93b39c; --line: #1d3b2a; }
:root[data-skin=dev] .top { background: #0f4f2c; }
:root[data-skin=dev][data-theme=dark] .top { background: #0a2a18; }
:root[data-skin=dev] :is(.tabs a, .tab-group)::before { height: 9px; bottom: -3px; border-radius: 0; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .45s cubic-bezier(.3, .7, .2, 1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 25 2, 55 9, 98 4' stroke='%2372dc5f' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(114, 220, 95, .55)); }
:root[data-skin=dev] :is(.tabs a, .tab-group)[aria-current=page]::before { transform: none; clip-path: inset(0 0 0 0); }
:root[data-skin=dev] :is(.tabs a, .tab-group):hover::before { transform: none; clip-path: inset(0 55% 0 0); }
:root[data-skin=dev] :is(.tabs a, .tab-group)[aria-current=page]:hover::before { clip-path: inset(0 0 0 0); }
:root[data-skin=dev] .tab-group em::before { border-radius: 2px; }
/* something new: a small glowing white dot */
:root[data-skin=dev] .top :is(.tabs a, .tab-group).has-dot::after { width: 6px; height: 6px; top: 5px; right: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .9), 0 0 14px 3px rgba(114, 220, 95, .55); }
:root[data-skin=dev] .tab-pop .tab-card.has-dot::after { border-radius: 2px; background: #72dc5f; box-shadow: 0 0 8px rgba(114, 220, 95, .8); }
:root[data-skin=dev] .top .bell b { font-size: 0; min-width: 0; width: 7px; height: 7px; padding: 0; top: 4px; right: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .95), 0 0 14px 4px rgba(114, 220, 95, .6); }
/* glass over slow green light */
:root[data-skin=dev] .backdrop::before { right: -200px; top: 60px; width: 760px; height: 760px; background: radial-gradient(circle at 40% 40%, rgba(114, 220, 95, .28), rgba(114, 220, 95, 0) 68%); }
:root[data-skin=dev] .backdrop::after { right: auto; left: -240px; top: 520px; width: 680px; height: 680px; background: radial-gradient(circle at 60% 40%, rgba(47, 116, 181, .14), rgba(47, 116, 181, 0) 68%); }
:root[data-skin=dev] :is(.panel, .card, .logo-card) { background: rgba(255, 255, 255, .66); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 36px -22px rgba(10, 60, 30, .35); }
:root[data-skin=dev][data-theme=dark] :is(.panel, .card, .logo-card) { background: rgba(22, 58, 38, .5); border-color: rgba(160, 240, 170, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 46px -24px rgba(0, 0, 0, .8); }

/* ---- binder: the dark bar of Theme 1 over the site's calm green arcs ---- */
:root[data-skin=binder] { --paper: #eef1f6; --muted: #4f5d75; --skin-tab: #b5c4d3; --skin-line: #72dc5f; }
:root[data-skin=binder][data-theme=dark] { --paper: #0f1820; --muted: #93a4b6; }
:root[data-skin=binder] .top { background: #16222e; }
:root[data-skin=binder][data-theme=dark] .top { background: #0a1117; }
:root[data-skin=binder] :is(.panel, .card) { border-color: transparent; border-radius: 18px; }

/* ---- institution: deep ink, layered surfaces ---- */
:root[data-skin=institution] { --paper: #eef1f5; --line: #e3e8ee; --skin-tab: #a9bccd; --skin-line: #72dc5f; }
:root[data-skin=institution][data-theme=dark] { --paper: #0a121a; --surface: #131f2b; --line: #223344; }
:root[data-skin=institution] .top { background: #0c1620; }
:root[data-skin=institution][data-theme=dark] .top { background: #060c12; }
:root[data-skin=institution] :is(.panel, .card, .logo-card) { border-color: transparent; border-radius: 16px; box-shadow: 0 1px 2px rgba(12, 22, 32, .06), 0 10px 28px -12px rgba(12, 22, 32, .22); }
:root[data-skin=institution][data-theme=dark] :is(.panel, .card, .logo-card) { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .7); }
:root[data-skin=institution] .backdrop { display: none; }

/* ---- programme colours: a light page; the open section is underlined in the colour of the programme ---- */
:root[data-skin=colours] { --paper: #fafbfd; }
:root[data-skin=colours][data-theme=dark] { --paper: #0b1118; --surface: #151f2a; }
:root[data-skin=colours] .top { background: var(--surface); backdrop-filter: none; }
:root[data-skin=colours] :is(.tabs a, .tab-group)::before { background: var(--tone, #2f74b5); }
:root[data-skin=colours] :is(.tabs a, .tab-group)[aria-current=page] { color: var(--head); }
:root[data-skin=colours] :is(.panel, .card, .logo-card) { border-color: transparent; border-radius: 20px; box-shadow: 0 1px 2px rgba(12, 22, 32, .05), 0 14px 34px -18px rgba(12, 22, 32, .18); }
:root[data-skin=colours][data-theme=dark] :is(.panel, .card, .logo-card) { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .7); }
:root[data-skin=colours] .backdrop { display: none; }

/* ---- the Themes section of the dashboard ---- */
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.skin-card { border: 2px solid var(--line); border-radius: 18px; background: var(--surface); padding: 0; overflow: hidden; cursor: pointer; text-align: left; color: inherit; font: inherit; display: grid; transition: border-color .2s, transform .2s; }
.skin-card:hover { transform: translateY(-2px); border-color: var(--muted); }
.skin-card[aria-pressed=true] { border-color: var(--b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b) 25%, transparent); }
.skin-card .skin-sw { height: 112px; display: grid; grid-template-rows: 26px 1fr; grid-template-columns: 1fr; width: 100%; }
.skin-card .skin-sw > b { display: block; position: relative; }
.skin-card .skin-sw > b::after { content: ''; position: absolute; left: 14px; bottom: 4px; width: 34px; height: 3px; border-radius: 3px; background: var(--u, #72dc5f); }
.skin-card .skin-sw span { display: flex; gap: 8px; padding: 10px 12px; }
.skin-card .skin-sw i { flex: 1; border-radius: 8px; }
.skin-card .txt { padding: 12px 14px 14px; display: grid; gap: 2px; }
.skin-card .txt strong { color: var(--head); font-family: var(--display); font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.skin-card .txt small { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.skin-card .now { font: 700 .72rem var(--body); color: #fff; background: var(--b); border-radius: 99px; padding: 2px 8px; }

/* =====================================================================================================
   The new layout (Dashboard, Themes: "New layout"): html[data-layout=model1]. The classic layout needs no rule.
   ===================================================================================================== */
/* the Training section: its word in gold, so a training is never mistaken for a lesson */
.tab-group.training { color: #a86f00; }
:root:is([data-theme=dark], [data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .tab-group.training { color: #ffd76a; }
/* Find: a quiet field-like button in the bar, and the search panel */
.qf-open { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 500 .88rem var(--body); cursor: pointer; white-space: nowrap; }
.qf-open:hover { color: var(--head); border-color: var(--head); }
.qf-open kbd { font: 600 .72rem var(--body); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; color: var(--muted); }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .qf-open { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #e9f1ec; }
:root:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .qf-open kbd { border-color: rgba(255, 255, 255, .25); color: #e9f1ec; }
@media (max-width: 760px) { .qf-open span, .qf-open kbd { display: none; } .qf-open { width: 38px; padding: 0; justify-content: center; } }
.qf { position: fixed; inset: 0; z-index: 900; background: rgba(8, 14, 20, .5); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fade-in .15s; }
@keyframes fade-in { from { opacity: 0; } }
.qf-panel { width: min(640px, 100%); background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); border: 1px solid var(--line); }
.qf-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.qf-head input { flex: 1; min-width: 0; border: 0; background: none; font: 500 1.15rem var(--body); color: var(--head); outline: none; padding: 4px 0; }
.qf-head kbd { font: 600 .72rem var(--body); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
.qf-list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow: auto; }
.qf-list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.qf-list li[aria-selected=true], .qf-list li:hover { background: var(--paper); }
.qf-list li strong { color: var(--head); font-weight: 600; }
.qf-list li span { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.qf-list .qf-none { color: var(--muted); cursor: default; }
.qf-foot { margin: 0; padding: 8px 16px 10px; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }
/* the layout cards of the Themes section */
.layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 26px; }
.layout-card .skin-sw span { flex-direction: column; }

.qf-open + .who { margin-left: 12px; }

/* =====================================================================================================
   The dashboard's first page in the new layout (admin.js insightsPage) and the side menu of each theme.
   ===================================================================================================== */
/* the side menu takes the theme's bar */
:root[data-skin=dev] .side { background: #0a3d22; }
:root[data-skin=dev][data-theme=dark] .side { background: #061f12; }
:root[data-skin=dev] .side nav button[aria-current=page] { background: rgba(114, 220, 95, .16); }
:root[data-skin=dev] .side nav button[aria-current=page] svg { color: #72dc5f; }
:root[data-skin=institution] .side { background: #0c1620; }
:root[data-skin=institution][data-theme=dark] .side { background: #060c12; }
:root[data-skin=colours] .side { background: var(--surface); color: var(--muted); border-right: 1px solid var(--line); }
:root[data-skin=colours] .side .brand { color: var(--head); }
:root[data-skin=colours] .side .brand img[src$='dev-light.png'] { content: url(/brand/dev-dark.png); }
:root[data-skin=colours][data-theme=dark] .side .brand img[src$='dev-dark.png'] { content: url(/brand/dev-light.png); }
:root[data-skin=colours] .side .brand img[src$='dev-hub-logo-light.png'] { content: url(/hub-brand/dev-hub-logo.png); }
:root[data-skin=colours][data-theme=dark] .side .brand img[src$='dev-hub-logo.png'] { content: url(/hub-brand/dev-hub-logo-light.png); }
:root[data-skin=colours] .side nav button:hover { color: var(--head); }
:root[data-skin=colours] .side nav button[aria-current=page] { background: var(--paper); color: var(--head); }
:root[data-skin=colours] .side .foot a, :root[data-skin=colours] .side .foot button { color: var(--muted); }

/* the head: a band in the bar's colour with where we are, the greeting and the week in chips */
.ins-head { --ins-band: var(--ink); --ins-on: #fff; --ins-soft: #b9c6d4; position: relative; overflow: hidden; margin: -8px 0 22px; padding: 26px 30px 30px; border-radius: 22px; background: var(--ins-band); color: var(--ins-on); display: grid; gap: 8px; }
:root[data-skin=dev] .ins-head { --ins-band: #0f4f2c; --ins-soft: #b8dcc0; }
:root[data-skin=dev][data-theme=dark] .ins-head { --ins-band: #0a2a18; }
:root[data-skin=binder] .ins-head { --ins-band: #16222e; }
:root[data-skin=institution] .ins-head { --ins-band: #0c1620; --ins-soft: #a9bccd; }
:root[data-skin=colours] .ins-head { --ins-band: #16222e; }
:root[data-theme=dark]:not([data-skin=dev]) .ins-head { --ins-band: #18242f; }
.ins-head > * { position: relative; z-index: 1; }
.ins-head h1 { color: var(--ins-on); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; }
.ins-head p { margin: 0; color: var(--ins-soft) !important; font-size: 1rem; }
.ins-dot { display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: 32%; background: #72dc5f; }
.ins-trail { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; color: var(--ins-soft); }
.ins-trail a { color: var(--ins-on); text-decoration: none; padding: 3px 11px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.ins-trail a:hover { background: rgba(255, 255, 255, .18); }
.ins-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ins-chips span { font-size: .84rem; font-weight: 600; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: var(--ins-on); }
.ins-chips span:first-child { background: #72dc5f; color: #0c2a12; }
/* the giant word and the ribbon belong to the dev. theme */
.ins-ghost, .ins-ribbon { display: none; }
:root[data-skin=dev] .ins-ghost { display: block; position: absolute; right: 18px; top: 10px; z-index: 0; font: 800 clamp(70px, 10vw, 150px)/0.9 var(--display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.8px rgba(214, 245, 220, .36); white-space: nowrap; pointer-events: none; }
:root[data-skin=dev] .ins-ghost b { display: inline-block; font-weight: inherit; opacity: 0; transform: translateY(.35em) rotate(4deg); filter: blur(6px); animation: ins-rise .9s cubic-bezier(.2, .8, .2, 1) forwards, ins-shine 10s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms + .15s), calc(var(--i) * 120ms + 2s); }
:root[data-skin=dev] .ins-ghost i { display: inline-block; width: .2em; height: .2em; margin-left: .04em; border-radius: 32%; background: rgba(114, 220, 95, .75); opacity: 0; transform: translateY(-1.4em) scale(.4); animation: ins-drop .7s .85s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes ins-rise { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ins-drop { to { opacity: 1; transform: none; } }
@keyframes ins-shine { 0%, 80%, 100% { -webkit-text-stroke-color: rgba(214, 245, 220, .36); } 90% { -webkit-text-stroke-color: rgba(200, 245, 190, .5); } }
:root[data-skin=dev] .ins-ribbon { display: block; position: absolute; left: -4%; right: -4%; bottom: -18px; height: 70px; z-index: 0; pointer-events: none; }
.ins-ribbon svg { width: 100%; height: 100%; }
.ins-ribbon path { fill: none; stroke: #72dc5f; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: ins-draw 1.6s .2s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes ins-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-skin=dev] .ins-ghost b, :root[data-skin=dev] .ins-ghost i { animation: none; opacity: 1; transform: none; filter: none; } .ins-ribbon path { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 700px) { :root[data-skin=dev] .ins-ghost { font-size: 56px; top: auto; bottom: 24px; opacity: .55; } .ins-head { padding: 20px 18px 26px; } }

/* the grid of the page */
.ins-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.ins-grid > * { grid-column: span 6; min-width: 0; margin: 0; }
.ins-grid > .ins-pulse, .ins-grid > .ins-report { grid-column: span 12; }
.ins-grid > .ins-findings { grid-column: span 12; }
@media (max-width: 980px) { .ins-grid > * { grid-column: span 12; } }
.ins-box h2, .ins-pulse h2, .ins-report h2 { font-size: 1.15rem; }
.ins-box .sub { margin: -8px 0 4px; }
/* School pulse */
.ins-pulse { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
.ins-score { font: 800 5.6rem/0.9 var(--display); letter-spacing: -0.06em; color: var(--head); }
.ins-score small { font-size: 1.4rem; color: var(--muted); letter-spacing: 0; }
.ins-pulse p { margin: 4px 0 0; color: var(--muted); max-width: 64ch; }
.ins-signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ins-signals div { background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: .82rem; color: var(--muted); }
.ins-signals b { display: block; font: 800 1.45rem var(--display); color: var(--head); letter-spacing: -0.02em; }
.ins-signals em { font-style: normal; font-weight: 700; }
.ins-signals .up { color: #146c3a; } .ins-signals .down { color: #a3301a; }
:root[data-theme=dark] .ins-signals .up { color: #7ee39a; } :root[data-theme=dark] .ins-signals .down { color: #ff9b85; }
@media (max-width: 700px) { .ins-pulse { grid-template-columns: 1fr; } .ins-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ins-score { font-size: 4.2rem; } }
/* what the numbers say */
.ins-findings ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ins-findings li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.ins-findings .lv { grid-row: span 2; font-size: .75rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.ins-findings li.act .lv { background: #fde4e2; color: #a3301a; } .ins-findings li.watch .lv { background: #fff1cc; color: #7d5200; } .ins-findings li.ok .lv { background: #dcf3e5; color: #146c3a; }
:root[data-theme=dark] .ins-findings li.act .lv { background: rgba(220, 79, 42, .22); color: #ff9b85; } :root[data-theme=dark] .ins-findings li.watch .lv { background: rgba(242, 194, 48, .18); color: #ffd06b; } :root[data-theme=dark] .ins-findings li.ok .lv { background: rgba(35, 145, 95, .22); color: #7ee39a; }
.ins-findings strong { color: var(--head); font-weight: 650; }
.ins-findings small { color: var(--muted); grid-column: 2; }
.ins-findings a { grid-row: 1 / span 2; grid-column: 3; font-weight: 600; font-size: .88rem; }
/* the report */
.ins-report { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.ins-report p { margin: 2px 0 0; color: var(--muted); }
.ins-dialog { border: 0; border-radius: 20px; padding: 24px; width: min(480px, calc(100vw - 32px)); background: var(--surface); color: var(--text); }
.ins-dialog::backdrop { background: rgba(8, 14, 20, .55); }
.ins-dialog h2 { font-size: 1.3rem; }
.ins-checks { display: grid; gap: 8px; margin: 14px 0 18px; }
.ins-check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.ins-check input { width: 18px; height: 18px; accent-color: var(--b); }
.ins-dialog .actions { display: flex; gap: 10px; justify-content: flex-end; }
/* learning time */
.ins-bars { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 6px; }
.ins-bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font-size: .8rem; color: var(--muted); }
.ins-bars i { display: block; width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: var(--a); }
:root[data-skin=dev] .ins-bars i { background: #145e35; } :root[data-skin=dev][data-theme=dark] .ins-bars i { background: #1d7a46; }
.ins-bars .today i { background: #72dc5f; }
.ins-bars em { font-style: normal; font-weight: 700; color: var(--head); }
/* work handed in */
.ins-donut { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 18px; align-items: center; color: var(--head); }
.ins-legend { display: grid; gap: 8px; font-size: .9rem; color: var(--text); }
.ins-legend div { display: flex; align-items: center; gap: 8px; }
.ins-legend i { width: 12px; height: 12px; border-radius: 4px; }
.ins-legend b { margin-left: auto; color: var(--head); }
/* criteria */
.ins-scroll { overflow-x: auto; }
.ins-heat { width: 100%; min-width: 420px; border-collapse: separate; border-spacing: 4px; font-size: .88rem; }
.ins-heat th { text-align: left; font-weight: 600; color: var(--muted); padding: 2px 4px; }
.ins-heat th[scope=row] { color: var(--head); white-space: nowrap; }
.ins-heat td { text-align: center; border-radius: 8px; padding: 9px 4px; font: 700 .95rem var(--display); color: #10220c; }
.ins-heat td.g { background: #b6e8a6; } .ins-heat td.y { background: #f4d97a; } .ins-heat td.r { background: #f7b48f; } .ins-heat td.none { background: var(--paper); color: var(--muted); }
/* book plans */
.ins-lanes { display: grid; gap: 14px; }
.ins-lane { display: grid; grid-template-columns: 110px minmax(0, 1fr) 84px; gap: 12px; align-items: center; font-size: .88rem; }
.ins-lane b { color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-lane .track { position: relative; height: 10px; background: var(--paper); border-radius: 5px; }
.ins-lane .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: #72dc5f; }
.ins-lane .track u { position: absolute; top: -5px; bottom: -5px; width: 3px; background: var(--head); border-radius: 2px; }
.ins-lane .ok { color: #146c3a; font-weight: 700; text-align: right; } .ins-lane .late { color: #a3301a; font-weight: 700; text-align: right; }
:root[data-theme=dark] .ins-lane .ok { color: #7ee39a; } :root[data-theme=dark] .ins-lane .late { color: #ff9b85; }
/* people lists */
.ins-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ins-who li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--paper); }
.ins-who .av { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #2f74b5; color: #fff; font: 800 .95rem var(--display); }
.ins-who .av.num { background: #16222e; }
.ins-who b { display: block; color: var(--head); font-size: .95rem; }
.ins-who small { color: var(--muted); font-size: .8rem; }
.ins-who .flag { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; border: 1.5px solid currentColor; }
.ins-who .flag.r { color: #a3301a; } .ins-who .flag.y { color: #7d5200; }
:root[data-theme=dark] .ins-who .flag.r { color: #ff9b85; } :root[data-theme=dark] .ins-who .flag.y { color: #ffd06b; }

/* =====================================================================================================
   Today (public/js/today.js): the first page of the new layout for a student and a teacher.
   ===================================================================================================== */
.td2-head { margin-top: 0; }
.td2-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.td2-h h2 { font-size: 1.3rem; }
.td2-h small { color: var(--muted); }
.td2-h .btn { margin-left: auto; }
.td2-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
@media (max-width: 960px) { .td2-two { grid-template-columns: 1fr; } }
/* the board and its notes: paper notes pinned by the programme's colour */
.td2-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.td2-note { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 168px; padding: 18px 16px 12px; border-radius: 4px 4px 18px 4px; background: #fff2a8; color: #2b2a1e; transform: rotate(var(--t, -.8deg)); box-shadow: 0 10px 16px -12px rgba(30, 30, 10, .45); transition: transform .2s, opacity .3s; }
.td2-note:nth-child(3n+2) { --t: .9deg; } .td2-note:nth-child(3n) { --t: -.3deg; }
.td2-note:hover { transform: rotate(0) translateY(-3px); }
.td2-note.g { background: #daf3cf; } .td2-note.b { background: #d6e8fb; } .td2-note.p { background: #ffdcd0; }
:root[data-theme=dark] .td2-note { background: #4a4318; color: #f3efd8; } :root[data-theme=dark] .td2-note.g { background: #1f3d22; } :root[data-theme=dark] .td2-note.b { background: #18324d; } :root[data-theme=dark] .td2-note.p { background: #4a2a20; }
.td2-pin { position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--prog, #5d6b85); box-shadow: inset -2px -3px 0 rgba(0, 0, 0, .2), 0 3px 4px -1px rgba(0, 0, 0, .35); }
:root[data-skin=dev] .td2-pin { border-radius: 4px; }
.td2-kind { font-size: .78rem; font-weight: 700; opacity: .8; }
.td2-note h3 { font-size: 1.08rem; color: inherit; overflow-wrap: anywhere; }
.td2-note p { margin: 0; font-size: .85rem; opacity: .85; line-height: 1.35; }
.td2-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; }
.td2-foot .soon { color: #a3301a; } :root[data-theme=dark] .td2-foot .soon { color: #ff9b85; }
.td2-open { color: inherit; }
.td2-tick { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; opacity: .6; }
.td2-tick svg { opacity: 0; } .td2-tick:hover svg, .td2-tick[aria-pressed=true] svg { opacity: 1; }
.td2-tick:hover { opacity: 1; }
.td2-x { border: 0; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; opacity: .55; padding: 0 2px; }
.td2-note.done { opacity: .55; } .td2-note.done h3 { text-decoration: line-through; }
.td2-add { background: transparent !important; border: 2px dashed var(--line); box-shadow: none; transform: none; color: var(--muted); }
.td2-add textarea { flex: 1; border: 0; background: none; resize: none; font: 500 1rem/1.4 var(--body); color: var(--text); outline: none; }
.td2-add .btn { align-self: flex-start; }
/* the day line */
.td2-day ul { list-style: none; margin: 0; padding: 0; display: grid; }
.td2-day li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 11px 10px; border-radius: 12px; align-items: center; }
.td2-day li + li { box-shadow: inset 0 1px 0 var(--line); }
.td2-day li.now { background: color-mix(in srgb, #72dc5f 16%, transparent); box-shadow: none; }
.td2-day li.past { opacity: .55; }
.td2-day time { font: 700 .95rem var(--display); color: var(--head); }
.td2-day time small { display: block; font: 500 .78rem var(--body); color: var(--muted); }
.td2-day b { color: var(--head); display: block; }
.td2-day li small { color: var(--muted); font-size: .84rem; }
/* continue reading: the real cover as a book */
.td2-resume { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 22px; align-items: center; margin-top: 18px; }
.td2-resume h2 { font-size: 1.4rem; }
.td2-resume p { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 640px) { .td2-resume { grid-template-columns: 84px minmax(0, 1fr); } .td2-resume .btn { grid-column: 1 / -1; justify-self: start; } }
.bk3 { position: relative; display: block; width: 100%; max-width: 120px; aspect-ratio: 360 / 510; perspective: 1000px; }
.bk3-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(2deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.bk3-pages { position: absolute; top: 2%; bottom: 2%; left: 4%; right: -5%; border-radius: 1px 4px 4px 1px; transform: translateZ(-6px); background: linear-gradient(90deg, #d9d4c8, #fbfaf6 12%, #f1eee6 50%, #fbfaf6 88%, #e3ded2); box-shadow: inset -1px 0 0 #cfc9bb, 0 18px 26px -14px rgba(0, 0, 0, .55); }
.bk3-cover { position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; overflow: hidden; transform-origin: left center; transition: transform .6s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); background: #2f74b5; }
.bk3-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk3-cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .18) 3%, rgba(0, 0, 0, .08) 6%, transparent 10%), linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 38%); pointer-events: none; }
.td2-resume:hover .bk3-in, .bk3:hover .bk3-in { transform: rotateY(-18deg) rotateX(3deg) translateY(-5px); }
.td2-resume:hover .bk3-cover, .bk3:hover .bk3-cover { transform: rotateY(-24deg); }
@media (prefers-reduced-motion: reduce) { .bk3-in, .bk3-cover { transition: none; } }
/* units and classes: the programme's colour, the grade large */
.td2-units-wrap { margin-top: 26px; }
.td2-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.td2-unit { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 14px 26px; min-height: 170px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .2s; }
.td2-unit:hover { transform: translateY(-3px); }
.td2-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--prog); }
.td2-grade { position: absolute; right: 14px; top: 2px; font: 800 4.2rem/1 var(--display); letter-spacing: -0.05em; color: color-mix(in srgb, var(--prog) 22%, transparent); }
.td2-where { font-size: .8rem; font-weight: 600; color: var(--muted); position: relative; }
.td2-unit strong { font: 700 1.15rem var(--display); color: var(--head); position: relative; max-width: 84%; }
.td2-next { font-size: .85rem; color: var(--text); position: relative; }
.td2-meter { margin-top: auto; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.td2-meter i { height: 7px; border-radius: 3px; background: var(--line); }
.td2-meter i.on { background: var(--prog); }
.td2-meta { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); font-weight: 600; }
:root[data-skin=dev] .td2-unit { background: #0c3f23; border-color: rgba(169, 240, 170, .2); color: #c3e6cb; }
:root[data-skin=dev] .td2-unit strong { color: #fff; } :root[data-skin=dev] .td2-unit .td2-where, :root[data-skin=dev] .td2-unit .td2-meta, :root[data-skin=dev] .td2-unit .td2-next { color: #b8dcc0; }
:root[data-skin=dev] .td2-meter i { background: rgba(255, 255, 255, .14); }
:root[data-skin=dev] .td2-grade { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--prog) 75%, white 10%); }
.td2-unit.prog-pyp { --prog: #f5a800; } .td2-unit.prog-myp { --prog: #e1251b; } .td2-unit.prog-iq { --prog: #0077c8; } .td2-unit.prog-v5 { --prog: #d22630; }
.td2-note.prog-pyp { --prog: #f5a800; } .td2-note.prog-myp { --prog: #e1251b; } .td2-note.prog-iq { --prog: #0077c8; } .td2-note.prog-own { --prog: #5d6b85; }
:root[data-skin=dev] .td2-meter i.on { background: var(--prog); box-shadow: 0 0 8px color-mix(in srgb, var(--prog) 55%, transparent); }
main:has(> .td2-head) { gap: 18px; }
main:has(> .td2-head) > * { margin-top: 0; }

/* Phase B step 3 (widened 2026-10-19): with any new theme (every theme but Old), the head of every page and of every
   section of the dashboard is the theme's band, light and dark: the pages' .page-head, the Library greeting, the
   dashboard sections' header, the Active Board head. In the dev. theme it also carries the ghost word of the role and
   the green ribbon. Old theme is untouched. */
:root { --hd-band: #16222e; --hd-soft: #b9c6d4; }
:root[data-skin=dev] { --hd-band: #0f4f2c; --hd-soft: #b8dcc0; }
:root[data-skin=dev][data-theme=dark] { --hd-band: #0a2a18; }
:root[data-skin=institution] { --hd-band: #0c1620; --hd-soft: #a9bccd; }
:root[data-theme=dark]:not([data-skin=dev]) { --hd-band: #18242f; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) {
  position: relative; overflow: hidden; isolation: isolate; padding: 26px 30px 36px; border-radius: 22px; background: var(--hd-band); color: #fff; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) .main > header:not(.ins-head) { margin-bottom: 8px; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) :is(h1, h2) { color: #fff; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) h1.dot::after { color: #72dc5f; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) :is(p, small, .sub, .bd-eyebrow) { color: var(--hd-soft) !important; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) a:not(.btn) { color: #fff; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, .main > header:not(.ins-head), .bd-head) .chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, .main > header:not(.ins-head), .bd-head) .btn:not(.go) { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, .main > header:not(.ins-head), .bd-head) .btn:not(.go):hover { background: rgba(255, 255, 255, .18); }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, .main > header:not(.ins-head), .bd-head) .btn.go { background: #72dc5f; color: #0c2a12; border-color: #72dc5f; }
:root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::before { content: 'Lead it'; position: absolute; right: 18px; top: 8px; z-index: -1; font: 800 clamp(70px, 10vw, 150px)/0.9 var(--display); letter-spacing: -0.06em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.8px rgba(214, 245, 220, .3); pointer-events: none; animation: mh-rise .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
:root[data-skin=dev][data-role=student] :is(main > .page-head, #main.wrap > .intro:first-child, .bd-head)::before { content: 'Think it'; }
:root[data-skin=dev][data-role=teacher] :is(main > .page-head, #main.wrap > .intro:first-child, .bd-head)::before { content: 'Teach it'; }
:root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: -16px; height: 64px; z-index: -1; pointer-events: none; animation: mh-fade 1s .3s both;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 120' preserveAspectRatio='none'%3E%3Cpath d='M-20 96 C 240 20, 420 120, 700 70 S 1150 6, 1400 52 S 1580 100, 1640 40' fill='none' stroke='%2372dc5f' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) #main.wrap > .intro:first-child { max-width: none; width: 100%; }
@media (min-width: 701px) { :root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) p { max-width: min(70ch, 58%); } }
@keyframes mh-rise { from { opacity: 0; transform: translateY(.3em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mh-fade { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { :root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::before, :root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::after { animation: none; } }
@media (max-width: 700px) { :root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) { padding: 20px 18px 30px; } :root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::before { font-size: 56px; top: auto; bottom: 22px; opacity: .55; } }

/* Phase B step 4: the home of a PYP child (public/js/today.js kid()): their character, four big picture tiles that read
   themselves aloud, big notes. Pastel tiles keep dark ink in light and dark. */
main:has(> .kd-hello) { gap: 22px; }
main:has(> .kd-hello) > * { margin-top: 0; }
.kd-hello { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px 28px; border-radius: 26px; background: #16222e; color: #fff; }
.kd-hello::after { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 120% at 90% 0%, rgba(245, 168, 0, .28), transparent 60%); pointer-events: none; }
:root[data-skin=dev] .kd-hello { background: #0f4f2c; } :root[data-skin=dev] .kd-hello::after { background: radial-gradient(50% 120% at 90% 0%, rgba(114, 220, 95, .35), transparent 60%); }
:root[data-skin=dev][data-theme=dark] .kd-hello { background: #0a2a18; }
.kd-hello > * { position: relative; z-index: 1; }
.kd-friend { display: block; width: 110px; }
.kd-hello h1 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800; color: #fff; }
.kd-hello p { margin: 4px 0 0; font-size: 1.25rem; color: #cfe3d5; }
.kd-side { display: flex; align-items: center; gap: 14px; }
.kd-stars { min-width: 96px; padding: 12px 18px; border-radius: 18px; text-align: center; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.kd-stars b { display: block; font: 800 2.5rem/1 var(--display); color: #ffcf4d; }
.kd-stars span { font-weight: 600; color: #cfe3d5; }
.kd-say { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .78); color: #16222e; cursor: pointer; transition: transform .15s; }
.kd-say:hover { transform: scale(1.06); } .kd-say:active { transform: scale(.94); }
.kd-say:focus-visible { outline: 3px solid #72dc5f; outline-offset: 2px; }
.kd-big4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kd-tile { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 22px 18px 18px; border-radius: 24px; color: #1c1a10; box-shadow: 0 14px 24px -18px rgba(20, 30, 20, .45); transition: transform .2s cubic-bezier(.2, .9, .3, 1.3); }
.kd-tile:hover { transform: translateY(-5px); }
.kd-tile.t1 { background: #ffd65c; } .kd-tile.t2 { background: #9ee08c; } .kd-tile.t3 { background: #8ec9f5; } .kd-tile.t4 { background: #ffb59e; }
.kd-pic { display: block; width: 92px; height: 92px; } .kd-pic svg { width: 100%; height: 100%; }
.kd-tile .bk3 { width: 66px; }
.kd-tile a { margin-top: auto; display: grid; gap: 4px; color: inherit; text-decoration: none; }
.kd-tile a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.kd-tile a:focus-visible { outline: none; } .kd-tile:has(a:focus-visible) { outline: 3px solid #16222e; outline-offset: 3px; }
.kd-tile b { font: 800 1.75rem/1.05 var(--display); letter-spacing: -0.02em; }
.kd-tile small { font-size: 1rem; font-weight: 600; color: #3b3828; overflow-wrap: anywhere; }
.kd-tile .kd-say { position: absolute; right: 14px; top: 14px; z-index: 2; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .72); }
.kd-badge { position: absolute; left: 14px; top: -10px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 12px; background: #16222e; color: #72dc5f; font: 800 1.1rem/34px var(--display); text-align: center; }
.kd-notes h2 { font-size: 1.6rem; margin-bottom: 14px; }
.kd-notes .td2-notes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.kd-notes .td2-note { min-height: 150px; padding: 22px 18px 14px; }
.kd-notes .td2-note h3 { font-size: 1.4rem; }
.kd-notes .td2-tick { width: 54px; height: 54px; border-radius: 16px; }
@media (max-width: 960px) { .kd-big4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kd-hello { grid-template-columns: auto minmax(0, 1fr); padding: 18px; } .kd-side { grid-column: 1 / -1; } .kd-friend { width: 80px; } .kd-tile { min-height: 190px; } .kd-pic { width: 70px; height: 70px; } .kd-tile b { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .kd-tile, .kd-say { transition: none; } }

/* =====================================================================================================
   Phase B, the dev. theme through the whole page (owner 2026-10-19: "the whole page and all its content, the way the
   theme was shown"): the head runs edge to edge as a masthead, every box is a glass pane over the living background,
   buttons are pills (the main one glows), fields are soft glass, tables breathe, section titles end with the dev. dot.
   ===================================================================================================== */
/* the masthead: full width, touching the top bar (pages) or the top of the dashboard column */
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main.wrap > .page-head:first-child, #main.wrap > .intro:first-child) {
  margin-top: calc(-1 * clamp(24px, 5vw, 56px)); border-radius: 0; box-shadow: 0 0 0 100vmax var(--hd-band); clip-path: inset(0 -100vmax); padding-top: 34px; padding-bottom: 44px; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) .main > header:not(.ins-head) {
  margin: calc(-1 * clamp(20px, 4vw, 44px)) calc(-1 * clamp(20px, 4vw, 44px)) 0; border-radius: 0; padding: 34px clamp(20px, 4vw, 44px) 44px; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) .main > .ins-head { margin: calc(-1 * clamp(20px, 4vw, 44px)) calc(-1 * clamp(20px, 4vw, 44px)) 0; border-radius: 0; padding: 34px clamp(20px, 4vw, 44px) 44px; }
/* glass panes: every box of the pages and of the dashboard */
:root[data-skin=dev] :is(.table-wrap, .empty, .adm-panel, .panel-card, .adm-class, .pp-class, .pulse-tile, .list-row, .scope-upload, form.new-class, form.prog-form, .file-card, .td2-unit-plain, .seg, .door) {
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(10, 40, 20, .06), 0 16px 36px -22px rgba(10, 60, 30, .35); }
:root[data-skin=dev] :is(.table-wrap, .adm-panel, .panel-card, .adm-class, .pp-class, .scope-upload, form.new-class, form.prog-form, .file-card) { border-radius: 22px; }
:root[data-skin=dev] :is(.pulse-tile, .list-row, .empty) { border-radius: 18px; }
:root[data-skin=dev] .empty { border-style: solid; }
:root[data-skin=dev][data-theme=dark] :is(.table-wrap, .empty, .adm-panel, .panel-card, .adm-class, .pp-class, .pulse-tile, .list-row, .scope-upload, form.new-class, form.prog-form, .file-card, .seg, .door) {
  background: rgba(22, 58, 38, .48); border-color: rgba(160, 240, 170, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 46px -24px rgba(0, 0, 0, .8); }
/* buttons: pills; dark green by default, light green when quiet, the bright green glowing for the main act */
:root[data-skin=dev] .btn { border-radius: 999px; background: #0f4f2c; border-color: #0f4f2c; color: #fff; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
:root[data-skin=dev] .btn:hover { background: #145e35; border-color: #145e35; transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(10, 60, 30, .6); }
:root[data-skin=dev] .btn:active { transform: translateY(0) scale(.98); }
:root[data-skin=dev] .btn.quiet { background: rgba(255, 255, 255, .55); border-color: rgba(15, 79, 44, .22); color: #0d1f15; }
:root[data-skin=dev] .btn.quiet:hover { background: #ecf3e9; border-color: #0f4f2c; }
:root[data-skin=dev] .btn.go { background: #72dc5f; border-color: #72dc5f; color: #0c2a12; box-shadow: 0 8px 22px -10px rgba(114, 220, 95, .9); }
:root[data-skin=dev] .btn.go:hover { background: #86e675; border-color: #86e675; }
:root[data-skin=dev] .btn.danger { background: transparent; color: #b3381b; border-color: #f0c4b7; }
:root[data-skin=dev] .btn.danger:is(:hover, .armed) { background: #c8401f; border-color: #c8401f; color: #fff; }
:root[data-skin=dev][data-theme=dark] .btn:not(.go):not(.quiet):not(.danger) { background: #1d7a46; border-color: #1d7a46; color: #fff; }
:root[data-skin=dev][data-theme=dark] .btn.quiet { background: rgba(255, 255, 255, .06); border-color: rgba(160, 240, 170, .22); color: #eef8ec; }
:root[data-skin=dev][data-theme=dark] .btn.quiet:hover { background: rgba(255, 255, 255, .1); border-color: #72dc5f; }
/* fields: soft glass, the dev. green ring when focused */
:root[data-skin=dev] :is(input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input:not([type]), select, textarea) {
  background: rgba(255, 255, 255, .7); border-color: #d5e5cf; border-radius: 12px; }
:root[data-skin=dev] :is(input, select, textarea):focus-visible { border-color: #2f9e55; box-shadow: 0 0 0 4px rgba(114, 220, 95, .28); }
:root[data-skin=dev][data-theme=dark] :is(input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input:not([type]), select, textarea) {
  background: rgba(255, 255, 255, .05); border-color: #1d3b2a; color: #eef8ec; }
:root[data-skin=dev] input[type=checkbox], :root[data-skin=dev] input[type=radio] { accent-color: #2f9e55; }
/* tables: no grid lines, a soft row on hover, the heads small and green-grey */
:root[data-skin=dev] th { color: #4f6a5b; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: rgba(15, 79, 44, .12); }
:root[data-skin=dev] td { border-bottom-color: rgba(15, 79, 44, .07); }
:root[data-skin=dev] tbody tr { transition: background .15s; }
:root[data-skin=dev] tbody tr:hover { background: rgba(114, 220, 95, .08); }
:root[data-skin=dev][data-theme=dark] th { color: #93b39c; border-bottom-color: rgba(160, 240, 170, .14); }
:root[data-skin=dev][data-theme=dark] td { border-bottom-color: rgba(160, 240, 170, .08); }
/* chips and toggles: pills with the dev. green */
:root[data-skin=dev] .chip { border-radius: 999px; }
:root[data-skin=dev] .seg { border-radius: 999px; }
:root[data-skin=dev] .seg :is(button, a) { border-radius: 999px; }
:root[data-skin=dev] .seg :is(button[aria-pressed=true], button[aria-current], a[aria-current]) { background: #0f4f2c; color: #fff; }
/* a section's title ends with the dev. dot */
:root[data-skin=dev] :is(.adm-panel, .panel, .panel-card, .section-head) > :is(h2, h3):not(.dot)::after,
:root[data-skin=dev] :is(.adm-panel, .panel, .panel-card) > header > :is(h2, h3):not(.dot)::after { content: ''; display: inline-block; width: .22em; height: .22em; margin-left: .08em; border-radius: 32%; background: #72dc5f; }
/* messages: a dark green pill with the dot */
:root[data-skin=dev] .toast { background: #0f4f2c; border-left: 0; border-radius: 999px; padding: 12px 20px; }
:root[data-skin=dev] .toast::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 3px; background: #72dc5f; vertical-align: 1px; }
/* dialogs: glass sheets */
:root[data-skin=dev] dialog { border-radius: 24px; border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -30px rgba(8, 50, 25, .55); }
:root[data-skin=dev][data-theme=dark] dialog { border-color: rgba(160, 240, 170, .16); }
@media (prefers-reduced-motion: reduce) { :root[data-skin=dev] .btn { transition: none; } :root[data-skin=dev] .btn:hover { transform: none; } }
/* contrast fixes found by the measure on the real pages (development-plans/ui-redesign/contrast.py) */
:root[data-skin]:not([data-skin=old]) .top .demo-pop strong { color: var(--head); }
:root[data-skin]:not([data-skin=old]) .top .demo-pop small { color: var(--muted); }
:root[data-skin=dev] .side nav .nav-label { color: #a9d6b2; }
:root[data-skin=dev] .site-foot { color: #4f6a5b; }
:root[data-skin=dev][data-theme=dark] .site-foot { color: #93b39c; }
:root[data-skin=dev] :is(.stop-ring, .stop-ring b) { color: #5f7568; }
:root[data-skin=dev][data-theme=dark] :is(.stop-ring, .stop-ring b) { color: #93b39c; }
:root[data-skin=dev] .tile-top .due.over { color: #b3381b; }
:root[data-skin=dev][data-theme=dark] .tile-top .due.over { color: #ff9b85; }
:root[data-skin=dev][data-theme=dark] .btn.danger { color: #ff9b85; border-color: rgba(255, 155, 133, .45); }
:root[data-skin=dev][data-theme=dark] .btn.danger:is(:hover, .armed) { color: #fff; }

/* =====================================================================================================
   Phase B, the rest of the approved mockup (owner 2026-10-19: "finish everything, I want the whole theme"):
   notes as white cards pinned by the programme's dot, the day as a timeline, the first content rising over the
   masthead, and on a phone in the new layout the sections bar at the bottom of the screen.
   ===================================================================================================== */
/* notes (dev.): white glass cards, no tilt, a small square dot in the programme's colour with a soft halo */
:root[data-skin=dev] .td2-note:not(.td2-add) { --t: 0deg; background: rgba(255, 255, 255, .62); color: #0f1a24; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px -18px rgba(10, 60, 30, .35); }
:root[data-skin=dev] .td2-note:not(.td2-add):hover { transform: translateY(-3px); }
:root[data-skin=dev][data-theme=dark] .td2-note:not(.td2-add) { background: rgba(255, 255, 255, .05); color: #eef3f8; border-color: rgba(160, 240, 170, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
:root[data-skin=dev] .td2-pin { left: auto; right: 16px; top: 16px; margin: 0; width: 12px; height: 12px; border-radius: 32%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--prog, #72dc5f) 18%, transparent); }
:root[data-skin=dev] .td2-note.prog-own .td2-pin { background: #72dc5f; }
:root[data-skin=dev] .td2-kind { color: var(--prog, #4f6a5b); opacity: 1; }
:root[data-skin=dev] .td2-note.prog-own .td2-kind { color: #1f8a57; }
:root[data-skin=dev][data-theme=dark] .td2-note.prog-own .td2-kind { color: #72dc5f; }
:root[data-skin=dev] .td2-note p { color: #557062; opacity: 1; }
:root[data-skin=dev][data-theme=dark] .td2-note p { color: #93b39c; }
:root[data-skin=dev] .td2-tick { border-radius: 12px; border: 0; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1.5px #dbe8d6; color: #1f8a57; opacity: 1; }
:root[data-skin=dev] .td2-tick:hover { background: #72dc5f; color: #0c1a08; box-shadow: none; }
:root[data-skin=dev][data-theme=dark] .td2-tick { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px #1d3b2a; color: #72dc5f; }
:root[data-skin=dev] .td2-add { border-radius: 22px; border: 1.5px dashed #c9dcc3; }
:root[data-skin=dev] .td2-foot .soon { color: #b3381b; } :root[data-skin=dev][data-theme=dark] .td2-foot .soon { color: #ff9b85; }
/* the day (dev.): a dotted line down the times, a node for each session, the one running now beats */
:root[data-skin=dev] .td2-day ul { position: relative; }
:root[data-skin=dev] .td2-day ul::before { content: ''; position: absolute; left: 84px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(#cfe0c9 0 4px, transparent 4px 9px); }
:root[data-skin=dev][data-theme=dark] .td2-day ul::before { background: repeating-linear-gradient(#1d3b2a 0 4px, transparent 4px 9px); }
:root[data-skin=dev] .td2-day li { position: relative; grid-template-columns: 58px minmax(0, 1fr); gap: 34px; box-shadow: none !important; }
:root[data-skin=dev] .td2-day li::before { content: ''; position: absolute; left: 79px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 3px #2f9e55; }
:root[data-skin=dev] .td2-day time { text-align: right; }
:root[data-skin=dev] .td2-day li.now { background: rgba(114, 220, 95, .14); border-radius: 14px; }
:root[data-skin=dev] .td2-day li.now::before { background: #72dc5f; box-shadow: 0 0 0 4px rgba(114, 220, 95, .25); animation: td2-beat 1.8s ease-in-out infinite; }
@keyframes td2-beat { 50% { box-shadow: 0 0 0 9px rgba(114, 220, 95, 0); } }
@media (prefers-reduced-motion: reduce) { :root[data-skin=dev] .td2-day li.now::before { animation: none; } }
/* the masthead runs edge to edge and the first content rises over its lower edge (every theme but Old) */
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) main.wrap > .td2-head:first-child {
  margin-top: calc(-1 * clamp(24px, 5vw, 56px)); border-radius: 0; box-shadow: 0 0 0 100vmax var(--ins-band); clip-path: inset(0 -100vmax); padding-top: 30px; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main.wrap > .td2-head:first-child, .main > .ins-head) { padding-bottom: 92px; margin-bottom: -60px; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main.wrap > .page-head:first-child, .main > header:not(.ins-head)):has(+ :is(.panel, .table-wrap, .panel-card, .adm-panel, .prog-zone, section, form)) { padding-bottom: 108px; margin-bottom: -60px; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main.wrap > .td2-head:first-child, .main > .ins-head, main.wrap > .page-head:first-child, .main > header) + * { position: relative; z-index: 2; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main.wrap > .td2-head:first-child, .main > .ins-head) .ins-ribbon { bottom: 44px; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main.wrap > .page-head:first-child, .main > header:not(.ins-head)):has(+ :is(.panel, .table-wrap, .panel-card, .adm-panel, .prog-zone, section, form))::after { bottom: 44px; }
/* a phone in the new layout: the sections bar sits at the bottom of the screen, like an app */
@media (max-width: 640px) {
  :root[data-layout=model1] .top { backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-layout=model1] .top .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 8px max(10px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex; justify-content: space-around; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--hd-band, #16222e); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .5); }
  :root[data-layout=model1][data-skin=old] .top .tabs { background: var(--surface); border-top: 1px solid var(--line); }
  :root[data-layout=model1]:not([data-skin=old]) .top .tabs :is(a, .tab-group) { color: #cfe3d5; }
  :root[data-layout=model1]:not([data-skin=old]) .top .tabs :is(a, .tab-group):is([aria-current=page], [aria-expanded=true]) { color: #fff; }
  :root[data-layout=model1] .top .tabs::-webkit-scrollbar { display: none; }
  :root[data-layout=model1] body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  :root[data-layout=model1] .tab-pop.up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
}
/* books as books (step 5, every theme but Old): the cover lies on a block of cream pages and opens a little on hover,
   in the library, the programme pages and the dashboard's Books */
:root[data-skin]:not([data-skin=old]) .book-3d { perspective: 1200px; }
:root[data-skin]:not([data-skin=old]) .book-3d::after { top: 1.5%; bottom: 1.5%; left: 2%; right: -1%; inset: 1.5% -1% 1.5% 2%; transform: translateZ(-3px); border-radius: 1px 4px 4px 1px;
  background: linear-gradient(90deg, #d9d4c8, #fbfaf6 12%, #f1eee6 50%, #fbfaf6 88%, #e3ded2); box-shadow: inset -1px 0 0 #cfc9bb, 18px 22px 34px -12px rgba(10, 40, 20, .45); }
:root[data-skin]:not([data-skin=old]) .book-3d img { transform-origin: left center; transition: transform .6s cubic-bezier(.2, .8, .2, 1); box-shadow: inset 5px 0 8px -4px rgba(0, 0, 0, .35), 0 10px 22px -10px rgba(0, 0, 0, .45); }
:root[data-skin]:not([data-skin=old]) :is(.book:hover, .book:focus-visible) .book-3d img { transform: rotateY(-28deg); }
:root[data-skin]:not([data-skin=old]) .bk-card:is(:hover, :focus-visible) .bk-cover { transform: perspective(900px) rotateY(-16deg) translateY(-5px); }
@media (prefers-reduced-motion: reduce) { :root[data-skin]:not([data-skin=old]) .book-3d img { transition: none; } :root[data-skin]:not([data-skin=old]) :is(.book:hover, .book:focus-visible) .book-3d img { transform: none; } }

/* =====================================================================================================
   Phase B, the other three themes through the whole page, each from its own approved mockup
   (development-plans/ui-redesign: academy-theme-2 = Programme colours, academy-theme-3 = Institution,
   academy-redesign = Dark binder). Old theme untouched; dev. has its own layer above.
   ===================================================================================================== */
/* the boxes every theme dresses (the same list as the dev. glass panes) */
:root[data-skin=colours] :is(.table-wrap, .empty, .adm-panel, .panel-card, .adm-class, .pp-class, .pulse-tile, .list-row, .scope-upload, form.new-class, form.prog-form, .file-card) {
  background: var(--surface); border-color: transparent; border-radius: 20px; box-shadow: 0 1px 2px rgba(12, 22, 32, .05), 0 14px 34px -18px rgba(12, 22, 32, .18); }
:root[data-skin=institution] :is(.table-wrap, .empty, .adm-panel, .panel-card, .adm-class, .pp-class, .pulse-tile, .list-row, .scope-upload, form.new-class, form.prog-form, .file-card) {
  background: var(--surface); border-color: transparent; border-radius: 16px; box-shadow: 0 1px 2px rgba(12, 22, 32, .06), 0 10px 28px -12px rgba(12, 22, 32, .22); }
:root[data-skin=binder] :is(.table-wrap, .empty, .adm-panel, .panel-card, .adm-class, .pp-class, .pulse-tile, .list-row, .scope-upload, form.new-class, form.prog-form, .file-card) {
  background: var(--surface); border-color: transparent; border-radius: 18px; box-shadow: none; }
:root:is([data-skin=colours], [data-skin=institution])[data-theme=dark] :is(.table-wrap, .empty, .adm-panel, .panel-card, .adm-class, .pp-class, .pulse-tile, .list-row, .scope-upload, form.new-class, form.prog-form, .file-card) { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .7); }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder]) .empty { border-style: solid; }
/* buttons and fields */
:root:is([data-skin=colours], [data-skin=binder]) :is(.btn, .chip, .seg, .seg :is(button, a)) { border-radius: 999px; }
:root[data-skin=institution] .btn { border-radius: 12px; background: #0c1620; border-color: #0c1620; }
:root[data-skin=institution] .btn:hover { background: #1b2e3f; border-color: #1b2e3f; }
:root:is([data-skin=institution], [data-skin=binder]) .btn.quiet { background: var(--well); border-color: transparent; color: var(--head); }
:root:is([data-skin=institution], [data-skin=binder]) .btn.go { background: #72dc5f; border-color: #72dc5f; color: #10220c; }
:root:is([data-skin=institution], [data-skin=binder])[data-theme=dark] .btn.quiet { background: rgba(255, 255, 255, .07); color: #eef3f8; }
:root:is([data-skin=institution], [data-skin=binder])[data-theme=dark] .btn:not(.go):not(.quiet):not(.danger) { background: #2a4258; border-color: #2a4258; color: #fff; }
:root[data-skin=institution] { --well: #f2f5f8; } :root[data-skin=institution][data-theme=dark] { --well: #182633; }
:root[data-skin=binder] { --well: #e4e9f1; } :root[data-skin=binder][data-theme=dark] { --well: #213140; }
:root[data-skin=colours] { --well: #f1f4f8; } :root[data-skin=colours][data-theme=dark] { --well: #151e28; }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder]) :is(input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input:not([type]), select, textarea) { border-radius: 12px; }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder]) th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder]) tbody tr:hover { background: var(--well); }
:root:is([data-skin=colours], [data-skin=binder]) .toast { background: #16222e; border-left: 0; border-radius: 999px; padding: 12px 20px; }
:root[data-skin=institution] .toast { background: #0c1620; border-left-color: #72dc5f; }

/* ---------- Programme colours: the masthead takes the colour of who you are (amber for a PYP child) ---------- */
:root[data-skin=colours] { --hd-band: #16222e; --hd-soft: rgba(255, 255, 255, .84); }
:root[data-skin=colours][data-role=student] { --hd-band: #e1251b; }
:root[data-skin=colours][data-role=teacher] { --hd-band: #2f74b5; }
:root[data-skin=colours][data-theme=dark] { --hd-band: #1b2e3f; }
:root[data-skin=colours][data-theme=dark][data-role=student] { --hd-band: #a5190f; }
:root[data-skin=colours][data-theme=dark][data-role=teacher] { --hd-band: #1f5288; }
:root[data-skin=colours] .ins-head { --ins-band: var(--hd-band); --ins-soft: rgba(255, 255, 255, .84); }
:root[data-skin=colours] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header, .ins-head, .bd-head) {
  background-image: radial-gradient(circle at 92% -20%, rgba(255, 255, 255, .16) 0 18%, transparent 18.2%), radial-gradient(circle at 80% 130%, rgba(0, 0, 0, .10) 0 22%, transparent 22.2%); }
:root[data-skin=colours] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header, .bd-head) h1.dot::after { color: #fff; opacity: .6; }
:root[data-skin=colours] .ins-head .ins-dot { background: #fff; opacity: .6; }
:root[data-skin=colours] .ins-chips span:first-child { background: #fff; color: #16222e; }
:root[data-skin=colours] .btn.go { background: var(--hd-band); border-color: var(--hd-band); color: #fff; }
:root[data-skin=colours] .kd-hello { background: #f5a800; color: #241800; }
:root[data-skin=colours] .kd-hello::after { background: radial-gradient(circle at 95% -10%, rgba(255, 255, 255, .3) 0 20%, transparent 20.2%); }
:root[data-skin=colours] .kd-hello h1 { color: #241800; } :root[data-skin=colours] .kd-hello p { color: rgba(36, 24, 0, .82); }
:root[data-skin=colours] .kd-stars { background: rgba(255, 255, 255, .35); box-shadow: none; } :root[data-skin=colours] .kd-stars b { color: #241800; } :root[data-skin=colours] .kd-stars span { color: rgba(36, 24, 0, .8); }
/* notes tinted by their programme; unit cards white with a block of the programme's colour on top */
:root[data-skin=colours] .td2-note:not(.td2-add) { --t: 0deg; background: color-mix(in srgb, var(--prog, #5d6b85) 11%, var(--surface)); color: var(--head); border-radius: 22px; box-shadow: none; }
:root[data-skin=colours] .td2-note:not(.td2-add):hover { background: color-mix(in srgb, var(--prog, #5d6b85) 17%, var(--surface)); }
:root[data-skin=colours] .td2-pin { display: none; }
:root[data-skin=colours] .td2-tick { border-radius: 999px; background: var(--surface); }
:root[data-skin=colours] .td2-unit { padding-top: 112px; border: 0; box-shadow: 0 1px 2px rgba(12, 22, 32, .05), 0 14px 34px -18px rgba(12, 22, 32, .18); }
:root[data-skin=colours] .td2-spine { right: 0; bottom: auto; width: auto; height: 96px; overflow: hidden; }
:root[data-skin=colours] .td2-spine::after { content: ''; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
:root[data-skin=colours] .td2-grade { top: 8px; right: 16px; color: #fff; font-size: 4.6rem; z-index: 1; }
:root[data-skin=colours] .td2-unit.prog-pyp .td2-grade { color: #241800; }
:root[data-skin=colours] .td2-day li.now { background: color-mix(in srgb, var(--hd-band) 10%, var(--surface)); }

/* ---------- Institution: deep ink masthead, raised white surfaces, memos with a folded corner, dark unit plates ---------- */
:root[data-skin=institution] .td2-note:not(.td2-add) { --t: 0deg; background: var(--well); color: var(--head); border-radius: 14px 30px 14px 14px; box-shadow: none; }
:root[data-skin=institution] .td2-note:not(.td2-add):hover { background: var(--surface); box-shadow: 0 1px 2px rgba(12, 22, 32, .06), 0 10px 28px -12px rgba(12, 22, 32, .22); transform: translateY(-3px); }
:root[data-skin=institution] .td2-pin { left: auto; right: 0; top: 0; margin: 0; width: 30px; height: 30px; border-radius: 0 14px 0 10px; box-shadow: none; background: linear-gradient(225deg, var(--paper) 50%, var(--prog, #5a6879) 50%); }
:root[data-skin=institution] .td2-kind { color: var(--prog, #5a6879); opacity: 1; }
:root[data-skin=institution] .td2-note.prog-own .td2-kind { color: #5a6879; }
:root[data-skin=institution][data-theme=dark] .td2-note.prog-own .td2-kind { color: #a9bccd; }
:root[data-skin=institution] .td2-tick { border-radius: 10px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: #1f8a57; opacity: 1; }
:root[data-skin=institution] .td2-unit { background: #0c1620; border: 0; color: #a9bccd; }
:root[data-skin=institution] .td2-unit strong { color: #fff; }
:root[data-skin=institution] .td2-unit :is(.td2-where, .td2-meta, .td2-next) { color: #a9bccd; }
:root[data-skin=institution] .td2-grade { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--prog) 70%, white 10%); }
:root[data-skin=institution] .td2-meter i { background: rgba(255, 255, 255, .12); }
:root[data-skin=institution] .td2-meter i.on { background: var(--prog); }
:root[data-skin=institution] .td2-day ul { position: relative; }
:root[data-skin=institution] .td2-day ul::before { content: ''; position: absolute; left: 84px; top: 18px; bottom: 18px; width: 2px; background: var(--line); }
:root[data-skin=institution] .td2-day li { position: relative; grid-template-columns: 58px minmax(0, 1fr); gap: 34px; box-shadow: none !important; }
:root[data-skin=institution] .td2-day li::before { content: ''; position: absolute; left: 79px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px #2f74b5; }
:root[data-skin=institution] .td2-day time { text-align: right; }
:root[data-skin=institution] .td2-day li.now { background: var(--well); border-radius: 14px; }
:root[data-skin=institution] .td2-day li.now::before { background: #72dc5f; box-shadow: 0 0 0 4px rgba(114, 220, 95, .25); }
:root[data-skin=institution] .kd-hello { background: #0c1620; }

/* ---------- Dark binder: the page head on the paper (no band), paper notes held by tape, white unit cards with a coloured spine ---------- */
:root[data-skin=binder] .ins-head { background: none; color: var(--head); padding: 6px 0 4px; margin: 0 0 6px; overflow: visible; }
:root[data-skin=binder] .ins-head h1 { color: var(--head); font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
:root[data-skin=binder] .ins-head p { color: var(--muted) !important; font-size: 1.06rem; }
:root[data-skin=binder] .ins-trail { color: var(--muted); }
:root[data-skin=binder] .ins-trail a { color: var(--head); background: var(--well); }
:root[data-skin=binder] .ins-chips span { background: var(--well); color: var(--head); }
:root[data-skin=binder] .ins-chips span:first-child { background: #72dc5f; color: #10220c; }
:root[data-skin=binder] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header) h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
:root[data-skin=binder] .td2-note:not(.td2-add) { border-radius: 3px 3px 18px 3px; box-shadow: 0 10px 16px -12px rgba(30, 30, 10, .45); }
:root[data-skin=binder] .td2-pin { left: 50%; top: -9px; width: 74px; height: 20px; margin-left: -37px; border-radius: 2px; transform: rotate(-2deg); opacity: .85; box-shadow: none; }
:root[data-skin=binder] .td2-unit { border: 0; padding-left: 64px; }
:root[data-skin=binder] .td2-spine { width: 46px; }
:root[data-skin=binder] .td2-grade { color: color-mix(in srgb, var(--prog) 22%, var(--surface)); font-size: 3.4rem; top: 6px; }
:root[data-skin=binder] .td2-meter { gap: 0; background: var(--well); border-radius: 4px; overflow: hidden; }
:root[data-skin=binder] .td2-meter i { border-radius: 0; background: transparent; height: 8px; }
:root[data-skin=binder] .td2-meter i.on { background: var(--prog); }
:root[data-skin=binder] .td2-day ul { background: var(--surface); border-radius: 18px; padding: 8px 0; }
:root[data-skin=binder] .td2-day li { position: relative; border-radius: 0; padding-left: 20px; }
:root[data-skin=binder] .td2-day li + li { box-shadow: inset 0 1px 0 var(--well); }
:root[data-skin=binder] .td2-day li::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #0077c8; }
:root[data-skin=binder] .td2-day li.now { background: #dcecf8; }
:root[data-skin=binder][data-theme=dark] .td2-day li.now { background: #10304a; }
:root[data-skin=binder] .kd-hello { background: #16222e; }
/* contrast fixes for the three themes, found by the measure on the real pages */
:root[data-skin=colours] { --hd-soft: #ffffff; }
:root[data-skin=colours][data-role=student] { --hd-band: #d01f16; }
:root[data-skin=colours][data-role=teacher] { --hd-band: #2a69a6; }
:root[data-skin=colours] .ins-head { --ins-soft: #ffffff; }
:root[data-skin=colours] :is(main > .page-head, .main > header:not(.ins-head), .bd-head) .btn:not(.go) { background: rgba(0, 0, 0, .16); border-color: rgba(255, 255, 255, .45); }
:root[data-skin=colours] .side nav .nav-label { color: #5a6879; }
:root[data-skin=colours] .side .foot .who { color: var(--head); border-bottom-color: var(--line); }
:root[data-skin=colours] .side .foot small { color: var(--muted); }
:root[data-skin=colours] .top .tab-group.training { color: #8a5a00; }
:root[data-skin=colours][data-theme=dark] .top .tab-group.training { color: #ffd76a; }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder]) .site-foot { color: var(--muted); }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder]) .tile-top .due.over { color: #b3381b; }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder])[data-theme=dark] .tile-top .due.over { color: #ff9b85; }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder]) .btn.danger { color: #b3381b; }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder])[data-theme=dark] .btn.danger { color: #ff9b85; border-color: rgba(255, 155, 133, .45); }
:root:is([data-skin=colours], [data-skin=institution], [data-skin=binder]) .btn.danger:is(:hover, .armed) { color: #fff; }
:root[data-skin]:not([data-skin=old]) .top .bell b { background: #c8401f; }
:root[data-skin=institution] .td2-kind { color: color-mix(in srgb, var(--prog, #5a6879) 72%, #000); }
:root[data-skin=institution][data-theme=dark] .td2-kind { color: color-mix(in srgb, var(--prog, #a9bccd) 50%, #fff); }
:root[data-skin=colours][data-theme=dark] .side nav .nav-label { color: #93a4b6; }
:root[data-skin=institution] .btn.danger { background: transparent; border-color: #f0c4b7; }
:root[data-skin=institution] .btn.danger:is(:hover, .armed) { background: #c8401f; border-color: #c8401f; }
:root[data-skin=dev] .td2-note.prog-own .td2-kind { color: #17724a; }
:root[data-skin=dev][data-theme=dark] .td2-kind { color: color-mix(in srgb, var(--prog, #72dc5f) 50%, #fff); }
:root[data-skin=dev][data-theme=dark] .td2-note.prog-own .td2-kind { color: #72dc5f; }

/* the details of the approved mockup (owner 2026-10-19: "nothing of the inner content looks like the approved model"):
   the date on the masthead, icons in the bar, a chip on each line of the day, icons on the notes, the report as a band */
.ins-date { position: absolute; right: 30px; bottom: 34px; z-index: 1; text-align: right; color: var(--ins-soft, #b9c6d4); font-size: .95rem; }
.ins-date b { display: block; font: 700 1.45rem/1.1 var(--display); color: #fff; letter-spacing: -0.02em; }
:root:is([data-skin=old], :not([data-skin])) .ins-date { display: none; }
:root[data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main.wrap > .td2-head:first-child, .main > .ins-head) .ins-date { bottom: 104px; }
:root[data-skin=binder] .ins-date { position: static; text-align: left; color: var(--muted); }
:root[data-skin=binder] .ins-date b { color: var(--head); display: inline; margin-right: 6px; font-size: 1.1rem; }
@media (max-width: 760px) { .ins-date { position: static; text-align: left; } :root[data-skin]:not([data-skin=old]) .ins-date b { display: inline; margin-right: 6px; font-size: 1.05rem; } }
/* icons in the bar of the new layout */
:root[data-layout=model1] .top .tabs :is(a, .tab-group) { display: inline-flex; align-items: center; gap: 8px; }
:root[data-layout=model1] .top .tabs .tab-ico { flex: none; opacity: .85; transform: none !important; transition: none; }
:root[data-layout=model1] .top .tabs :is(a, .tab-group)[aria-current=page] .tab-ico { opacity: 1; color: #72dc5f; }
:root[data-layout=model1][data-skin=colours] .top .tabs :is(a, .tab-group)[aria-current=page] .tab-ico { color: var(--hd-band); }
:root[data-layout=model1]:is([data-skin=old], :not([data-skin])) .top .tabs :is(a, .tab-group)[aria-current=page] .tab-ico { color: currentColor; }
@media (max-width: 640px) { :root[data-layout=model1] .top .tabs :is(a, .tab-group) { flex-direction: column; gap: 3px; font-size: .75rem; padding: 6px 8px; } :root[data-layout=model1] .top .tabs :is(a, .tab-group) em { display: none; } }
/* each line of the day: the time, what it is, a chip of when */
.td2-day li { grid-template-columns: 64px minmax(0, 1fr) auto; }
:root:is([data-skin=dev], [data-skin=institution]) .td2-day li { grid-template-columns: 58px minmax(0, 1fr) auto; }
.td2-chip { font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: var(--well, #eef1f6); color: var(--text); white-space: nowrap; }
.td2-day li.now .td2-chip { background: #16222e; color: #fff; }
:root[data-skin=dev] .td2-chip { border-radius: 999px; background: rgba(15, 79, 44, .08); color: #1e3127; }
:root[data-skin=dev] .td2-day li.now .td2-chip { background: #72dc5f; color: #0c2a12; }
:root[data-skin=dev][data-theme=dark] .td2-chip { background: rgba(255, 255, 255, .08); color: #cfe2d3; }
:root[data-skin=colours] .td2-day li.now .td2-chip { background: var(--hd-band); color: #fff; }
:root[data-skin=binder] .td2-day li.now .td2-chip { background: #0077c8; color: #fff; }
:root[data-theme=dark] .td2-chip { color: #e6eef6; }
@media (max-width: 640px) { .td2-day li { grid-template-columns: 58px minmax(0, 1fr); } .td2-chip { grid-column: 2; justify-self: start; } }
/* icons on the notes */
.td2-kind { display: inline-flex; align-items: center; gap: 6px; }
.td2-when { display: inline-flex; align-items: center; gap: 5px; }
.btn svg { flex: none; }
/* the full school report: a band of the theme, as in the mockup */
:root[data-skin]:not([data-skin=old]) .ins-report { position: relative; overflow: hidden; background: var(--hd-band) !important; color: #fff; border: 0; }
:root[data-skin]:not([data-skin=old]) .ins-report::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 140% at 100% 50%, rgba(114, 220, 95, .18), transparent 60%); }
:root[data-skin]:not([data-skin=old]) .ins-report > * { position: relative; z-index: 1; }
:root[data-skin]:not([data-skin=old]) .ins-report h2 { color: #fff; }
:root[data-skin]:not([data-skin=old]) .ins-report p { color: var(--hd-soft, #b9c6d4); }
:root[data-skin]:not([data-skin=old]) .ins-report .btn.go { background: #72dc5f; border-color: #72dc5f; color: #0c2a12; box-shadow: 0 8px 22px -10px rgba(114, 220, 95, .9); }
:root[data-skin=colours] .ins-report .btn.go { background: #fff; border-color: #fff; color: #16222e; box-shadow: none; }
/* the bar never pushes the page wider than the screen: its sections shrink and scroll inside it; their icons only where there is room */
@media (min-width: 641px) { :root[data-layout=model1] .top .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } :root[data-layout=model1] .top .tabs::-webkit-scrollbar { display: none; } }

/* the new layout's bar, as in the mockup: Find, the bell and the person's picture; the rest lives in the picture's menu */
.me-menu { position: relative; }
.me-menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer; font: 600 .9rem var(--body); color: inherit; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.me-menu > summary::-webkit-details-marker { display: none; }
.me-menu > summary .avatar { width: 32px; height: 32px; }
.me-menu > summary svg { opacity: .75; transition: transform .2s; }
.me-menu[open] > summary svg { transform: rotate(180deg); }
.me-menu > summary:focus-visible { outline: 3px solid #72dc5f; outline-offset: 2px; }
:root:is([data-skin=old], [data-skin=colours], :not([data-skin])) .me-menu > summary { background: var(--surface); border-color: var(--line); color: var(--head); }
.me-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 280px; padding: 8px; display: grid; gap: 2px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(10, 20, 30, .45); animation: me-pop .18s cubic-bezier(.2, 1, .4, 1); }
@keyframes me-pop { from { opacity: 0; transform: translateY(-6px); } }
.me-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.me-head .avatar { width: 40px; height: 40px; }
.me-head strong { display: block; color: var(--head); font-size: .95rem; }
.me-head small { color: var(--muted); font-size: .8rem; }
.me-pop :is(a, button) { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--text); font: 500 .92rem var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.me-pop :is(a, button):hover, .me-pop :is(a, button):focus-visible { background: var(--paper); color: var(--head); outline: none; }
.me-pop svg { flex: none; color: var(--muted); }
.me-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.me-pop button:last-child { color: #b3381b; } .me-pop button:last-child svg { color: currentColor; }
:root[data-theme=dark] .me-pop button:last-child { color: #ff9b85; }
:root[data-skin=dev] .me-pop { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-color: rgba(255, 255, 255, .9); }
:root[data-skin=dev][data-theme=dark] .me-pop { background: rgba(12, 40, 24, .92); border-color: rgba(160, 240, 170, .16); }
:root[data-skin=dev] .me-pop :is(a, button):hover { background: rgba(114, 220, 95, .14); }
:root[data-skin=dev] .me-pop :is(a, button):hover svg { color: #1f8a57; }
@media (max-width: 640px) { .me-menu > summary strong { display: none; } .me-pop { position: fixed; right: 10px; left: 10px; width: auto; top: 64px; } }
:root .top .me-pop .me-head strong { color: var(--head); }
:root .top .me-pop .me-head small { color: var(--muted); }

/* =====================================================================================================
   Phase C2, the dashboard's own components in the new design (every theme but Old):
   a class is a plate in its programme's colour with the grade drawn large; a person is a card with a ring of presence.
   ===================================================================================================== */
.plate.prog-pyp { --prog: #f5a800; } .plate.prog-myp { --prog: #e1251b; } .plate.prog-iq { --prog: #0077c8; } .plate.prog-v5 { --prog: #d22630; } .plate.prog-own { --prog: #72dc5f; }
.plate-grade { display: none; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate { position: relative; overflow: hidden; min-height: 200px; padding: 20px 22px 18px 30px; gap: 12px; border: 0; border-radius: 24px; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--prog); }
:root:where([data-skin]:not([data-skin=old])) .plate-grade { display: block; position: absolute; right: 16px; top: -4px; font: 800 6rem/1 var(--display); letter-spacing: -0.06em; pointer-events: none; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate > :not(.plate-grade) { position: relative; z-index: 1; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate > header > div { max-width: 72%; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate .klass-nums { display: flex; gap: 22px; margin-top: auto; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate .klass-nums div { display: grid; padding: 0; background: none; border-radius: 0; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate .klass-nums b { font-size: 1.5rem; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate:hover { transform: translateY(-4px); }
/* dev.: deep green plates, glass edge, the grade outlined in the programme's colour */
:root[data-skin=dev] .adm-class.compact.plate { background: linear-gradient(160deg, rgba(20, 94, 53, .92), rgba(12, 63, 35, .96)); color: #c3e6cb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 40px -20px rgba(8, 50, 25, .55); }
:root[data-skin=dev] .adm-class.compact.plate::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--prog) 24%, transparent), transparent 55%); }
:root[data-skin=dev] .adm-class.compact.plate :is(h3, .klass-nums b) { color: #fff; }
:root[data-skin=dev] .adm-class.compact.plate :is(small, .klass-nums span, .klass-books, .klass-books b) { color: #b8dcc0; }
:root[data-skin=dev] .adm-class.compact.plate .chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
:root[data-skin=dev] .plate-grade { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--prog) 75%, white 10%); opacity: .8; }
/* institution: ink plates */
:root[data-skin=institution] .adm-class.compact.plate { background: #0c1620; color: #a9bccd; box-shadow: 0 1px 2px rgba(12, 22, 32, .06), 0 10px 28px -12px rgba(12, 22, 32, .32); }
:root[data-skin=institution] .adm-class.compact.plate :is(h3, .klass-nums b) { color: #fff; }
:root[data-skin=institution] .adm-class.compact.plate :is(small, .klass-nums span, .klass-books, .klass-books b) { color: #a9bccd; }
:root[data-skin=institution] .adm-class.compact.plate .chip { background: rgba(255, 255, 255, .1); color: #fff; border-color: transparent; }
:root[data-skin=institution] .plate-grade { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--prog) 70%, white 10%); opacity: .8; }
/* colours: white cards with a block of the programme's colour on top, the grade white on it */
:root[data-skin=colours] .adm-class.compact.plate { padding-top: 104px; padding-left: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(12, 22, 32, .05), 0 14px 34px -18px rgba(12, 22, 32, .18); }
:root[data-skin=colours] .adm-class.compact.plate::before { right: 0; bottom: auto; width: auto; height: 88px; }
:root[data-skin=colours] .plate-grade { color: #fff; font-size: 4.6rem; top: 8px; }
:root[data-skin=colours] .plate.prog-pyp .plate-grade, :root[data-skin=colours] .plate.prog-own .plate-grade { color: #241800; }
/* binder: white cards, a wide spine, the grade soft in the programme's colour */
:root[data-skin=binder] .adm-class.compact.plate { padding-left: 64px; background: var(--surface); }
:root[data-skin=binder] .adm-class.compact.plate::before { width: 46px; }
:root[data-skin=binder] .plate-grade { color: color-mix(in srgb, var(--prog) 22%, var(--surface)); font-size: 4rem; top: 6px; }
:root:is([data-skin=colours], [data-skin=binder]) .adm-class.compact.plate .klass-nums b { color: var(--head); }
/* dark mode keeps the plates readable */
:root[data-skin=dev][data-theme=dark] .adm-class.compact.plate { background: linear-gradient(160deg, rgba(26, 84, 52, .7), rgba(10, 40, 24, .85)); border: 1px solid rgba(160, 240, 170, .18); }

/* people: a card each, the initials in a soft square, a ring that glows when the person is on the site */
:root:where([data-skin]:not([data-skin=old])) .pp-person { border-radius: 18px; padding: 12px 14px; gap: 12px; transition: transform .18s, box-shadow .18s; }
:root:where([data-skin]:not([data-skin=old])) .pp-person:hover { transform: translateY(-2px); }
:root:where([data-skin]:not([data-skin=old])) .pp-person .person-avatar { width: 42px; height: 42px; border-radius: 14px; font-size: .95rem; }
:root:where([data-skin]:not([data-skin=old])) .pp-person.on .person-avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #72dc5f; }
:root:where([data-skin]:not([data-skin=old])) .pp-person .pp-dot { width: 9px; height: 9px; border-radius: 3px; }
:root:where([data-skin]:not([data-skin=old])) .pp-person.on .pp-dot { background: #72dc5f; box-shadow: 0 0 8px rgba(114, 220, 95, .8); }
:root[data-skin=dev] .pp-person { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 24px -18px rgba(10, 60, 30, .35); }
:root[data-skin=dev][data-theme=dark] .pp-person { background: rgba(255, 255, 255, .05); border-color: rgba(160, 240, 170, .14); }
:root[data-skin=dev] .pp-person .person-avatar { background: #0f4f2c; color: #fff; }
:root[data-skin=dev] .pp-person .person-avatar.teacher { background: #72dc5f; color: #0c2a12; }
:root:where([data-skin]:not([data-skin=old])) .plate-grade { z-index: 1; }
/* the grade sits low on the right, clear of the status chip; on Programme colours it stays on the coloured block */
:root:where([data-skin]:not([data-skin=old])) .plate-grade { top: auto; bottom: -14px; right: 14px; }
:root[data-skin=colours] .plate-grade { top: 8px; bottom: auto; }
:root:where([data-skin]:not([data-skin=old])) .adm-class.compact.plate :is(.klass-books, .klass-nums, .klass-flag) { max-width: 74%; }
:root[data-skin=colours] .adm-class.compact.plate :is(.klass-books, .klass-nums, .klass-flag) { max-width: none; }
:root[data-skin=binder] .plate-grade { top: auto; bottom: -10px; }

/* =====================================================================================================
   Phase C2b, the rest of the dashboard's pieces in the new design (every theme but Old):
   the waiting counts and the performance figures as big numbers on soft tiles (the mockup's signals),
   empty places that say so kindly, books on the shelf with the edge of their pages, section titles with the dot.
   ===================================================================================================== */
/* the counts at the top of Approvals: a big number, the word under it; a tile with something waiting is marked */
:root:where([data-skin]:not([data-skin=old])) .queue { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
:root:where([data-skin]:not([data-skin=old])) .queue div { display: grid; gap: 2px; align-content: start; padding: 16px 18px; border: 0; border-radius: 18px; background: var(--well, var(--paper)); color: var(--muted); font-size: .86rem; }
:root:where([data-skin]:not([data-skin=old])) .queue b { display: block; min-width: 0; height: auto; padding: 0; background: none; color: var(--head); font: 800 2.1rem/1 var(--display); letter-spacing: -0.03em; place-items: unset; }
:root:where([data-skin]:not([data-skin=old])) .queue .has { position: relative; color: var(--head); box-shadow: inset 0 0 0 2px #f5a800; }
:root:where([data-skin]:not([data-skin=old])) .queue .has b { background: none; color: var(--head); }
:root:where([data-skin]:not([data-skin=old])) .queue .has::after { content: ''; position: absolute; right: 14px; top: 14px; width: 10px; height: 10px; border-radius: 3px; background: #f5a800; box-shadow: 0 0 0 4px rgba(245, 168, 0, .2); }
:root[data-skin=dev] .queue div { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 24px -18px rgba(10, 60, 30, .35); }
:root[data-skin=dev][data-theme=dark] .queue div { background: rgba(255, 255, 255, .05); border-color: rgba(160, 240, 170, .14); }
/* performance figures: no side stripe; a soft tile, the number large, a small dot in the figure's colour before its name */
:root:where([data-skin]:not([data-skin=old])) .pulse-tile { padding: 16px 18px; border: 0; border-radius: 18px; background: var(--well, var(--paper)); }
:root:where([data-skin]:not([data-skin=old])) .pulse-tile::before { inset: auto; left: 18px; top: 20px; width: 0; height: 0; display: none; }
:root:where([data-skin]:not([data-skin=old])) .pulse-tile b { font: 800 1.9rem/1.05 var(--display); letter-spacing: -0.03em; }
:root:where([data-skin]:not([data-skin=old])) .pulse-tile span { display: inline-flex; align-items: center; gap: 7px; }
:root:where([data-skin]:not([data-skin=old])) .pulse-tile span::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--tone); }
:root[data-skin=dev] .pulse-tile { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 24px -18px rgba(10, 60, 30, .35); }
:root[data-skin=dev][data-theme=dark] .pulse-tile { background: rgba(255, 255, 255, .05); border-color: rgba(160, 240, 170, .14); }
/* an empty place says so kindly: a soft tile with a calm tick, centred */
:root:where([data-skin]:not([data-skin=old])) .empty { position: relative; max-width: none; padding: 22px 22px 22px 64px; border: 0; border-radius: 18px; background: var(--well, var(--paper)); color: var(--muted); }
:root:where([data-skin]:not([data-skin=old])) .empty::before { content: ''; position: absolute; left: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 10px; background: color-mix(in srgb, #72dc5f 22%, transparent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
:root:where([data-skin]:not([data-skin=old])) .empty strong { color: var(--head); }
:root[data-skin=dev] .empty { background: rgba(255, 255, 255, .5); border: 1px dashed rgba(15, 79, 44, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; }
:root[data-skin=dev][data-theme=dark] .empty { background: rgba(255, 255, 255, .04); border-color: rgba(160, 240, 170, .16); }
/* books on the dashboard's shelf: the edge of their pages shows behind the cover, the shelf heads read as sections */
:root:where([data-skin]:not([data-skin=old])) .bk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 26px; }
:root:where([data-skin]:not([data-skin=old])) .bk-cover { overflow: visible; border-radius: 2px 6px 6px 2px; box-shadow: 4px 0 0 -1px #fbfaf6, 5px 0 0 -1px #d9d4c8, 8px 0 0 -2px #fbfaf6, 9px 0 0 -2px #cfc9bb, 0 16px 26px -14px rgba(10, 30, 20, .55); }
:root:where([data-skin]:not([data-skin=old])) .bk-cover img { border-radius: 2px 6px 6px 2px; }
:root:where([data-skin]:not([data-skin=old])) .bk-cover::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .18) 3%, rgba(0, 0, 0, .08) 6%, transparent 10%); }
:root:where([data-skin]:not([data-skin=old])) .bk-title { font: 700 .98rem/1.25 var(--display); color: var(--head); }
:root:where([data-skin]:not([data-skin=old])) .bk-prog > header { border-bottom: 0; padding-bottom: 4px; }
:root:where([data-skin]:not([data-skin=old])) .bk-prog h2 { font-size: 1.6rem; }
:root:where([data-skin]:not([data-skin=old])) .bk-count { padding: 3px 10px; border-radius: 999px; background: var(--well, var(--paper)); font-weight: 600; }
:root:where([data-skin]:not([data-skin=old])) .bk-grade h3 { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--well, var(--paper)); color: var(--head); font-size: .85rem; }
/* the titles of the dashboard's sections end with the dev. dot */
:root[data-skin=dev] .main > h2:not(.dot)::after, :root[data-skin=dev] .main > section > h2:not(.dot)::after { content: ''; display: inline-block; width: .22em; height: .22em; margin-left: .08em; border-radius: 32%; background: #72dc5f; }
:root:where([data-skin]:not([data-skin=old])) .main > h2 { font-size: 1.35rem; margin-top: 10px; }

/* =====================================================================================================
   Phase C3, the teacher's pages in the new design (every theme but Old):
   a class is a plate until it is opened; a programme's tasks sit in one pane under a calm head with the programme's
   dot; a task is a card pinned by the dot of its kind; the marks and reports heads are the theme's band.
   ===================================================================================================== */
/* the teacher's classes: closed, a plate like the dashboard's */
:root:where([data-skin]:not([data-skin=old])) .klass.plate:not(.shown) { position: relative; overflow: hidden; border: 0; border-radius: 24px; }
:root:where([data-skin]:not([data-skin=old])) .klass.plate:not(.shown)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--prog); }
:root:where([data-skin]:not([data-skin=old])) .klass.plate:not(.shown) .klass-head { position: relative; z-index: 1; border-left: 0; padding: 22px 26px 22px 32px; min-height: 140px; align-items: flex-end; }
:root:where([data-skin]:not([data-skin=old])) .klass.plate:not(.shown) .klass-head h2 { font-size: 1.5rem; }
:root:where([data-skin]:not([data-skin=old])) .klass.plate:not(.shown) .klass-head .grow { max-width: 60%; }
:root:where([data-skin]:not([data-skin=old])) .klass.plate:not(.shown) .plate-grade { z-index: 0; }
:root[data-skin=dev] .klass.plate:not(.shown) { background: linear-gradient(160deg, rgba(20, 94, 53, .92), rgba(12, 63, 35, .96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 40px -20px rgba(8, 50, 25, .55); }
:root[data-skin=dev] .klass.plate:not(.shown) :is(h2, .klass-stats b, .klass-open) { color: #fff; }
:root[data-skin=dev] .klass.plate:not(.shown) :is(.grow span, .klass-stats span) { color: #b8dcc0; }
:root[data-skin=dev] .klass.plate:not(.shown) .chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
:root[data-skin=institution] .klass.plate:not(.shown) { background: #0c1620; }
:root[data-skin=institution] .klass.plate:not(.shown) :is(h2, .klass-stats b, .klass-open) { color: #fff; }
:root[data-skin=institution] .klass.plate:not(.shown) :is(.grow span, .klass-stats span) { color: #a9bccd; }
:root[data-skin=institution] .klass.plate:not(.shown) .chip { background: rgba(255, 255, 255, .1); color: #fff; border-color: transparent; }
:root[data-skin=colours] .klass.plate:not(.shown) { background: var(--surface); box-shadow: 0 1px 2px rgba(12, 22, 32, .05), 0 14px 34px -18px rgba(12, 22, 32, .18); }
:root[data-skin=colours] .klass.plate:not(.shown)::before { right: 0; bottom: auto; width: auto; height: 10px; }
:root[data-skin=colours] .klass.plate:not(.shown) .plate-grade { color: color-mix(in srgb, var(--prog) 30%, var(--surface)); }
:root[data-skin=binder] .klass.plate:not(.shown) { background: var(--surface); }
:root[data-skin=binder] .klass.plate:not(.shown)::before { width: 46px; }
:root[data-skin=binder] .klass.plate:not(.shown) .klass-head { padding-left: 70px; }
:root[data-skin=binder] .klass.plate:not(.shown) .plate-grade { color: color-mix(in srgb, var(--prog) 22%, var(--surface)); font-size: 4.4rem; }
:root[data-skin]:not([data-skin=old]) .klass.shown { border-radius: 24px; }
/* a programme's tasks: one calm pane, the programme as a head with its logo and dot, not a loud band (Programme colours keeps its band) */
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder]) .prog-zone { border: 0; border-radius: 26px; padding-bottom: 22px; }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder]) .prog-band { position: relative; background: none; color: var(--head); padding-top: 18px; padding-bottom: 6px; }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder]) .prog-band::after { content: ''; position: absolute; left: clamp(14px, 3vw, 24px); right: clamp(14px, 3vw, 24px); bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--tone) 0 64px, var(--line) 64px); }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder]) .prog-band h2 { color: var(--head); font-size: 1.4rem; }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder]) .prog-band small { color: var(--tone); opacity: 1; }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder]) .prog-band .logo { box-shadow: 0 0 0 1px var(--line); }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder]) .prog-band .count { background: var(--well, var(--paper)); color: var(--head); }
:root[data-skin=dev] .prog-zone { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 36px -22px rgba(10, 60, 30, .3); }
:root[data-skin=dev][data-theme=dark] .prog-zone { background: rgba(22, 58, 38, .4); box-shadow: inset 0 0 0 1px rgba(160, 240, 170, .14); }
:root[data-skin=dev][data-theme=dark] .prog-band small { color: color-mix(in srgb, var(--tone) 55%, #fff); }
:root:is([data-skin=institution], [data-skin=binder]) .prog-zone { background: var(--surface); box-shadow: 0 1px 2px rgba(12, 22, 32, .06), 0 10px 28px -12px rgba(12, 22, 32, .18); }
/* a task: a card pinned by the dot of its kind, no coloured top line */
:root:where([data-skin]:not([data-skin=old])) .task-tile { --kind: #2f74b5; position: relative; border: 0; border-top: 0; border-radius: 20px; padding: 18px 18px 16px; }
:root:where([data-skin]:not([data-skin=old])) .task-tile.summative { --kind: #e1251b; } :root:where([data-skin]:not([data-skin=old])) .task-tile.quiz { --kind: #8a3fc9; } :root:where([data-skin]:not([data-skin=old])) .task-tile.practice { --kind: var(--practice); }
:root:where([data-skin]:not([data-skin=old])) .task-tile::after { content: ''; position: absolute; right: 16px; top: 16px; width: 11px; height: 11px; border-radius: 32%; background: var(--kind); box-shadow: 0 0 0 5px color-mix(in srgb, var(--kind) 16%, transparent); }
:root:where([data-skin]:not([data-skin=old])) .task-tile .tile-top { padding-right: 26px; }
:root[data-skin=dev] .task-tile { background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px -18px rgba(10, 60, 30, .35); }
:root[data-skin=dev][data-theme=dark] .task-tile { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(160, 240, 170, .12); }
:root:is([data-skin=institution], [data-skin=binder], [data-skin=colours]) .task-tile { background: var(--well, var(--paper)); }
/* Marks and Reports: their tabs sit on the band, and the head under them is the band too */
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main.wrap > .marks-nav:first-child { margin-top: calc(-1 * clamp(24px, 5vw, 56px)); margin-bottom: 0; padding-top: 22px; background: var(--hd-band); box-shadow: 0 0 0 100vmax var(--hd-band); clip-path: inset(0 -100vmax); }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main.wrap > .marks-nav:first-child a { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main.wrap > .marks-nav:first-child a[aria-current=page] { background: #fff; border-color: #fff; color: #0d1f15; }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main.wrap > .marks-nav:first-child + :is(.page-head, .fun-hero) { margin-top: -56px; border-radius: 0; box-shadow: 0 0 0 100vmax var(--hd-band); clip-path: inset(0 -100vmax); background: var(--hd-band); }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main.wrap > .marks-nav:first-child + .fun-hero { color: var(--hd-soft); }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main.wrap > .marks-nav:first-child + .fun-hero .hero-ico { background: rgba(255, 255, 255, .12); color: #fff; }
/* the class garden takes the theme: deep green in dev., ink in Institution */
:root[data-skin=dev] .top5.garden { background: linear-gradient(160deg, #145e35, #0c3f23 70%, #0a2f1a); }
:root[data-skin=institution] .top5.garden { background: linear-gradient(160deg, #1b2e3f, #0c1620); }
/* the Reports head is the theme's band, not the old brown */
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) .fun-hero.reports { --bg: var(--hd-band); --tone: #72dc5f; color: var(--hd-soft); }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) .fun-hero.reports .hero-ico { background: rgba(255, 255, 255, .12); color: #fff; }
:root[data-skin=binder] .fun-hero.reports { --bg: #16222e; }
:root[data-skin=dev] .top5:not(.garden) { background: linear-gradient(160deg, #145e35, #0c3f23 70%, #0a2f1a); }
:root[data-skin=institution] .top5:not(.garden) { background: linear-gradient(160deg, #1b2e3f, #0c1620); }
/* the head of a student's marks board takes the theme's band (it was the old ink) */
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) .board-head { background: var(--hd-band); }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) .board-head small { color: color-mix(in srgb, #72dc5f 70%, #fff); }
:root[data-skin=colours] .board-head small { color: #fff; opacity: .85; }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) .marks-board.myp .board-head { background: var(--hd-band); box-shadow: inset 0 -5px 0 #72dc5f; }
:root:where([data-skin]:not([data-skin=old])) .klass.plate:not(.shown) .klass-stats { margin-right: 76px; }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder]) .prog-band small { color: color-mix(in srgb, var(--tone) 72%, #000); }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=binder])[data-theme=dark] .prog-band small { color: color-mix(in srgb, var(--tone) 50%, #fff); }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) .board-head .board-meta { color: #fff; }

/* =====================================================================================================
   Phase C4, the programmes and their books in the new design (every theme but Old; owner 2026-10-19):
   a programme is a plate in its own colour with its logo on a white tab; its page opens on the theme's band;
   its books stand on shelves, grade by grade, at a size a shelf can hold.
   ===================================================================================================== */
/* the programme doors of the Library */
:root:where([data-skin]:not([data-skin=old])) .doors { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
:root:where([data-skin]:not([data-skin=old])) .door { position: relative; overflow: hidden; min-height: 250px; padding: 20px 22px 18px; border: 0; border-radius: 26px; gap: 10px; }
:root:where([data-skin]:not([data-skin=old])) .door > * { position: relative; z-index: 1; }
:root:where([data-skin]:not([data-skin=old])) .door .logo { height: 44px; padding: 7px 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .45); justify-self: start; width: auto; max-width: 92%; }
:root:where([data-skin]:not([data-skin=old])) .door span.logo { display: none; }
:root:where([data-skin]:not([data-skin=old])) .door h3 { font-size: 1.35rem; letter-spacing: -0.02em; margin-top: 6px; }
:root:where([data-skin]:not([data-skin=old])) .door .count { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px; font-weight: 700; }
:root:where([data-skin]:not([data-skin=old])) .door .count::after { content: '→'; transition: transform .2s; }
:root:where([data-skin]:not([data-skin=old])) .door:hover .count::after { transform: translateX(4px); }
/* dev. and Institution: deep plates lit by the programme's colour */
:root:is([data-skin=dev], [data-skin=institution]) .door { color: #c3e6cb; background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--tone) 42%, transparent), transparent 58%), linear-gradient(160deg, #145e35, #0c3f23); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 40px -22px rgba(8, 50, 25, .6); }
:root[data-skin=institution] .door { color: #a9bccd; background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--tone) 40%, transparent), transparent 58%), #0c1620; }
:root:is([data-skin=dev], [data-skin=institution]) .door::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--tone); }
:root:is([data-skin=dev], [data-skin=institution]) .door h3 { color: #fff; }
:root:is([data-skin=dev], [data-skin=institution]) .door p { color: inherit; }
:root:is([data-skin=dev], [data-skin=institution]) .door .count { background: rgba(255, 255, 255, .12); color: #fff; }
/* Programme colours: white, with a block of the programme's colour on top carrying the logo */
:root[data-skin=colours] .door { padding-top: 0; background: var(--surface); box-shadow: 0 1px 2px rgba(12, 22, 32, .05), 0 14px 34px -18px rgba(12, 22, 32, .18); }
:root[data-skin=colours] .door .logo { margin: 18px 0 18px; }
:root[data-skin=colours] .door::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 80px; background: var(--tone); }
:root[data-skin=colours] .door .count { background: var(--well); color: var(--head); }
/* binder: white, a wide spine in the programme's colour */
:root[data-skin=binder] .door { padding-left: 66px; background: var(--surface); }
:root[data-skin=binder] .door::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 46px; background: var(--tone); }
:root[data-skin=binder] .door .count { background: var(--well); color: var(--head); }

/* a programme's own page: the head is the theme's band, lit by the programme's colour (Binder keeps its light head) */
:root[data-skin=dev] body[data-programme] { --hero-text: #fff; --hero-soft: #c3e6cb; --hero-chip: rgba(255, 255, 255, .12); --hero-bg: radial-gradient(60% 120% at 92% 0%, color-mix(in srgb, var(--tone, #72dc5f) 32%, transparent), transparent 62%), #0f4f2c; }
:root[data-skin=dev][data-theme=dark] body[data-programme] { --hero-bg: radial-gradient(60% 120% at 92% 0%, color-mix(in srgb, var(--tone, #72dc5f) 26%, transparent), transparent 62%), #0a2a18; }
:root[data-skin=institution] body[data-programme] { --hero-text: #fff; --hero-soft: #a9bccd; --hero-chip: rgba(255, 255, 255, .1); --hero-bg: radial-gradient(60% 120% at 92% 0%, color-mix(in srgb, var(--tone, #72dc5f) 28%, transparent), transparent 62%), #0c1620; }
:root[data-skin=colours] body[data-programme] { --hero-text: #fff; --hero-soft: rgba(255, 255, 255, .88); --hero-chip: rgba(0, 0, 0, .16); --hero-bg: radial-gradient(circle at 92% -20%, rgba(255, 255, 255, .16) 0 18%, transparent 18.2%), var(--tone, #16222e); }
:root[data-skin=colours] body[data-programme=pyp] { --hero-text: #241800; --hero-soft: rgba(36, 24, 0, .8); --hero-chip: rgba(255, 255, 255, .4); }
:root:is([data-skin=dev], [data-skin=institution], [data-skin=colours]) .hero { border-bottom: 0; }
:root:is([data-skin=dev], [data-skin=institution]) .hero-logos .logo { padding: 6px 10px; border-radius: 12px; background: #fff; }
:root:is([data-skin=dev], [data-skin=institution]) .hero-text h1::after { color: #72dc5f; }
:root[data-skin=dev] .hero::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: -10px; height: 64px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 120' preserveAspectRatio='none'%3E%3Cpath d='M-20 96 C 240 20, 420 120, 700 70 S 1150 6, 1400 52 S 1580 100, 1640 40' fill='none' stroke='%2372dc5f' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* its books: a grade at a time, the books standing on a shelf at a size a shelf holds */
:root:where([data-skin]:not([data-skin=old])) .grade-shelves { gap: 26px; }
:root:where([data-skin]:not([data-skin=old])) .grade-shelf { border: 0; border-radius: 26px; padding: 22px clamp(16px, 2.5vw, 30px) 26px; }
:root:where([data-skin]:not([data-skin=old])) .grade-head { gap: 14px; margin-bottom: 18px; }
:root:where([data-skin]:not([data-skin=old])) .grade-chip { padding: 8px 18px; border-radius: 14px; font-size: 1.25rem; letter-spacing: -0.01em; background: var(--grade); box-shadow: 0 8px 18px -10px var(--grade); }
:root:where([data-skin]:not([data-skin=old])) .grade-count { padding: 4px 12px; border-radius: 999px; background: var(--well, var(--paper)); color: var(--head); font-weight: 600; font-size: .88rem; }
:root:where([data-skin]:not([data-skin=old])) .grade-row + .grade-row { border-top: 0; margin-top: 22px; padding-top: 0; }
:root:where([data-skin]:not([data-skin=old])) .grade-kind { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; }
:root:where([data-skin]:not([data-skin=old])) .grade-kind span { border: 0; background: var(--well, var(--paper)); color: var(--head); }
:root:where([data-skin]:not([data-skin=old])) .grade-row .shelf { grid-template-columns: repeat(auto-fill, minmax(170px, 210px)); gap: 30px 30px; padding: 0 6px 22px; position: relative; }
:root:where([data-skin]:not([data-skin=old])) .grade-row .shelf::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: 0; height: 12px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--grade) 30%, #d9cdb6), color-mix(in srgb, var(--grade) 18%, #bfae8f)); box-shadow: 0 10px 18px -12px rgba(40, 30, 10, .6); }
:root:where([data-skin]:not([data-skin=old])) .grade-row .shelf .book-info { gap: 6px; }
:root[data-skin=dev] .grade-shelf { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 36px -22px rgba(10, 60, 30, .3); }
:root[data-skin=dev][data-theme=dark] .grade-shelf { background: rgba(22, 58, 38, .42); box-shadow: inset 0 0 0 1px rgba(160, 240, 170, .14); }
:root:is([data-skin=institution], [data-skin=binder], [data-skin=colours]) .grade-shelf { background: var(--surface); box-shadow: 0 1px 2px rgba(12, 22, 32, .05), 0 14px 34px -18px rgba(12, 22, 32, .16); }
/* the plates win over dev.'s glass panes (whose list holds form.new-class, a heavier selector) */
:root[data-skin=dev][data-skin] a.door { background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--tone) 42%, transparent), transparent 58%), linear-gradient(160deg, #145e35, #0c3f23); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 40px -22px rgba(8, 50, 25, .6); }
:root[data-skin=dev][data-theme=dark] a.door { background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 58%), linear-gradient(160deg, #1a5a35, #0a2a18); border: 1px solid rgba(160, 240, 170, .16); }
/* the bar's icons are always shown (owner); the sections stay compact so they fit beside Find, the bell, the switch and the picture */
@media (min-width: 641px) { :root[data-layout=model1] .top .tabs { gap: 2px; } :root[data-layout=model1] .top .tabs :is(a, .tab-group) { gap: 7px; padding-left: 10px; padding-right: 10px; } :root[data-layout=model1] .top .tabs .tab-ico { width: 17px; height: 17px; } }
@media (min-width: 641px) and (max-width: 1280px) { :root[data-layout=model1] .top .tabs .tab-group em { display: none; } }
/* the giant word on every page head is now built letter by letter (core.js), with its dot and its entrance: the drawn one gives way */
:root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head):has(> .ins-ghost)::before { content: none; }
:root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) > .ins-ghost { z-index: -1; top: 8px; }
/* the circles behind the page move: they drift and breathe slowly (every theme but Old) */
@keyframes bd-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, 50px) scale(1.14); } 100% { transform: translate(40px, -30px) scale(.94); } }
:root:where([data-skin]:not([data-skin=old])) .backdrop::before { animation: bd-drift 18s ease-in-out infinite alternate; }
:root:where([data-skin]:not([data-skin=old])) .backdrop::after { animation: bd-drift 22s ease-in-out infinite alternate-reverse; }
@media (prefers-reduced-motion: reduce) { :root:where([data-skin]:not([data-skin=old])) .backdrop::before, :root:where([data-skin]:not([data-skin=old])) .backdrop::after { animation: none; } }
/* on narrower screens the bar makes room for every section: Find shows only its glass, the picture loses its name
   (both keep their labels for screen readers and their tooltips); the sections never run under Find */
:root[data-layout=model1] .top .tabs { margin-right: 14px; }
@media (min-width: 641px) and (max-width: 1600px) {
  :root[data-layout=model1] .top .qf-open :is(span, kbd) { display: none; }
  :root[data-layout=model1] .top .qf-open { padding-left: 10px; padding-right: 10px; }
  :root[data-layout=model1] .me-menu > summary strong { display: none; }
}
@media (min-width: 641px) and (max-width: 1300px) { :root[data-layout=model1] .top .view-as summary { font-size: 0; gap: 0; } :root[data-layout=model1] .top .view-as summary i { margin: 0; } }

/* sticky notes that look like notes (owner 2026-10-19: "a colour a little different from the background, and the shape of a note"):
   dev. — the board is a pinboard with fine dots; each note is paper tinted by its programme (your own: light green),
   a folded corner at the bottom, a slight tilt, the programme's pin on top */
:root[data-skin=dev] .td2-board { background: radial-gradient(circle, rgba(15, 79, 44, .10) 1px, transparent 1.6px) 0 0 / 18px 18px, rgba(236, 245, 232, .78); }
:root[data-skin=dev][data-theme=dark] .td2-board { background: radial-gradient(circle, rgba(160, 240, 170, .10) 1px, transparent 1.6px) 0 0 / 18px 18px, rgba(16, 44, 28, .7); }
:root[data-skin=dev] .td2-note:not(.td2-add) { --paper: color-mix(in srgb, var(--prog, #72dc5f) 14%, #fffdf4); --t: -1deg;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, #fff), var(--paper)); color: #1c2a20; border: 0; border-radius: 3px 3px 22px 3px;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 1px rgba(40, 40, 10, .08), 0 12px 18px -14px rgba(30, 40, 10, .55); transform: rotate(var(--t)); }
:root[data-skin=dev] .td2-note:not(.td2-add):nth-child(3n+2) { --t: .8deg; } :root[data-skin=dev] .td2-note:not(.td2-add):nth-child(3n) { --t: -.4deg; }
:root[data-skin=dev] .td2-note.prog-own { --paper: #eefbdf; }
:root[data-skin=dev] .td2-note:not(.td2-add)::after { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border-radius: 0 0 22px 0;
  background: linear-gradient(315deg, transparent 50%, color-mix(in srgb, var(--paper) 70%, #b9b29a) 50%); box-shadow: -2px -2px 4px -2px rgba(40, 40, 10, .25); }
:root[data-skin=dev] .td2-note:not(.td2-add):hover { transform: rotate(0) translateY(-4px); box-shadow: 0 1px 1px rgba(40, 40, 10, .08), 0 18px 24px -16px rgba(30, 40, 10, .6); }
:root[data-skin=dev] .td2-pin { left: 50%; right: auto; top: -7px; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--prog, #72dc5f); box-shadow: inset -2px -3px 0 rgba(0, 0, 0, .2), 0 3px 5px -1px rgba(0, 0, 0, .35); }
:root[data-skin=dev] .td2-note p { color: #4a5a4e; }
:root[data-skin=dev] .td2-tick { background: rgba(255, 255, 255, .7); }
:root[data-skin=dev][data-theme=dark] .td2-note:not(.td2-add) { --paper: color-mix(in srgb, var(--prog, #72dc5f) 24%, #13261a); color: #eef6ea; box-shadow: 0 12px 18px -14px rgba(0, 0, 0, .8); }
:root[data-skin=dev][data-theme=dark] .td2-note.prog-own { --paper: #1d3a24; }
:root[data-skin=dev][data-theme=dark] .td2-note:not(.td2-add)::after { background: linear-gradient(315deg, transparent 50%, color-mix(in srgb, var(--paper) 70%, #000) 50%); }
:root[data-skin=dev][data-theme=dark] .td2-note p { color: #b9cdbd; }
:root[data-skin=dev][data-theme=dark] .td2-tick { background: rgba(255, 255, 255, .08); }
:root[data-skin=dev] .td2-add { background: rgba(255, 255, 255, .45) !important; }
@media (prefers-reduced-motion: reduce) { :root[data-skin=dev] .td2-note:not(.td2-add) { transform: none; } }
/* the kid's notes keep the same paper */
:root[data-skin=dev] .kd-notes .td2-note:not(.td2-add) { --t: 0deg; }
:root[data-skin=dev][data-theme=dark] .td2-board .td2-note:not(.td2-add) { background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, #fff 4%), var(--paper)); border: 0; }
:root[data-skin=dev][data-theme=dark] .td2-board .td2-add { background: rgba(255, 255, 255, .05) !important; }
:root[data-skin=dev][data-theme=dark] .td2-board .td2-add textarea { color: #eef6ea; }

/* =====================================================================================================
   Phase C5, the student's pages like the teacher's (owner 2026-10-19: "the student page has problems and its cards are not
   like the teacher's"): the giant word stays behind the buttons and the search; a group, a folder and "you are here" are
   cards of the same family as the task cards; the unit plates keep their title clear of the grade; the profile card in the theme.
   ===================================================================================================== */
/* the giant word sits behind everything in the head: buttons, the search and its results stay on top and readable */
:root[data-skin=dev] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) > :not(.ins-ghost) { position: relative; z-index: 1; }
:root[data-skin=dev] :is(main > .page-head, .main > header:not(.ins-head)) > .ins-ghost { opacity: .75; }
:root[data-skin=dev] main > .page-head .td-search input { background: rgba(255, 255, 255, .95); color: #0d1f15; border-color: transparent; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); }
/* a group and a folder: the same card as a task, pinned by a dot (a group in blue, a folder in the theme's green) */
:root:where([data-skin]:not([data-skin=old])) .group-card { --kind: #2f74b5; position: relative; border: 0; border-left: 0; border-radius: 20px; padding: 20px 20px 18px; }
:root:where([data-skin]:not([data-skin=old])) .group-card::after { content: ''; position: absolute; right: 16px; top: 18px; width: 11px; height: 11px; border-radius: 32%; background: var(--kind); box-shadow: 0 0 0 5px color-mix(in srgb, var(--kind) 16%, transparent); }
:root:where([data-skin]:not([data-skin=old])) .group-card > :first-child { padding-right: 26px; }
:root:where([data-skin]:not([data-skin=old])) .folder-tab { border-radius: 12px 12px 0 0; background: var(--hd-band); }
:root:where([data-skin]:not([data-skin=old])) .folder-body { border: 0; border-top: 0; border-radius: 0 20px 20px 20px; }
:root:where([data-skin]:not([data-skin=old])) .path-say { border: 0; border-left: 0; border-radius: 18px; padding-left: 52px; position: relative; }
:root:where([data-skin]:not([data-skin=old])) .path-say::before { content: ''; position: absolute; left: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 32%; background: #72dc5f; box-shadow: 0 0 0 6px rgba(114, 220, 95, .2); }
:root[data-skin=dev] :is(.group-card, .folder-body, .path-say) { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 26px -18px rgba(10, 60, 30, .35); }
:root[data-skin=dev][data-theme=dark] :is(.group-card, .folder-body, .path-say) { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(160, 240, 170, .14); }
:root:is([data-skin=institution], [data-skin=binder], [data-skin=colours]) :is(.group-card, .folder-body, .path-say) { background: var(--surface); box-shadow: 0 1px 2px rgba(12, 22, 32, .05), 0 14px 34px -18px rgba(12, 22, 32, .18); }
/* the unit plates of Today: the title keeps clear of the big grade */
:root:where([data-skin]:not([data-skin=old])) .td2-unit strong { max-width: 72%; }
:root:where([data-skin]:not([data-skin=old])) .td2-unit .td2-where { max-width: 72%; }
:root:where([data-skin]:not([data-skin=old])) .td2-grade { top: auto; bottom: 30px; }
:root[data-skin=colours] .td2-grade { top: 8px; bottom: auto; }
/* the profile: the card in the theme's band, and a head band over the page */
:root:where([data-skin]:not([data-skin=old])) .id-card { background: var(--hd-band); border-radius: 26px; }
:root[data-skin=binder] .id-card { background: #16222e; }
/* the crumbs on a band head (an open task: "Tasks › Unit 3 · the book"): the link and the course name read on the band */
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main > .page-head .crumbs { color: var(--hd-soft); }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main > .page-head .crumbs :is(.link, span) { color: #fff; }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main > .page-head .crumbs .link { text-decoration-color: #72dc5f; }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main > .page-head .chip { background: rgba(255, 255, 255, .14); color: #fff; border-color: transparent; }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main > .page-head .chip.active { background: #72dc5f; color: #0c2a12; }
/* ---- the design audit (2026-10-19): phones ----
   the dashboard's masthead pulled itself wider than the column on a phone (its margins assumed the desktop padding);
   wide tables scroll inside their pane; the giant word stays inside the head */
@media (max-width: 760px) {
  :root[data-skin]:not([data-skin=old]) .main > :is(header, .ins-head) { margin-left: 0 !important; margin-right: 0 !important; border-radius: 22px !important; }
  :root[data-skin]:not([data-skin=old]) .main > .ins-head .ins-ghost { top: 14px; bottom: auto; opacity: .45; }
  .tt-week, .ins-scroll { overflow-x: auto; max-width: 100%; }
  .path-art { max-width: 100%; }
}
/* the dashboard column never grows past the screen because of one wide child (its children shrink, wide tables scroll) */
.main { grid-template-columns: minmax(0, 1fr); }
.ins-box { min-width: 0; } .ins-scroll { overflow-x: auto; }
.demo-list { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
/* on a phone no list of cards asks for more width than the screen has (their minimum was 280 to 380px) */
@media (max-width: 520px) {
  :is(.profile, .cards, .q-grid, #class-list, .fun-cols, .watch-cols, .adm-panels, .adm-classes, .adm-class.open .klass-people, .pulse-two, .staff-list, .perm-list, .scope-classes, .adm-notes, .pp-classes, .kd-notes .td2-notes) { grid-template-columns: minmax(0, 1fr); }
}
/* the dashboard's sections (owner 2026-10-19: People, Classes, Programmes, Unit plans, Schools, School identity, Calendar,
   Announcements, Activity, Subscription): the first card no longer rises into the head; it starts under it, clear of the
   head's text, its buttons and the green line. Only Today and the dashboard's front page keep the rise. */
:root[data-skin]:not([data-skin=old]) .main > header:not(.ins-head) { margin-bottom: 0 !important; padding-bottom: 46px !important; }
:root[data-skin]:not([data-skin=old]) .main > header:not(.ins-head)::after { bottom: -16px !important; }
:root[data-skin]:not([data-skin=old]) .main > header:not(.ins-head) + * { margin-top: 0; }
:root[data-skin]:not([data-skin=old]) main.wrap > .page-head:first-child { margin-bottom: 0 !important; padding-bottom: 46px !important; }
:root[data-skin]:not([data-skin=old]) main.wrap > .page-head:first-child::after { bottom: -16px !important; }
:root[data-skin]:not([data-skin=old]) main.wrap > .page-head:first-child + * { margin-top: 0; }

/* Dax's card (owner 2026-10-19: "a shape that says AI more, with animation, and on Today too"): a deep band with a living orb —
   three rings turning at their own speed, a core that breathes in the dev. green and blue, sparks that orbit — its name,
   the questions left, and its buttons as glowing pills. Every theme; the old theme keeps the quiet line. */
:root:where([data-skin]:not([data-skin=old])) .dax-left { position: relative; overflow: hidden; isolation: isolate; width: auto; margin: 26px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 22px;
  padding: 18px 22px; border: 0; border-radius: 26px; color: #c9e9d2; font: 500 .95rem var(--body); text-align: left;
  background: radial-gradient(80% 140% at 0% 50%, rgba(114, 220, 95, .22), transparent 55%), radial-gradient(60% 120% at 100% 0%, rgba(47, 116, 181, .35), transparent 60%), linear-gradient(120deg, #0b2a1a, #0f3d2a 50%, #10273a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 44px -24px rgba(8, 40, 30, .7); }
:root:where([data-skin]:not([data-skin=old])) .dax-left::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: linear-gradient(110deg, transparent 30%, rgba(160, 255, 190, .12) 45%, transparent 60%) 0 0 / 250% 100%; animation: dax-sheen 6s linear infinite; }
:root:where([data-skin]:not([data-skin=old])) .dax-left[hidden] { display: none; }
.dax-say { display: grid; gap: 3px; min-width: 0; }
.dax-say strong { font: 800 1.25rem/1.15 var(--display); color: #fff; letter-spacing: -0.02em; }
.dax-say strong::after { content: ''; display: inline-block; width: .22em; height: .22em; margin-left: .08em; border-radius: 32%; background: #72dc5f; box-shadow: 0 0 10px rgba(114, 220, 95, .8); }
.dax-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
:root:where([data-skin]:not([data-skin=old])) .dax-left .dax-chip { padding: 8px 14px; border: 1px solid rgba(160, 255, 190, .3); background: rgba(255, 255, 255, .06); color: #eaf8ee; font-weight: 600; transition: background .2s, box-shadow .2s, transform .15s; }
:root:where([data-skin]:not([data-skin=old])) .dax-left .dax-chip:hover { background: rgba(114, 220, 95, .2); box-shadow: 0 0 18px rgba(114, 220, 95, .35); transform: translateY(-1px); }
:root:where([data-skin]:not([data-skin=old])) .dax-left .dax-chip[aria-pressed="true"] { background: #72dc5f; color: #0c2a12; border-color: #72dc5f; box-shadow: 0 0 22px rgba(114, 220, 95, .6); }
:root:where([data-skin]:not([data-skin=old])) .dax-left select.dax-chip option { color: #0d1f15; background-color: #fff; }
.dax-left .dax-left-n { color: #b8dcc0; }
/* the orb */
.dax-orb { position: relative; display: block; width: 64px; height: 64px; flex: none; }
:root:is([data-skin=old], :not([data-skin])) .dax-orb, :root:is([data-skin=old], :not([data-skin])) .dax-say strong { display: none; }
.dax-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.dax-orb .r1 { border-top-color: #72dc5f; border-right-color: rgba(114, 220, 95, .35); animation: dax-turn 2.8s linear infinite; }
.dax-orb .r2 { inset: 8px; border-bottom-color: #5aa9ee; border-left-color: rgba(90, 169, 238, .35); animation: dax-turn 4.2s linear infinite reverse; }
.dax-orb .r3 { inset: -6px; border: 1px dashed rgba(160, 255, 190, .28); animation: dax-turn 14s linear infinite; }
.dax-orb b { position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e9ffe4, #72dc5f 40%, #1f8a57 70%, #2f74b5); box-shadow: 0 0 18px rgba(114, 220, 95, .75), 0 0 34px rgba(47, 116, 181, .45); animation: dax-breathe 2.6s ease-in-out infinite; }
.dax-orb em { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #c9ffd0; box-shadow: 0 0 8px #72dc5f; animation: dax-orbit 3.6s linear infinite; }
.dax-orb .s2 { animation-duration: 5.2s; animation-delay: -1.7s; background: #bfe0ff; box-shadow: 0 0 8px #5aa9ee; }
.dax-orb .s3 { animation-duration: 7s; animation-delay: -3s; width: 3px; height: 3px; margin: -1.5px; }
@keyframes dax-turn { to { transform: rotate(360deg); } }
@keyframes dax-breathe { 0%, 100% { transform: scale(.88); filter: brightness(.95); } 50% { transform: scale(1.05); filter: brightness(1.2); } }
@keyframes dax-orbit { from { transform: rotate(0deg) translateX(36px) rotate(0deg); } to { transform: rotate(360deg) translateX(36px) rotate(-360deg); } }
@keyframes dax-sheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .dax-orb i, .dax-orb b, .dax-orb em, :root .dax-left::after { animation: none !important; } }
@media (max-width: 760px) { :root:where([data-skin]:not([data-skin=old])) .dax-left { grid-template-columns: auto minmax(0, 1fr); } .dax-acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* the head's buttons sit under its words on the left, never on the giant word at the right (teacher's pages, owner) */
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main > .page-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main > .page-head > :not(.intro):not(.ins-ghost) { margin-left: 0; }
:root:where([data-skin]:not([data-skin=old]):not([data-skin=binder])) main > .page-head .td-search { width: min(460px, 100%); }
:root:where([data-skin]:not([data-skin=old])) .dax-left select.dax-chip { width: auto; height: auto; min-height: 0; padding: 8px 30px 8px 14px; border-radius: 999px; background-color: rgba(255, 255, 255, .06); color: #eaf8ee; border: 1px solid rgba(160, 255, 190, .3); }
.dax-orb { width: 72px; height: 72px; }
.dax-orb b { inset: 20px; }

/* a ready task: its teacher's review of the questions (public/js/tasks.js readyReview) */
.rv-panel .card-head b { font-weight: 650; color: var(--head); }
.rv-list { display: grid; gap: 10px; margin: 10px 0 14px; }
.rv-q { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: var(--surface); display: grid; gap: 8px; }
.rv-q.out { opacity: .55; background: var(--paper); }
.rv-q.out p { text-decoration: line-through; text-decoration-color: rgba(93, 107, 133, .5); }
.rv-q p { margin: 0; }
.rv-q textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--text); resize: vertical; }
.rv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-head small { color: var(--muted); font-weight: 600; }
.rv-keep { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rv-section { margin: 4px 0 0; font: 650 .95rem var(--body); color: var(--a-dark); }
.rv-note { margin: 0; padding: 8px 10px; border-radius: var(--r-s); background: rgba(242, 194, 48, .16); }
/* the strands each criterion assesses (core.js strandPicker): the teacher's review and the supervisor's */
.rv-strands { margin: 10px 0 0; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); display: grid; gap: 8px; min-width: 0; }
.rv-strands legend { padding: 0 6px; font-weight: 650; color: var(--head); }
.rv-strand-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.rv-strand-row > b { min-width: 6.5em; font-weight: 650; }
.rv-strand { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; font-weight: 600; }
.rv-strands[disabled] .rv-strand { cursor: default; opacity: .7; }
.rv-strand-box .actions { justify-content: space-between; align-items: center; margin-top: 8px; }
.rv-total { font-weight: 650; color: var(--head); }
@media (max-width: 520px) { .rv-strand-row { gap: 6px 12px; } .rv-strand-row > b { min-width: 0; flex: 1 0 100%; } }
/* the supervisor's review of an MYP exam (tasks.js reviewPanel, questionEditor) */
.rv-status .card-head { align-items: flex-start; flex-wrap: wrap; }
.rv-status .card-head > div { flex: 1 1 220px; min-width: 0; }
.rv-status .chip { margin-top: 8px; }
.rv-rounds ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.rv-rounds p { margin: 2px 0 0; }
.rv-q.flagged { border: 2px solid #d9a400; box-shadow: 0 0 0 3px rgba(242, 194, 48, .22); }
.rv-edit { display: grid; gap: 8px; }
.rv-edit textarea { width: 100%; min-height: 4.5em; }
.rv-edit-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.rv-edit-foot .field { margin: 0; }
.rv-edit-foot input { width: 6em; }
/* the practice board of a ready task (tasks.js practiceBoard) */
.pb-helps { display: flex; gap: 6px; align-items: flex-end; height: 96px; margin: 8px 0 14px; overflow-x: auto; }
.pb-bar { flex: 0 0 34px; height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; font-size: .78rem; }
.pb-bar span { align-self: end; width: 22px; height: var(--h); min-height: 2px; background: var(--c); border-radius: 4px 4px 0 0; }
.pb-bar small { color: var(--muted); }
.pb-answer { white-space: pre-wrap; background: var(--paper); border-radius: var(--r-s); padding: 8px 12px; margin: 6px 0; font: inherit; }
.pb-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; }
.pb-note textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--text); font: inherit; }
/* the practice note of Today: teal, over the programme colour the board gives the other notes */
.td2-note.pr.pr { --prog: var(--practice); }

/* a PYP Final unit project, for its teacher and its supervisor (tasks.js pypProject / pypBoard, ready.js pypBody) */
.pyp-crits { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.pyp-counts { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; vertical-align: middle; }
.pyp-teacher { background: var(--paper); border-radius: var(--r-m); padding: 12px 16px; display: grid; gap: 6px; }
.pyp-teacher h3, .pyp-teacher p, .pyp-childtext p { margin: 0; }
.pyp-childtext { background: var(--paper); border-radius: var(--r-m); padding: 10px 16px; display: grid; gap: 4px; }
.pyp-rubric summary { cursor: pointer; font-weight: 700; margin-bottom: 8px; }
.pyp-rub-row { border-top: 1px solid var(--line); padding: 10px 0; }
.pyp-rub-row h4 { margin: 0 0 6px; }
.pyp-rub-row h4 small { font-weight: 400; color: var(--muted); }
.pyp-rub-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.pyp-rub-levels > div { background: var(--paper); border-radius: var(--r-s); padding: 8px 10px; }
.pyp-rub-levels p { margin: 2px 0 0; font-size: .9rem; }
.pyp-helpn { display: block; color: var(--muted); }
.pyp-board td .chip { white-space: nowrap; }
.pyp-panel textarea { width: 100%; }
.pyp-review { display: grid; gap: 10px; }

/* ---------- Halloween (Dashboard, Themes): the dev. theme with data-season on top. A haunted night in every page head
   (halloween.js draws it on a canvas), fire under the open tab, a pumpkin bell, candlelight on cards. Books, tasks and
   games get the colours only (theme.js does not load the scene there). */
:root[data-season=halloween] { --paper: #fff4e8; --surface: #fffaf3; --head: #251334; --text: #3a2445; --muted: #6a5470; --line: #f0d8bf;
  --skin-tab: #f3d9ff; --skin-line: #ff8a00; --dot: #ff8a00; --hd-band: linear-gradient(180deg, #5a2a84, #2a1747); --hd-soft: #f3dcc8;
  --ins-band: #2a1747; --ins-soft: #f3dcc8; }
:root[data-season=halloween][data-theme=dark] { --paper: #0b0612; --surface: #170d24; --head: #f8eeff; --text: #e3d4f0; --muted: #c2aed6; --line: #2f1d47;
  --hd-band: linear-gradient(180deg, #1c0b33, #0a0414); --ins-band: #12071f; }
:root[data-season=halloween] .top { background: #1a0b2e; }
:root[data-season=halloween][data-theme=dark] .top { background: #0d0619; }
:root[data-season=halloween] :is(.tabs a, .tab-group)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f'%3E%3Cstop offset='0' stop-color='%23e2241b'/%3E%3Cstop offset='.5' stop-color='%23ff8a00'/%3E%3Cstop offset='1' stop-color='%23ffde59'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 6 C 25 2, 55 9, 98 4' stroke='url(%23f)' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 138, 0, .75)); }
:root[data-season=halloween] :is(.tabs a, .tab-group)[aria-current=page]::before { animation: hw-burn 1.4s ease-in-out infinite alternate; }
@keyframes hw-burn { to { filter: drop-shadow(0 0 9px rgba(255, 200, 60, .95)) brightness(1.25); } }
:root[data-season=halloween] .top .bell b { background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .95), 0 0 14px 4px rgba(255, 138, 0, .7); }
/* the bell is a pumpkin lantern that glows from inside and winks when something new arrives */
:root[data-season=halloween] .top .bell { border-color: transparent; background: none !important; }
:root[data-season=halloween] .top .bell svg { opacity: 0; }
:root[data-season=halloween] .top .bell::before { content: ''; position: absolute; inset: 1px; pointer-events: none; animation: hw-candle 1.8s infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 46'%3E%3Cpath d='M25 9 q2-7 8-7' stroke='%233f9a1a' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='25' cy='27' rx='23' ry='17' fill='%23ff7a1a'/%3E%3Cpath d='M25 11 v33 M11 15 q-7 12 0 25 M39 15 q7 12 0 25' stroke='%23c94f05' stroke-width='1.6' fill='none'/%3E%3Cg fill='%23ffe36b'%3E%3Cpath d='M12 24 l5-7 l5 7z'/%3E%3Cpath d='M28 24 l5-7 l5 7z'/%3E%3Cpath d='M11 31 q14 11 28 0 l-3 3 l-3-3 l-3 3 l-3-3 l-3 3 l-3-3 l-3 3 l-3-3z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(255, 140, 0, .75)); }
:root[data-season=halloween] .top .bell.hw-wink::before { animation: hw-wink .7s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes hw-candle { 0%, 100% { opacity: .9; } 25% { opacity: 1; } 50% { opacity: .72; } 75% { opacity: 1; } }
@keyframes hw-wink { 35% { transform: scale(1.3) rotate(-10deg); } 65% { transform: scale(1.15) rotate(8deg); } }
/* the page heads: the word on fire instead of the outline, the ribbon gives way to the scene */
:root[data-season=halloween] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::before { content: 'Treat it';
  color: transparent; -webkit-text-stroke: 0; background: linear-gradient(0deg, #e2241b 0%, #ff8a00 35%, #ffde59 62%, #fff6c9 80%, #ff8a00 100%) 0 0 / 100% 220%;
  -webkit-background-clip: text; background-clip: text; opacity: .9; font-family: 'Metal Mania', var(--display); font-weight: 400; letter-spacing: 0;
  filter: drop-shadow(0 0 16px rgba(255, 90, 0, .55)); animation: mh-rise .9s .15s cubic-bezier(.2, .8, .2, 1) both, hw-flames 2.2s 1s ease-in-out infinite alternate; }
:root[data-season=halloween][data-role=student] :is(main > .page-head, #main.wrap > .intro:first-child, .bd-head)::before { content: 'Trick it'; }
:root[data-season=halloween][data-role=teacher] :is(main > .page-head, #main.wrap > .intro:first-child, .bd-head)::before { content: 'Teach it'; }
@keyframes hw-flames { from { background-position: 0 0; } to { background-position: 0 100%; } }
:root[data-season=halloween] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::after { display: none; }
:root[data-season=halloween] .btn.go { background: linear-gradient(90deg, #ff8a00, #ffc93c); border-color: #ff8a00; color: #2a1000; }
:root[data-season=halloween] h1.dot::after { color: #ff8a00 !important; }
.hw-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; pointer-events: none; }
.hw-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: #e9e4ff; mix-blend-mode: screen; }
.hw-flash.on { animation: hw-flash .9s ease-out; }
@keyframes hw-flash { 6% { opacity: .8; } 12% { opacity: .1; } 18% { opacity: .6; } 100% { opacity: 0; } }
.hw-watch { position: absolute; right: 22px; bottom: 10px; width: 120px; height: 108px; z-index: 1; border: 0; padding: 0; background: none; cursor: pointer; }
.hw-watch svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 22px rgba(255, 120, 0, .55)); }
.hw-watch .glow { animation: hw-candle 1.6s infinite; }
.hw-watch.roar svg { animation: hw-wink .7s cubic-bezier(.3, 1.8, .5, 1); }
@media (max-width: 900px) { .hw-watch { display: none; } }
/* the backdrop's light turns to fire and night */
:root[data-season=halloween] .backdrop::before { background: radial-gradient(circle at 40% 40%, rgba(255, 138, 0, .22), rgba(255, 138, 0, 0) 68%); }
:root[data-season=halloween] .backdrop::after { background: radial-gradient(circle at 60% 40%, rgba(120, 60, 200, .18), rgba(120, 60, 200, 0) 68%); }
:root[data-season=halloween][data-theme=dark] :is(.panel, .card, .logo-card) { background: rgba(40, 18, 64, .55); border-color: rgba(255, 170, 90, .16); }
/* candlelight follows the pointer over a card (halloween.js sets --hx / --hy) */
:root[data-season=halloween] :is(.panel, .card, .td2-unit):hover { background-image: radial-gradient(240px circle at var(--hx, 50%) var(--hy, 50%), rgba(255, 140, 0, .16), transparent 62%); }
:root[data-season=halloween] .td2-unit { background-color: #2a1747; border-color: rgba(255, 170, 90, .22); }
:root[data-season=halloween] .td2-meter i.on { box-shadow: 0 0 8px rgba(255, 138, 0, .6); }
.hw-candy { position: fixed; z-index: 2147483000; pointer-events: none; width: 18px; height: 18px; }
.hw-boom { position: fixed; z-index: 2147483000; pointer-events: none; font: 400 26px 'Metal Mania', var(--display); color: #ffde59; text-shadow: 0 0 12px #ff8a00; }
@media (prefers-reduced-motion: reduce) {
  :root[data-season=halloween] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::before,
  :root[data-season=halloween] .top .bell::before, :root[data-season=halloween] :is(.tabs a, .tab-group)[aria-current=page]::before, .hw-watch .glow { animation: none; }
}
/* Halloween in the Today and Dashboard heads (.ins-head): night band, the ghost word on fire, no green ribbon */
:root[data-season=halloween] .ins-head { --ins-band: #2a1747; --ins-soft: #f3dcc8; }
:root[data-season=halloween][data-theme=dark] .ins-head { --ins-band: #12071f; }
:root[data-season=halloween] .ins-ribbon { display: none; }
:root[data-season=halloween] .ins-ghost { -webkit-text-stroke: 0; font-family: 'Metal Mania', var(--display); font-weight: 400; letter-spacing: 0; filter: drop-shadow(0 0 16px rgba(255, 90, 0, .55)); }
:root[data-season=halloween] .ins-ghost b { color: transparent; -webkit-text-stroke: 0; background: linear-gradient(0deg, #e2241b 0%, #ff8a00 35%, #ffde59 62%, #fff6c9 80%, #ff8a00 100%) 0 0 / 100% 220%;
  -webkit-background-clip: text; background-clip: text; animation: ins-rise .9s cubic-bezier(.2, .8, .2, 1) forwards, hw-flames 2.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 70ms + .15s), 1s; }
:root[data-season=halloween] .ins-ghost i { background: #ff8a00; box-shadow: 0 0 12px #ff8a00; }
:root[data-season=halloween] :is(.ins-dot, .ins-chips span:first-child) { background: #ff8a00; color: #2a1000; }
/* the scene's own pieces sit over the head, whatever the head does with its children */
:root[data-season=halloween] .hw-sky { position: absolute !important; inset: 0 !important; z-index: -2 !important; margin: 0 !important; }
:root[data-season=halloween] .ins-head .hw-sky { z-index: 0 !important; }
:root[data-season=halloween] .hw-flash { position: absolute !important; inset: 0 !important; margin: 0 !important; }
:root[data-season=halloween] .hw-watch { position: absolute !important; margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { :root[data-season=halloween] .ins-ghost b { animation: none; opacity: 1; transform: none; filter: none; } }
/* Halloween buttons: night purple, the main action in fire */
:root[data-season=halloween] .btn:not(.quiet):not(.danger):not(.go) { background: #3a1660; border-color: #3a1660; }
:root[data-season=halloween] .btn:not(.quiet):not(.danger):not(.go):hover { background: #4d1f7d; border-color: #4d1f7d; box-shadow: 0 10px 22px -12px rgba(255, 120, 0, .55); }
:root[data-season=halloween][data-theme=dark] .btn:not(.quiet):not(.danger):not(.go) { background: #5a2a84; border-color: #5a2a84; }
:root[data-season=halloween] .btn.go:hover { background: linear-gradient(90deg, #ff9a1f, #ffd65a); border-color: #ff9a1f; }
:root[data-season=halloween] .btn.quiet:hover { border-color: #ff8a00; }
:root[data-season=halloween] .tab-pop .tab-card.has-dot::after { background: #ff8a00; box-shadow: 0 0 8px rgba(255, 138, 0, .8); }
:root[data-season=halloween] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head) h1.dot::after { color: #ff8a00; }
/* on Today the date sits at the right of the head: the pumpkin waits beside the house instead */
/* the pumpkin sits between the greeting and the house, clear of the giant word and the date */
:root[data-season=halloween] .hw-watch { right: auto; left: 44%; bottom: 8px; width: 92px; height: 82px; } /* halloween.js moves it beside the house */
:root[data-season=halloween] .ins-head .hw-watch { bottom: 70px; }
:root[data-season=halloween] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head, .ins-head) :is(h1, h2, p, small, .ins-date, .ins-trail) { text-shadow: 0 1px 10px rgba(20, 5, 30, .75), 0 0 2px rgba(20, 5, 30, .5); }
/* the night runs from edge to edge of the screen under the pages' own heads (not the dashboard's, which sit beside its menu) */
:root[data-season=halloween] body { overflow-x: clip; }
/* (!important: the dev. theme's head rule carries an id and would keep the head clipped and rounded) */
:root[data-season=halloween] :is(main > .page-head, main > .intro:first-child, main > .td2-head, main > .ins-head, .bd-head) { overflow: visible !important; clip-path: inset(0 -100vmax) !important; border-radius: 0 !important; box-shadow: none !important; }
:root[data-season=halloween] :is(main > .page-head, main > .intro:first-child, main > .td2-head, main > .ins-head, .bd-head) > .hw-sky { left: calc(50% - 50vw) !important; right: auto !important; width: 100vw !important; }
/* the dashboard's menu stays over that night, which runs on behind it */
:root[data-season=halloween] .side { z-index: 5; }
/* one giant word only: where the head already holds its word (.ins-ghost), the drawn one stays off */
:root[data-season=halloween] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head):has(> .ins-ghost)::before { content: none !important; }
/* a haunted card (halloween.js adds the graves and the ghost on the first hover) */
:root[data-season=halloween] .hw-haunted { position: relative; overflow: hidden; isolation: isolate; }
.hw-haunt { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.hw-graves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34px; fill: #3a1660; opacity: .22; transform: translateY(100%); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.hw-graves path:last-child { stroke: #3a1660; stroke-width: 2; }
:root[data-theme=dark] .hw-graves { fill: #000; opacity: .5; } :root[data-theme=dark] .hw-graves path:last-child { stroke: #000; }
.hw-gst { position: absolute; bottom: 10px; right: -70px; width: 52px; height: 58px; fill: #fff; opacity: 0; filter: drop-shadow(0 0 10px rgba(200, 180, 255, .7)); }
.hw-gst .e { fill: #251334; } .hw-gst .m { fill: none; stroke: #251334; stroke-width: 2.4; stroke-linecap: round; }
:root:not([data-theme=dark]) .hw-gst { fill: #5a2a84; filter: none; } :root:not([data-theme=dark]) .hw-gst :is(.e) { fill: #fff; } :root:not([data-theme=dark]) .hw-gst .m { stroke: #fff; }
.hw-haunted:hover .hw-graves { transform: translateY(0); }
.hw-haunted:hover .hw-gst { animation: hw-drift 2.6s ease-in-out forwards; }
@keyframes hw-drift { 0% { right: -70px; opacity: 0; transform: translateY(0); } 15% { opacity: .55; } 50% { transform: translateY(-14px); } 85% { opacity: .55; } 100% { right: calc(100% + 20px); opacity: 0; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hw-haunted:hover .hw-gst { animation: none; } .hw-graves { transition: none; } }
/* a phone has no room beside the greeting for the giant word: the night stays, the word goes */
@media (max-width: 700px) { :root[data-season=halloween] .ins-ghost { display: none !important; } :root[data-season=halloween] :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head)::before { content: none !important; } }
/* on Today the date sits under the word: a smaller word keeps clear of it */
:root[data-season=halloween] .ins-head .ins-ghost { font-size: clamp(56px, 7vw, 100px); top: 6px; }
/* Halloween Dax card: a night card on fire, two skeletons dancing at its ends, the orb a pumpkin */
:root[data-season=halloween] .dax-left { color: #f3dcc8;
  background: radial-gradient(90% 120% at 50% 130%, rgba(255, 110, 0, .55), transparent 60%), radial-gradient(60% 120% at 100% 0%, rgba(120, 60, 200, .35), transparent 60%), linear-gradient(120deg, #1a0b2e, #2a1050 55%, #12071f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 140, 0, .55), inset 0 -18px 30px -14px rgba(255, 120, 0, .65), 0 0 26px -4px rgba(255, 110, 0, .55), 0 22px 44px -24px rgba(20, 5, 30, .8);
  animation: hw-dax-fire 1.6s ease-in-out infinite alternate; }
@keyframes hw-dax-fire { to { box-shadow: inset 0 0 0 1.5px rgba(255, 190, 60, .8), inset 0 -24px 36px -12px rgba(255, 150, 0, .8), 0 0 38px 0 rgba(255, 120, 0, .7), 0 22px 44px -24px rgba(20, 5, 30, .8); } }
/* flames licking along the foot of the card */
:root[data-season=halloween] .dax-left::after { opacity: .9; top: auto; height: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ff3b00'/%3E%3Cstop offset='.55' stop-color='%23ff9a00'/%3E%3Cstop offset='1' stop-color='%23ffe066' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 46 C6 30 10 34 12 18 C16 30 20 26 24 8 C28 26 34 28 36 16 C40 30 46 30 50 4 C54 26 58 30 62 14 C66 30 72 28 76 10 C80 28 86 30 88 20 C92 30 98 28 102 6 C106 26 112 30 114 18 C116 30 118 32 120 46 Z' fill='url(%23g)'/%3E%3C/svg%3E") 0 100% / 240px 100% repeat-x;
  animation: hw-flicker 1.2s steps(6) infinite, hw-lick 9s linear infinite; mix-blend-mode: screen; }
@keyframes hw-lick { to { background-position-x: 240px; } }
@keyframes hw-flicker { 0%, 100% { transform: scaleY(1); transform-origin: bottom; } 33% { transform: scaleY(.82); } 66% { transform: scaleY(1.12); } }
/* the skeletons: two poses swapped in time, one at each end of the card */
:root[data-season=halloween] .dax-left::before { content: ''; position: absolute; inset: auto 0 0; height: 46px; z-index: -1; pointer-events: none; opacity: .85;
  background: var(--hw-bones-a) 22% calc(100% - 2px) / 30px 42px no-repeat, var(--hw-bones-b) 78% calc(100% - 2px) / 30px 42px no-repeat;
  animation: hw-dance .9s steps(1) infinite; }
@keyframes hw-dance { 50% { background: var(--hw-bones-b) 22% calc(100% - 6px) / 30px 42px no-repeat, var(--hw-bones-a) 78% calc(100% - 6px) / 30px 42px no-repeat; } }
:root[data-season=halloween] {
  --hw-bones-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 62' fill='none' stroke='%23f5ecd8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='22' cy='9' r='7' fill='%23f5ecd8' stroke='none'/%3E%3Ccircle cx='19.5' cy='8.5' r='1.8' fill='%231a0b2e' stroke='none'/%3E%3Ccircle cx='24.5' cy='8.5' r='1.8' fill='%231a0b2e' stroke='none'/%3E%3Cpath d='M22 16 V36 M15 21 H29 M16 25 H28 M17 29 H27 M22 21 L8 12 M22 21 L36 12 M22 36 L13 50 L9 60 M22 36 L31 50 L36 60'/%3E%3C/svg%3E");
  --hw-bones-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 62' fill='none' stroke='%23f5ecd8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='22' cy='9' r='7' fill='%23f5ecd8' stroke='none'/%3E%3Ccircle cx='19.5' cy='8.5' r='1.8' fill='%231a0b2e' stroke='none'/%3E%3Ccircle cx='24.5' cy='8.5' r='1.8' fill='%231a0b2e' stroke='none'/%3E%3Cpath d='M22 16 V36 M15 21 H29 M16 25 H28 M17 29 H27 M22 21 L10 30 L6 22 M22 21 L34 30 L40 38 M22 36 L16 48 L22 58 M22 36 L30 48 L26 60'/%3E%3C/svg%3E"); }
:root[data-season=halloween] .dax-left .dax-chip { border-color: rgba(255, 170, 90, .4); color: #fff1e2; }
:root[data-season=halloween] .dax-left .dax-chip:hover { background: rgba(255, 138, 0, .22); box-shadow: 0 0 18px rgba(255, 138, 0, .45); }
:root[data-season=halloween] .dax-left .dax-chip[aria-pressed="true"] { background: #ff8a00; color: #2a1000; border-color: #ff8a00; box-shadow: 0 0 22px rgba(255, 138, 0, .7); }
:root[data-season=halloween] .dax-left .dax-left-n { color: #f3c9a0; }
:root[data-season=halloween] .dax-say strong::after { background: #ff8a00; box-shadow: 0 0 10px rgba(255, 138, 0, .9); }
/* the orb becomes a glowing pumpkin with orange rings */
:root[data-season=halloween] .dax-orb .r1 { border-top-color: #ff8a00; border-right-color: rgba(255, 138, 0, .35); }
:root[data-season=halloween] .dax-orb .r2 { border-bottom-color: #9b6bff; border-left-color: rgba(155, 107, 255, .35); }
:root[data-season=halloween] .dax-orb .r3 { border-color: rgba(255, 190, 120, .3); }
:root[data-season=halloween] .dax-orb b { border-radius: 46% 46% 50% 50% / 52% 52% 48% 48%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 12 l3-4 l3 4z M16 12 l3-4 l3 4z' fill='%23ffe36b'/%3E%3Cpath d='M7 17 q7 6 14 0 l-2 2 l-2-2 l-2 2 l-2-2 l-2 2 l-2-2z' fill='%23ffe36b'/%3E%3C/svg%3E") center / 100% no-repeat, radial-gradient(circle at 35% 30%, #ffc56b, #ff7a1a 45%, #c94f05 80%);
  box-shadow: 0 0 18px rgba(255, 138, 0, .8), 0 0 34px rgba(255, 90, 0, .45); }
:root[data-season=halloween] .dax-orb em { background: #ffd36b; box-shadow: 0 0 8px #ff8a00; }
:root[data-season=halloween] .dax-orb .s2 { background: #d9c2ff; box-shadow: 0 0 8px #9b6bff; }
/* the full-screen Dax: orange name and buttons */
:root[data-season=halloween] .dax-hud .dax-name { color: #ff9a2e; text-shadow: 0 0 14px rgba(255, 120, 0, .8); }
@media (prefers-reduced-motion: reduce) { :root[data-season=halloween] .dax-left, :root[data-season=halloween] .dax-left::before, :root[data-season=halloween] .dax-left::after { animation: none; } }
@media (max-width: 600px) { :root[data-season=halloween] .dax-left::before { opacity: .35; } }
/* the card keeps a strip at its foot for the fire and the skeletons, so they never sit on its words or buttons */
:root[data-season=halloween] .dax-left { padding-bottom: 50px; }
:root[data-season=halloween] .dax-form { border-color: rgba(255, 150, 60, .35); }
:root[data-season=halloween] .dax-form:focus-within { border-color: #ff8a00; box-shadow: 0 0 22px rgba(255, 120, 0, .35); }
:root[data-season=halloween] .dax-send { background: #ff8a00; color: #2a1000; } :root[data-season=halloween] .dax-send:hover { background: #ffa640; }
:root[data-season=halloween] :is(.dax-btn, .dax-q, .dax-send):focus-visible { outline-color: #ff8a00; }
:root[data-season=halloween] .dax-name::before { background: #ff8a00; box-shadow: 0 0 8px #ff8a00; }
:root[data-season=halloween] .dax-form .dax-q, :root[data-season=halloween] .dax-form .dax-q:focus { background: none !important; border: 0 !important; box-shadow: none !important; color: #fff !important; }
/* today's lessons on Today: the lesson, its page and its open games */
.td2-lessons { margin-top: 18px; }
.td2-lessons ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.td2-lessons li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.td2-lessons li > div:first-child { display: grid; gap: 2px; min-width: 0; }
.td2-lessons .actions { flex-wrap: wrap; gap: 6px; }

/* a logo in its box, as the sign-in page shows it, with its size (Logos and Identity; dev. Hub 2026-10-26) */
.logo-size-box { width: 140px; height: 88px; border-radius: 14px; background: repeating-conic-gradient(#eef1f5 0 25%, #fff 0 50%) 0 0 / 16px 16px; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; border: 1px solid var(--line); }
.logo-size-box.wide { width: 260px; height: 100px; padding: 12px 18px; }
.logo-size-box.on-dark { background: #1d1626; border-color: transparent; width: min(100%, calc(260px * var(--s, 1))); height: calc(100px * var(--s, 1)); }
/* (the Hub's preview grows with the size, as the sign-in page does, instead of cutting the logo) */
.logo-size-box.on-dark img { max-width: 100%; max-height: 100%; }
.logo-size-box img { display: block; max-width: calc(100% * var(--s, 1)); max-height: calc(100% * var(--s, 1)); object-fit: contain; }
.logo-size { display: flex; align-items: center; gap: 10px; font-size: .9rem; margin: 8px 0; }
.logo-size input { flex: 1; min-width: 0; accent-color: var(--accent, #23915f); }
.logo-size output { min-width: 3.4em; text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- dev. Hub: a provider's pages in its own colour (owner 2026-10-26; theme.js paintProv sets --pv-*) ----------
   Over any theme: the dark bars and bands are deep shades of the colour, the buttons are the colour, the green accent
   becomes a light tint of it. The attribute is doubled so these win over each theme's own rules. */
:root[data-prov][data-prov] { --dot: var(--pv-lite); --skin-line: var(--pv-lite); --skin-tab: var(--pv-soft); --hd-band: var(--pv-deep); --hd-soft: var(--pv-soft); }
:root[data-prov][data-prov][data-theme=dark] { --hd-band: var(--pv-deeper); }
:root[data-prov][data-prov] .side { background: linear-gradient(180deg, var(--pv-deep), var(--pv2-deep)); }
:root[data-prov][data-prov]:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top { background: linear-gradient(90deg, var(--pv-deep), var(--pv2-deep)); }
:root[data-prov][data-prov][data-theme=dark] .side { background: linear-gradient(180deg, var(--pv-deeper), var(--pv2-deeper)); }
:root[data-prov][data-prov]:is([data-skin=dev], [data-skin=binder], [data-skin=institution])[data-theme=dark] .top { background: linear-gradient(90deg, var(--pv-deeper), var(--pv2-deeper)); }
/* the top bar only in the themes whose bar is dark already (their text and logos turn white there); the bands only
   in the themes that draw page heads as bands. The bands keep the first colour (their edges run to the screen's edges) with a glow of the second from the right */
:root[data-prov][data-prov][data-skin]:not([data-skin=old]):not([data-skin=binder]) :is(main > .page-head, #main.wrap > .intro:first-child, .main > header:not(.ins-head), .bd-head, .ins-head, .ins-report) { background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--pv2) 45%, transparent), transparent 62%), var(--hd-band) !important; }
:root[data-prov][data-prov] .ins-head { --hd-band: var(--ins-band); }
:root[data-prov][data-prov]:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top { backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .1); }
:root[data-prov][data-prov]:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .brand { color: #fff; }
:root[data-prov][data-prov]:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top :is(.tabs a, .tab-group, .who) { color: var(--pv-soft); }
:root[data-prov][data-prov]:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top :is(.tabs a, .tab-group):is(:hover, [aria-current=page], [aria-expanded=true]), :root[data-prov][data-prov]:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top .who strong { color: #fff; }
:root[data-prov][data-prov]:is([data-skin=dev], [data-skin=binder], [data-skin=institution]) .top :is(.icon-btn, .bell, .btn.quiet, .qf-open) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
:root[data-prov][data-prov] .side { color: var(--pv-soft); }
:root[data-prov][data-prov] .side nav button[aria-current=page] { background: color-mix(in srgb, var(--pv-lite) 18%, transparent); color: #fff; }
:root[data-prov][data-prov] .side nav button[aria-current=page] svg { color: var(--pv-lite); }
:root[data-prov][data-prov] .ins-head { --ins-band: var(--pv-deep); --ins-soft: var(--pv-soft); }
:root[data-prov][data-prov][data-theme=dark] .ins-head { --ins-band: var(--pv-deeper); }
:root[data-prov][data-prov] .ins-dot { background: var(--pv-lite); }
:root[data-prov][data-prov] h1.dot::after { color: var(--pv-lite) !important; }
:root[data-prov][data-prov] :is(.btn:not(.quiet):not(.danger), .btn.go) { background: linear-gradient(90deg, var(--pv), var(--pv2)); border-color: transparent; color: var(--pv-ink); }
:root[data-prov][data-prov] :is(.btn:not(.quiet):not(.danger), .btn.go):hover { background: linear-gradient(90deg, var(--pv-hover), var(--pv2-hover)); }
:root[data-prov][data-prov] :is(main > .page-head, .main > header:not(.ins-head), .bd-head) .btn.go { background: var(--pv-lite); border-color: var(--pv-lite); color: #0b1410; }
:root[data-prov][data-prov] .toast { background: var(--pv-deep); border-left-color: var(--pv-lite); }
:root[data-prov][data-prov] :is(.td2-unit, .kd-hello, .adm-class.compact.plate, .klass.plate:not(.shown), .door) { background: var(--pv-deep); }
:root[data-prov][data-prov] .pulse-link { background: linear-gradient(90deg, var(--pv-deep), var(--pv2-deep)); color: var(--pv-soft); }
:root[data-prov][data-prov] :is(.top5, .top5.garden) { background: linear-gradient(160deg, var(--pv-mid), var(--pv-deep)); }
:root[data-prov][data-prov] .tabs-ink { background: linear-gradient(90deg, var(--pv-lite), var(--pv2-lite)); }
.blend-preview span { display: block; height: 14px; border-radius: 999px; margin: 2px 0 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }