/* Classroom (projector) and actor pages. Rev. q restyle (BCJK, 11 Oct: "Try to incorporate some design sensibilities
   from my deri.vvre project"; picks: glass cards, no wallpaper, a flat tinted ground, the "Sports day" palette).
   Palette chosen with the color-expert skill: chalk-lime ground, plum for Janice, ochre for Wayne (distinct under
   deutan and protan; close under tritan, since both sit at similar lightness, so the names, always written beside the colour, carry the difference). Contrast, WCAG ratios against --surface (the glass
   card composites at 78% over the ground, which lowers these slightly, e.g. light ink-3 5.75): light ink 15.7, ink-2 8.0, ink-3 5.9, Janice 7.8, Wayne 7.4, link 7.4; dark ink 14.0, ink-2 9.3,
   ink-3 6.5, Janice 8.2, Wayne 9.4, link 8.0. Dark retuned 13 Oct (BCJK: "Dark mode is not readable enough."): neutral
   ink, less tinted ground, near-opaque cards; WCAG / APCA on --surface: ink 16.6 / -100, ink-2 12.6 / -82, ink-3 9.7 / -66,
   Janice 10.7 / -72, Wayne 11.8 / -77. Tokens override house.css only on pages marked data-skin="sportsday".
   The dark media block and the manual dark block must stay identical. */

:root[data-skin="sportsday"] { color-scheme: light;
  --paper: oklch(0.95 0.03 115); --surface: oklch(0.99 0.01 110); --surface-strong: oklch(1 0 0);
  --rule: oklch(0.86 0.02 115); --field: oklch(1 0 0);
  --ink: oklch(0.25 0.03 300); --ink-2: oklch(0.43 0.03 300); --ink-3: oklch(0.50 0.025 300);
  --janice: oklch(0.45 0.13 330); --wayne: oklch(0.45 0.09 70); --tony: oklch(0.42 0.10 225);
  --primary: oklch(0.32 0.07 300); --primary-hover: oklch(0.38 0.07 300); --on-primary: oklch(0.99 0.01 110);
  --link: oklch(0.45 0.15 258); --link-hover: oklch(0.38 0.15 258); --focus: oklch(0.45 0.15 258);
  --positive: oklch(0.45 0.11 150); --caution: oklch(0.48 0.10 70); --negative: oklch(0.48 0.16 27);
  --glass: oklch(0.99 0.01 110 / .78); --glass-edge: rgba(255,255,255,.8);
  --shadow: 0 1px 1px oklch(0.25 0.03 300 / .05), 0 10px 28px oklch(0.25 0.03 300 / .08), 0 28px 64px oklch(0.25 0.03 300 / .06);
  --tint: oklch(0.25 0.03 300 / .06);
  --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.4,.64,1); }
@media (prefers-color-scheme: dark) { :root[data-skin="sportsday"]:not([data-theme="light"]) { color-scheme: dark;
  --paper: oklch(0.15 0.012 290); --surface: oklch(0.20 0.014 290); --surface-strong: oklch(0.235 0.015 290);
  --rule: oklch(0.40 0.015 290); --field: oklch(0.235 0.015 290);
  --ink: oklch(0.97 0.006 100); --ink-2: oklch(0.88 0.008 100); --ink-3: oklch(0.80 0.01 100);
  --janice: oklch(0.84 0.10 335); --wayne: oklch(0.86 0.11 80); --tony: oklch(0.84 0.09 210);
  --primary: oklch(0.90 0.06 110); --primary-hover: oklch(0.95 0.05 110); --on-primary: oklch(0.15 0.012 290);
  --link: oklch(0.78 0.11 258); --link-hover: oklch(0.86 0.09 258); --focus: oklch(0.78 0.11 258);
  --positive: oklch(0.80 0.11 150); --caution: oklch(0.83 0.10 80); --negative: oklch(0.76 0.12 27);
  --glass: oklch(0.20 0.014 290 / .96); --glass-edge: rgba(255,255,255,.08);
  --shadow: 0 1px 1px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
  --tint: oklch(0.97 0.006 100 / .09); } }
:root[data-skin="sportsday"][data-theme="dark"] { color-scheme: dark;
  --paper: oklch(0.15 0.012 290); --surface: oklch(0.20 0.014 290); --surface-strong: oklch(0.235 0.015 290);
  --rule: oklch(0.40 0.015 290); --field: oklch(0.235 0.015 290);
  --ink: oklch(0.97 0.006 100); --ink-2: oklch(0.88 0.008 100); --ink-3: oklch(0.80 0.01 100);
  --janice: oklch(0.84 0.10 335); --wayne: oklch(0.86 0.11 80); --tony: oklch(0.84 0.09 210);
  --primary: oklch(0.90 0.06 110); --primary-hover: oklch(0.95 0.05 110); --on-primary: oklch(0.15 0.012 290);
  --link: oklch(0.78 0.11 258); --link-hover: oklch(0.86 0.09 258); --focus: oklch(0.78 0.11 258);
  --positive: oklch(0.80 0.11 150); --caution: oklch(0.83 0.10 80); --negative: oklch(0.76 0.12 27);
  --glass: oklch(0.20 0.014 290 / .96); --glass-edge: rgba(255,255,255,.08);
  --shadow: 0 1px 1px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
  --tint: oklch(0.97 0.006 100 / .09); }
:root[data-skin="sportsday"][data-color="plain"] { --janice: var(--ink); --wayne: var(--ink); --tony: var(--ink); --positive: var(--ink); --caution: var(--ink); --negative: var(--ink); }

