/* =========================================================
   Teaching Hub - stylesheet
   Direction: Minimalism / Swiss - grid-based, generous white
   space, strong type hierarchy, high contrast, no ornament.
   Accessibility first: every text pair is WCAG AAA (7:1+),
   UI borders and focus rings clear 3:1. No animation anywhere.
   ========================================================= */

/* ---------- Self-hosted fonts (work offline, no tracking) ----------
   Lexend and Source Sans 3, SIL Open Font License 1.1.
   Lexend is drawn specifically to improve reading proficiency. */
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Type */
  --font-head: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale (standard density: 4 -> 64px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape */
  /* Tight radii: this look is sharp-cornered - soft rounding reads as toy. */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --rule: 1px;

  /* Colour - light: Kuromi "Ink & Lilac". Structural ink and aubergine carry
     the layout; the rose is a signal colour and never fills a surface. The
     whole look fails the moment pink becomes the dominant colour. */
  --bg: #F7F4FB;
  --surface: #FFFFFF;
  --surface-2: #F0EAF8;
  --surface-3: #E3D9F1;
  --text: #171021;
  --text-muted: #453757;
  --primary: #3A2352;
  --primary-hover: #241537;
  --on-primary: #FFFFFF;
  --link: #7A1550;
  --border: #7C6796;
  --divider: #DED3EE;
  --focus: #171021;
  --danger: #A01430;
  --on-danger: #FFFFFF;
  /* Rose. Earns its impact by being rare - overdue labels and the current-day
     rule only. Never a background, never a heading colour. */
  --accent: #9C0F4B;
  --accent-soft: #FBE7F1;
  --notice-bg: #E9F5EC;
  --notice-text: #14532D;
  --notice-border: #1F6F43;
  /* Ticked-off blocks. Pale enough that --done-text clears 7:1 on it, and
     the border clears 3:1 on --surface. Colour never carries this alone -
     a ticked block also says "Done" in words. */
  --done-bg: #E4F3E8;
  --done-text: #14532D;
  --done-border: #1F6F43;
  --late-text: #8A1C31;
  --accent-bar: #3A2352;
  --today-bg: #EDE4F8;
  /* A hairline sitting on a soft lift, rather than a blur - flat ink, not glow. */
  --shadow-card: 0 1px 0 #DED3EE, 0 2px 0 -1px rgba(23, 16, 33, 0.06);
  color-scheme: light;

  /* Student colour key - 8 hues, ordered so consecutive slots sit far apart on
     the wheel (blue -> teal -> terracotta -> magenta -> green -> deep violet ->
     olive -> deep cyan). That way the cycle never puts two similar colours in
     a row, so adding a new student always lands on something visibly different
     from the last one. --stu-4 shares a family with --accent, so --accent stays
     rationed to a few labels. Every dot clears 3:1 against a white surface,
     every fill tint clears 7:1 for black text. */
  --stu-1: #3B65C4; /* periwinkle blue */
  --stu-2: #C8531F; /* coral orange */
  --stu-3: #22757F; /* teal */
  --stu-4: #C41E68; /* pink */
  --stu-5: #3E7E20; /* grass green */
  --stu-6: #7B34B4; /* lavender purple */
  --stu-7: #8E6900; /* mustard yellow */
  --stu-8: #4E5760; /* slate gray */
  --stu-1-bg: #9EB9F3;
  --stu-2-bg: #F89C74;
  --stu-3-bg: #66C5CC;
  --stu-4-bg: #FE88B1;
  --stu-5-bg: #87C55F;
  --stu-6-bg: #DCB0F2;
  --stu-7-bg: #F6CF71;
  --stu-8-bg: #B3B3B3;
}

[data-theme="dark"] {
  /* Colour - dark: Kuromi "Ink & Lilac" after dark. A near-black violet ground
     with lilac doing the structural work, and one hot rose kept for the focus
     ring and overdue labels. Flat ink - no gradients, no glow. */
  --bg: #0E0B14;
  --surface: #161221;
  --surface-2: #1E1830;
  --surface-3: #2A2240;
  --text: #F3EFFA;
  --text-muted: #BDB2D3;
  --primary: #C9B6F2;
  --primary-hover: #DCCEFA;
  --on-primary: #14101E;
  --link: #E9B8D8;
  --border: #7A6D96;
  --divider: #262038;
  /* Rose focus ring: the one place the theme is allowed to shout, and it is
     the furthest hue from the lilac chrome, so it can never be mistaken for it. */
  --focus: #FF8FC8;
  --danger: #FF97A9;
  --on-danger: #14101E;
  --accent: #FF8FC8;
  --accent-soft: #2A1826;
  --notice-bg: #1B3526;
  --notice-text: #D6F2DF;
  --notice-border: #6FCF97;
  --done-bg: #17301F;
  --done-text: #C9EDD6;
  --done-border: #6FCF97;
  --late-text: #FF9DAE;
  --accent-bar: #C9B6F2;
  --today-bg: #2A224090;
  --shadow-card: none;
  color-scheme: dark;

  /* Lightened so each dot/bar still clears 3:1 against the dark surface.
     Order matches the light palette: blue -> teal -> terracotta -> pink ->
     green -> lilac -> amber -> cyan. Consecutive slots stay far apart. */
  --stu-1: #9EB9F3; /* periwinkle blue */
  --stu-2: #F89C74; /* coral orange */
  --stu-3: #66C5CC; /* teal */
  --stu-4: #FE88B1; /* pink */
  --stu-5: #87C55F; /* grass green */
  --stu-6: #DCB0F2; /* lavender purple */
  --stu-7: #F6CF71; /* mustard yellow */
  --stu-8: #B3B3B3; /* slate gray */
  --stu-1-bg: #17264A;
  --stu-2-bg: #3A1A0D;
  --stu-3-bg: #0F2A2E;
  --stu-4-bg: #3A1626;
  --stu-5-bg: #0F2E1D;
  --stu-6-bg: #241A38;
  --stu-7-bg: #30260E;
  --stu-8-bg: #23272E;
}

/* ---------- Text size (header buttons) ---------- */
html { font-size: 112.5%; scroll-padding-top: var(--space-5); }
html[data-text-size="1"] { font-size: 100%; }
html[data-text-size="2"] { font-size: 112.5%; }
html[data-text-size="3"] { font-size: 125%; }
html[data-text-size="4"] { font-size: 137.5%; }
html[data-text-size="5"] { font-size: 150%; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background-image:
    radial-gradient(circle at 20px 30px, rgba(201, 182, 242, 0.055) 1.7px, transparent 2.1px),
    radial-gradient(circle at 80px 90px, rgba(255, 143, 200, 0.05) 1.5px, transparent 1.9px),
    radial-gradient(circle at 140px 20px, rgba(240, 184, 96, 0.045) 1.5px, transparent 1.9px),
    radial-gradient(circle at 200px 130px, rgba(127, 218, 203, 0.045) 1.5px, transparent 1.9px);
  background-size: 240px 160px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* No motion in this design; this simply guarantees it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  color: var(--text);
}
h1 { font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.3rem); font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 600; }
h3 { font-size: 1.08rem; font-weight: 600; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.4em; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* Two-tone focus ring: a light gap next to the element, then a dark outline.
   Stays clearly visible whether the element is pale, purple or dark. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface);
  border-radius: var(--radius-sm);
}

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-5); }
@media (max-width: 600px) { .wrap { padding: 0 var(--space-4); } }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-2); top: -10rem;
  background: var(--primary); color: var(--on-primary);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); z-index: 100;
  font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Icons (inline SVG sprite, always paired with text) ---------- */
.icon {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 1.4em; height: 1.4em; }
#icon-sprite { display: none; }

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: var(--rule) solid var(--divider);
}
.header-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) 0;
}
.site-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text);
  text-decoration: none;
  padding: var(--space-2) var(--space-3); margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
  min-height: 44px; border-radius: var(--radius-sm);
}
.site-title:hover { background: var(--surface-2); text-decoration: underline; }
.site-title .icon { color: var(--primary); }

.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1);
}
.nav-list a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  min-height: 44px;
  text-decoration: none; font-weight: 600; color: var(--link);
  border: 2px solid transparent;
}
.nav-list a:hover { background: var(--surface-2); text-decoration: underline; }
.nav-list a[aria-current="page"] { background: var(--primary); color: var(--on-primary); }

/* ---------- Create button + its menu ---------- */
.create-wrap { position: relative; }
.create-btn { padding-right: var(--space-3); }
.create-btn .chev { display: inline-flex; margin-left: calc(var(--space-1) * -1); }
.create-btn .chev .icon { width: 1em; height: 1em; }

.menu {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 60;
  min-width: 16rem;
  display: flex; flex-direction: column;
  padding: var(--space-2);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(28, 18, 41, 0.18);
}
[data-theme="dark"] .menu { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.menu-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font: inherit; text-align: left; color: var(--text);
  background: transparent; border: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item .icon { color: var(--primary); }
.menu-label { font-weight: 600; }
.menu-hint { color: var(--text-muted); font-size: 0.88rem; margin-left: auto; }
.menu-sep { height: 0; margin: var(--space-1) var(--space-2); border: 0; border-top: var(--rule) solid var(--divider); }

/* ---------- Dialog ---------- */
.dialog {
  width: min(34rem, calc(100vw - 2rem));
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(28, 18, 41, 0.28);
}
.dialog::backdrop { background: rgba(28, 18, 41, 0.55); }
.dialog-form { display: block; padding: var(--space-5); }
.dialog-head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--rule) solid var(--divider); }
.dialog-head h2 { margin: 0; }
.dialog-body > .field:last-child { margin-bottom: 0; }
.dialog-body .time-pair { margin-bottom: var(--space-4); }
.dialog-body .time-pair .field { margin-bottom: 0; }
.dialog-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: var(--rule) solid var(--divider);
}
.dialog-delete { margin-left: auto; }

