/* ═══════════════════════════════════════════════════════════════
   Shared theme layer — tokens, skins, accessibility, Zen mode.
   Linked by every page so the look follows you across the site.
   Page-specific layout stays in each page's own <style>.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   The whole look is driven by these tokens. Each skin re-declares
   them, so the markup and layout never change between skins.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#faf7f0; --bg-img:none; --panel:#fff; --panel-2:#f2efe6;
  --line:#ddd6c6; --text:#241f18; --muted:#7d7364; --accent:#c2571f; --accent-ink:#fff;
  --radius:14px; --card-radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
  --shadow-hi:0 4px 10px rgba(0,0,0,.08), 0 14px 34px rgba(0,0,0,.1);
  --font-ui:"DM Sans",system-ui,sans-serif;
  --font-display:"Instrument Serif",Georgia,serif;
  --font-num:"DM Sans",system-ui,sans-serif;
  --tint:14%;            /* how much subject colour bleeds into a card */
  --card-border:1px solid var(--line);
  --card-accent:5px;     /* left colour bar width */
  --rot:0deg;
  --display-tt:normal; --display-ls:-.02em; --display-w:700;
}

/* Native <select> option lists: Chromium/Firefox honour option colours but often
   drop color-scheme theming once the control itself is styled, leaving light text
   on a white popup in dark mode. Set them explicitly so every dropdown stays
   readable (covers the notes subject picker and the custom-skin controls). */
