@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The design reference PDF's structure (header card, headed table, venue
   chips, red holiday rows) in midnight navy with ivory type and one gold
   accent. Every colour is a variable so the light theme below is the same
   design on warm paper. theme.js sets data-theme before the first paint. */
:root {
  --bg: #070a12;
  --glow: rgba(217, 185, 124, 0.1);
  --card: #0d1220;
  --card-2: #0b0f1b;
  --band: #121829;
  --raised: #161d30;
  --field: rgba(7, 10, 18, 0.55);
  --line: rgba(222, 200, 160, 0.13);
  --line-strong: rgba(222, 200, 160, 0.24);
  --text: #f4f0e8;
  --text-2: #b9b6ae;
  --text-3: #86857f;
  --gold: #d9b97c;
  --gold-soft: rgba(217, 185, 124, 0.11);
  --gold-1: #e6c98f;
  --gold-2: #cfad6c;
  --gold-ink: #1b1508;
  --now-1: rgba(217, 185, 124, 0.17);
  --now-2: rgba(217, 185, 124, 0.05);
  --rose: #eaa3a3;
  --rose-soft: rgba(190, 70, 70, 0.14);
  --rose-line: rgba(234, 163, 163, 0.28);
  --rose-fill: rgba(190, 70, 70, 0.22);
  --ok: #7ad3a0;
  --sheet-1: #121829;
  --sheet-2: #0b0f1b;
  --backdrop: rgba(3, 5, 10, 0.62);
  --scrim: rgba(7, 10, 18, 0.82);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --past: 0.5;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.32, 0.72, 0, 1); /* the curve iOS uses for its own sheets */
  --glow-2: transparent; /* a second light, for themes that have one */
  --ts: 1; /* text size: Settings scales the timetable's type by this */
  --hw: 400; /* heading weight: the clean and rounded fonts need more than the serif */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f4f1ea;
  --glow: rgba(201, 160, 80, 0.16);
  --card: #ffffff;
  --card-2: #fefdfb;
  --band: #f5f1e8;
  --raised: #ffffff;
  --field: #ffffff;
  --line: rgba(70, 54, 20, 0.1);
  --line-strong: rgba(70, 54, 20, 0.2);
  --text: #171c2b;
  --text-2: #4b5060;
  --text-3: #6b6f7a; /* dark enough for small grey text on paper */
  --gold: #8a6516;
  --gold-soft: rgba(201, 160, 80, 0.14);
  --gold-1: #e6c98f;
  --gold-2: #d2ae69;
  --gold-ink: #1b1508;
  --now-1: rgba(214, 174, 96, 0.3);
  --now-2: rgba(214, 174, 96, 0.08);
  --rose: #b03a3a;
  --rose-soft: rgba(190, 70, 70, 0.08);
  --rose-line: rgba(176, 58, 58, 0.24);
  --rose-fill: rgba(190, 70, 70, 0.1);
  --ok: #1f7a4a; /* dark enough for small text on paper (AA) */
  --sheet-1: #ffffff;
  --sheet-2: #fbf9f4;
  --backdrop: rgba(22, 26, 40, 0.34);
  --scrim: #0d1322; /* stays navy: iOS draws the clock and battery in white over it */
  --shadow: 0 1px 2px rgba(40, 30, 10, 0.05), 0 14px 30px -22px rgba(40, 30, 10, 0.35);
  --past: 0.55;
  color-scheme: light;
}