.a11y-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-left: auto;
}
/* Single cycling button — quieter than two adjacent size buttons. Fixed
   width keeps it from jumping as the label changes (Normal → Large → Larger). */
#text-size { min-width: 7.5rem; justify-content: flex-start; }
#text-size .size-label { font-weight: 600; }

/* ---------- Main ---------- */
main { padding: var(--space-6) 0 var(--space-8); }
main:focus { outline: none; }
.page-head { margin-bottom: var(--space-5); }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head h1:has(svg) { display: flex; align-items: center; gap: var(--space-2); }
.page-bow { flex: none; color: var(--primary); }
.page-intro { color: var(--text-muted); max-width: 46rem; margin: 0; }

.card {
  background: var(--surface);
  border: var(--rule) solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-card);
}
.card > h2:first-child { margin-top: 0; }
.card.has-student-accent {
  border-left: 4px solid var(--block-accent, var(--accent-bar));
  background: var(--block-bg, var(--surface));
}
@media (max-width: 600px) { .card { padding: var(--space-4); } }

.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
  position: relative;
  padding-bottom: calc(var(--space-3) + 8px);
}
/* Sherbet rainbow hem under every section header - four soft pastel dots
   in a row, so the trim reads as proper stationery instead of a plain rule. */
.section-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 8px;
  background:
    radial-gradient(circle at 6px 0, var(--stu-5) 5.6px, transparent 6px) 0 0 / 48px 8px repeat-x,
    radial-gradient(circle at 18px 0, var(--stu-4) 5.6px, transparent 6px) 0 0 / 48px 8px repeat-x,
    radial-gradient(circle at 30px 0, var(--stu-6) 5.6px, transparent 6px) 0 0 / 48px 8px repeat-x,
    radial-gradient(circle at 42px 0, var(--stu-1) 5.6px, transparent 6px) 0 0 / 48px 8px repeat-x;
  opacity: 0.85;
}
.section-head h2 { margin: 0; }
.section-head .toolbar { margin: 0; }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-4); }
.toolbar-end { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: var(--rule) solid var(--divider); }

.empty { color: var(--text-muted); font-style: italic; }
.muted { color: var(--text-muted); }
.small { font-size: 0.9rem; }

/* ---------- Stat strip (week at a glance) ---------- */
.stats {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  list-style: none; padding: 0; margin: 0 0 var(--space-5);
}
.stat {
  background: var(--surface);
  border: var(--rule) solid var(--divider);
  border-left: 4px solid var(--accent-bar);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.stat-value {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.65rem; line-height: 1.1; letter-spacing: -0.02em;
}
.stat-label { display: block; color: var(--text-muted); font-size: 0.88rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.2;
  border-radius: var(--radius-sm); border: 2px solid var(--primary);
  background: var(--primary); color: var(--on-primary);
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--link); }
.btn-secondary:hover { background: var(--surface-2); color: var(--link); border-color: var(--primary); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--on-danger); }
.btn-small { min-height: 38px; padding: var(--space-1) var(--space-3); font-size: 0.94rem; }
.btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.file-btn { position: relative; display: inline-flex; }
.file-btn label { margin: 0; }
.file-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-btn:focus-within .btn { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Forms ---------- */
label, legend { font-family: var(--font-body); font-weight: 600; display: block; margin-bottom: var(--space-1); }
.hint { font-weight: 400; color: var(--text-muted); font-size: 0.9rem; display: block; margin-bottom: var(--space-1); }
input[type="text"], input[type="date"], input[type="email"], input[type="password"], textarea, select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); min-height: 44px; width: 100%;
}
select { appearance: auto; }
textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--primary); }
fieldset {
  border: var(--rule) solid var(--divider); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-4); margin: 0 0 var(--space-4); min-width: 0;
}
legend { padding: 0 var(--space-2); font-family: var(--font-head); font-size: 1rem; font-weight: 600; }
.field { margin-bottom: var(--space-4); }
.field-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: end; margin-bottom: var(--space-3); }
.field-row + .field-row { padding-top: var(--space-3); border-top: var(--rule) solid var(--divider); }
.time-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.hours-row { grid-template-columns: 1fr 1fr; max-width: 26rem; }
@media (min-width: 900px) {
  .field-row.class-row { grid-template-columns: 15rem minmax(0, 1.5fr) 9rem minmax(0, 1fr) auto; }
  .field-row + .field-row { border-top: 0; padding-top: 0; }
}
input[type="checkbox"] { width: 1.4rem; height: 1.4rem; accent-color: var(--primary); margin: 0; flex: none; }

/* ---------- Live status message ---------- */
.notice {
  display: flex; align-items: flex-start; gap: var(--space-2);
  background: var(--notice-bg); color: var(--notice-text);
  border-left: 4px solid var(--notice-border);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  margin: 0 0 var(--space-4); font-weight: 600;
}
.notice:empty { display: none; }

/* ---------- Chips (class mode) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border: var(--rule) solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text);
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
}
.chip .icon { width: 1em; height: 1em; }

/* ---------- Student colour key (decorative - the name is always in text too) ---------- */
.stu-dot {
  display: inline-block; flex: none;
  width: 0.7em; height: 0.7em;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--dot-color, var(--accent-bar));
}
.student-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  list-style: none; padding: 0; margin: 0 0 var(--space-5);
}
.student-legend li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.9rem; color: var(--text-muted); }
.wg-people { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.15rem; }

/* ---------- Week grid (time down the side, days across the top) ---------- */
.week-label {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 600;
  letter-spacing: -0.01em; margin: 0 0 var(--space-4);
}
.badge-today {
  display: inline-block; padding: 0.05rem var(--space-2);
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}

.week-grid-scroll { overflow-x: auto; padding-bottom: var(--space-2); }
.week-grid-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.week-grid {
  --slot-h: 2.2rem;      /* height of one 30-minute row — blocks fill their full time span */
  --head-h: 3.6rem;
  display: grid;
  grid-template-columns: 4.2rem repeat(7, minmax(7.5rem, 1fr));
  /* Rows grow when a class needs more space, and every day column shares
     the same rows (subgrid) so the times stay lined up across the week. */
  grid-template-rows: var(--head-h) repeat(var(--slots), minmax(var(--slot-h), auto));
  min-width: 56rem;
  border: var(--rule) solid var(--divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

/* Time labels */
.wg-times {
  grid-row: 1 / -1; grid-column: 1;
  display: grid;
  grid-template-rows: subgrid;
  border-right: var(--rule) solid var(--divider);
  background: var(--surface-2);
}
.wg-time {
  padding: var(--space-1) var(--space-2) 0 0;
  font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
}

/* One column per day */
.wg-day {
  grid-row: 1 / -1;
  grid-column: var(--col);
  display: grid;
  grid-template-rows: subgrid;
  border-left: var(--rule) solid var(--divider);
  min-width: 0;
}
.wg-day.is-today { background: var(--today-bg); }

/* Older browsers without subgrid: fixed row heights, text may clip */
@supports not (grid-template-rows: subgrid) {
  .wg-times, .wg-day { grid-template-rows: var(--head-h) repeat(var(--slots), var(--slot-h)); }
  .wg-blocks { grid-template-rows: repeat(var(--slots), var(--slot-h)); }
}
/* Day column header: the weekday in small caps over the calendar date,
   the way a month view stacks them. */
.wg-day-name {
  grid-row: 1;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: var(--space-1) var(--space-2);
  margin: 0; padding: var(--space-2);
  font-size: 0.95rem; font-weight: 600; text-align: center;
  background: var(--surface-2);
  border-bottom: var(--rule) solid var(--divider);
}
.wg-day-word {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  flex-basis: 100%;
}
.wg-day-date {
  font-family: var(--font-head); font-size: 0.82rem; font-weight: 700;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.wg-day.is-today .wg-day-name { background: var(--surface-3); }
.wg-day.is-today .wg-day-word { color: var(--text); }
/* Today's date sits in a filled disc, like a month-view calendar. */
.wg-day.is-today .wg-day-date {
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--radius-pill);
  padding: 0.05rem var(--space-2);
}

/* ---------- Timetable toolbar (view toggle · date nav · edit) ----------
   Three zones on one row: segmented Week/Month pill on the left, the date
   navigator centred with the label as its anchor, and the Edit action
   pushed to the right. Wraps cleanly on narrow screens: view toggle keeps
   its shape, the date nav wraps below, and the edit button falls last. */
.timetable-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule) solid var(--divider);
}
.timetable-actions { margin-left: auto; }

/* Segmented pill: two halves in one container, active half filled and
   raised. Kept small so the toolbar reads as navigation, not as a wall of
   buttons. */
.view-toggle {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2);
  border: var(--rule) solid var(--divider);
  border-radius: var(--radius-pill);
}
.view-toggle-btn {
  min-height: 36px; padding: 0 var(--space-3);
  font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--text-muted);
  background: transparent; border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.view-toggle-btn:hover { color: var(--text); }
.view-toggle-btn.is-active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-card);
}
.view-toggle-btn:focus-visible { border-color: transparent; }

/* Date navigator: [◂]  Sep 1 – 6, 2026  [▸]  Today. The date label is the
   anchor; the arrows are icon buttons flanking it. "Today" (or "This
   month") sits to the right as a distinct action, disabled when already
   there. */