/* Shared: quiet top row (no page links on these two pages), glass cards, pill buttons */
[data-skin="sportsday"] .nav { display: none; }
[data-skin="sportsday"] .brand { font-size: 18px; letter-spacing: -.01em; }
[data-skin="sportsday"] .btn { border: 0; border-radius: 999px; min-height: 48px; padding: 10px 22px; background: var(--surface-strong);
  box-shadow: inset 0 0 0 1.5px var(--rule); transition: transform .25s var(--spring), box-shadow .3s var(--ease), background .25s; }
[data-skin="sportsday"] .btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); transform: translateY(-1px); }
[data-skin="sportsday"] .btn.primary { background: var(--primary); color: var(--on-primary); font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  box-shadow: 0 6px 18px oklch(from var(--primary) l c h / .28), inset 0 1px 0 rgba(255,255,255,.18); }
[data-skin="sportsday"] .btn.primary:hover { background: var(--primary-hover); }
[data-skin="sportsday"] .btn[disabled] { opacity: .45; box-shadow: inset 0 0 0 1.5px var(--rule); transform: none; }
.glass { box-shadow: var(--shadow); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-radius: 24px; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px oklch(from var(--rule) l c h / .6); }
.who-J, .who-W { font-weight: 700; }
/* Tony in cyan-blue (BCJK, 13 Oct: "Tony should get a colour like Cyanish blue"); WCAG on --surface: light 7.5, dark 11.4 */
[data-skin="sportsday"] .who-T { color: var(--tony); }

/* Projector: one beat at a time */
.classroom { max-width: 1100px; font-size: 1.3rem; }
.classroom .shell-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.classroom .grow { flex: 1 1 auto; }
.classroom #play { min-height: calc(100vh - 90px); display: flex; flex-direction: column; }
.stage { flex: 1 0 auto; width: 100%; max-width: 920px; margin: 0 auto; display: grid; align-content: center; gap: 16px; padding: 12px 0; }
.beat { padding: 26px 30px; }
.beat p { margin: 0 0 10px; max-width: 60ch; }
.beat p:last-child { margin-bottom: 0; }
.hero { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.2; letter-spacing: -.015em; margin: 6px 0 0; font-weight: 700; }
.kicker { color: var(--ink-2); font-size: .82em; margin: 0 0 4px; }
.cue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.cue .clipid { font-weight: 700; font-size: 1.25em; }
.cue .live { color: var(--ink-3); }
.narr p { font-style: italic; }
.choices { display: grid; gap: 12px; margin: 14px 0 0; }
.choice { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; width: 100%; min-height: 56px; padding: 14px 18px; border: 0;
  border-radius: 18px; background: var(--surface-strong); box-shadow: inset 0 0 0 1.5px var(--rule); text-align: left; cursor: pointer; line-height: 1.6;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease); }
.choice:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.choice[disabled] { cursor: not-allowed; opacity: .55; transform: none; }
.letter, .choice .num { display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--tint); font-weight: 700; }
.teacher-note { color: var(--ink-2); font-size: .82em; margin: 0 0 6px; }
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 12px 0; }
.boxes label { display: grid; gap: 4px; color: var(--ink-2); font-size: .85em; }
.boxes input { font: inherit; color: var(--ink); min-height: 52px; padding: 8px 14px; border: 0; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1.5px var(--rule); width: 100%; }
.dock { background: var(--paper); margin-top: auto; position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; margin-left: -16px; margin-right: -16px;
  background: oklch(from var(--paper) l c h / .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .8em; }
.earlier { max-width: 920px; margin: 18px auto 0; font-size: .8em; }
.earlier summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-2); }
.earlier ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.earlier li { padding: 10px 14px; border-radius: 14px; background: var(--tint); }
.earlier li p { margin: 0; }

/* Actor page */
.actor { max-width: 860px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.jump a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 52px; padding: 4px 14px;
  border-radius: 999px; background: var(--surface-strong); box-shadow: inset 0 0 0 1.5px var(--rule); text-decoration: none; color: var(--ink); }
.jump a:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.actor .scene { font-size: 1.4rem; margin: 30px 0 10px; padding: 0; border: 0; }
.script-clip { scroll-margin-top: 12px; padding: 18px 22px; margin: 0 0 12px; }
.script-clip h3 { font-size: 1.05rem; margin: 0 0 8px; }
.script-clip .line { margin: 0 0 8px; }
.script-clip .note { color: var(--ink-2); font-size: .92em; }
.sheet table { border-collapse: collapse; width: 100%; margin: 6px 0 14px; }
.sheet th, .sheet td { border-bottom: 1px solid var(--rule); padding: 8px; text-align: left; vertical-align: top; }
mark.tested { background: transparent; color: inherit; text-decoration: underline 2px; text-underline-offset: 3px; font-weight: 700; }

@media (max-width: 600px) { .classroom { font-size: 1.05rem; } .beat { padding: 18px 18px; } }
@media (prefers-reduced-motion: reduce) { .choice:hover, [data-skin="sportsday"] .btn:hover { transform: none !important; } }
:root[data-motion="reduce"] .choice:hover, :root[data-motion="reduce"][data-skin="sportsday"] .btn:hover { transform: none !important; }

/* carried from map.css and play.css, which these pages no longer load */
.pips { letter-spacing: 1px; }
.line { margin: 0 0 6px; max-width: 64ch; }
.dir { color: var(--ink-3); font-style: italic; }
.stop { color: var(--ink-3); font-size: .9em; }
.note { font-size: .92em; color: var(--ink-2); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.narr p.note { font-style: normal; }