/* the student's text size and layout (Settings) */
:root[data-text="small"] { --ts: 0.92; }
:root[data-text="large"] { --ts: 1.1; }
:root[data-text="larger"] { --ts: 1.22; }
/* fonts (Plus): the headings change; the body stays Geist */
:root[data-font="clean"] { --serif: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --hw: 600; }
:root[data-font="rounded"] { --serif: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Geist", sans-serif; --hw: 600; }
:root[data-font="clean"] h1, :root[data-font="clean"] h2, :root[data-font="clean"] .weekpick-label, :root[data-font="clean"] .wl-label,
:root[data-font="rounded"] h1, :root[data-font="rounded"] h2, :root[data-font="rounded"] .weekpick-label, :root[data-font="rounded"] .wl-label { letter-spacing: -0.02em; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  /* light themes: the theme's colours wash down the page (Midnight light stays plain paper) */
  /* The glow from the top, a second light for themes that have one, and (light themes) the colour wash.
     On the whole page background, so it fades to the screen's edges with no box around it. */
  background-image:
    radial-gradient(min(900px, 120vw) 420px at 50% 0, var(--glow), transparent 70%),
    radial-gradient(min(700px, 90vw) 360px at 0 60px, var(--glow-2), transparent 70%),
    linear-gradient(180deg, var(--wash-1, transparent) 0, var(--bg) 420px, var(--wash-2, var(--bg)) 100%);
  background-repeat: no-repeat;
  color: var(--text);
  font: 400 15px/1.45 "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Installed on a phone, the page runs under the status bar. This strip keeps
   the clock and battery readable over whatever scrolls beneath them. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: env(safe-area-inset-top);
  background: var(--scrim);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  z-index: 5;
  pointer-events: none;
}

/* switching theme in Settings: colours cross-fade rather than snap */
html.theming, html.theming *, html.theming *::before {
  transition: background-color 0.36s ease, color 0.36s ease, border-color 0.36s ease, box-shadow 0.36s ease !important;
}

.page {
  position: relative;
  max-width: 820px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: hidden; /* the table slides sideways between weeks; the page must not */
  overflow-x: clip;
  padding: calc(12px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
    calc(36px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
/* soft gold light falling from the top */
.page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  background: none; /* the glow is on the page background now (body) */
  pointer-events: none;
}
.page > * { position: relative; }

p, h1, h2 { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: transform 0.22s var(--spring), background-color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
button:active:not(:disabled) { transform: scale(0.965); transition-duration: 0.08s; }
button:disabled { cursor: default; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; }

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.surface {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- header card: navy in both themes ---------- */
.hero {
  --text: #f4f0e8;
  --text-2: #b9b6ae;
  --text-3: #86857f;
  --line: rgba(222, 200, 160, 0.13);
  --ok: #7ad3a0;
  --rose: #eaa3a3;
  --gold: var(--hero-gold, #d9b97c);
  --pattern: none;
  padding: 13px 14px 15px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--hero-line, rgba(222, 200, 160, 0.24));
  color: var(--text);
  background:
    var(--pattern),
    radial-gradient(90% 160% at 100% 0%, var(--hero-glow, rgba(217, 185, 124, 0.16)), transparent 60%),
    linear-gradient(165deg, var(--hero-1, #172038), var(--hero-2, #0d1322) 70%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 50px -28px rgba(0, 0, 0, 0.9);
}
/* header patterns and photo (Plus). The photo sits under a dark wash so the type stays readable. */
:root[data-header="dots"] .hero { --pattern: radial-gradient(circle at 1px 1px, rgba(244, 240, 232, 0.13) 1px, transparent 1.6px) 0 0 / 14px 14px; }
:root[data-header="grid"] .hero { --pattern: linear-gradient(rgba(244, 240, 232, 0.06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(244, 240, 232, 0.06) 1px, transparent 1px) 0 0 / 22px 22px; }
:root[data-header="waves"] .hero { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath d='M0 12c10 0 10-8 20-8s10 8 20 8 10-8 20-8 10 8 20 8' fill='none' stroke='%23f4f0e8' stroke-opacity='.1' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 80px 24px; }
:root[data-header="stars"] .hero { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='70' viewBox='0 0 90 70'%3E%3Cg fill='%23f4f0e8'%3E%3Ccircle cx='8' cy='12' r='1' opacity='.5'/%3E%3Ccircle cx='52' cy='6' r='.8' opacity='.35'/%3E%3Ccircle cx='74' cy='40' r='1.1' opacity='.45'/%3E%3Ccircle cx='30' cy='52' r='.7' opacity='.3'/%3E%3Ccircle cx='86' cy='64' r='.6' opacity='.3'/%3E%3Cpath d='M40 30l1 2.4 2.4 1-2.4 1-1 2.4-1-2.4-2.4-1 2.4-1z' opacity='.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 90px 70px; }
:root[data-header="photo"] .hero { --pattern: linear-gradient(180deg, rgba(7, 10, 18, 0.5), rgba(7, 10, 18, 0.78)), var(--hero-photo) center / cover no-repeat; }
:root[data-header="photo"] .hero #subtitle { color: #d8d4cb; }
/* ---------- theme animations in the header ----------
   Fourteen small particles; each theme moves them its own way. Off with
   the Personalise switch, and for anyone whose phone asks for less motion. */
.hero > .hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hero-fx i { position: absolute; display: none; left: var(--x); top: var(--y); will-change: transform, opacity; }
:root[data-fx] .hero-fx i { display: block; }

/* Christmas: snow of different sizes, drifting as it falls */
:root[data-fx="snow"] .hero-fx i {
  top: -8px; width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%;
  background: #fff; opacity: 0; box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  animation: fx-snow var(--t) linear var(--d) infinite;
}
@keyframes fx-snow {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  35% { transform: translate3d(10px, 60px, 0); }
  65% { transform: translate3d(-8px, 120px, 0); }
  90% { opacity: 0.8; }
  100% { transform: translate3d(6px, 190px, 0); opacity: 0; }
}

/* Diwali: firework bursts in gold, orange and pink */
:root[data-fx="fireworks"] .hero-fx i {
  width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; color: #ffd27a; background: currentColor; opacity: 0;
  box-shadow:
    0 -26px 0 0.5px currentColor, 0 26px 0 0.5px currentColor, 26px 0 0 0.5px currentColor, -26px 0 0 0.5px currentColor,
    18px 18px 0 0.5px currentColor, -18px 18px 0 0.5px currentColor, 18px -18px 0 0.5px currentColor, -18px -18px 0 0.5px currentColor,
    0 -14px 0 -0.5px #fff3, 0 14px 0 -0.5px #fff3, 14px 0 0 -0.5px #fff3, -14px 0 0 -0.5px #fff3;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
  animation: fx-burst calc(var(--t) * 0.55) cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) infinite;
}
:root[data-fx="fireworks"] .hero-fx i:nth-child(3n) { color: #ff9a4a; }
:root[data-fx="fireworks"] .hero-fx i:nth-child(3n + 1) { color: #ff7eb6; }
:root[data-fx="fireworks"] .hero-fx i:nth-child(4n) { color: #9ee7ff; }
:root[data-fx="fireworks"] .hero-fx i:nth-child(n + 10) { display: none; }
@keyframes fx-burst {
  0%, 40% { transform: scale(0.05); opacity: 0; }
  44% { opacity: 1; }
  80% { opacity: 0.85; }
  100% { transform: scale(calc(1.25 * var(--s))) translate3d(0, 6px, 0); opacity: 0; }
}

/* Holi: soft clouds of colour that bloom and fade */
:root[data-fx="holi"] .hero-fx i {
  width: calc(70px * var(--s)); height: calc(70px * var(--s)); margin: -35px 0 0 -35px; border-radius: 50%;
  background: radial-gradient(circle, var(--c, #ff5ca0) 0, transparent 68%); opacity: 0;
  animation: fx-bloom var(--t) ease-in-out var(--d) infinite;
}
:root[data-fx="holi"] .hero-fx i:nth-child(5n + 1) { --c: #ff5ca0; }
:root[data-fx="holi"] .hero-fx i:nth-child(5n + 2) { --c: #36c8ff; }
:root[data-fx="holi"] .hero-fx i:nth-child(5n + 3) { --c: #ffd23c; }
:root[data-fx="holi"] .hero-fx i:nth-child(5n + 4) { --c: #5be37d; }
:root[data-fx="holi"] .hero-fx i:nth-child(5n) { --c: #b07cff; }
:root[data-fx="holi"] .hero-fx i:nth-child(n + 9) { display: none; }
@keyframes fx-bloom {
  0% { transform: scale(0.2) translate3d(0, 6px, 0); opacity: 0; }
  30% { opacity: 0.55; }
  100% { transform: scale(1.5) translate3d(0, -6px, 0); opacity: 0; }
}

/* Ocean: bubbles rising */
:root[data-fx="bubbles"] .hero-fx i {
  top: auto; bottom: -10px; width: calc(7px * var(--s)); height: calc(7px * var(--s)); border-radius: 50%;
  border: 1px solid rgba(190, 235, 255, 0.55); background: rgba(190, 235, 255, 0.08); opacity: 0;
  animation: fx-rise var(--t) ease-in var(--d) infinite;
}
@keyframes fx-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 0.9; }
  50% { transform: translate3d(6px, -70px, 0); }
  100% { transform: translate3d(-4px, -150px, 0); opacity: 0; }
}

/* Forest: fireflies wandering and glowing */
:root[data-fx="fireflies"] .hero-fx i {
  width: 4px; height: 4px; border-radius: 50%; background: #e9ff8a; opacity: 0;
  box-shadow: 0 0 8px 2px rgba(220, 255, 120, 0.6);
  animation: fx-wander var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes fx-wander {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  25% { opacity: 0.9; }
  50% { transform: translate3d(14px, -10px, 0); opacity: 0.25; }
  75% { opacity: 0.9; }
  100% { transform: translate3d(-10px, 8px, 0); opacity: 0.1; }
}

/* Plum and Royal: twinkling sparkles */
:root[data-fx="sparkle"] .hero-fx i {
  width: calc(8px * var(--s)); height: calc(8px * var(--s)); opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  background: var(--hero-gold, #e6c98f);
  animation: fx-twinkle calc(var(--t) * 0.5) ease-in-out var(--d) infinite;
}
@keyframes fx-twinkle {
  0%, 100% { transform: scale(0.3) rotate(0deg); opacity: 0; }
  50% { transform: scale(1) rotate(45deg); opacity: 0.85; }
}

/* Mocha and Exam calm: slow warm motes drifting up */
:root[data-fx="motes"] .hero-fx i {
  width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%;
  background: var(--hero-gold, #e6c98f); opacity: 0;
  animation: fx-mote calc(var(--t) * 1.6) ease-in-out var(--d) infinite;
}
@keyframes fx-mote {
  0% { transform: translate3d(0, 10px, 0); opacity: 0; }
  40% { opacity: 0.6; }
  100% { transform: translate3d(8px, -40px, 0); opacity: 0; }
}

/* Obsidian: now and then, a shooting star */
:root[data-fx="shooting"] .hero-fx i {
  top: calc(var(--y) * 0.6); width: 70px; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9)); opacity: 0;
  transform: rotate(-18deg);
  animation: fx-shoot calc(var(--t) * 1.4) ease-in var(--d) infinite;
}
:root[data-fx="shooting"] .hero-fx i:nth-child(n + 4) { display: none; }
@keyframes fx-shoot {
  0%, 82% { transform: rotate(-18deg) translate3d(-40px, 0, 0); opacity: 0; }
  86% { opacity: 1; }
  100% { transform: rotate(-18deg) translate3d(160px, 0, 0); opacity: 0; }
}

/* Aurora: slow ribbons of light */
:root[data-fx="aurora"] .hero-fx i {
  top: -30%; left: -30%; width: 160%; height: 70%; border-radius: 50%; opacity: 0.35; filter: blur(18px);
  background: linear-gradient(90deg, transparent, rgba(80, 255, 200, 0.55), rgba(150, 110, 255, 0.5), transparent);
  animation: fx-aurora calc(var(--t) * 2) ease-in-out var(--d) infinite alternate;
}
:root[data-fx="aurora"] .hero-fx i:nth-child(2) { top: 20%; opacity: 0.25; animation-direction: alternate-reverse; }
:root[data-fx="aurora"] .hero-fx i:nth-child(n + 3) { display: none; }
@keyframes fx-aurora {
  from { transform: translate3d(-12%, 0, 0) skewX(-12deg); }
  to { transform: translate3d(12%, 8%, 0) skewX(12deg); }
}

@media (prefers-reduced-motion: reduce) { .hero-fx { display: none; } }

/* seasonal decorations */
:root[data-deco="diwali"] .hero::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 50% 70%, #ffcf6b 0 2.2px, rgba(255, 190, 80, 0.45) 2.6px 4px, transparent 5px) 0 0 / 26px 12px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.7));
  animation: twinkle 2.4s ease-in-out infinite alternate;
}

:root[data-deco="holi"] .hero::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(40% 60% at 8% 100%, rgba(255, 92, 160, 0.22), transparent 70%), radial-gradient(35% 55% at 60% 0%, rgba(80, 200, 255, 0.18), transparent 70%), radial-gradient(30% 50% at 96% 90%, rgba(255, 210, 60, 0.2), transparent 70%);
}
@keyframes twinkle { from { opacity: 0.75; } to { opacity: 1; } }
.hero { position: relative; overflow: hidden; }
.hero > * { position: relative; z-index: 1; }
:root[data-theme="light"] .hero { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 34px -22px rgba(13, 19, 34, 0.55); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.hero h1 { font: var(--hw) 30px/1.1 var(--serif); letter-spacing: -0.005em; white-space: nowrap; }
.hero #subtitle { margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
.sync {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(7, 10, 18, 0.5);
  font-size: 12px;
  color: var(--text-2);
}
.icon-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(7, 10, 18, 0.5);
  color: var(--text-2);
}
.icon-btn svg { width: 16px; height: 16px; transition: transform 0.5s var(--spring); }
/* the header's small round buttons: a finger-sized tap area around them */
.icon-btn, .sync { position: relative; }
.icon-btn::after, .sync::after { content: ""; position: absolute; inset: -6px; }
.icon-btn:active svg { transform: rotate(50deg); }
/* light / dark switch in the header: shows the mode a tap switches to; locked (gold padlock) until sign-up */
.theme-btn { position: relative; }
.theme-btn svg { grid-area: 1 / 1; transition: transform 0.55s var(--spring), opacity 0.3s ease; }
.theme-btn:active svg { transform: none; }
.theme-btn .sun, .theme-btn .moon { color: var(--gold); }
:root[data-theme="dark"] .theme-btn .moon, :root[data-theme="light"] .theme-btn .sun { opacity: 0; transform: rotate(-70deg) scale(0.5); }
.theme-btn .lockb { display: none; }
.theme-btn.locked { border-color: rgba(222, 200, 160, 0.3); }
.theme-btn.locked .sun, .theme-btn.locked .moon { color: var(--text-2); }
.theme-btn.locked .lockb {
  display: block; position: absolute; top: -5px; right: -5px; box-sizing: content-box;
  width: 9px; height: 9px; padding: 3px; border-radius: 50%;
  color: var(--gold); stroke-width: 2.4; background: var(--hero-2, #0d1322); border: 1px solid rgba(222, 200, 160, 0.34);
}
.dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); transition: background-color 0.3s ease; }
.dot.live { background: var(--ok); }
/* a ring that breathes out from the dot while the timetable is live */
.dot.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: ring 2.6s ease-out infinite; }
.dot.busy { background: var(--gold); animation: pulse 1s ease-in-out infinite; }
.dot.bad { background: var(--rose); }
@keyframes pulse { 50% { opacity: 0.3; } }
@keyframes ring { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- week switcher: in the page, under the timetable ---------- */
.weeknav { display: flex; gap: 8px; margin-top: 12px; }
.weeknav button { min-height: 58px; }
.weeknav button:disabled { opacity: 0.4; }
.arrow { position: relative; flex: 0 0 54px; display: grid; place-items: center; color: var(--text-2); }
/* visitors: every week is there, behind a small gold lock */
.weeknav .lock, .weeknav .lockc { display: none; }
.weeknav.locked .lock { display: block; position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; color: var(--gold); stroke-width: 2.2; }
.weeknav.locked .arrow > svg:not(.lock) { opacity: 0.55; }
.weeknav.locked .weekpick .chev { display: none; }
.weeknav.locked .weekpick .lockc { display: block; width: 17px; height: 17px; }
.weekpick {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding: 6px 14px 8px 16px;
  text-align: left;
}
.weekpick-label { font: var(--hw) 24px/1.1 var(--serif); }
.weekpick-label b { margin-left: 9px; font: 500 10px/1 "Geist", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); vertical-align: 3px; }
.weekpick-meta { grid-column: 1; margin-top: 1px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weekpick svg { grid-column: 2; grid-row: 1 / span 2; color: var(--gold); }

/* ---------- the table ---------- */
#schedule { margin-top: 10px; touch-action: pan-y; }
#schedule.in-next { animation: in-next 0.42s var(--spring); }
#schedule.in-prev { animation: in-prev 0.42s var(--spring); }
#schedule.in-fade { animation: in-fade 0.36s var(--ease); }
#schedule.settle { transition: transform 0.42s var(--spring), opacity 0.3s ease; }
#schedule.leave { transition: transform 0.14s ease-in, opacity 0.14s ease-in; }
@keyframes in-next { from { opacity: 0; transform: translate3d(44px, 0, 0); } }
@keyframes in-prev { from { opacity: 0; transform: translate3d(-44px, 0, 0); } }
@keyframes in-fade { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
/* first appearance: the days arrive one after another */
#schedule.in-first .tt-head, #schedule.in-first .day, #schedule.in-first .tt-divider {
  animation: arrive 0.6s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes arrive { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

.tt { overflow: hidden; }

.tt-head, .row {
  display: grid;
  grid-template-columns: calc(132px * min(var(--ts), 1.1)) minmax(0, 1fr);
  column-gap: 10px;
  padding-left: 16px;
  padding-right: 16px;
}
.tt-head {
  padding-top: 13px;
  padding-bottom: 12px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.wide { display: none; }

.day { scroll-margin-top: 16px; }
.day-band {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px 10px;
  background: var(--band);
  border-top: 1px solid var(--line);
}
.day-band h2 { font: var(--hw) calc(22px * var(--ts))/1.1 var(--serif); }
.day-band h2 span { display: inline-block; white-space: nowrap; margin-left: 10px; font: 400 calc(12px * var(--ts))/1 "Geist", sans-serif; letter-spacing: 0.02em; color: var(--text-3); }
.day-count { margin-left: auto; font-size: calc(12px * var(--ts)); color: var(--text-3); white-space: nowrap; }
.day-band .pill { align-self: center; }

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  position: relative;
  grid-template-areas: "time name" "time chips";
  align-content: start;
  padding-top: 14px;
  padding-bottom: 15px;
  border-top: 1px solid var(--line);
}

.time { grid-area: time; padding-top: 2px; font-size: calc(12.5px * var(--ts)); font-weight: 500; color: var(--text-2); }
.time span { white-space: nowrap; }
.name { grid-area: name; font-size: calc(15.5px * var(--ts)); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: break-word; text-wrap: pretty; }
.name.long { font-size: calc(14px * var(--ts)); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.chips { grid-area: chips; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 5px; margin-top: 8px; }
.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: calc(11.5px * var(--ts));
}
button.chip { padding: 5px 11px; color: var(--gold); }
.chip.kind { border-color: transparent; padding-left: 0; padding-right: 2px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.row.empty .name { font-size: calc(13.5px * var(--ts)); font-weight: 400; color: var(--text-3); }

.pill {
  display: inline-block;
  padding: 3px 8px 2px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.time .pill { display: table; margin-top: 7px; }
.pill.now, .pill.today { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); }
.pill.next { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }

/* today, now */
.day.is-today .day-band { box-shadow: inset 2px 0 0 var(--gold); }
.row.is-now { background: linear-gradient(90deg, var(--now-1), var(--now-2)); }
.row.is-now .time { color: var(--gold); }
.time .left { display: block; margin-top: 5px; font-size: calc(11px * var(--ts)); font-weight: 400; color: var(--text-2); }
/* how far through the session in progress: a gold line along the row's foot */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-soft); overflow: hidden; }
.progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-1));
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* compact layout: the same table, tighter, so more of the week fits on screen */
:root[data-density="compact"] .row { padding-top: 8px; padding-bottom: 9px; }
:root[data-density="compact"] .chips { margin-top: 5px; }
:root[data-density="compact"] .day-band { padding-top: 7px; padding-bottom: 6px; }
:root[data-density="compact"] .tt-head { padding-top: 10px; padding-bottom: 9px; }
:root[data-density="compact"] .time .pill { margin-top: 4px; }

/* holiday: the PDF's red row */
.day.is-holiday .day-band, .row.holiday { background: var(--rose-soft); }
.day.is-holiday .day-band h2, .row.holiday .name { color: var(--rose); }
.day.is-holiday .day-band h2 span, .row.holiday .time { color: var(--rose); opacity: 0.75; }

/* what is already over this week, moved below what is still to come */
.tt-divider {
  padding: 14px 16px 12px;
  border-top: 1px solid var(--line-strong);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.day.is-past > * { opacity: var(--past); }

.day.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: inset 0 0 0 1.5px var(--gold); } 100% { box-shadow: inset 0 0 0 1.5px transparent; } }

/* loading placeholder: a light sweeps across it */
.skel { position: relative; height: 320px; overflow: hidden; }
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--gold-soft) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sweep 1.5s ease-in-out infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* ---------- note + footer ---------- */
.note { margin-top: 12px; padding: 15px 16px; font-size: calc(12.5px * var(--ts)); line-height: 1.65; color: var(--text-3); }
.note b { font-weight: 500; color: var(--gold); }
.note #note { color: var(--text-2); }
.foot { margin-top: 16px; padding: 0 12px; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--text-3); text-wrap: balance; }
.sheet-link {
  /* deliberately quiet: the same small grey as the line above it */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  margin-top: 4px;
  padding: 0 10px;
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.sheet-link:active { opacity: 0.6; }
.sheet-link svg { width: 11px; height: 11px; }

/* ---------- slide-up panels (weeks, sign-up, settings) ---------- */
dialog.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  margin: auto auto 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, var(--sheet-1), var(--sheet-2));
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.45);
}
/* while a panel is open the page behind it stays put */
html:has(dialog[open]) { overflow: hidden; }
dialog.sheet { touch-action: pan-y; }
/* the grabber: drag the panel down to close it */
dialog.sheet::before { content: ""; display: block; width: 38px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--line-strong); }
dialog.sheet:focus, dialog.sheet:focus-visible { outline: none; }
dialog.sheet::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
dialog.sheet[open] { animation: rise 0.5s var(--spring); }
dialog.sheet[open]::backdrop { animation: fade 0.35s ease; }
dialog.sheet.closing { animation: fall 0.3s cubic-bezier(0.4, 0, 1, 1) forwards; }
dialog.sheet.closing::backdrop { animation: fade 0.3s ease reverse forwards; }
dialog.sheet.dragging { animation: none; transition: none; }
dialog.sheet.snapping { animation: none; transition: transform 0.45s var(--spring); }
@keyframes rise { from { transform: translate3d(0, 100%, 0); } }
@keyframes fall { to { transform: translate3d(0, 100%, 0); } }
@keyframes fade { from { opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }

/* On a phone every panel is full screen, its title and Close always in reach
   at the top, and nothing of the page shows around it (not even with the
   keyboard up). Wider screens keep the centred card (below). */
@media (max-width: 679px) {
  dialog.sheet {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding-top: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  dialog.sheet::before { display: none; }
  dialog.sheet .sheet-head {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -16px 2px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 6px;
    background: var(--sheet-1);
    border-bottom: 1px solid transparent;
  }
  dialog.sheet .sheet-head h2 { font-size: 28px; }
  /* one colour, so the title bar has no edge; a hairline appears once the panel scrolls */
  dialog.sheet { background: var(--sheet-1); }
  dialog.sheet .sheet-head { min-height: calc(52px + env(safe-area-inset-top)); }
  dialog.sheet.scrolled .sheet-head { border-bottom-color: var(--line); }
}
@media (max-width: 359px) {
  .tool-name { font-size: 11.5px; white-space: nowrap; }
}
.buy-preview { position: relative; overflow: hidden; }
.row-btn:has(small) { min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
.row-btn small { line-height: 1.35; margin-top: 2px; }
.sheet h2 { font: var(--hw) 30px/1.1 var(--serif); }
.text-btn { min-height: 44px; padding-left: 16px; color: var(--text-2); font-size: 14px; }
.today-btn { width: 100%; min-height: 46px; margin-top: 10px; border-radius: 12px; border: 1px solid var(--line-strong); color: var(--gold); font-size: 14px; }
.weeklist { list-style: none; margin: 12px 0 0; padding: 0; }
.weeklist li + li { border-top: 1px solid var(--line); }
.weeklist button {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 9px 6px;
  text-align: left;
}
.weeklist button:active { transform: none; opacity: 0.6; }
.wl-label { font: var(--hw) 20px/1.15 var(--serif); }
.wl-label b { margin-left: 9px; font: 500 9.5px/1 "Geist", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); vertical-align: 2px; }
.wl-dates { grid-column: 1; font-size: 12.5px; color: var(--text-3); }
.wl-meta { grid-column: 2; grid-row: 1 / span 2; font-size: 12.5px; color: var(--text-3); text-align: right; }
.wl-meta em { display: block; font-style: normal; color: var(--rose); }
.weeklist button[aria-current="true"] .wl-label { color: var(--gold); }

/* ---------- buttons and links shared by the newer screens ---------- */
.primary, .ghost, .danger {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}
.primary { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); box-shadow: 0 8px 20px -12px rgba(170, 130, 50, 0.7); }
.primary:disabled { opacity: 0.6; }
.ghost { border: 1px solid var(--line-strong); color: var(--text-2); font-weight: 500; }
.danger { background: var(--rose-fill); border: 1px solid var(--rose-line); color: var(--rose); }
.danger:disabled { opacity: 0.6; }
.text-link { min-height: 44px; padding: 0 8px; font-size: 13.5px; color: var(--gold); }
.text-link:disabled { color: var(--text-3); }
.text-link.inline { min-height: 0; padding: 0; font-size: inherit; text-decoration: underline; }

/* ---------- notices: timetable updating, offline ---------- */
.notice { margin-top: 10px; padding: 14px 16px; border-radius: var(--radius); font-size: 13.5px; color: var(--text-2); background: var(--rose-soft); border: 1px solid var(--rose-line); }
.notice strong { display: block; margin-bottom: 2px; font-size: 14.5px; font-weight: 600; color: var(--rose); }
.notice.calm { background: var(--gold-soft); border-color: var(--line-strong); }
.notice.calm strong { color: var(--gold); }

/* ---------- first visit: pick a course ---------- */
.welcome { margin-top: 26px; text-align: center; }
.welcome h2 { font: var(--hw) 32px/1.1 var(--serif); animation: arrive 0.6s var(--spring) both; }
.lede { margin-top: 8px; font-size: 14px; color: var(--text-2); animation: arrive 0.6s var(--spring) 60ms both; }
.courses { list-style: none; margin: 20px 0 6px; padding: 0; overflow: hidden; text-align: left; animation: arrive 0.65s var(--spring) 120ms both; }
.courses li + li { border-top: 1px solid var(--line); }
.course {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  text-align: left;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
}
.course:active:not(:disabled) { transform: none; background: var(--gold-soft); }
.course svg { flex: 0 0 auto; color: var(--gold); transition: transform 0.3s var(--spring); }
.course:active svg { transform: translateX(4px); }
.years { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.years .chip { min-height: 36px; padding: 0 14px; }
.course-msg { padding: 18px; font-size: 13.5px; color: var(--text-2); }
.courses .skel { height: 290px; }

/* ---------- visitors: save your course ---------- */
.save-row {
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px 5px 14px;
  border-radius: 14px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text-2);
  border-color: var(--line-strong);
}
.save-row b { font-weight: 600; color: var(--gold); }
.save-row svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--gold); }
/* the same prompt, but for someone who has been here before */
.comeback { margin-top: 10px; padding: 14px 16px 6px; border-color: var(--line-strong); animation: in-fade 0.4s var(--ease); }
.comeback h2 { font: var(--hw) 22px/1.1 var(--serif); }
.comeback p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.comeback p b { font-weight: 600; color: var(--text); }
.comeback-actions { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.comeback .primary { width: auto; min-height: 42px; margin: 0; padding: 0 18px; font-size: 14px; }
/* a button with a second, smaller line under its label */
.primary.stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 56px; padding: 7px 0; }
.primary.stack small { font-size: 11.5px; font-weight: 500; opacity: 0.72; }
.save { margin-top: 12px; padding: 22px 18px 10px; text-align: center; border-color: var(--line-strong); }
.save h2 { font: var(--hw) 28px/1.1 var(--serif); }
.perks { list-style: none; margin: 0 auto 20px; padding: 0; max-width: 32ch; text-align: left; display: grid; gap: 9px; font-size: 14px; color: var(--text-2); }
.perks li { display: flex; gap: 10px; align-items: flex-start; }
.perks svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--gold); stroke-width: 2; }
.perks b { font-weight: 600; color: var(--text); }
.save p { margin: 8px auto 16px; max-width: 34ch; font-size: 14px; color: var(--text-2); text-wrap: balance; }

/* ---------- tools, under the header ---------- */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 70px;
  padding: 10px 4px 8px;
  text-align: center;
  border-radius: 16px;
}
.tool > svg { width: 22px; height: 22px; margin-bottom: 2px; color: var(--gold); }
.tool .tool-sub { max-width: 100%; font-size: 10.5px; }
/* visitors: the tools are there, each with a small gold padlock */
.tools.locked .tool { position: relative; }
.tools.locked .tool::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a35c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2.5'/%3E%3Cpath d='M8.5 11V8.5a3.5 3.5 0 0 1 7 0V11'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.tools.locked .tool-sub { color: var(--gold); }
.tool-name { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.tool-sub { font-size: 12px; line-height: 1.3; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-sub:empty { display: none; }
.tool:active:not(:disabled) { transform: scale(0.97); }
.tool .lockt { grid-row: 1 / span 2; grid-column: 3; width: 14px; height: 14px; color: var(--gold); stroke-width: 2.2; }

/* the one-time "tap a class" tip */
.tip { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 4px 6px 14px; font-size: 13px; line-height: 1.45; color: var(--text-2); border-color: var(--line-strong); }
.tip p { flex: 1 1 auto; }
.tip b { color: var(--gold); font-weight: 600; }
/* classes that open when tapped: a quiet arrow on the right */
.row.tap { padding-right: 30px; }
.row.tap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid var(--text-3); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.6; }
@media (min-width: 680px) { .row.tap { padding-right: 34px; } }

/* sharing the app */
.share-row {
  width: 100%;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-align: left;
}
.share-row svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--gold); }
.share-row span { font-size: 12.5px; line-height: 1.35; color: var(--text-3); }
.share-row b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }

/* days off */
.offlist { list-style: none; margin: 14px 0 4px; padding: 0; }
.offlist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
}
.offlist li:first-child { border-top: 0; }
.off-when { font: var(--hw) 19px/1.2 var(--serif); }
.off-why { grid-column: 1; font-size: 13px; color: var(--text-3); }
.off-in { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12.5px; color: var(--gold); white-space: nowrap; }
.offlist li.is-holiday .off-why { color: var(--rose); }
.off-none { color: var(--text-3); font-size: 14px; }