.week-nav {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
}
.nav-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  font: inherit; font-size: 1.35rem; line-height: 1; color: var(--text);
  background: transparent;
  border: 2px solid var(--divider);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.nav-arrow:hover { background: var(--surface-2); border-color: var(--border); }

.nav-label {
  margin: 0; padding: 0 var(--space-2);
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text);
  min-width: 12rem; text-align: center;
}
.nav-label-picker {
  /* A <select> keeps its native disclosure so it still reads as a picker.
     Styled to sit flush with .nav-label so toggling week↔month doesn't
     shift the layout. */
  height: 36px; padding: 0 var(--space-2);
  border: 2px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.nav-today {
  min-height: 36px; padding: 0 var(--space-3);
  font: inherit; font-weight: 600; font-size: 0.9rem;
  color: var(--primary); background: transparent;
  border: 2px solid var(--primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.nav-today:hover:not([disabled]) { background: var(--primary); color: var(--on-primary); }
.nav-today[disabled] {
  color: var(--text-muted); border-color: var(--divider);
  cursor: default;
}

@media (max-width: 720px) {
  .timetable-toolbar { gap: var(--space-3); }
  .nav-label { min-width: 0; }
  .timetable-actions { margin-left: 0; }
}

/* ---------- Month grid ---------- */
.month-grid {
  border: var(--rule) solid var(--divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.month-head-row, .month-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head-row {
  background: var(--surface-2);
  border-bottom: var(--rule) solid var(--divider);
}
.month-head-cell {
  padding: var(--space-2); text-align: center;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.month-row + .month-row { border-top: var(--rule) solid var(--divider); }
.month-cell {
  min-height: 6.5rem; min-width: 0;
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-left: var(--rule) solid var(--divider);
}
.month-cell:first-child { border-left: 0; }
.month-cell.is-outside { background: var(--surface-2); }
.month-cell.is-outside .month-date { color: var(--text-muted); }
.month-cell.is-today { background: var(--today-bg); }

.month-cell-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-1);
}
.month-date {
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem;
}
.month-cell.is-today .month-date {
  background: var(--primary); color: var(--on-primary); border-radius: 50%;
}
.month-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex: none; padding: 0;
  font: inherit; font-size: 1rem; line-height: 1;
  color: var(--link); background: transparent;
  border: 2px solid transparent; border-radius: 50%;
  cursor: pointer;
}
.month-add:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.month-classes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.month-chip {
  display: flex; align-items: center; gap: 0.3rem; width: 100%;
  padding: 0.12rem 0.3rem; min-height: 0;
  font: inherit; font-size: 0.76rem; text-align: left; line-height: 1.25;
  color: var(--text); background: transparent;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; overflow: hidden;
}
.month-chip:hover { background: var(--surface-2); }
.month-chip-dot {
  width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%;
  background: var(--block-accent, var(--accent-bar));
}
.month-chip-time { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.month-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-more { display: block; padding: 0.12rem 0.3rem; font-size: 0.74rem; color: var(--text-muted); }

@media (max-width: 700px) {
  .month-cell { min-height: 5rem; padding: var(--space-1); }
  .month-head-cell { font-size: 0.68rem; padding: var(--space-1); }
  .month-chip-time { display: none; }
}

.wg-blocks {
  grid-row: 2 / -1;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: repeat(var(--lanes, 1), minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
/* Faint line at the top of every hour, drawn on the shared rows */
.wg-hourline {
  grid-column: 1 / -1;
  border-top: var(--rule) solid var(--divider);
  pointer-events: none;
}
.wg-empty {
  grid-row: 1 / span 2; grid-column: 1 / -1;
  padding: var(--space-2);
  color: var(--text-muted); font-size: 0.82rem; font-style: italic; text-align: center;
}

/* A band covers one stretch of time. Classes that share it stack inside. */
.wg-band {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; margin: 2px;
  z-index: 1;
}
.wg-band .wg-block { flex: 1 1 auto; }
.wg-band.is-shared .wg-block { flex: 0 0 auto; }

/* A class is a button: click it to edit that one class. */
.wg-block {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.05rem;
  width: 100%; min-width: 0; padding: var(--space-2);
  border: var(--rule) solid var(--border);
  border-left: 4px solid var(--block-accent, var(--accent-bar));
  border-radius: var(--radius-sm);
  background: var(--block-bg, var(--surface-2));
  font-family: var(--font-body); color: var(--text);
  font-size: 0.78rem; line-height: 1.3; text-align: left;
  overflow: hidden; cursor: pointer;
}
.wg-block:hover { border-color: var(--primary); border-left-color: var(--block-accent, var(--accent-bar)); }
/* Empty space in a day column is clickable too (mouse only - the + in the
   day header is the keyboard route). */
.wg-blocks { cursor: cell; }

/* The + on each day header */
.wg-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex: none;
  padding: 0; font: inherit; font-size: 1.15rem; line-height: 1;
  color: var(--link); background: var(--surface);
  border: 2px solid var(--border); border-radius: 50%;
  cursor: pointer;
}
.wg-add:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
/* A student's colour always wins; only fall back to the mode tint when a class isn't matched to a student. */
.wg-block.mode-online { background: var(--block-bg, var(--surface-3)); }
.wg-name { font-weight: 700; overflow-wrap: anywhere; }
.wg-course { color: var(--text-muted); overflow-wrap: anywhere; }
.wg-time-range { font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 0.1rem; }
.wg-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: 0.15rem; }
.wg-note { color: var(--text-muted); overflow-wrap: anywhere; }
.wg-block .chip { font-size: 0.7rem; padding: 0 var(--space-1); background: var(--surface); }

.untimed { margin-top: var(--space-5); }
.untimed h3 { margin-bottom: var(--space-2); }

/* Narrow screens: the same markup becomes a stack of day cards */
@media (max-width: 860px) {
  .week-grid-scroll { overflow: visible; }
  .week-grid {
    display: block; min-width: 0;
    border: 0; border-radius: 0; background: transparent;
  }
  .wg-times { display: none; }
  .wg-day {
    display: block; margin-bottom: var(--space-3);
    border: var(--rule) solid var(--divider); border-radius: var(--radius-md);
    background: var(--surface); overflow: hidden;
  }
  .wg-day.is-today { border-color: var(--primary); border-left-width: 4px; }
  .wg-day-name { justify-content: flex-start; text-align: left; padding: var(--space-3) var(--space-4); }
  .wg-blocks { display: grid; grid-template-columns: 1fr; grid-template-rows: none; background-image: none; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .wg-band { grid-row: auto !important; grid-column: auto !important; margin: 0; gap: var(--space-2); }
  .wg-block { font-size: 0.95rem; padding: var(--space-3); }
  .wg-hourline { display: none; }
  .wg-empty { grid-row: auto; grid-column: auto; padding: 0; justify-content: flex-start; font-size: 0.95rem; }
}

/* ---------- Student tabs ---------- */
.tablist {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: 0 0 var(--space-3); margin: 0 0 var(--space-5);
  list-style: none;
  border-bottom: var(--rule) solid var(--divider);
}
[role="tab"] {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  min-height: 44px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  border: 2px solid var(--block-accent, var(--border));
  background: var(--block-bg, var(--surface)); color: var(--text);
  cursor: pointer;
}
[role="tab"]:hover { border-color: var(--block-accent, var(--primary)); }
/* Selected reads via a thicker, bolder-weight pill rather than a colour swap,
   so it stays a distinct (non-colour-only) cue once every tab already carries
   its student's colour. */
[role="tab"][aria-selected="true"] { border-width: 3px; font-weight: 700; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; flex: none;
  border-radius: 50%;
  background: var(--surface-3); color: var(--text);
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; line-height: 1;
}
.avatar-lg { width: 2.6rem; height: 2.6rem; font-size: 1rem; }

.tab-name { overflow-wrap: anywhere; }
.tab-count {
  font-variant-numeric: tabular-nums; font-size: 0.85rem; font-weight: 700;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-muted);
}

.plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.plan-head h2 { margin: 0; }
.plan-head-text { min-width: 0; }
/* Small print under the course heading: the individual people in the group. */
.plan-members { margin: 0; color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.01em; }

/* "Add a student" sits outside the tablist, deliberately unlike a real course
   pill - dashed, no student colour, no avatar - so it never reads as one of
   the current groups. */
.btn-ghost-add {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; margin: 0 0 var(--space-5);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.btn-ghost-add:hover { color: var(--text); border-color: var(--primary); }

.plan-progress {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule) solid var(--divider);
}
.meta { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* Progress meter (text carries the meaning, bar is supporting) */
.meter { display: flex; align-items: center; gap: var(--space-2); }
.meter-track {
  width: 7rem; height: 0.55rem; flex: none;
  background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden;
}
.meter-fill { display: block; height: 100%; background: var(--block-accent, var(--accent-bar)); }

/* ---------- Categories of blocks ---------- */
.plan-category { padding: var(--space-5) 0 var(--space-4); border-top: var(--rule) solid var(--divider); }
.plan-category:first-of-type { border-top: 0; }
.cat-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-3);
}
.cat-head h3 {
  margin: 0; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.cat-count {
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.block-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-3); }
.block-empty { padding: 0 0 var(--space-2); }

/* ---------- A dated block ---------- */
.block {
  background: var(--surface);
  border: var(--rule) solid var(--divider);
  border-left: 4px solid var(--block-accent, var(--accent-bar));
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.block-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
}
.block-date {
  font-family: var(--font-head); font-size: 0.9rem; font-weight: 700;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  order: -1;
}
.block-date.is-today {
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--radius-pill); padding: 0.05rem var(--space-3);
}
.block-date.is-undated { color: var(--text-muted); font-weight: 600; font-style: italic; }
.block-date-head { margin: 0; font-size: 1.05rem; }
.block-full-date { margin: 0 0 var(--space-2); }
.block-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 var(--space-3); }
.block-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The tick. "Done"/"Mark done" is written next to it, so the green is
   reinforcement, never the only signal. */
.block-tick { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.block-tick label { margin: 0; font-weight: 600; cursor: pointer; }
.tick-text { font-size: 0.9rem; }

.block.is-done {
  background: var(--done-bg);
  border-color: var(--done-border);
  border-left-color: var(--done-border);
}
.block.is-done .block-text { color: var(--done-text); }
.block.is-done .tick-text { color: var(--done-text); }
.block.is-done .block-date:not(.is-today) { color: var(--done-text); }

.block.is-editing { border-left-color: var(--primary); background: var(--surface-2); }
.block.is-editing .field:last-of-type { margin-bottom: var(--space-3); }
.block.is-editing .toolbar { margin: 0; }
.block-form-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .block-form-row { grid-template-columns: minmax(0, 14rem) auto; align-items: start; } }
.label-like { font-weight: 600; display: block; margin-bottom: var(--space-1); }
.field-tick .block-tick { min-height: 0; padding-top: var(--space-1); }

.name-form { margin-bottom: var(--space-4); }
.name-form h2 { margin-bottom: var(--space-4); }

/* ---------- Teaching plan & Activity tracker (two-panel layout) ---------- */
.tp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 860px) { .tp-grid { grid-template-columns: 1fr; } }

