@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);
}
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; }
.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; }
/* 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 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; }
.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; }
}
@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; }
.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] .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); }
[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 { display: flex; gap: 6px; }
.class-code .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; }
.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 > 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%; height: 60%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
}

/* ---------- 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; }
.group-side { display: grid; gap: 18px; }
.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; }
.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-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; }
.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.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 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; }
.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); }
.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; }
.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)); }
.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: var(--muted); min-width: 5.5em; text-align: right; }
.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; }
.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-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; }
.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; }
.pp-class { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 10px; }
.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; }
@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) */
.brand:has(.brand-school) { flex-wrap: wrap; align-items: center; 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 { flex-basis: 100%; max-width: 100%; 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; }