/* ---------- one-time install hint ---------- */
.hint { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 16px; font-size: 13px; line-height: 1.5; color: var(--text-2); border-color: var(--line-strong); }
.hint p { flex: 1 1 auto; }
.hint b { font-weight: 600; color: var(--text); }
.hint .share { width: 16px; height: 16px; margin: 0 1px -3px; color: var(--gold); }
.hint-go { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); font-size: 13px; font-weight: 600; }
.hint-x { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; color: var(--text-3); }
.hint-x svg { width: 16px; height: 16px; }

/* ---------- sponsor slot (hidden until one is set) ---------- */
.sponsor { margin-top: 12px; padding: 14px 16px; font-size: 13.5px; color: var(--text-2); }
.sponsor a { display: block; color: inherit; text-decoration: none; }
.sponsor b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.sponsor-label { display: block; margin-bottom: 4px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }

/* ---------- forms inside the slide-up panels ---------- */
.sheet-lede { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.sheet-lede b { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.field { display: block; margin-top: 14px; }
.field > span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.field input, .field select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background-color: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* below 16px, iOS zooms the page when the field is tapped */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field select {
  padding-right: 38px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a3e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}
.field input::placeholder { color: var(--text-3); opacity: 0.7; }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.field .code { font-size: 26px; font-weight: 500; letter-spacing: 0.4em; text-align: center; padding-left: 0.4em; }
.form-error { margin-top: 12px; font-size: 13.5px; color: var(--rose); animation: nudge 0.4s var(--ease); }
@keyframes nudge { 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
.sheet .primary { margin-top: 18px; }
.sheet form > .text-link { display: block; width: 100%; margin-top: 2px; }
.split { display: flex; justify-content: space-between; margin-top: 4px; }
/* The privacy line is deliberately quiet: plain grey text. */
.fine { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--text-3); }
.fine a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* ---------- settings ---------- */
/* Automatic / Light / Dark: a thumb slides under the chosen one */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  padding: 3px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background-color: var(--field);
}
.seg::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n, 3));
  border-radius: 11px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.5);
  transform: translateX(calc(var(--at, 0) * 100%));
  transition: transform 0.42s var(--spring);
}
.seg button { position: relative; min-height: 42px; font-size: 14px; color: var(--text-2); transition: color 0.25s ease; }
.seg button:active { transform: none; }
.seg button[aria-pressed="true"] { color: var(--gold-ink); font-weight: 600; }
.seg .aa { font: 600 15px/1 "Geist", sans-serif; font-style: normal; }
.seg .aa.s { font-size: 12.5px; }
.seg .aa.l { font-size: 17.5px; }
.seg .aa.xl { font-size: 20px; }
/* rows grouped in one card with hairlines between them */
.group { margin-top: 18px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.group > * + * { border-top: 1px solid var(--line); }
.row-btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 15px;
  text-align: left;
}
.row-btn:active:not(:disabled) { transform: none; background: var(--gold-soft); }
.row-btn input { width: 22px; height: 22px; accent-color: var(--gold); }
#setLogout { color: var(--text-2); }
.row-btn > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--gold); }
.row-plain { display: block; width: 100%; min-height: 44px; margin-top: 22px; padding: 0 4px; text-align: left; font-size: 12.5px; color: var(--text-3); }
.small-links { display: flex; gap: 22px; margin-top: 22px; padding-bottom: 6px; font-size: 12.5px; }
.small-links a, .small-links button { min-height: 32px; display: inline-flex; align-items: center; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.split-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.split-btns > * { margin-top: 0 !important; }

/* ---------- the Privacy Note page ---------- */
.prose { max-width: 640px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.prose .back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -6px; color: var(--gold); text-decoration: none; font-size: 14px; }
.prose h1 { margin-top: 10px; font: var(--hw) 40px/1.1 var(--serif); color: var(--text); }
.prose .dated { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
.prose h2 { margin-top: 28px; font: var(--hw) 24px/1.2 var(--serif); color: var(--text); }
.prose p, .prose ul { margin-top: 10px; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 4px; }
.prose b { font-weight: 600; color: var(--text); }
.prose a:not(.back) { color: var(--gold); }

/* Plus ends soon */
.ending { display: flex; align-items: center; margin-top: 10px; padding: 4px 4px 4px 0; border-color: var(--gold); }
.ending-go { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 14px; text-align: left; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.ending-go b { color: var(--gold); font-weight: 600; }
.ending-go svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--gold); }

/* ---------- coming up: deadlines and exams counting down ---------- */
.coming { display: block; width: 100%; margin-top: 10px; padding: 10px 14px 8px; text-align: left; border-color: var(--line-strong); }
.coming-head { display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.coming ul { list-style: none; margin: 0; padding: 0; }
.coming li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; padding: 5px 0; }
.coming li + li { border-top: 1px solid var(--line); }
.ci-kind { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.coming li.exam .ci-kind { color: var(--rose); }
.ci-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-title small { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--text-3); }
.ci-when { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.ci-when.soon { color: var(--gold); font-weight: 600; }

/* a note under its class */
.row-note { grid-column: 2 / -1; display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: calc(12.5px * var(--ts)); line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.row-note svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 2px; color: var(--gold); }
@media (min-width: 680px) { .row-note { grid-column: 2 / span 2; } }
.field > span em, .field-row em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text-3); opacity: 0.8; }
.field textarea {
  width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background-color: var(--field);
  color: var(--text); font: inherit; font-size: 16px; line-height: 1.45; resize: none;
}
.field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.field input[type="date"], .field input[type="time"] { min-width: 0; }
.field-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }

/* ---------- planner ---------- */
#plannerTabs { margin-top: 14px; }
.items { list-style: none; margin: 12px 0 0; padding: 0; }
.items > li + li { border-top: 1px solid var(--line); }
.item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 11px 4px; text-align: left; }
.item:active:not(:disabled) { transform: none; background: var(--gold-soft); }
.item.past { opacity: 0.75; }
.item::after { content: ""; grid-column: 3; grid-row: 1 / span 3; align-self: center; width: 7px; height: 7px; margin-left: 4px; border: solid var(--text-3); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.6; }
.item { grid-template-columns: minmax(0, 1fr) auto auto !important; }
.invite-card { margin-top: 14px; padding: 14px 16px 16px; text-align: center; border-color: var(--line-strong); }
.ic-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.ic-code { display: block; margin: 4px 0 2px; font: 600 30px/1.2 "Geist", sans-serif; letter-spacing: 0.18em; color: var(--gold); }
.invite-card p { font-size: 13px; color: var(--text-3); }
.invite-card .split-btns { margin-top: 12px; }
.invite-card .primary, .invite-card .ghost { min-height: 46px; font-size: 14px; }
.plus-starts { text-align: center; }
#settings a.row-btn { color: inherit; text-decoration: none; }
.it-kind { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.it-kind.exam { color: var(--rose); }
.it-title { grid-column: 1; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.it-meta { grid-column: 1; font-size: 12.5px; color: var(--text-3); }
.it-when { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 12.5px; color: var(--gold); white-space: nowrap; }
.items-none { padding: 14px 0; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
.item-form { margin-top: 8px; padding: 4px 0 6px; }
.item-form .seg { margin-top: 12px; }
.danger-link { display: block; width: 100%; margin-top: 4px; color: var(--rose); }
#dueAdd { margin-top: 14px; }
.todo-add { display: flex; gap: 8px; margin-top: 14px; }
.todo-add input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--field); color: var(--text); font: inherit; font-size: 16px; }
.todo-add input:focus { outline: none; border-color: var(--gold); }
.todo-add .hint-go { min-height: 46px; padding: 0 18px; border-radius: 14px; }
.todo { display: flex; align-items: center; gap: 6px; }
.todo label { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 4px; font-size: 15px; }
.todo input { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--gold); }
.todo.done span { color: var(--text-3); text-decoration: line-through; }
.todo-x { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; color: var(--text-3); }
.todo-x svg { width: 16px; height: 16px; }