.tp-card {
  background: var(--surface);
  border: var(--rule) solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tp-head {
  position: relative;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + 8px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
/* Scalloped hem instead of a plain rule, coloured to match each band. */
.tp-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 8px;
  background: radial-gradient(circle at 6px 0, var(--tp-head-hem, var(--divider)) 5.6px, transparent 6px)
              0 0 / 12px 8px repeat-x;
}
.tp-head-purple {
  background: var(--surface-2);
  color: var(--primary);
  --tp-head-hem: var(--divider);
}
.tp-head-pink {
  background: #F6E1EF;
  color: #6B2D5B;
  --tp-head-hem: #E8C8DD;
}
[data-theme="dark"] .tp-head-pink {
  background: #3A1830;
  color: #F0A8D6;
  --tp-head-hem: #5A2848;
}

.tp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.tp-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: var(--rule) solid var(--divider);
}
.tp-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--rule) solid var(--divider);
  color: var(--text);
  vertical-align: middle;
}
.tp-table tbody tr:last-child td { border-bottom: none; }

.tp-wk-col { width: 3rem; }
.tp-wk {
  text-align: center;
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9rem;
}
.tp-date-col { width: 5.5rem; }
.tp-date-cell { font-size: 0.85rem; color: var(--text-muted); }

.tp-row { cursor: pointer; }
.tp-row:hover { background: var(--surface-2); }

.tp-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: none;
  border-top: var(--rule) solid var(--divider);
  background: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
}
.tp-add-btn:hover { background: var(--surface-2); }

/* Activity tracker */
.act-cb-col { width: 2.5rem; text-align: center; }
.act-cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--border);
  border-radius: 50%;
  vertical-align: middle;
}
.act-cb-checked {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.act-task-done { text-decoration: line-through; color: var(--text-muted); }
.act-due-col { width: 5.5rem; }
.act-due-cell { font-size: 0.85rem; color: var(--text-muted); }
.act-due-placeholder { letter-spacing: 1px; }

.act-dot-col { width: 3rem; text-align: center; }
.act-dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  vertical-align: middle;
}
.tp-row-placeholder { opacity: 0.45; }
.tp-row-placeholder:hover { opacity: 1; }

/* ---------- Course overview (section 1: full-width module map) ---------- */
.tp-head-amber {
  background: #FBEFD3;
  color: #5E430E;
  --tp-head-hem: #ECD9A8;
}
[data-theme="dark"] .tp-head-amber {
  background: #3A2E12;
  color: #F2D888;
  --tp-head-hem: #5A481F;
}

.co-card { margin-top: var(--space-5); }
/* Wide table scrolls inside its own box rather than stretching the page. */
.co-scroll { overflow-x: auto; }
.co-table { min-width: 44rem; }
.co-table th, .co-table td { vertical-align: top; }