select option{ background:#ffffff; color:#16181d; }
:root[data-mode="dark"] select option{ background:#23242b; color:#f2f2f5; }
:root[data-skin="terminal"] select option{ background:#0b1410; color:#b6ffd6; }
:root[data-skin="scifi"] select option{ background:#081119; color:#dff4ff; }
:root[data-skin="blueprint"] select option{ background:#0a2137; color:#eaf4ff; }

/* ── PLAIN ─ the quiet default: white on white, grey on grey ────── */
[data-skin="plain"]{
  --bg:#ffffff; --bg-img:none; --panel:#ffffff; --panel-2:#f6f6f7;
  --line:#e5e5e8; --text:#18181b; --muted:#8b8b93; --accent:#4f4fd0; --accent-ink:#fff;
  --font-ui:"DM Sans",system-ui,sans-serif;
  --font-display:"DM Sans",system-ui,sans-serif;
  --font-num:"DM Sans",system-ui,sans-serif;
  --card-radius:10px; --tint:0%; --card-accent:3px;
  --card-border:1px solid var(--line);
  --shadow:none; --shadow-hi:0 1px 4px rgba(0,0,0,.09);
  --display-ls:-.015em; --display-w:600; --display-tt:normal;
}
[data-skin="plain"][data-mode="dark"]{
  --bg:#161618; --panel:#1f1f22; --panel-2:#27272b;
  --line:#303035; --text:#eaeaee; --muted:#87878f; --accent:#8f8ff2;
  --shadow-hi:0 1px 4px rgba(0,0,0,.55);
}

/* ── PAPER ─ ruled notebook, post-it lessons ───────────────────── */
[data-skin="paper"]{
  --bg:#f7f3e8;
  --bg-img:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(80,110,160,.13) 31px 32px);
  --panel:#fffdf6; --panel-2:#f0ead8; --line:#ded4bd;
  --text:#2c2519; --muted:#8a7f6a; --accent:#c2571f; --accent-ink:#fff;
  --font-ui:"Patrick Hand",'Comic Sans MS',cursive;
  --font-display:"Caveat",cursive;
  --font-num:"Patrick Hand",cursive;
  --card-radius:3px; --tint:44%; --card-accent:0px;
  --card-border:1px solid rgba(0,0,0,.09);
  --shadow:2px 3px 7px rgba(60,45,20,.16);
  --shadow-hi:4px 7px 16px rgba(60,45,20,.22);
  --display-w:700; --display-ls:0;
}
[data-skin="paper"][data-mode="dark"]{
  --bg:#221f1a;
  --bg-img:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(150,170,210,.09) 31px 32px);
  --panel:#2e2a23; --panel-2:#282420; --line:#413a30;
  --text:#f0e9db; --muted:#a2957f; --accent:#e8834a;
  /* the pastel faculty colours are light, so a heavy tint would lift these
     cards until the text stopped reading */
  --tint:18%;
}
/* The red margin rule belongs to the ruled page, so it starts below the
   masthead instead of striking through the title. */
[data-skin="paper"] .grid{position:relative}
[data-skin="paper"] .grid::before{
  content:"";position:absolute;top:-14px;bottom:-30px;left:-14px;
  width:2px;background:rgba(200,70,70,.4);pointer-events:none;z-index:0;
}
[data-skin="paper"][data-mode="dark"] .grid::before{background:rgba(235,120,120,.38)}
@media (max-width:860px){ [data-skin="paper"] .grid::before{display:none} }
[data-skin="paper"] .lesson{transform:rotate(var(--rot))}
[data-skin="paper"] .lesson:hover{transform:rotate(0deg) translateY(-3px) scale(1.02)}
/* sticky-tape tab on each note */
[data-skin="paper"] .lesson::before{
  content:"";position:absolute;top:-7px;left:50%;translate:-50% 0;
  width:46px;height:15px;background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.07);border-top:0;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
[data-skin="paper"][data-mode="dark"] .lesson::before{background:rgba(255,255,255,.14)}

/* ── GLASS ─ frosted tiles over a colour mesh ──────────────────── */
[data-skin="glass"]{
  --bg:#0d1220;
  --bg-img:
    radial-gradient(60vw 60vw at 12% 8%,rgba(120,90,255,.5),transparent 60%),
    radial-gradient(55vw 55vw at 88% 18%,rgba(0,190,220,.42),transparent 62%),
    radial-gradient(60vw 60vw at 50% 96%,rgba(255,80,160,.34),transparent 60%);
  --panel:rgba(255,255,255,.09); --panel-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.2);
  --text:#f3f5fb; --muted:rgba(233,238,250,.66); --accent:#8ab4ff; --accent-ink:#0a1020;
  --font-ui:"Space Grotesk",system-ui,sans-serif;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-num:"Space Grotesk",system-ui,sans-serif;
  --card-radius:20px; --tint:26%; --card-accent:0px;
  --card-border:1px solid rgba(255,255,255,.22);
  --shadow:0 4px 24px rgba(0,0,0,.3);
  --shadow-hi:0 10px 40px rgba(0,0,0,.42);
  --display-ls:-.03em;
}
[data-skin="glass"][data-mode="light"]{
  --bg:#dfe4f2;
  --bg-img:
    radial-gradient(58vw 58vw at 8% 2%,rgba(124,92,255,.6),transparent 58%),
    radial-gradient(52vw 52vw at 92% 12%,rgba(0,196,232,.52),transparent 60%),
    radial-gradient(60vw 60vw at 50% 98%,rgba(255,96,168,.42),transparent 60%);
  --panel:rgba(255,255,255,.42); --panel-2:rgba(255,255,255,.28);
  --line:rgba(255,255,255,.9);
  --text:#12162a; --muted:#4a5170; --accent:#4a5cf0; --accent-ink:#fff;
  --tint:30%;
}
[data-skin="glass"] .lesson,[data-skin="glass"] .nowcard,
[data-skin="glass"] .breakbar,[data-skin="glass"] .btn,
[data-skin="glass"] .topbar,[data-skin="glass"] .arrowbtn,
[data-skin="glass"] dialog,[data-skin="glass"] .gatecard,
[data-skin="glass"] .idrow,[data-skin="glass"] .dayswitch button{
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
}
/* the top widget: frosted, with a bright rim and a specular sheen so it
   actually reads as glass in light mode */
[data-skin="glass"] .topbar{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 30px rgba(30,40,90,.16), inset 0 1px 0 rgba(255,255,255,.7);
}
[data-skin="glass"] .topbar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.55),transparent 40%);
}
/* Separated header: no widget, so drop the frosted panel entirely on Glass */
[data-header="split"][data-skin="glass"] .topbar{
  border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
[data-header="split"][data-skin="glass"] .topbar::before{display:none}
[data-skin="glass"] .nowcard{border-color:rgba(255,255,255,.75)}
/* specular top edge — strong in light mode; gentle in dark so cards don't look
   like glossy plastic or wash out their text */
[data-skin="glass"] .lesson::after,[data-skin="glass"] .nowcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.1),transparent 32%);
}
[data-skin="glass"][data-mode="light"] .lesson::after,
[data-skin="glass"][data-mode="light"] .nowcard::after{
  background:linear-gradient(160deg,rgba(255,255,255,.4),transparent 42%);
}
/* dark mode: dial back the bright rims and inner sheen too */
[data-skin="glass"]:not([data-mode="light"]){ --card-border:1px solid rgba(255,255,255,.13); }
[data-skin="glass"]:not([data-mode="light"]) .topbar{
  border-color:rgba(255,255,255,.16);
  box-shadow:0 8px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
[data-skin="glass"]:not([data-mode="light"]) .topbar::before{
  background:linear-gradient(150deg,rgba(255,255,255,.14),transparent 40%);
}
[data-skin="glass"]:not([data-mode="light"]) .nowcard{ border-color:rgba(255,255,255,.2); }

/* ── SWISS ─ stark white, hairlines, no shadow ─────────────────── */
[data-skin="swiss"]{
  --bg:#fff; --bg-img:none; --panel:#fff; --panel-2:#f6f6f6;
  --line:#111; --text:#000; --muted:#767676; --accent:#e8112d; --accent-ink:#fff;
  --font-ui:"Space Grotesk",Helvetica,Arial,sans-serif;
  --font-display:"Space Grotesk",Helvetica,sans-serif;
  --font-num:"Space Grotesk",Helvetica,sans-serif;
  --card-radius:0px; --tint:0%; --card-accent:0px;
  --card-border:1px solid #111;
  --shadow:none; --shadow-hi:none;
  --display-ls:-.045em; --display-w:700;
}
[data-skin="swiss"][data-mode="dark"]{
  --bg:#000; --panel:#000; --panel-2:#111; --line:#fff; --text:#fff; --muted:#8c8c8c;
  --card-border:1px solid #fff;
}
[data-skin="swiss"] .lesson{border-top:5px solid var(--c,var(--accent))}
[data-skin="swiss"] .lesson:hover{background:var(--panel-2)}
[data-skin="swiss"] .colhead .dow{text-transform:uppercase;letter-spacing:.06em;font-size:0.75rem}

/* ── TERMINAL ─ phosphor CRT ───────────────────────────────────── */
[data-skin="terminal"],[data-skin="terminal"][data-mode="light"]{
  --bg:#05080a; --bg-img:none; --panel:#0b1114; --panel-2:#0f171b;
  --line:#265046; --text:#b6ffd6; --muted:#5fae87; --accent:#39ff9e; --accent-ink:#04120a;
  --font-ui:"JetBrains Mono",ui-monospace,monospace;
  --font-display:"JetBrains Mono",monospace;
  --font-num:"JetBrains Mono",monospace;
  --card-radius:0px; --tint:16%; --card-accent:3px;
  --card-border:1px solid #1d3a33;
  --shadow:none; --shadow-hi:0 0 0 1px var(--accent);
  --display-ls:.04em; --display-tt:uppercase;
}
[data-skin="terminal"] body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
[data-skin="terminal"] .lesson .s::before{content:"> ";color:var(--accent)}
[data-skin="terminal"] .lesson:hover{box-shadow:0 0 14px rgba(57,255,158,.28)}

/* ── BLUEPRINT ─ drafting paper ────────────────────────────────── */
[data-skin="blueprint"],[data-skin="blueprint"][data-mode="light"]{
  --bg:#07223d;
  --bg-img:
    repeating-linear-gradient(to right,rgba(255,255,255,.07) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 28px);
  --panel:rgba(9,42,74,.82); --panel-2:rgba(12,52,90,.9);
  --line:rgba(150,210,255,.55);
  --text:#f2f9ff; --muted:#a9d2f2; --accent:#7ff0ff; --accent-ink:#052033;
  --font-ui:"Space Mono",monospace;
  --font-display:"Space Mono",monospace;
  --font-num:"Space Mono",monospace;
  --card-radius:0px; --tint:14%; --card-accent:0px;
  --card-border:1px dashed rgba(150,210,255,.55);
  --shadow:none; --shadow-hi:none;
  --display-tt:uppercase; --display-ls:.08em;
}
[data-skin="blueprint"] .lesson{outline:1px solid rgba(150,210,255,.14);outline-offset:3px}
[data-skin="blueprint"] .lesson:hover{border-style:solid}

/* ── BRUTAL ─ thick borders, hard shadows ──────────────────────── */
[data-skin="brutal"]{
  --bg:#ffe94a; --bg-img:none; --panel:#fffdf5; --panel-2:#fff4c2;
  --line:#000; --text:#000; --muted:#4a4a4a; --accent:#0047ff; --accent-ink:#fff;
  --card-radius:0px; --tint:34%; --card-accent:0px;
  --card-border:3px solid #000;
  --shadow:5px 5px 0 #000; --shadow-hi:8px 8px 0 #000;
  --font-ui:"Space Grotesk",system-ui,sans-serif;
  --font-display:"Archivo Black",system-ui,sans-serif;
  --font-num:"Space Grotesk",monospace;
  --display-tt:uppercase; --display-ls:-.01em;
}
[data-skin="brutal"][data-mode="dark"]{
  --bg:#12121a; --panel:#20202c; --panel-2:#2a2a38; --line:#fff;
  --text:#fff; --muted:#b3b3c4; --accent:#ffe94a; --accent-ink:#000;
  --card-border:3px solid #fff; --shadow:5px 5px 0 #fff; --shadow-hi:8px 8px 0 #fff;
}
[data-skin="brutal"] .lesson:hover{translate:-3px -3px}

/* ═══════════════ shared structure ═══════════════ */

/* ── Zen wallpaper mode ────────────────────────────────────────────
   The page paints nothing; cards, bars and dialogs stay opaque enough
   to read on top of whatever the browser is showing behind. */
html.zen{--page-bg:transparent;--page-img:none;background:transparent}
html.zen body{background-color:transparent;background-image:none}
html.zen body::after{display:none}          /* terminal scanlines would tint it */
html.zen .dayhead,html.zen .corner,html.zen .tcol{background:transparent}
/* break bars are nearly transparent by design; over an unknown wallpaper they
   need a backing or the label sits straight on the picture */
html.zen .breakbar{background:color-mix(in srgb,var(--panel) 88%,transparent)}
html.zen [data-skin="paper"] .grid::before{opacity:.55}

/* ── accessibility ────────────────────────────────────────────────
   Text size scales type only; zoom scales the whole interface.
   Both are applied as data-attributes on <html> by theme.js.        */
html{font-size:calc(16px * var(--text-scale, 1))}
body{zoom:var(--ui-zoom, 1)}
@supports not (zoom: 1){
  /* Safari/Firefox fallback: transform-based scaling */
  body{transform:scale(var(--ui-zoom,1));transform-origin:top center;
       width:calc(100% / var(--ui-zoom, 1))}
}
html[data-contrast="high"]{--muted:var(--text)}
html[data-contrast="high"] .lesson,html[data-contrast="high"] .nowcard{border-width:2px}
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after{
  transition-duration:.001s !important;animation-duration:.001s !important
}

/* ── iPhone and iPad ──────────────────────────────────────────────
   Safari zooms the page into any text box smaller than 16px when it's
   tapped, and leaves it zoomed. Only iOS understands -webkit-touch-callout,
   so no other device (desktop included) sees this rule.              */
@supports (-webkit-touch-callout:none){
  @media (pointer:coarse){
    input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=button]):not([type=submit]),
    textarea,select{font-size:max(16px,1em)!important}
  }
}