/* ---------- friends ---------- */
.name-form { margin-top: 6px; }
#friendsBody > .primary { margin-top: 14px; }
.friendlist { list-style: none; margin: 12px 0 0; padding: 0; }
.friend { padding: 12px 4px; border-top: 1px solid var(--line); }
.friend:first-child { border-top: 0; }
.fr-top { display: flex; align-items: baseline; gap: 8px; }
.fr-top b { font-size: 16px; font-weight: 600; }
.fr-top span { font-size: 12.5px; color: var(--text-3); }
.fr-x { margin-left: auto; min-height: 32px; font-size: 12.5px; color: var(--text-3); }
.fr-line { margin-top: 2px; font-size: 14px; color: var(--text-2); }
.fr-line.now { color: var(--ok); font-weight: 600; }
.fr-both { margin-top: 4px; font-size: 13px; color: var(--gold); }
#friendCode { text-transform: uppercase; letter-spacing: 0.12em; }

/* ---------- the guide ---------- */
.guide-list { list-style: none; margin: 12px 0 4px; padding: 0; }
.guide-list li + li { border-top: 1px solid var(--line); }
.guide-row { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 4px; text-align: left; }
.guide-row:active:not(:disabled) { transform: none; background: var(--gold-soft); }
.guide-row > svg:first-child { flex: 0 0 auto; width: 24px; height: 24px; color: var(--gold); }
.guide-row span { flex: 1 1 auto; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.guide-row b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.chev-r { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-3); }
#guide > .primary { margin-top: 14px; }
.row.flash-row { animation: flash 1.6s ease-out; }