.co-num-col { width: 2.5rem; }
.co-num { text-align: center; font-weight: 700; color: var(--primary); }
.co-topic-col { width: 12rem; }
.co-topic-cell { font-weight: 600; }
.co-cell { font-size: 0.88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.co-deadline-col { width: 6rem; }
.co-deadline-cell { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }

.co-week-tag {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .co-week-tag { color: #E4D6FA; }

/* ---------- Notes: checklist grouped by the calendar ---------- */
.todo-form { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-bottom: var(--space-5); }
.todo-form .field { margin: 0; }
@media (min-width: 700px) { .todo-form { grid-template-columns: minmax(0, 1fr) 12rem auto; align-items: end; } }

.todo-list { margin: 0 0 var(--space-4); }
.todo-group { margin-bottom: var(--space-5); }
.todo-group:last-child { margin-bottom: 0; }
.todo-group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); margin: 0 0 var(--space-2); padding-bottom: var(--space-2);
  border-bottom: var(--rule) solid var(--divider);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.todo-group.is-overdue .todo-group-head { color: var(--late-text); border-bottom-color: var(--late-text); }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.check-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  border: var(--rule) solid var(--divider);
  border-left: 4px solid var(--accent-bar);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.check-label { flex: 1; margin: 0; font-weight: 400; cursor: pointer; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.check-text { flex: 1 1 12rem; }
.check-date {
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.check-date.is-today { color: var(--text); font-weight: 700; }
.check-date.is-late { color: var(--late-text); font-weight: 700; }
.check-item.is-done {
  background: var(--done-bg);
  border-color: var(--done-border);
  border-left-color: var(--done-border);
}
.check-item.is-done .check-text { text-decoration: line-through; color: var(--done-text); }
.check-item.is-done .check-date { color: var(--done-text); }

/* ---------- Notes: a little of the planner/stationery language, kept to
   this one diary-like page. The dense tables elsewhere stay plain - this
   softness is deliberately rationed to where it costs nothing to scan. */
:root {
  --paper-bg: #FBF7EF;
  --paper-scallop: #E4D9F2;
  --tape-bg: rgba(201, 182, 242, 0.38);
  --tape-border: rgba(122, 21, 80, 0.22);
}
[data-theme="dark"] {
  --paper-bg: var(--surface-2);
  --paper-scallop: var(--surface-3);
  --tape-bg: rgba(255, 143, 200, 0.16);
  --tape-border: rgba(255, 143, 200, 0.3);
}

/* No decorative tape in normal light/dark modes - it read as a bandage/
   sticker in the wrong way. Patootie mode adds a heart sticker instead
   (see below); the tp-card keeps its own coloured head band. */
.card { position: relative; }
.tp-card { position: relative; }

.notes-sprig { flex: none; color: var(--primary); }

/* Ticking a to-do is a small filled circle rather than a square - closer to
   a habit-tracker dot. "Done" still shows in the text next to it, so the
   colour is never the only signal. */
.check-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.6rem; height: 1.6rem; flex: none;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  display: grid; place-content: center;
  cursor: pointer;
}
.check-item input[type="checkbox"]::before {
  content: "";
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
}
.check-item input[type="checkbox"]:checked { border-color: var(--primary); }
.check-item input[type="checkbox"]:checked::before { transform: scale(1); }

/* Note cards read as a page from a notebook: a scalloped top edge instead of
   the coloured side-bar used elsewhere, and a warm paper tint rather than
   plain white/near-black. */
.note-block {
  position: relative;
  margin-bottom: var(--space-4);
  padding-top: calc(var(--space-3) + 10px);
  border-left: var(--rule) solid var(--divider);
  border-radius: 14px;
  background: var(--paper-bg);
}
.note-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  border-radius: 14px 14px 0 0;
  background: radial-gradient(circle at 8px 0, var(--paper-scallop) 7.4px, transparent 8px)
              0 0 / 16px 10px repeat-x;
}
.note-block.is-today { border-left-color: var(--primary); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface); border-top: var(--rule) solid var(--divider);
  padding: var(--space-5) 0; color: var(--text-muted); font-size: 0.95rem;
}
.site-footer h2 { font-size: 1.05rem; color: var(--text); }
.site-footer p { max-width: 46rem; }
/* Slim one-line note for pages that no longer host the full "Your data"
   section — a quiet link to the Settings page with an in-line status. */
.footer-note { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; margin: 0; max-width: none; }
.footer-note a { color: var(--link); }
.footer-status { color: var(--text-muted); }

/* ---------- Progress table (front page snapshot) ----------
   One row per student. Layout is a CSS grid so the columns line up
   without a real <table> and the whole row can wrap gracefully on
   narrow screens. Quiet by default: the numbers are the affordance
   for editing, no separate edit buttons compete for attention. */
.progress-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.section-intro { color: var(--text-muted); margin: var(--space-1) 0 var(--space-4); max-width: 46rem; }

.pr-head, .pr-row {
  display: grid;
  grid-template-columns:
    minmax(6.5rem, 1.4fr) /* name */
    minmax(7rem,   2.2fr) /* progress bar + % */
    minmax(5rem,   0.9fr) /* chapters count */
    minmax(6.5rem, 0.9fr) /* activities pill */
    minmax(6.5rem, 0.9fr); /* practice pill */
  align-items: center;
  gap: var(--space-3) var(--space-2);
  padding: var(--space-3) var(--space-2);
}
.pr-head {
  padding-bottom: var(--space-2);
  border-bottom: var(--rule) solid var(--divider);
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.pr-row + .pr-row { border-top: var(--rule) solid var(--divider); }
.pr-row:hover { background: var(--surface-2); }
.pr-cell { min-width: 0; }

/* Student name — a link, and the coloured dot from the schedule legend. */
.pr-name { display: inline-flex; align-items: center; gap: var(--space-2); }
.pr-name-link {
  color: var(--text); text-decoration: none; font-weight: 700;
  font-family: var(--font-head); font-size: 1.05rem;
}
.pr-name-link:hover { text-decoration: underline; color: var(--link); }
.pr-name .stu-dot { --dot-color: var(--pr-color); }

/* Progress bar and its percent readout. Bar is 8px, filled with the
   student's own colour so the row keys back to the schedule. */
.pr-progress { display: flex; align-items: center; gap: var(--space-3); }
.pr-bar {
  flex: 1 1 auto;
  height: 10px;
  background: var(--surface-2);
  border: var(--rule) solid var(--divider);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 6rem;
}
.pr-bar-fill {
  display: block; height: 100%;
  background: var(--pr-color, var(--primary));
  border-radius: var(--radius-pill);
}
.pr-pct {
  min-width: 3.2rem; text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--text);
}

/* "8 / 20" — each number is a subtly-underlined button (the affordance
   is the number itself, not a separate edit icon). Focus/hover thicken
   the underline so it's obvious the number is interactive. */
.pr-count { display: inline-flex; align-items: baseline; gap: 0.1rem;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.pr-num {
  padding: 0.1rem 0.15rem;
  min-height: 32px; min-width: 1.8rem;
  font: inherit; font-weight: 700; color: var(--text);
  background: transparent;
  border: 2px solid transparent;
  border-bottom: 1px dashed var(--border);
  border-radius: 4px;
  cursor: text;
}
.pr-num:hover { border-bottom-style: solid; border-bottom-color: var(--primary); }
.pr-num-input {
  width: 3.4rem; min-height: 32px;
  padding: 0.1rem var(--space-2);
  font: inherit; font-weight: 700; text-align: center;
  color: var(--text); background: var(--surface);
  border: 2px solid var(--primary); border-radius: var(--radius-sm);
}
.pr-count-sep { color: var(--text-muted); }

/* Toggle pill — a switch, styled as a small rounded chip. Filled in the
   student's colour when on, outlined and muted when off. The ✓ / — mark
   and "Done"/"not yet done" screen-reader text make sure state is
   readable without colour. */
.pr-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 34px; padding: 0 var(--space-3) 0 var(--space-2);
  font: inherit; font-weight: 600; font-size: 0.9rem;
  color: var(--text); background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.pr-pill:hover { border-color: var(--primary); }
.pr-pill .pr-pill-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 999px;
  font-weight: 700; font-size: 0.82rem;
  background: var(--surface-2); color: var(--text-muted);
}
.pr-pill.is-on {
  background: var(--pr-color, var(--primary));
  color: var(--on-primary);
  border-color: var(--pr-color, var(--primary));
}
.pr-pill.is-on .pr-pill-mark {
  background: rgba(255,255,255,0.25); color: var(--on-primary);
}

/* Narrow screens: stack the row so each field takes a full line, labelled
   by its own column header (kept in the DOM but hidden on wide screens
   would over-engineer this — the labels are already implicit from the
   ARIA on each control). */
@media (max-width: 780px) {
  .pr-head { display: none; }
  .pr-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
  }
  .pr-progress { gap: var(--space-3); }
  .pr-count, .pr-flag { justify-self: start; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .toolbar, .btn, .file-btn, .skip-link, .tablist, .stats, .notice { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { box-shadow: none; border-color: #999; break-inside: avoid; margin-bottom: 0; }
  .timetable tr.is-today th, .timetable tr.is-today td { background: transparent; }
  a { text-decoration: none; color: #000; }
}

/* =========================================================
   Syncing: sign-in gate, sync status, account panel.
   Same Swiss grammar as the rest of the site - flat surfaces,
   one accent, no motion. Every state is spelled out in words;
   the coloured dot is decorative only.
   ========================================================= */
:root {
  --sync-ok: #1F6F43;      /* 3:1+ on --surface; dot only, never text */
  --sync-wait: #4A3D5E;
  --sync-bad: #A4243B;
  --sync-bad-text: #8A1C31; /* 7:1 on --surface, for the words */
  --auth-veil: #F6F2FA;
}
[data-theme="dark"] {
  --sync-ok: #6FCF97;
  --sync-wait: #C9BBDC;
  --sync-bad: #FF8FA3;
  --sync-bad-text: #FF9DAE;
  --auth-veil: #2A2340;
}

/* ---------- Sign-in gate ----------
   A full-bleed moment before the site proper, so it keeps one identity in both
   themes rather than flipping. Local variables drawn from the Kuromi palette.

   This screen is deliberately the cute end of the theme: a pale lilac header
   band with a deep scalloped frill, a ribbon bow, soft polka dots and pill
   shapes - where the rest of the site stays sharp and editorial. Still zero
   motion, and every pair below clears the site's contrast rules.

   The bow and the sparkles are original CSS/SVG shapes, not a character. */
.auth-gate {
  --a-ink: #0A0810;
  --a-plum: #2A1E44;
  --a-band: #C9B6F2;
  --a-band-deep: #A78BE0;
  --a-on-band: #1B1226;
  --a-card: #201730;
  --a-field: #0E0B14;
  --a-rule: #2C2442;
  --a-edge: #8A7CA8;
  --a-lilac: #C9B6F2;
  --a-lilac-hi: #DCCEFA;
  --a-rose: #FF8FC8;
  --a-rose-hi: #FFB3DA;
  --a-text: #F3EFFA;
  --a-muted: #BDB2D3;

  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  color: var(--a-text);
  /* Soft polka dots over a plum glow - the "cute" ground, kept at a low enough
     contrast that it never competes with the card. */
  background:
    /* Vignette first, so the corners fall away and the card sits in the light. */
    radial-gradient(115% 95% at 50% 45%, transparent 34%, rgba(4, 2, 9, 0.62) 100%),
    radial-gradient(circle at 8px 8px, rgba(201, 182, 242, 0.055) 2.2px, transparent 2.6px)
      0 0 / 34px 34px,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 16C10 16 3 11.6 3 7.4 3 5.2 4.7 3.8 6.5 3.8 8 3.8 9.4 4.8 10 6.1c.6-1.3 2-2.3 3.5-2.3 1.8 0 3.5 1.4 3.5 3.6C17 11.6 10 16 10 16Z" fill="rgba(255,143,200,0.038)"/></svg>')
      9px 11px / 33px 33px repeat,
    radial-gradient(120% 85% at 50% -10%, var(--a-plum) 0%, var(--a-ink) 64%),
    var(--a-ink);
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: 0 0 var(--space-6);
  background: var(--a-card);
  border: 1.5px solid var(--a-rule);
  /* Soft, generous rounding - the cute register, against the site's sharp 8px. */
  border-radius: 32px;
  /* Soft rose halo, so the card sits in its own pool of light. */
  box-shadow: 0 30px 70px -18px #000, 0 0 90px -30px rgba(255, 143, 200, 0.55);
  overflow: hidden;
}

/* The heading is a pale lilac header band, with a deep scalloped frill hanging
   off its bottom edge and a ribbon bow centred above the title. */
/* Header block: pale lilac band, ribbon bow, and a two-tone scalloped lace
   hem. Two offset rows of scallops read as layered trim rather than a
   single cut edge - that depth is most of what makes it look finished. */
.auth-head {
  position: relative;
  margin-bottom: calc(var(--space-6) + 18px);
  padding: var(--space-6) var(--space-5) calc(var(--space-5) + 4px);
  background: var(--a-band);
  color: var(--a-on-band);
  text-align: center;
}
.auth-head::before {
  content: "";
  display: block;
  width: 104px;
  height: 43px;
  margin: 0 auto var(--space-2);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 43"><path d="M11 4 12.7 9.3 18 11 12.7 12.7 11 18 9.3 12.7 4 11 9.3 9.3Z" fill="%23FFB3DA"/><path d="M94 20 95.3 24.1 99.4 25.4 95.3 26.7 94 30.8 92.7 26.7 88.6 25.4 92.7 24.1Z" fill="%23FFB3DA"/><path d="M84 6 85 9.2 88.2 10.2 85 11.2 84 14.4 83 11.2 79.8 10.2 83 9.2Z" fill="%23F07FBB"/><g transform="translate(29,7)"><path d="M23 15C23 15 11 3 6 9c-5 6 8 10 17 6Z" fill="%23FF8FC8"/><path d="M23 15c0 0 12-12 17-6 5 6-8 10-17 6Z" fill="%23FF8FC8"/><path d="M23 15c-2 4-5 8-8 10 4-1 7-4 8-6 1 2 4 5 8 6-3-2-6-6-8-10Z" fill="%23F07FBB"/><circle cx="23" cy="15" r="4" fill="%23FFB3DA"/></g></svg>') center / contain no-repeat;
}
.auth-head::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  background:
    radial-gradient(circle at 10px 0, var(--a-band) 9.6px, transparent 10px)
      0 0 / 20px 13px repeat-x,
    radial-gradient(circle at 10px 0, var(--a-band-deep) 9.6px, transparent 10px)
      10px 2px / 20px 13px repeat-x;
}

.auth-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5B3E8F;
}

.auth-card h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--a-on-band);
}