/* ══════════════════════════════════════════════════════════════════
   CLASSIC — a faithful port of the original NBSC timetable: Apple
   system type, frosted white panels, pastel subject dots and a
   coloured outline on every card.
   ══════════════════════════════════════════════════════════════════ */
[data-skin="classic"]{
  --bg:#e9edf3;
  --bg-img:none;
  --panel:rgba(255,255,255,.75); --panel-2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.6);
  --text:#1d1d1f; --muted:rgba(29,29,31,.55); --accent:#0a84ff; --accent-ink:#fff;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Inter,sans-serif;
  --font-num:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,sans-serif;
  --card-radius:16px; --radius:14px; --tint:0%; --card-accent:0px;
  --card-border:1px solid var(--line);
  --shadow:0 8px 22px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08);
  --shadow-hi:0 14px 32px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.1);
  --display-ls:-.02em; --display-w:700; --display-tt:normal;
}
[data-skin="classic"][data-mode="dark"]{
  --bg:#101114;
  --bg-img:radial-gradient(circle at 20% 10%,rgba(255,255,255,.05),transparent 55%);
  --panel:rgba(44,44,48,.62); --panel-2:rgba(32,32,36,.5);
  --line:rgba(255,255,255,.12);
  --text:#f5f5f7; --muted:rgba(245,245,247,.62); --accent:#409cff;
  --shadow:0 8px 22px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  --shadow-hi:0 14px 32px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35);
}
[data-skin="classic"] .lesson,[data-skin="classic"] .nowcard,
[data-skin="classic"] .btn,[data-skin="classic"] .weekbtn,
[data-skin="classic"] dialog,[data-skin="classic"] .gatecard,
[data-skin="classic"] .idrow,[data-skin="classic"] .dayswitch button{
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
}
/* the original outlines each card in its subject colour */
[data-skin="classic"] .lesson{outline:2.5px solid var(--c,var(--accent));outline-offset:0}
[data-skin="classic"] .lesson.current{outline-color:var(--accent);outline-width:2.5px}
/* outlines off: drop the coloured ring, leave a plain border (dot stays) */
html.nooutline[data-skin="classic"] .lesson:not(.current){outline:none}
html.nooutline[data-skin="classic"] .nowcard{outline:none}
/* keep Classic's own absolute dot rather than the generic inline one */
html.nooutline[data-skin="classic"] .lesson .s::before{
  position:absolute;left:0;top:.45em;width:6px;height:6px;margin:0;
  background:var(--c,var(--accent));
}
[data-skin="classic"] .lesson .s{padding-left:12px;position:relative}
[data-skin="classic"] .lesson .s::before{
  content:"";position:absolute;left:0;top:.45em;
  width:6px;height:6px;border-radius:50%;background:var(--c,var(--accent));
}
[data-skin="classic"] .breakbar{
  background:rgba(255,255,255,.55);border:1px dashed rgba(29,29,31,.22);
  border-radius:16px;color:var(--text);opacity:.9;
}
[data-skin="classic"][data-mode="dark"] .breakbar{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
}
[data-skin="classic"] .dbody{background:rgba(255,255,255,.025);border-radius:18px}
[data-skin="classic"][data-mode="dark"] .dbody{background:rgba(255,255,255,.015)}
[data-skin="classic"] .dayhead .rule{display:none}
/* current day is shown by the blue text alone — no dot */