/* ---------- free rooms ---------- */
.chips-scroll { display: flex; gap: 6px; margin: 12px -16px 0; padding: 0 16px 2px; scroll-padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll .chip { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-size: 13px; }
.chips-scroll .chip.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); border-color: transparent; font-weight: 600; }
.roomlist { list-style: none; margin: 12px 0 0; padding: 0; }
.room { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.room-sum { padding: 4px 4px 10px; font-size: 13px; color: var(--text-2); }
.rm-name { font-size: 15px; font-weight: 600; }
.rm-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; white-space: nowrap; }
.room.free .rm-state { color: var(--ok); }
.room.busy .rm-name { color: var(--text-3); }
.room.busy .rm-state { color: var(--text-3); }
.rm-by { grid-column: 1; font-size: 12px; color: var(--text-3); }

/* ---------- Personalise (Plus) ---------- */
.badge { display: inline-block; padding: 2px 7px 1px; border-radius: 999px; font: 600 9.5px/1.4 "Geist", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); vertical-align: 2px; }
.row-val { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-3); }
.row-val::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border: solid var(--text-3); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.set-h { margin: 24px 0 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.set-h .badge { margin-left: 4px; }
.set-note { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.row-btn.boxed { margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; }
.row-btn small { display: block; font-size: 12px; color: var(--text-3); }
.lk { width: 12px; height: 12px; stroke-width: 2.2; color: var(--gold); }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.tcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 6px 9px; border-radius: 16px; border: 1px solid var(--line); text-align: left; }
.tcard.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tc-swatch {
  position: relative; width: 100%; height: 58px; margin-bottom: 5px; border-radius: 11px; overflow: hidden;
  background: radial-gradient(90% 140% at 100% 0%, hsl(var(--ah) var(--as) 67% / 0.3), transparent 60%), linear-gradient(160deg, hsl(var(--h) var(--s) 17%), hsl(var(--h) var(--s) 6%));
  border: 1px solid hsl(var(--ah) 40% 75% / 0.2);
}
.tc-dot { position: absolute; left: 9px; bottom: 9px; width: 28px; height: 7px; border-radius: 4px; background: hsl(var(--ah) var(--as) 67%); }
.tc-dot::after { content: ""; position: absolute; left: 36px; top: 0; width: 34px; height: 7px; border-radius: 4px; background: rgba(244, 240, 232, 0.75); }
.tc-deco { position: absolute; inset: 0; }
.tc-deco.diwali { background: radial-gradient(circle at 50% 50%, #ffcf6b 0 2px, transparent 3px) 4px 3px / 14px 10px repeat-x; filter: drop-shadow(0 0 3px rgba(255, 180, 60, 0.8)); }
.tc-deco.snow { background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.6px) 0 0 / 13px 12px; }
.tc-deco.holi { background: radial-gradient(40% 60% at 10% 100%, rgba(255, 92, 160, 0.5), transparent 70%), radial-gradient(35% 55% at 80% 10%, rgba(80, 200, 255, 0.45), transparent 70%); }
.tc-name { font-size: 13px; font-weight: 600; line-height: 1.25; padding: 0 3px; }
.tc-tag, .tc-season { display: inline-flex; align-items: center; gap: 3px; padding: 0 3px; font-size: 11.5px; color: var(--text-3); }
.tcard.on .tc-tag { color: var(--gold); }
.tcard.locked .tc-tag { color: var(--gold); }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset; }
.sw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); }
.sw .tk { width: 18px; height: 18px; stroke-width: 2.6; color: #1b1508; opacity: 0; }
.sw.on .tk { opacity: 1; }
.sw .lk { color: rgba(27, 21, 8, 0.75); }
.sw.on .lk { display: none; }
.sw.none { background: transparent; border: 1.5px dashed var(--line-strong); }
.sw.none.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text-3); }
.seg.locked button[aria-pressed="false"] { opacity: 0.6; }
.seg .f-classic { font-family: "Instrument Serif", Georgia, serif; font-size: 17px; }
.seg .f-rounded { font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", sans-serif; }

.header-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hcard { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 5px 5px 8px; border-radius: 14px; border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.hcard.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; color: var(--text); }
.hcard .lk { position: absolute; top: 9px; right: 9px; }
.hc-art { height: 40px; border-radius: 9px; background: linear-gradient(165deg, #172038, #0d1322 70%); background-size: cover; background-position: center; }
.h-dots .hc-art { background: radial-gradient(circle at 1px 1px, rgba(244, 240, 232, 0.25) 1px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(165deg, #172038, #0d1322 70%); }
.h-grid .hc-art { background: linear-gradient(rgba(244, 240, 232, 0.12) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgba(244, 240, 232, 0.12) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(165deg, #172038, #0d1322 70%); }
.h-waves .hc-art { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 80 24'%3E%3Cpath d='M0 12c10 0 10-8 20-8s10 8 20 8 10-8 20-8 10 8 20 8' fill='none' stroke='%23f4f0e8' stroke-opacity='.25' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 40px 12px, linear-gradient(165deg, #172038, #0d1322 70%); }
.h-stars .hc-art { background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px) 0 0 / 15px 13px, linear-gradient(165deg, #172038, #0d1322 70%); }
.h-photo .hc-art { display: grid; place-items: center; background-color: var(--field); border: 1px dashed var(--line-strong); }
.hc-change { grid-column: 1 / -1; justify-self: start; }

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px; }
.icard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.icard img { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.icard.on img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.icard.on { color: var(--text); }
.icard .lk { position: absolute; top: -3px; right: 6px; padding: 2px; box-sizing: content-box; border-radius: 50%; background: var(--sheet-1); }

/* a module's own colour and nickname */
.row.has-mod::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mod); }
.mod-code { display: block; margin-top: 2px; font-size: calc(11.5px * var(--ts)); font-weight: 500; letter-spacing: 0.02em; color: var(--text-3); }
.row.tap { cursor: pointer; }
@media (hover: hover) { .row.tap:hover { background: var(--gold-soft); } }
.orig { font-size: 12.5px; color: var(--text-3); }
.sheet-head h2 { min-width: 0; overflow-wrap: anywhere; }
.sheet-head .text-btn { flex: 0 0 auto; }
#session .sheet-lede { margin-top: 4px; }

/* notifications and calendar */
.daychips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.daychips button { min-height: 42px; border-radius: 12px; border: 1px solid var(--line-strong); font-size: 13.5px; color: var(--text-2); }
.daychips button[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); border-color: transparent; font-weight: 600; }
.daychips.locked { opacity: 0.6; }
.test-btn { margin-top: 18px; }
.cal-btn { display: flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; }
.row-btn input:disabled { opacity: 0.4; }

/* ---------- Timetably Plus ---------- */
.plus-why { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--gold); }
.plus-perks { margin: 18px 0 18px; max-width: none; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-strong); text-align: left;
}
.plan[aria-checked="true"] { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold) inset; }
.plan b { font: var(--hw) 30px/1.1 var(--serif); }
.plan span { font-size: 13px; color: var(--text-2); }
.plan em { position: absolute; top: 10px; right: 10px; padding: 2px 7px 1px; border-radius: 999px; font: 600 10px/1.4 "Geist", sans-serif; font-style: normal; letter-spacing: 0.06em; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
.plan:disabled { opacity: 0.6; }
.plus-fine { line-height: 1.5; }
.plus-fine a { color: var(--text-2); text-decoration: underline; cursor: pointer; }
#plusManage { margin-top: 16px; }
.buy-preview { height: 120px; margin-top: 12px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, hsl(var(--h) var(--s) 17%), hsl(var(--h) var(--s) 6%)); }
.wide-link { display: block; width: 100%; margin-top: 4px; }

/* ---------- the owner page ---------- */
.owner { max-width: 760px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.stat b { font: var(--hw) 30px/1.1 var(--serif); color: var(--text); }
.stat span { font-size: 12.5px; color: var(--text-3); }
.owner-list { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.owner-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; font-size: 13px; }
.owner-list b { font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.owner-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.owner-actions .chip { min-height: 34px; padding: 0 12px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  translate: -50% 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 13.5px;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.45);
  z-index: 10;
  animation: pop 0.5s var(--spring);
}
@keyframes pop { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.96); } }

/* a mouse: gentle hover states (phones never see these) */
@media (hover: hover) {
  .course:hover, .row-btn:hover, .weeklist button:hover { background: var(--gold-soft); }
  .primary:hover { filter: brightness(1.04); }
}

/* narrow phones: give the session column the room, let the time wrap at the dash */
@media (max-width: 359px) {
  .arrow { flex-basis: 44px; }
  .weekpick { padding-left: 12px; padding-right: 10px; }
  .weekpick-label b { margin-left: 6px; white-space: nowrap; }
  .weekpick-meta .cnt { display: none; }
  .tt-head, .row { grid-template-columns: calc(96px * min(var(--ts), 1.1)) minmax(0, 1fr); }
  .hero h1 { font-size: 26px; }
  .hero-top { gap: 8px; }
  .hero-actions { gap: 6px; }
  .sync { padding: 0 9px; gap: 6px; }
  .sync .at { display: none; }
}

@media (max-width: 389px) {
  .hero h1 { font-size: 26px; }
}

/* wider screens: the PDF's separate venue column */
@media (min-width: 680px) {
  .page { padding-top: 32px; }
  .hero { padding: 18px 20px 20px 26px; }
  .hero h1 { font-size: 40px; }
  .hero #subtitle { font-size: 14px; }
  .tt-head, .row { grid-template-columns: calc(190px * min(var(--ts), 1.1)) minmax(0, 1fr) 260px; column-gap: 16px; padding-left: 24px; padding-right: 24px; }
  .row { grid-template-areas: "time name chips"; }
  .chips { margin-top: 0; }
  .day-band { padding: 12px 24px 11px; }
  .tt-divider { padding-left: 24px; padding-right: 24px; }
  .wide { display: inline; }
  .narrow { display: none; }
  .time { font-size: calc(13.5px * var(--ts)); }
  .time .pill { display: inline-block; margin: 0 0 0 8px; }
  .welcome { max-width: 520px; margin-left: auto; margin-right: auto; }
  dialog.sheet { margin: auto; border-radius: 26px; border-bottom: 1px solid var(--line-strong); }
  dialog.sheet::before { display: none; }
  dialog.sheet[open] { animation: rise-mid 0.4s var(--spring); }
  dialog.sheet.closing { animation: fall-mid 0.22s ease-in forwards; }
}
@keyframes rise-mid { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.97); } }
@keyframes fall-mid { to { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.98); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, *::backdrop { animation: none !important; transition: none !important; }
}