.auth-intro,
.auth-form,
.auth-error { padding-left: var(--space-6); padding-right: var(--space-6); }

/* Inset hairline - the bookbinding trick that stops a plain panel looking bare. */
.auth-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201, 182, 242, 0.12);
  border-radius: 26px;
  pointer-events: none;
}

.auth-intro {
  color: var(--a-muted);
  margin: 0 0 var(--space-6);
  font-size: 0.9375rem;
  line-height: 1.65;
  text-align: center;
}

.auth-form label {
  display: block;
  margin-bottom: var(--space-2);
  /* Decorative star, drawn as a background so screen readers never announce it. */
  padding-left: 1.15em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M6 0 7.3 4.7 12 6 7.3 7.3 6 12 4.7 7.3 0 6 4.7 4.7Z" fill="%23FF8FC8"/></svg>') left 0 center / 0.72em 0.72em no-repeat;
  color: var(--a-lilac);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  min-height: 50px;
  padding: var(--space-2) var(--space-4);
  color: var(--a-text);
  background: var(--a-field);
  border: 1.5px solid var(--a-edge);
  border-radius: var(--radius-pill);
  font: inherit;
}
.auth-form input:hover { border-color: var(--a-lilac); }
/* The ring sits in the gap on the card background, so it keeps its contrast
   whether the thing behind it is a dark field or the pink button. */
.auth-form input:focus-visible,
.auth-card button:focus-visible {
  outline: 3px solid var(--a-lilac-hi);
  outline-offset: 3px;
  border-color: var(--a-lilac);
}
/* Password row: the input keeps its pill shape, the toggle sits inside it. */
.auth-pw { position: relative; }
.auth-pw input { padding-right: 5.25rem; }
.auth-reveal {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  min-height: 40px;
  min-width: 4.25rem;
  padding: 0 var(--space-3);
  color: var(--a-on-band);
  background: var(--a-band);
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.auth-reveal:hover { background: var(--a-lilac-hi); }
.auth-caps {
  margin: var(--space-2) 0 0;
  color: var(--a-rose-hi);
  font-size: 0.8125rem;
  font-weight: 600;
}
.auth-caps:empty { display: none; }

.auth-form .field { margin-bottom: var(--space-5); }
.auth-form .field:last-of-type { margin-bottom: var(--space-6); }

.auth-actions { display: block; }
.auth-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: var(--space-3) var(--space-4);
  color: #14101E;
  background: var(--a-rose);
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.auth-actions .btn::before {
  content: "";
  width: 28px;
  height: 18px;
  flex: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 28"><path d="M23 15C23 15 11 3 6 9c-5 6 8 10 17 6Z" fill="%2314101E"/><path d="M23 15c0 0 12-12 17-6 5 6-8 10-17 6Z" fill="%2314101E"/><path d="M23 15c-2 4-5 8-8 10 4-1 7-4 8-6 1 2 4 5 8 6-3-2-6-6-8-10Z" fill="%2314101E"/><circle cx="23" cy="15" r="4.2" fill="%23FFE3F1"/></svg>') center / contain no-repeat;
}
.auth-actions .btn { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(140, 20, 80, 0.16); }
.auth-actions .btn:hover { background: var(--a-rose-hi); }
.auth-actions .btn[disabled] {
  color: var(--a-muted);
  background: var(--a-field);
  border: 1.5px solid var(--a-edge);
  cursor: default;
}

.auth-error {
  color: #FFC4D6;
  background: #2A1826;
  border: 1.5px solid var(--a-rose);
  padding: var(--space-3) var(--space-4);
  border-radius: 16px;
  margin: 0 0 var(--space-5);
  font-weight: 600;
  line-height: 1.5;
}
.auth-error:empty { display: none; }

@media (max-width: 600px) {
  .auth-gate { padding: var(--space-4) var(--space-3); align-items: flex-start; }
  .auth-head { padding: var(--space-5) var(--space-4) calc(var(--space-4) + 4px); }
  .auth-intro, .auth-form, .auth-error { padding-left: var(--space-5); padding-right: var(--space-5); }
}

/* ---------- Footer sync status ---------- */
.sync-status {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  color: var(--text-muted);
}
.sync-status[data-state="error"] .sync-status-text { color: var(--sync-bad-text); font-weight: 600; }
.sync-status[data-state="offline"] .sync-status-text { color: var(--text); font-weight: 600; }
.sync-dot {
  width: 0.6rem; height: 0.6rem; flex: none; align-self: center;
  border-radius: var(--radius-pill);
  background: var(--sync-wait);
}
.sync-status[data-state="synced"] .sync-dot { background: var(--sync-ok); }
.sync-status[data-state="error"] .sync-dot,
.sync-status[data-state="offline"] .sync-dot { background: var(--sync-bad); }

/* ---------- "Updated on another device" bar ---------- */
.update-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-2);
  border: var(--rule) solid var(--divider);
  border-left: 4px solid var(--accent-bar);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.update-bar-text { margin: 0; font-weight: 600; }
.update-bar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Account panel (Settings) ---------- */
.account-list {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
}
.account-list dt { font-weight: 600; color: var(--text-muted); }
.account-list dd { margin: 0; }
@media (max-width: 600px) {
  .account-list { grid-template-columns: 1fr; gap: var(--space-1); }
  .account-list dd { margin-bottom: var(--space-3); }
}

@media print {
  .auth-gate, .update-bar, .sync-status { display: none !important; }
}

/* ---------- Teaching plan: tick off a week, reorder rows ---------- */
/* Light yellow for a ticked week. The word "Done" sits in the row as well,
   so the colour is never the only thing carrying the meaning. */
:root {
  --tick-bg: #FDF3D0;
  --tick-text: #4A3A05;
  --tick-border: #A8850F;
}
[data-theme="dark"] {
  --tick-bg: #3A3113;
  --tick-text: #F5E4B8;
  --tick-border: #D9B75A;
}

.tp-done-col,
.tp-done-cell {
  width: 3.5rem;
  text-align: center;
}
.tp-move-col,
.tp-move-cell {
  width: 6.5rem;
  text-align: center;
  white-space: nowrap;
}

/* 28px box inside 8px padding clears the 44px target the rest of the site keeps. */
.tp-done-cell {
  padding: var(--space-2);
}
.tp-done-cell input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  display: grid; place-content: center;
  width: 1.75rem; height: 1.75rem;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.tp-done-cell input[type="checkbox"]::before {
  content: "";
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: var(--tick-border);
  transform: scale(0);
}
.tp-done-cell input[type="checkbox"]:checked {
  border-color: var(--tick-border);
}
.tp-done-cell input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.tp-move-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text);
  background: var(--surface-2);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tp-move-btn + .tp-move-btn {
  margin-left: var(--space-1);
}
.tp-move-btn:hover:not(:disabled) {
  background: var(--surface-3);
}
/* Disabled arrows stay fully legible - they are dimmed by colour, not opacity,
   so the first and last rows still read clearly. */
.tp-move-btn:disabled {
  color: var(--text-muted);
  border-color: var(--divider);
  cursor: default;
}

.tp-row-done > td {
  background: var(--tick-bg);
  color: var(--tick-text);
}
.tp-done-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 0.4em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tick-text);
  border: var(--rule) solid var(--tick-border);
  border-radius: var(--radius-sm);
}


/* ---------- Page personality: each page carries its own creature icon.
   All originals - round head, dot eyes, small blush - no borrowed art. */
.page-creature { flex: none; color: var(--primary); }
.page-creature .blush { fill: var(--danger); opacity: 0.55; }
.page-head h1 { position: relative; }
.h1-sparkle {
  display: inline-block; margin-left: var(--space-2);
  color: var(--accent, var(--primary));
  font-size: 0.7em; vertical-align: 0.35em;
}

/* ---------- Patootie theme: a third mode alongside light and dark,
   deliberately dialled to max cute. Pastel pink page ground, extra soft
   card surfaces, hot-pink accents, and heart bullets on list items. */
[data-theme="patootie"] {
  --bg: #FFF0F6;
  --surface: #FFFFFF;
  --surface-2: #FFE0EE;
  --surface-3: #FFCCE0;
  --text: #3A0E28;
  --text-muted: #7A2D5A;
  --primary: #C2185B;
  --primary-hover: #8E1044;
  --on-primary: #FFFFFF;
  --link: #A81454;
  --border: #E080AF;
  --divider: #FBD0E1;
  --focus: #3A0E28;
  --danger: #B00030;
  --on-danger: #FFFFFF;
  --accent: #E0508A;
  --accent-soft: #FCE1EE;
  --notice-bg: #E9F5EC;
  --notice-text: #14532D;
  --notice-border: #1F6F43;
  --done-bg: #E4F3E8;
  --done-text: #14532D;
  --done-border: #1F6F43;
  --late-text: #A81454;
  --accent-bar: #C2185B;
  --today-bg: #FFD3E4;
  --shadow-card: 0 1px 0 #FBD0E1, 0 2px 0 -1px rgba(58, 14, 40, 0.08);
  --tick-bg: #FFF3D0;
  --tick-text: #4A3A05;
  --tick-border: #C99511;
  --paper-bg: #FFF8FB;
  --paper-scallop: #FBC7DD;
  --tape-bg: rgba(255, 143, 200, 0.28);
  --tape-border: rgba(194, 24, 91, 0.32);
  color-scheme: light;
  /* Student palette stays the same identifiable 8 - shifted a touch warmer. */
  --stu-1: #3B65C4;
  --stu-2: #C8531F;
  --stu-3: #22757F;
  --stu-4: #C41E68;
  --stu-5: #3E7E20;
  --stu-6: #7B34B4;
  --stu-7: #8E6900;
  --stu-8: #4E5760;
  --stu-1-bg: #9EB9F3;
  --stu-2-bg: #F89C74;
  --stu-3-bg: #66C5CC;
  --stu-4-bg: #FE88B1;
  --stu-5-bg: #87C55F;
  --stu-6-bg: #DCB0F2;
  --stu-7-bg: #F6CF71;
  --stu-8-bg: #B3B3B3;
}