/* ══════════════════════════════════════════════════════════════════
   RETRO — early-2000s desktop web: teal ground, bevelled chrome,
   glossy gradient buttons and Tahoma.
   ══════════════════════════════════════════════════════════════════ */
[data-skin="retro"]{
  --bg:#008080;
  --bg-img:none;
  --panel:#d4d0c8; --panel-2:#c3c0b8;
  --line:#7b7b70; --text:#000; --muted:#3b3b33; --accent:#000080; --accent-ink:#fff;
  --font-ui:Tahoma,"MS Sans Serif",Verdana,Geneva,sans-serif;
  --font-display:Tahoma,"MS Sans Serif",Verdana,sans-serif;
  --font-num:Tahoma,"MS Sans Serif",Verdana,sans-serif;
  --card-radius:0px; --radius:0px; --tint:22%; --card-accent:0px;
  --card-border:2px solid #ffffff;
  --shadow:2px 2px 0 rgba(0,0,0,.45);
  --shadow-hi:3px 3px 0 rgba(0,0,0,.55);
  --display-ls:0; --display-w:700; --display-tt:none;
}
[data-skin="retro"][data-mode="dark"]{
  --bg:#003b3b; --panel:#333; --panel-2:#282828;
  --line:#111; --text:#f2f2f2; --muted:#c9c9c9; --accent:#00c8ff; --accent-ink:#001018;
  --card-border:2px solid #6e6e6e;
  --tint:13%;
}
/* the bevel: light on top-left, shadow on bottom-right */
[data-skin="retro"] .lesson,[data-skin="retro"] .nowcard,
[data-skin="retro"] .btn,[data-skin="retro"] .weekbtn,
[data-skin="retro"] dialog,[data-skin="retro"] .gatecard{
  border-top-color:#fff;border-left-color:#fff;
  border-right-color:#5a5a52;border-bottom-color:#5a5a52;
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%);
}
[data-skin="retro"][data-mode="dark"] .lesson,[data-skin="retro"][data-mode="dark"] .nowcard,
[data-skin="retro"][data-mode="dark"] .btn{
  border-top-color:#7d7d7d;border-left-color:#7d7d7d;
  border-right-color:#141414;border-bottom-color:#141414;
}
[data-skin="retro"] .btn:active,[data-skin="retro"] .weekbtn:active{
  border-top-color:#5a5a52;border-left-color:#5a5a52;
  border-right-color:#fff;border-bottom-color:#fff;
}
[data-skin="retro"] .weekbtn{
  background-image:linear-gradient(180deg,#3a6ea5,#000080);color:#fff;
}
[data-skin="retro"] .lesson .s{text-shadow:1px 1px 0 rgba(255,255,255,.6)}
[data-skin="retro"][data-mode="dark"] .lesson .s{text-shadow:none}
[data-skin="retro"] .breakbar{
  border:2px solid;border-top-color:#5a5a52;border-left-color:#5a5a52;
  border-right-color:#fff;border-bottom-color:#fff;
  background-color:var(--panel);
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.07) 0 4px,transparent 4px 8px);
  color:var(--text);opacity:1;
}
[data-skin="retro"] .dayhead .dow{
  background:linear-gradient(180deg,#3a6ea5,#000080);color:#fff;
  padding:4px 2px;display:block;
}
[data-skin="retro"][data-mode="dark"] .dayhead .dow{background:linear-gradient(180deg,#0a5a72,#012a38)}
[data-skin="retro"] .dayhead.today .dow{background:linear-gradient(180deg,#c86a00,#7a3f00)}

/* ══════════════════════════════════════════════════════════════════
   SCIFI — ship's console: notched panels, cyan glow, wide caps.
   ══════════════════════════════════════════════════════════════════ */
[data-skin="scifi"],[data-skin="scifi"][data-mode="light"]{
  --bg:#04070d;
  --bg-img:
    radial-gradient(80vw 60vh at 50% -10%,rgba(0,190,255,.16),transparent 70%),
    repeating-linear-gradient(to bottom,rgba(0,229,255,.05) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(to right,rgba(0,229,255,.05) 0 1px,transparent 1px 42px);
  --panel:rgba(9,26,44,.78); --panel-2:rgba(13,36,60,.86);
  --line:rgba(0,214,255,.38);
  --text:#dff4ff; --muted:#83bdd6; --accent:#00e5ff; --accent-ink:#02121a;
  --font-ui:"Space Grotesk",system-ui,sans-serif;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-num:"Space Mono",monospace;
  --card-radius:0px; --radius:0px; --tint:20%; --card-accent:3px;
  --card-border:1px solid rgba(0,214,255,.38);
  --shadow:0 0 0 1px rgba(0,229,255,.08);
  --shadow-hi:0 0 18px rgba(0,229,255,.35);
  --display-ls:.14em; --display-tt:uppercase; --display-w:700;
}
/* clipped corners read as machined panels */
[data-skin="scifi"] .lesson,[data-skin="scifi"] .nowcard,[data-skin="scifi"] .breakbar{
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}
[data-skin="scifi"] .lesson{
  border-left:3px solid var(--c,var(--accent));
  box-shadow:inset 0 0 22px rgba(0,229,255,.07);
}
[data-skin="scifi"] .lesson:hover{box-shadow:inset 0 0 22px rgba(0,229,255,.12),0 0 18px rgba(0,229,255,.3)}
[data-skin="scifi"] .lesson.current{outline:1px solid var(--accent);box-shadow:0 0 22px rgba(0,229,255,.5)}
[data-skin="scifi"] .lesson .s{letter-spacing:.06em}
[data-skin="scifi"] .dayhead .dow{text-shadow:0 0 14px rgba(0,229,255,.5)}
[data-skin="scifi"] .dayhead .rule{background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:1}
[data-skin="scifi"] .dayhead.today .rule{background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 10px rgba(0,229,255,.6)}
[data-skin="scifi"] .weekbtn{box-shadow:0 0 16px rgba(0,229,255,.4)}
[data-skin="scifi"] .breakbar{border-style:solid;border-color:rgba(0,214,255,.22)}
[data-skin="scifi"] .tmark{color:var(--accent);opacity:.65}

/* ══════════════════════════════════════════════════════════════════
   NEWSPRINT — broadsheet: cream stock, hairline rules, serif heads.
   ══════════════════════════════════════════════════════════════════ */
[data-skin="newsprint"]{
  --bg:#f4f1e8;
  --bg-img:none;
  --panel:#fbf9f3; --panel-2:#efebdf;
  --line:#241f18; --text:#171310; --muted:#5d564c; --accent:#8c1c13; --accent-ink:#fff;
  --font-ui:"DM Sans",Georgia,serif;
  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-num:"DM Sans",Georgia,serif;
  --card-radius:0px; --radius:0px; --tint:0%; --card-accent:0px;
  --card-border:1px solid var(--line);
  --shadow:none; --shadow-hi:none;
  --display-ls:-.01em; --display-w:400; --display-tt:none;
}
[data-skin="newsprint"][data-mode="dark"]{
  --bg:#14120e; --panel:#1c1a15; --panel-2:#232019;
  --line:#d9d2c4; --text:#f2ede1; --muted:#a79d8c; --accent:#e0655a;
}
[data-skin="newsprint"] .lesson{border-top:3px double var(--line)}
[data-skin="newsprint"] .lesson .s{font-size:0.96875rem;line-height:1.1}
[data-skin="newsprint"] .lesson .r{
  font-variant:small-caps;letter-spacing:.06em;font-weight:400;
}
[data-skin="newsprint"] .lesson .t{font-style:italic}
[data-skin="newsprint"] .dayhead .dow{
  font-variant:small-caps;letter-spacing:.09em;font-size:1.0625rem;
}
[data-skin="newsprint"] .dayhead .rule{height:1px;background:var(--line);opacity:1}
[data-skin="newsprint"] .dayhead.today .rule{height:3px}
[data-skin="newsprint"] .breakbar{
  border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.045) 0 3px,transparent 3px 6px);
  border-radius:0;
}
[data-skin="newsprint"] .weekbtn{border:1px solid var(--line)}