/* Patootie-only cute upgrades: heart bullets, thicker rainbow scallop,
   busier confetti ground, bigger page creatures, ribbon-tail cards. */
[data-theme="patootie"] body {
  background-image:
    radial-gradient(circle at 20px 30px, rgba(194, 24, 91, 0.09) 2px, transparent 2.4px),
    radial-gradient(circle at 80px 90px, rgba(224, 80, 138, 0.08) 1.8px, transparent 2.2px),
    radial-gradient(circle at 140px 20px, rgba(240, 184, 96, 0.08) 1.8px, transparent 2.2px),
    radial-gradient(circle at 200px 130px, rgba(180, 25, 122, 0.07) 1.7px, transparent 2.1px);
  background-size: 180px 130px;
}
[data-theme="patootie"] .page-creature { color: var(--primary); }
[data-theme="patootie"] .card {
  border-color: var(--border);
  box-shadow: 0 1px 0 var(--divider), 0 6px 20px -14px rgba(194, 24, 91, 0.35);
}
/* (The old tape override lived here; removed with the base tape rule.) */
[data-theme="patootie"] .section-head::after {
  opacity: 1;
  height: 10px;
}
/* Heart bullets on to-do checkboxes when they are ticked. */
[data-theme="patootie"] .check-item input[type="checkbox"]:checked::before {
  background: var(--accent);
  clip-path: path("M8 14 A4 4 0 0 1 8 6 A4 4 0 0 1 8 14 Z");
}
/* Buttons get a whisker of extra sparkle. */
[data-theme="patootie"] .btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---------- Patootie button: its own dedicated control, styled deliberately
   different from the plain dark-mode toggle so it reads as a treat, not a
   utility. Sits at the right edge of the a11y controls group. */
.btn-patootie {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0 var(--space-3);
  color: #14101E;
  background: linear-gradient(135deg, #FFB3DA, #C9B6F2);
  border: 1.5px solid #FF8FC8;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  position: relative;
}
.btn-patootie .patootie-icon {
  display: inline-block;
  color: #C2185B;
  font-size: 1rem;
  line-height: 1;
}
.btn-patootie:hover {
  background: linear-gradient(135deg, #FFC4E2, #DCCEFA);
}
/* When Patootie is ON, the button flips to a bolder pink and gains a heart,
   so its state reads clearly in every mode. */
.btn-patootie[aria-pressed="true"] {
  color: #FFFFFF;
  background: linear-gradient(135deg, #C2185B, #7B2A86);
  border-color: #7B2A86;
}
.btn-patootie[aria-pressed="true"] .patootie-icon { color: #FFB3DA; }
/* Dark theme: the button stays visible against the near-black header. */
[data-theme="dark"] .btn-patootie {
  color: #14101E;
  background: linear-gradient(135deg, #F290C4, #B08CE8);
  border-color: #F290C4;
}


/* Signoff line at the top of the footer - only visible in Patootie mode. */
.footer-signoff {
  margin: 0 0 var(--space-2);
  color: var(--primary);
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Patootie mode: a small heart sticker at the top-left of every card,
   including plan/overview/tracker. The coloured amber/purple/pink header
   bands on those cards get flattened to plain white in Patootie mode, so
   the heart sits on a clean surface instead of a muddy coloured band. */
[data-theme="patootie"] .card::before,
[data-theme="patootie"] .tp-card::before {
  content: "";
  position: absolute;
  left: var(--space-5);
  top: -0.7rem;
  width: 2rem; height: 1.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22"><path d="M12 20s-8-5-8-11.5A4 4 0 0 1 12 6a4 4 0 0 1 8 2.5C20 15 12 20 12 20Z" fill="%23FF8FC8" stroke="%23C2185B" stroke-width="0.8"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 3;
}
/* Flatten the coloured tp-head bands in Patootie only, so the heart sits
   on a clean surface. The amber/purple/pink bands stay in light/dark. */
[data-theme="patootie"] .tp-head-purple,
[data-theme="patootie"] .tp-head-pink,
[data-theme="patootie"] .tp-head-amber {
  background: var(--surface);
  color: var(--text);
  padding-left: calc(2rem + var(--space-4) + var(--space-2));
}
[data-theme="patootie"] .tp-head::after { display: none; }
[data-theme="patootie"] .tp-card { overflow: visible; }

/* ---------- Patootie surprise: her own photo in place of the school-cap
   logo, whenever Patootie is on. The <img> uses onerror to remove itself
   if the file doesn't exist yet, so the plain cap still shows correctly
   in that case. */
.patootie-photo { display: none; }
[data-theme="patootie"] .patootie-photo {
  display: inline-block;
  width: 32px; height: 32px;
  margin-right: var(--space-2);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary);
  box-shadow: 0 2px 8px -3px rgba(194, 24, 91, 0.4);
  vertical-align: middle;
  flex: none;
}
[data-theme="patootie"] .site-title > .icon { display: none; }


/* =====================================================================
   Patootie: 10x cute push. Every rule below is scoped to Patootie only.
   ===================================================================== */

/* Cheesy whisper - the small sweet-nothing text used in empty placeholder
   rows. Faint enough not to be mistaken for a real entry, but visible. */
.cheesy-whisper {
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.75;
  font-size: 0.85rem;
}
.cheesy-cell { font-style: italic; color: var(--text-muted); opacity: 0.75; }

/* Bigger, chunkier heart sticker at the corner of every main card. */
[data-theme="patootie"] .card::before {
  width: 2.6rem !important; height: 2.4rem !important;
  top: -1rem !important; left: var(--space-4) !important;
}

/* A heart cursor on hover targets - a treat, not a replacement of the
   normal cursor everywhere (that would break clicking on complex pages). */
[data-theme="patootie"] .btn:hover,
[data-theme="patootie"] .btn-patootie:hover,
[data-theme="patootie"] [role="tab"]:hover,
[data-theme="patootie"] .tp-row:hover,
[data-theme="patootie"] .check-item:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 22"><path d="M12 20s-8-5-8-11.5A4 4 0 0 1 12 6a4 4 0 0 1 8 2.5C20 15 12 20 12 20Z" fill="%23FF8FC8" stroke="%23C2185B" stroke-width="1"/></svg>') 12 12, pointer;
}

/* Sticker-style tabs: rounded fat pill with a slight tilt on hover.
   Kept still (no motion) - just a static rotation on hover state itself. */
[data-theme="patootie"] [role="tab"] {
  border-width: 2.5px;
  box-shadow: 2px 3px 0 rgba(194, 24, 91, 0.15);
}

/* Chunky pastel buttons in Patootie mode. */
[data-theme="patootie"] .btn {
  border-width: 2px;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(194, 24, 91, 0.18);
}

/* Confetti ground in Patootie - hearts and stars, dialled down to ~4% opacity
   so the page reads stickered without hearts swallowing the content. Much
   smaller tiles than before, so the pattern reads as sprinkle, not wallpaper. */
[data-theme="patootie"] body {
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12"><path d="M7 11s-5-3-5-6.5A2 2 0 0 1 7 3a2 2 0 0 1 5 1.5C12 7.5 7 11 7 11Z" fill="rgba(255,143,200,0.055)"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M5 0l0.8 3.6 3.6 0.8-3.6 0.8-0.8 3.6-0.8-3.6-3.6-0.8 3.6-0.8Z" fill="rgba(240,184,96,0.05)"/></svg>');
  background-position: 8px 10px, 80px 60px;
  background-size: 90px 70px, 110px 90px;
  background-repeat: repeat;
}

/* Extra sparkle row under every h1 in Patootie. */
[data-theme="patootie"] .page-head h1::after {
  content: "✦ · ♡ · ✧ · ♡ · ✦";
  display: block;
  margin-top: var(--space-2);
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  opacity: 0.75;
}

/* Heart-shaped bullets for lists in Patootie (page-intro next to h1, etc). */
[data-theme="patootie"] .cat-count::before,
[data-theme="patootie"] .stat-value::before {
  content: "♡ ";
  color: var(--accent);
  font-weight: 400;
}

/* Softer, more paper-like card surface in Patootie: cream-tinted white
   with a subtle inner shadow so cards look like little stacked notes. */
[data-theme="patootie"] .card,
[data-theme="patootie"] .tp-card {
  border-radius: 18px;
  border: 1.5px solid var(--border);
}

/* A tiny bow beside every course tab avatar. */
[data-theme="patootie"] [role="tab"] .avatar::after {
  content: "";
  position: absolute;
  top: -6px; right: -4px;
  width: 12px; height: 8px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="M6 4C6 4 3 1 1.5 2.2c-1.5 1.2 2 3 4.5 2Z" fill="%23FF8FC8"/><path d="M6 4c0 0 3-3 4.5-1.8s-2 3-4.5 2Z" fill="%23FF8FC8"/><circle cx="6" cy="4" r="1.2" fill="%23F07FBB"/></svg>') center / contain no-repeat;
}
[data-theme="patootie"] [role="tab"] .avatar { position: relative; overflow: visible; }

/* Rainbow scallop hem is thicker and brighter in Patootie. */
[data-theme="patootie"] .section-head::after {
  height: 12px;
  opacity: 1;
  background:
    radial-gradient(circle at 6px 0, var(--stu-4) 5.8px, transparent 6px) 0 0 / 36px 12px repeat-x,
    radial-gradient(circle at 15px 0, var(--stu-6) 5.8px, transparent 6px) 0 0 / 36px 12px repeat-x,
    radial-gradient(circle at 24px 0, var(--stu-3) 5.8px, transparent 6px) 0 0 / 36px 12px repeat-x,
    radial-gradient(circle at 33px 0, var(--stu-1) 5.8px, transparent 6px) 0 0 / 36px 12px repeat-x;
}

/* =====================================================================
   Patootie: even cuter push - pinker inputs, softer buttons, more sparkle
   ===================================================================== */

/* Pink inputs across the board in Patootie: pill-shaped, thicker soft-pink
   borders, and a warm placeholder colour so the field feels friendly. */
[data-theme="patootie"] input[type="text"],
[data-theme="patootie"] input[type="date"],
[data-theme="patootie"] input[type="email"],
[data-theme="patootie"] input[type="password"],
[data-theme="patootie"] textarea,
[data-theme="patootie"] select {
  border: 2px solid #F8B3D0;
  border-radius: 999px;
  background: #FFFAFC;
  color: var(--text);
}
/* Textareas keep their multi-line height but use a rounded rectangle so
   the pill doesn't look wrong on tall inputs. */
[data-theme="patootie"] textarea {
  border-radius: 18px;
}
[data-theme="patootie"] input::placeholder,
[data-theme="patootie"] textarea::placeholder {
  color: #C48AB0;
  font-style: italic;
}
[data-theme="patootie"] input:focus-visible,
[data-theme="patootie"] textarea:focus-visible,
[data-theme="patootie"] select:focus-visible {
  border-color: var(--primary);
  outline: 3px solid #FFD3E4;
  outline-offset: 1px;
}

/* Labels get a small ♡ before them in Patootie, so the whole form reads sweet. */
[data-theme="patootie"] .field > label::before {
  content: "♡ ";
  color: var(--accent);
  font-weight: 400;
}

/* Softer, more rounded buttons in Patootie - with a subtle 2-tone bevel. */
[data-theme="patootie"] .btn:not(.btn-patootie) {
  border-radius: 999px;
  border-width: 2px;
  padding: var(--space-2) var(--space-4);
  box-shadow: 0 2px 0 rgba(194, 24, 91, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="patootie"] .btn.btn-secondary {
  background: #FFFAFC;
}

/* Rainbow scallop under section heads: slightly bigger, and sits a hair
   further from the label so it reads as trim, not underline. */
[data-theme="patootie"] .section-head { padding-bottom: calc(var(--space-4) + 4px); }

/* Sparkles left AND right of every h1 in Patootie - a proper little frame. */
[data-theme="patootie"] .page-head h1::before {
  content: "✦ ";
  color: var(--accent);
  font-size: 0.75em;
  opacity: 0.7;
}

/* The Create button and Add-a-student ghost pill both gain a heart. */
[data-theme="patootie"] .create-btn::after,
[data-theme="patootie"] .btn-ghost-add::after {
  content: " ♡";
  color: var(--accent);
}

/* =====================================================================
   Patootie: stationery-planner elements adapted as pure CSS/SVG
   - striped washi tape, dashed inner frame, small floral accents,
   - notebook binding rings, cloud-outline decoration
   ===================================================================== */

/* Striped washi tape at the top of every card in Patootie (replaces the
   plain rectangle that read as a bandage). Diagonal gingham-style stripes. */
[data-theme="patootie"] .card {
  border-top: 6px solid transparent;
  background-image:
    repeating-linear-gradient(45deg,
      #FFB3DA 0 6px,
      #FFDAEC 6px 12px);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 0;
  background-color: var(--surface);
}
/* The gradient above lives BEHIND the card colour; combine so surface stays visible. */
[data-theme="patootie"] .card {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    repeating-linear-gradient(45deg, #FFB3DA 0 6px, #FFDAEC 6px 12px) border-box;
  border: 6px solid transparent;
  border-bottom: 1.5px solid var(--border);
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
}

/* A dashed inner frame just inside the border, like the doodled ones on
   the reference. */
[data-theme="patootie"] .card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px dashed #F8B3D0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
}

/* Small panda silhouette in the bottom-right corner of each card. Original
   geometric shape - round face, ear circles, eye patches, small nose.
   Not a copy of any specific character. */
[data-theme="patootie"] .card {
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="24" r="12" fill="%23FFFFFF" stroke="%232B2B2B" stroke-width="1"/><ellipse cx="11" cy="13" rx="4.5" ry="5" fill="%232B2B2B"/><ellipse cx="29" cy="13" rx="4.5" ry="5" fill="%232B2B2B"/><ellipse cx="15" cy="23" rx="2.6" ry="3.4" fill="%232B2B2B" transform="rotate(-15 15 23)"/><ellipse cx="25" cy="23" rx="2.6" ry="3.4" fill="%232B2B2B" transform="rotate(15 25 23)"/><circle cx="15" cy="22" r="0.9" fill="%23FFFFFF"/><circle cx="25" cy="22" r="0.9" fill="%23FFFFFF"/><ellipse cx="20" cy="28" rx="1.4" ry="1" fill="%232B2B2B"/><path d="M18.5 30c0.6 0.8 2.4 0.8 3 0" stroke="%232B2B2B" stroke-width="0.7" fill="none" stroke-linecap="round"/></svg>');
  background-position: right 12px bottom 12px;
  background-repeat: no-repeat;
  background-size: 36px 36px;
}

/* Notebook binding rings down the left edge of each daily-note block. */
[data-theme="patootie"] .note-block {
  padding-left: calc(var(--space-4) + 14px);
}
[data-theme="patootie"] .note-block::after {
  content: "";
  position: absolute;
  top: 12px; bottom: 12px; left: 6px;
  width: 8px;
  background:
    radial-gradient(circle at 4px 4px, #F8B3D0 3px, transparent 3.5px)
      0 0 / 8px 16px repeat-y;
  pointer-events: none;
}

/* Cloud-outline decoration behind the h1 - a soft cloud silhouette that sits
   as a background pillow behind the page title. No face - just the outline. */
[data-theme="patootie"] .page-head {
  position: relative;
}
[data-theme="patootie"] .page-head::before {
  content: "";
  position: absolute;
  left: -12px; top: -8px;
  width: 240px; height: 70px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 70"><path d="M40 45c-15 0-25-10-25-22 0-8 6-15 14-17 3-8 12-14 22-14 12 0 22 8 24 19 3-2 7-3 11-3 10 0 18 8 18 18 5-3 11-5 17-5 15 0 27 12 27 27 0 15-12 27-27 27H50c-9 0-15-6-15-15 0-8 5-14 12-15Z" fill="%23FFE0EE" stroke="%23F8B3D0" stroke-width="1.5"/></svg>') no-repeat center / contain;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
[data-theme="patootie"] .page-head > * { position: relative; z-index: 1; }

/* Panda in the bottom-right corner of every tp-card too (Course overview,
   Teaching plan, Activity tracker), so the Teaching Plans page gets the
   same little visitor as the main cards. */
[data-theme="patootie"] .tp-card {
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="24" r="12" fill="%23FFFFFF" stroke="%232B2B2B" stroke-width="1"/><ellipse cx="11" cy="13" rx="4.5" ry="5" fill="%232B2B2B"/><ellipse cx="29" cy="13" rx="4.5" ry="5" fill="%232B2B2B"/><ellipse cx="15" cy="23" rx="2.6" ry="3.4" fill="%232B2B2B" transform="rotate(-15 15 23)"/><ellipse cx="25" cy="23" rx="2.6" ry="3.4" fill="%232B2B2B" transform="rotate(15 25 23)"/><circle cx="15" cy="22" r="0.9" fill="%23FFFFFF"/><circle cx="25" cy="22" r="0.9" fill="%23FFFFFF"/><ellipse cx="20" cy="28" rx="1.4" ry="1" fill="%232B2B2B"/><path d="M18.5 30c0.6 0.8 2.4 0.8 3 0" stroke="%232B2B2B" stroke-width="0.7" fill="none" stroke-linecap="round"/></svg>');
  background-position: right 14px bottom 14px;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-color: var(--surface);
}

/* ---------- CSV import preview (Settings page) ---------- */
.csv-import-errors,
.csv-import-warnings {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}
.csv-import-errors {
  color: var(--danger);
  background: var(--surface-2);
  border-left: 4px solid var(--danger);
}
.csv-import-warnings {
  color: var(--text-muted);
  background: var(--surface-2);
  border-left: 4px solid var(--border);
}
.csv-import-errors ul,
.csv-import-warnings ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.csv-import-errors li,
.csv-import-warnings li { margin-bottom: var(--space-1); }

.csv-import-preview {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.csv-day {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
}
.csv-day h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.csv-day-count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.csv-day ul {
  margin: 0;
  padding-left: var(--space-5);
  font-size: 0.9rem;
}
.csv-day li { margin-bottom: var(--space-1); line-height: 1.5; }
.csv-mode { color: var(--text-muted); font-size: 0.85rem; }
.csv-note { color: var(--text-muted); font-size: 0.85rem; font-style: italic; }

/* Hide page content until auth-ui.js decides whether the sign-in gate should
   go up. Prevents the "content flashes, then gate appears" flicker on load. */
html[data-auth-pending] .site-header,
html[data-auth-pending] main,
html[data-auth-pending] .site-footer { visibility: hidden; }