/* Davis School Education — an ERP-style shell in the SAP idiom: a light blue
   left navigation, a slim white shell bar with breadcrumbs, and dense white
   panels on a white canvas.

   Palette follows SAP's Horizon theme: #0a6ed1 for anything actionable, the
   semantic trio (#107e3e / #e9730c / #bb0000) for success, warning and error,
   and blue-grey neutrals rather than true greys so nothing looks muddy next to
   the blue. Page and panel are both white, so panels are separated by their
   border and tinted header rather than by a background contrast. */

:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-head: #f2f6fb;
  --ink: #1d2d3e;
  --muted: #5b738b;
  --line: #d3dde7;
  --line-soft: #e6ecf3;
  --accent: #0a6ed1;
  --accent-dark: #0854a0;
  --accent-soft: #e8f2fd;
  --green: #107e3e;
  --green-soft: #ebf5ee;
  --amber: #9f5609;             /* 5.0:1 on its tint, 5.5:1 on white (it was 4.1:1 on the tint) */
  --amber-soft: #fdf3e5;
  --red: #bb0000;
  --red-soft: #fdeceb;
  --nav-bg: #d6e6f6;
  --nav-ink: #22384d;
  --nav-ink-dim: #48627a;       /* the sidebar's section labels: 5.0:1 on the sidebar (it was 3.4:1) */
  --nav-hover: #c2daf1;
  /* Blue tints that used to be written out in place. They are variables so a Theme (see the end of
     this file) can recolour every one of them together. */
  --label: #44586e;
  --tint-hover: #f4f8fd;
  --tint-faint: #f7fafd;
  --tint-stripe: #fafcfe;
  --edge: #b6cee8;
  --edge-input: #8495aa;        /* 3.06:1 on white: a text box must be visible as one (WCAG 1.4.11; it was 1.64:1) */
  --edge-hover: #a9cdf0;
  --edge-nav: #a9c6e4;
  --grad-a: #eaf3fc;
  --grad-b: #dbe9f8;
  --tile-icon: #cfe4fa;
  --badge-neutral: #e7edf4;
  --accent-rgb: 10, 110, 209;
  --accent-dark-rgb: 10, 84, 160;
  /* Calendar event colours only — kept separate from --accent/--amber/--green
     above so a settings override can't also repaint buttons and badges. */
  --cal-scheduled: #7c6fd6;
  --cal-needs-client: #e8894a;
  --cal-delivered: #4f9e5a;
  --cal-cancelled: #a9b4b4;
  --radius: 12px;                 /* cards; the themes set their own */
  --shadow: 0 1px 2px rgba(29, 45, 62, .06);
  --shadow-lift: 0 2px 8px rgba(29, 45, 62, .10);   /* a card that lifts on hover: still the card level, slightly higher */
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Headings are set in the body family, bold. Oswald (condensed, tightly spaced) was hard for dyslexic readers; the artist themes still bring their own faces. */
  --font-head: var(--font-body);

  /* --- Design tokens (docs/design/2026-10-04-ux-direction.md): every other stylesheet reads these. -------------------------------------
     Type: a six-step scale in rem, so a reader's text-size choice (and the browser's own setting) scales everything that uses it. Body text
     is 17px by default on the pages built for families and pupils and 16px (1rem) in the staff shell, where tables and dense lists may sit
     at 0.9375rem. Nothing a person reads is sized in px any more. */
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-body: 1.0625rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --leading-body: 1.5;
  --leading-head: 1.2;
  --measure: 65ch;                 /* the longest a line of prose should run */
  /* Space: a 4px base. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  /* Shape: controls, cards, chips. (--radius above is the theme's own card radius and stays as it is.) */
  --r-control: 8px;
  --r-card: 12px;
  --r-chip: 999px;
  --shadow-dialog: 0 12px 36px rgba(20, 24, 32, .18);   /* the second (and last) elevation level: dialogs, menus, popovers, floating bars */
  /* Motion: the interface moves briefly or not at all (see the prefers-reduced-motion block below). */
  --t-fast: 150ms;
  --t-ui: 220ms;
  /* Semantic names over the palette above, so a component can say what it means rather than which blue it wants. */
  --surface: var(--panel);
  --surface-raised: var(--panel-head);
  --ink-muted: var(--muted);
  --ok: var(--green);
  --ok-soft: var(--green-soft);
  --warn: var(--amber);
  --warn-soft: var(--amber-soft);
  --danger: var(--red);
  --danger-soft: var(--red-soft);
  --focus: var(--accent);
}

* { box-sizing: border-box; }

/* Focus is always visible, the same way everywhere: a 2px ring with a gap. A control that draws its own ring keeps it as well as this. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Nothing moves for someone who has asked their device for less motion: transitions and animations end at once, nothing lifts on hover,
   the confetti stays away, and a flash message stays until the page changes rather than fading. One block for everything. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tile:hover, .rs-card:hover, .rs-tile:hover, .sr-card:hover, .po-card:hover, .cal-event:hover, .wz-btn:hover:not(:disabled), .iv-folder.is-over { transform: none; }
  .wz-confetti { display: none; }
  .flash { animation: none; }
}

/* Every typeface is served from this site (app/static/fonts, each with its OFL licence alongside): nothing is asked of Google Fonts, so the
   Content-Security-Policy names no font host at all and a page renders the same with or without the wider internet. Open Sans is the body
   face (one variable file per subset covers 400-700); the five others are the artist themes' heading faces (tools/artist_themes.py);
   Lexend is one of the choices in the Reading panel, never the only face. Latin and Latin Extended only. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/open-sans-400-700-latin.woff2?v=v27") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/open-sans-400-700-latin-ext.woff2?v=v27") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/fraunces-500-700-latin.woff2?v=v27") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/fraunces-500-700-latin-ext.woff2?v=v27") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/playfair-display-600-700-latin.woff2?v=v27") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/playfair-display-600-700-latin-ext.woff2?v=v27") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/fredoka-500-600-latin.woff2?v=v27") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/fredoka-500-600-latin-ext.woff2?v=v27") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("fonts/archivo-700-800-latin.woff2?v=v27") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("fonts/archivo-700-800-latin-ext.woff2?v=v27") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lora-700-latin.woff2?v=v27") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lora-700-latin-ext.woff2?v=v27") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/lora-italic-700-latin.woff2?v=v27") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/lora-italic-700-latin-ext.woff2?v=v27") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/lexend-latin.woff2?v=v26") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/lexend-latin-ext.woff2?v=v26") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* 16px at the browser's default size (BDA: 16-19px), in rem rather than px so the browser's own text-size setting and the Reading panel's both count. */
  font: 1rem/var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-text, .card > h2, .card > .card-head {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--leading-head);
  letter-spacing: 0;
}
/* The type scale (--text-*): headings in the body family, a step or two above the text they introduce. */
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
/* Prose never runs wider than a comfortable line (60-70 characters). Tables, forms and cards are not prose. */
.card-body > p, .page-head p, .obj-sub, .field .hint, .policy-body, .empty p { max-width: var(--measure); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.icon { flex: none; vertical-align: -3px; }

/* --- shell ---------------------------------------------------------------- */

.env-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  background: repeating-linear-gradient(135deg, #7a3a00, #7a3a00 12px, #8f4700 12px, #8f4700 24px);
  color: #fff;
  font: 700 0.8125rem/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 10px;
}

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 228px;
  flex: 0 0 228px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  padding: 0 10px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  height: auto;
  padding: 14px 6px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--edge);
}
.brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 26px;              /* the box's height, so the letter sits in the middle of it */
  text-align: center;
}
/* The DSE mark sits in a white circular badge with a fine blue ring and a soft
   lift, so its pale-blue artwork stays crisp against the light-blue sidebar
   instead of dissolving into it. The artwork has generous margins, so the
   circular crop never touches the head or the brain. */
.logo-mark {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--edge-nav), 0 3px 8px rgba(var(--accent-dark-rgb), .22);
}
.brand-text {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.15;
  letter-spacing: .2px;
  min-width: 0;
}
.brand-text small {
  display: block;
  color: var(--nav-ink-dim);
  font: 400 0.75rem/1.3 var(--font-body);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "powered by" credit: the TutorMaestry name (the developer). The M is the mosaic artwork; "aestry" is vector lettering in
   Fraunces (soft, medium-heavy) so its weight matches the M, with the final y in terracotta. Both come from
   brand/make_maestry_aestry.py and make_maestry_app_icons.py. */
.brand-text small.brand-powered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 5px;
  font-size: 0.6875rem;           /* a tiny section label (11px at the default size): kept in capitals, as the TutorMaestry wordmark's credit line */
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  overflow: visible;
  color: var(--nav-ink-dim);
}
/* The M artwork is the first letter of "TutorMaestry", followed by "aestry". They share a baseline, and the M is a proper
   capital, 1.6 times the height of the lowercase letters: with the word 22px tall (x-height 14.3px) the M is 23px. The 1px
   lifts it onto the letters' baseline, which sits 4 units above the wordmark's bottom edge. */
.maestry-credit { display: flex; align-items: flex-end; gap: 1px; }
.maestry-m { height: 16.0px; width: auto; flex: none; display: block; margin-bottom: 5.8px; }
.maestry-tutor {
  height: 22.3px;
  width: auto;
  flex: none;
  margin-right: 1px;
  color: var(--ink);
}
.maestry-mark {
  height: 18.3px;
  width: auto;
  flex: none;
  color: var(--ink);
}

.nav-group {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--nav-ink-dim);
  font-weight: 700;
  padding: 16px 10px 5px;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nav-ink);
  min-height: 36px;
  padding: 7px 10px;
  border-radius: var(--r-control);
  margin-bottom: 1px;
  font-size: 0.9375rem;
  border-left: 2px solid transparent;
}
.sidebar nav a span:first-of-type { flex: 1; min-width: 0; }
.sidebar nav a:hover { background: var(--nav-hover); color: var(--ink); text-decoration: none; }
.sidebar nav a.active {
  background: #fff;
  color: var(--accent-dark);
  border-left-color: var(--accent);
  font-weight: 600;
}
.sidebar nav a.active .icon { color: var(--accent); }
.sidebar .pill, .hub-tabs .pill {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.shellbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 46px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.shell-crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  font-size: 0.875rem;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.shell-crumbs .sep { color: var(--muted); }
.shell-crumbs a { color: var(--muted); }
.shell-crumbs a:hover { color: var(--accent); }
.shell-crumbs > span:last-child { font-weight: 600; }
.shell-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.shell-user { font-size: 0.8125rem; color: var(--muted); }
.shell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.shell-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--line); }

.main { flex: 1; min-width: 0; padding: var(--s-5) var(--s-5) 56px; }

/* --- places and their tabs (FEATURES new_nav, app/hubs.py) ---------------------------------------------------------------------------------
   The sidebar lists places; the pages of the place you are in are tabs across the top of the page. Underlined tabs, so they are never
   mistaken for a page's own filter chips or folders, which are pills. */
.hub-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-5); border-bottom: 1px solid var(--line); }
.hub-tabs a {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-3);
  margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: var(--r-control) var(--r-control) 0 0;
  color: var(--muted); font-weight: 600;
}
.hub-tabs a:hover { color: var(--ink); background: var(--tint-hover); text-decoration: none; }
.hub-tabs a.is-on { color: var(--ink); border-bottom-color: var(--accent); }
/* A pupil's header: one line of who, whose and when, above that pupil's tabs (_pupil_head.html). */
.pupil-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); }
.pupil-strip-main { flex: 1 1 260px; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.pupil-strip-name { font-size: var(--text-lg); font-weight: 700; color: var(--ink); line-height: var(--leading-head); }
.pupil-strip-sub, .pupil-strip-next { margin: 0; color: var(--muted); font-size: 0.875rem; }
.pupil-card { margin-bottom: var(--s-4); }
.pupil-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.pupil-notes li { display: flex; flex-direction: column; gap: 2px; }
.pupil-notes span { color: var(--muted); }
.shell-menu-btn {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-2);
  border: 1px solid transparent; border-radius: var(--r-control); color: var(--muted); font-size: 0.8125rem;
}
.shell-menu-btn:hover, .shell-menu[open] > .shell-menu-btn { background: var(--accent-soft); color: var(--accent); border-color: var(--line); }
.shell-menu-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The reports and activities pages (app/routes/progress_reports.py, activities.py). */
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.inline-form .field { margin: 0; }
.pr-list li::marker { content: none; }
.pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
.pr-row:first-child { border-top: 0; padding-top: 0; }
.pr-who { flex: 1 1 200px; display: flex; flex-direction: column; }
.pr-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
/* The term report page reads as the report window and the saved PDF do: the draft at the report window's size, and the evidence with the PDF's
   chart and objectives table (app/templates/report_print.html), one column grid for every topic so Level and the change line up. Two equal
   columns: the table needs the room, and the draft still has about 65 characters a line. */
.tr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.tr-text { width: 100%; font: inherit; font-size: 1.0625rem; line-height: 1.65; padding: 14px 16px; }
.tr-h { font-size: 1rem; margin: var(--s-4) 0 var(--s-2); }
.tr-chart { margin: var(--s-3) 0 0; }
.tr-cat { font-weight: 650; margin: var(--s-3) 0 var(--s-1); }
.tr-cat .muted { font-weight: 400; }
.tr-table { table-layout: fixed; font-size: inherit; margin-bottom: var(--s-2); }
.tr-table th, .tr-table td { padding: 6px 8px; vertical-align: baseline; white-space: normal; }
/* Level and the change are wide enough for their heading and usual words on one line ("Working to understand", "Up from mostly independent");
   the objective takes the rest. In shares of the table, not rem: fixed widths left the objective no room at all on a laptop (1100px and below)
   or at a larger text size; a narrower table wraps Level and the change instead. */
.tr-table col.tr-c-lvl { width: 34%; } .tr-table col.tr-c-chg { width: 36%; }
.tr-chg { color: var(--accent-dark); font-size: 0.8125rem; }
.tr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #d3dde7; }
.tr-dot.l1 { background: #B4A7D6; } .tr-dot.l2 { background: #FBB3EC; } .tr-dot.l3 { background: #B6D7A8; } .tr-dot.l4 { background: #9FC5E8; }
.act-topic { margin-bottom: var(--s-5); }
.act-topic h2 { font-size: var(--text-lg); display: flex; align-items: center; gap: var(--s-2); }
.act-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.act-title { margin: 0 0 var(--s-2); font-size: 1.0625rem; }
.act-meta { margin: 0 0 var(--s-1); }
.act-objectives { margin-bottom: var(--s-3); }
.act-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.act-givebar { position: sticky; top: 64px; z-index: 5; margin-bottom: var(--s-4); }
@media (max-width: 900px) { .tr-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  /* Tabs wrap onto a second line rather than scroll: a tab you cannot see is a page you cannot find (the 2026-10-06 review). */
  .hub-tabs { flex-wrap: wrap; row-gap: 0; }
  .hub-tabs a { padding: var(--s-2); min-height: 44px; }
  .shell-crumbs.has-hubs > :not(:last-child) { display: none; }
  .act-givebar { top: 56px; }
  .shell-menu-name, .shell-menu-btn .badge { display: none; }      /* on a phone the breadcrumb needs the room: the icon and arrow open the same menu */
}

/* --- object header + toolbar ---------------------------------------------- */

.page-head, .obj-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.page-head h1, .obj-head h1 { font-size: var(--text-xl); margin: 0; line-height: var(--leading-head); }
.page-head p, .obj-sub { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }
.obj-context {
  margin: 0 0 3px;
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 600;
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tool-form { display: flex; align-items: center; gap: 8px; }
.tool-form.right { margin-left: auto; }
.tool-form input[type=text] { width: 200px; }
.tool-form input[type=file] { font-size: 0.875rem; max-width: 250px; }

/* --- panels --------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--s-4);
  overflow: hidden;
}
/* A card's heading is a sentence in the body face, not a small-caps label: it names the section, so it reads like one. */
.card > h2, .card > .card-head {
  font-size: 1rem;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--panel-head);
  border-bottom: 1px solid var(--line-soft);
  font-weight: 650;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.card-body { padding: var(--s-4); }
.card-body.tight { padding: var(--s-3) var(--s-4); }

.grid { display: grid; gap: 12px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stat { padding: 13px 14px; border-left: 3px solid var(--accent); }
.stat .label { color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.stat .value { font-size: 1.5rem; font-weight: 650; margin-top: 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat .value.small { font-size: 1.125rem; }
.stat .sub { color: var(--muted); font-size: 0.8125rem; margin-top: 3px; }
.stat .value.pos { color: var(--green); }
.stat .value.neg { color: var(--red); }

/* --- dashboard tiles ------------------------------------------------------ */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 14px 20px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), .10);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .18);
}
.tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--tile-icon);
  color: var(--accent-dark);
}
.tile-icon .icon { vertical-align: 0; stroke-width: 2; }
.tile-value {
  font: 700 1.5rem/1.1 var(--font-body);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.tile-label { font-size: 0.875rem; line-height: 1.35; color: var(--muted); max-width: 16ch; }
.tile-alert .tile-icon { background: #fce5c8; color: var(--amber); }

/* --- tables --------------------------------------------------------------- */

/* Tables are the one place text may sit a step under the body size (0.9375rem): they are lists of records, read across, not prose.
   Column headings are sentence case in the muted ink; rows are told apart by a hover and a soft rule, never by zebra stripes. */
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th {
  text-align: left;
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 650;
  padding: 10px 14px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--tint-hover); }
/* Money and counts: right-aligned, with figures that line up in columns. */
.num, th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; }
.strong { font-weight: 650; }
tfoot td { font-weight: 650; border-top: 1px solid var(--line); background: var(--panel-head); font-variant-numeric: tabular-nums; }
.file-cell { display: flex; align-items: center; gap: 8px; }
.file-cell .icon { color: var(--muted); }

/* Status chips: a word in sentence case (never capitals: they carry meaning), 12px or more, each pair 4.5:1 or better in every theme
   (tools/make_themes.py checks them). The blue one uses the darker accent, which reads on its tint where the plain accent did not. */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-chip);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--badge-neutral);
  color: var(--label);
  white-space: nowrap;
  text-transform: none;
}
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.blue { background: var(--accent-soft); color: var(--accent-dark); }

/* --- controls ------------------------------------------------------------- */

/* Buttons: 36px tall on a desktop, 44px wherever a finger is the pointer (below), 8px between neighbours (.actions). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 36px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
  padding: 6px 14px;
  border-radius: var(--r-control);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.35;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-soft); border-color: var(--edge-hover); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: var(--red-soft); border-color: #efc2bd; }
.btn.small { padding: 3px 10px; min-height: 30px; font-size: 0.875rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.busy { opacity: .6; cursor: progress; }
.btn.google { width: 100%; justify-content: center; gap: 9px; padding: 9px 13px; }

.or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 0.8125rem;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

form.inline { display: inline; }

/* A button that reads as one of the inline links beside it (keeps it a real button for keyboard/AT). */
.linklike { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; }
.linklike:hover { text-decoration: underline; }

label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; color: var(--label); }
/* Text boxes: 16px text (under that, iOS Safari zooms the page on focus), 12px of padding, a border that reads at 3:1 (--edge-input). */
input[type=text], input[type=email], input[type=number], input[type=date],
input[type=datetime-local], input[type=month], input[type=password], input[type=url], input[type=search], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--edge-input);
  border-radius: var(--r-control);
  font: inherit;
  font-size: 1rem;
  background: #fff;
  color: var(--ink);
}
input[type=color] {
  width: 100%;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--edge-input);
  border-radius: var(--r-control);
  background: #fff;
  cursor: pointer;
}
select { padding-top: 8px; padding-bottom: 8px; min-height: 40px; }
/* In a row of fields a select and a date box stand as tall as the text boxes beside them (46px), so the row keeps one bottom edge: the
   select was 40px and Chrome's date box 48px (the padding inside its date fields), which left New invoice and Add line stepped. */
.row > .field > select { padding-top: 10px; padding-bottom: 10px; min-height: 46px; min-height: calc(1lh + 22px); }   /* a text box's height at any text size */
input::-webkit-datetime-edit, input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .18);
}
textarea { min-height: 72px; resize: vertical; }
.field { margin-bottom: 12px; }
.field .hint { color: var(--muted); font-size: 0.875rem; margin-top: 4px; }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.checkbox input { width: auto; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0; }

.filters {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--line);
}
.filters .field { margin-bottom: 0; min-width: 140px; }

/* Flash messages (role=status in base.html; an error is role=alert). A status fades out after six seconds; resting the pointer on it,
   or focusing a link inside it, pauses the clock. Errors and warnings stay until the person moves on. */
.flash {
  border-radius: var(--r-control);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  font-size: 1rem;
  border: 1px solid;
  border-left-width: 3px;
  max-height: 40rem;
  overflow: hidden;
}
.flash.success { background: var(--green-soft); border-color: #bcdfc7; color: #0b6130; }
.flash.error { background: var(--red-soft); border-color: #efc2bd; color: #95000a; }
.flash.warning { background: var(--amber-soft); border-color: #f2ddbc; color: #8c4c07; }
.flash.success { animation: flash-out .4s ease 6s forwards; }
/* A banner that describes where the page stands (payment confirmed, "please don't pay again", Direct Debit set up) is not a
   passing message: it stays for as long as the page is open. */
.flash.is-static { animation: none; }
.flash:hover, .flash:focus-within { animation-play-state: paused; }
@keyframes flash-out {
  0% { opacity: 1; }
  60% { opacity: 0; max-height: 40rem; }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; visibility: hidden; }
}

/* An empty state is a sentence (and, if there is one, a single thing to do about it). */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-4); text-align: center; color: var(--muted); font-size: 1rem; }
.empty p { margin: 0; }
[hidden] { display: none !important; }     /* `hidden` always wins: a component's own display (.empty is flex) must never show a hidden element */

.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; }
.seg a {
  padding: 6px 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  background: #fff;
  border-right: 1px solid var(--line);
}
.seg a:last-child { border-right: none; }
.seg a:hover { background: var(--accent-soft); text-decoration: none; }
.seg a.active { background: var(--accent); color: #fff; }

/* --- calendar ------------------------------------------------------------- */

.cal-grid { display: grid; grid-auto-rows: min-content; }
.cal-corner { position: sticky; top: 46px; background: var(--panel); z-index: 2; }
.cal-day-head {
  position: sticky;
  top: 46px;
  background: var(--panel);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  color: var(--ink);
}
.cal-day-head:hover { background: var(--tint-hover); text-decoration: none; }
.cal-day-head .dow { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.cal-day-head .dom { font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-day-head.today .dom { color: var(--accent); }
.cal-gutter { display: flex; flex-direction: column; }
.cal-hour-label {
  height: 48px;
  font-size: 0.6875rem;
  color: var(--muted);
  text-align: right;
  padding-right: 8px;
  transform: translateY(-6px);
  font-variant-numeric: tabular-nums;
}
.cal-col { position: relative; border-left: 1px solid var(--line); }
.cal-hour-row { height: 48px; border-bottom: 1px solid var(--line-soft); }
.cal-event {
  position: absolute;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.75rem;
  line-height: 1.25;
  overflow: hidden;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(29, 45, 62, .18);
}
.cal-event:hover { text-decoration: none; filter: brightness(1.06); }
.cal-event .ev-time { display: block; font-weight: 700; opacity: .92; }
.cal-event .ev-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event .ev-sub {
  display: block;
  font-size: 0.6875rem;
  opacity: .8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event.ev-blue { background: var(--cal-scheduled); }
.cal-event.ev-green { background: var(--cal-delivered); }
.cal-event.ev-amber { background: var(--cal-needs-client); }
.cal-event.ev-muted { background: var(--cal-cancelled); }

.cal-month { display: flex; flex-direction: column; }
.cal-month-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--panel-head);
}
.cal-month-dow div {
  padding: 7px 10px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 650;
}
.cal-month-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-day {
  min-height: 108px;
  padding: 5px 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  display: block;
}
.cal-month-day:hover { background: var(--tint-hover); text-decoration: none; }
.cal-month-week .cal-month-day:last-child { border-right: none; }
.cal-month-day.other-month { background: var(--tint-faint); color: var(--muted); }
.cal-month-day.today .cal-month-daynum {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0 7px;
}
.cal-month-daynum { font-size: 0.8125rem; font-weight: 650; margin-bottom: 4px; display: inline-block; }
.cal-month-chip {
  font-size: 0.6875rem;
  padding: 2px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-month-chip.ev-blue { background: var(--cal-scheduled); }
.cal-month-chip.ev-green { background: var(--cal-delivered); }
.cal-month-chip.ev-amber { background: var(--cal-needs-client); }
.cal-month-chip.ev-muted { background: var(--cal-cancelled); }
.cal-month-more { font-size: 0.6875rem; color: var(--muted); }

.chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding: 14px; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 100%; }
.chart .bars { display: flex; gap: 3px; align-items: flex-end; height: 100%; }
.chart .bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }
.chart .bar.income { background: var(--accent); }
.chart .bar.expense { background: #e9730c; }
.chart .tick { text-align: center; font-size: 0.6875rem; color: var(--muted); }
.legend { display: flex; gap: 14px; font-size: 0.8125rem; color: var(--muted); padding: 10px 14px 0; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* --- misc ----------------------------------------------------------------- */

.split { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.split > * { flex: 1; min-width: 300px; }

.crumb { margin: 0 0 4px; color: var(--muted); font-size: 0.8125rem; }

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.folder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  text-align: center;
}
.folder-card:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
}
.folder-icon { width: 36px; height: 36px; color: var(--accent); }
.folder-name { font-weight: 650; font-size: 0.875rem; word-break: break-word; }
.folder-meta { color: var(--muted); font-size: 0.75rem; }

.list-reset { list-style: none; margin: 0; padding: 0; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 0.875rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

/* --- parent portal shell ---------------------------------------------- */

.portal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  height: 56px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-bottom: 1px solid var(--edge);
}
.portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 14px;
  white-space: nowrap;
}
.portal-brand small { display: block; color: var(--nav-ink-dim); font-weight: 400; font-size: 11.5px; }
.portal-nav { display: flex; gap: 4px; flex: 1; }
.portal-nav a {
  color: var(--nav-ink);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
}
.portal-nav a:hover { background: var(--nav-hover); color: var(--ink); text-decoration: none; }
.portal-nav a.active { background: var(--accent); color: #fff; }
.portal-header .btn.small { background: transparent; border-color: var(--edge-nav); color: var(--nav-ink); }
.portal-header .btn.small:hover { background: var(--nav-hover); color: var(--ink); }
.portal-main { max-width: 1000px; margin: 0 auto; padding: 22px 20px 60px; }
.child-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.child-tabs a {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.child-tabs a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.child-tabs a:hover { text-decoration: none; border-color: var(--accent); }

@media (max-width: 700px) {
  .portal-header {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 14px;
    gap: 8px 10px;
  }
  .portal-brand { flex: 1 1 auto; min-width: 0; }
  .portal-header form.inline { flex: 0 0 auto; }
  .portal-nav {
    flex: 1 1 100%;
    order: 3;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .portal-nav a { padding: 7px 10px; white-space: nowrap; }
}

/* --- small screens -------------------------------------------------------- */

/* The menu button only exists on narrow screens; on a desktop the sidebar is
   always there and a toggle for it would be noise. */
.nav-toggle { display: none; }
.nav-scrim { display: none; }
/* Author styles beat the UA's [hidden] rule on a tie, and the media query below
   sets display:block — so the closed state needs the extra specificity to win.
   (Same trap as .assistant-panel[hidden] further down.) */
.nav-scrim[hidden] { display: none; }

@media (max-width: 900px) {
  /* The sidebar becomes an off-canvas drawer rather than a band across the top.
     In the flow it stood 367px tall on a phone — 45% of the first screen, with
     the page's own heading only appearing 427px down. Now every page opens on
     its content and the nav is one tap away. */
  .layout { display: block; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    max-width: 82vw;
    height: 100%;
    z-index: 60;
    padding: 8px 10px 24px;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 6px 0 22px rgba(29, 45, 62, .3); }
  body.nav-open { overflow: hidden; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    border: 0;
    padding: 0;
    background: rgba(29, 45, 62, .45);
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: -6px;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle:hover { background: var(--accent-soft); color: var(--accent); }

  .shellbar { padding: 0 12px; gap: 10px; }
  /* Amy already knows which account she is signed in to; on a phone this only
     competes with the breadcrumb for the one line there is. */
  .shell-user { display: none; }
  .main { padding: 14px 12px 64px; }
  .cal-corner, .cal-day-head { top: 0; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .tool-form { flex: none; width: 100%; }
  .tool-form input[type=text] { width: 100%; }
  .tool-form input[type=file] { flex: 1; min-width: 0; max-width: none; }
  .tool-form .btn { flex: none; }
  .tool-form.right { margin-left: 0; }
}

@media (max-width: 760px) {
  /* Tables.
     A list table is wider than a phone (the invoice list is 730px across 9
     columns), .card clips its overflow to keep the rounded corners, and the page
     itself doesn't scroll sideways — so five columns, Total and Status among
     them, were not merely awkward on a phone but unreachable. Two fixes:

     1. `table.stack` re-lays each row out as a labelled block — the readable
        option, used on the list pages Amy lives in.
     2. Everything else still becomes its own horizontal scroller, so no table
        can ever be silently clipped again just because it wasn't converted. */
  .card > table, .card > form > table, .card-body > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.stack { display: block; }
  table.stack thead { display: none; }
  table.stack tbody, table.stack tfoot, table.stack tr, table.stack td { display: block; }
  table.stack tr {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
  }
  table.stack tbody tr:hover { background: inherit; }
  table.stack td {
    padding: 3px 0;
    border: none;
    text-align: left;
    white-space: normal;
  }
  /* A labelled cell reads as "Label ........ value" on one line; the label is
     what the column heading used to say, carried over in data-label. */
  table.stack td[data-label] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  table.stack td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
  }
  /* The row's headline cell (the link you tap to open the thing) keeps its own
     line above the labelled detail, at a size worth tapping. */
  table.stack td.cell-main {
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 6px;
  }
  table.stack td.cell-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 9px;
  }
  table.stack td:empty { display: none; }
  table.stack tfoot tr { background: var(--panel-head); font-weight: 650; }

  /* Touch targets: 44px (WCAG 2.5.8 and the platforms), with 8px between neighbours. */
  .btn { padding: 9px 14px; min-height: 44px; }
  .btn.small { padding: 7px 12px; min-height: 40px; font-size: 0.875rem; }
  .shell-btn { width: 44px; height: 44px; }
  /* Wrapping alone left a ragged empty stub on the last row; letting the tabs
     grow fills the width instead. */
  .seg { flex-wrap: wrap; }
  .seg a { flex: 1 0 auto; padding: 10px 14px; text-align: center; }
  .sidebar nav a { min-height: 44px; padding: 10px; font-size: 1rem; }
  input[type=checkbox], input[type=radio] { width: 19px; height: 19px; }
  input[type=text], input[type=email], input[type=number], input[type=date],
  input[type=datetime-local], input[type=month], input[type=password], input[type=url], input[type=search], select, textarea {
    /* 16px is the threshold below which iOS Safari zooms the page on focus and
       leaves it zoomed — every form field in the app was doing that. */
    font-size: 1rem;
    padding: 11px 12px;
  }
  .row > .field > select { min-height: 48px; min-height: calc(1lh + 24px); }
  .filters { gap: 10px; }
  .filters .field { min-width: 100%; }
  .page-head h1, .obj-head h1 { font-size: 1.25rem; }
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; font-size: 0.8125rem; }
  .split > * { min-width: 0; flex-basis: 100%; }
}

/* --- chat bubbles --------------------------------------------------------------
   Shared by the assistant (whose own rules live in static/assistant.css, loaded by its widget) and the support chat
   (static/support.js builds its messages with these classes), so they stay here where every page has them. */

.assistant-msg {
  max-width: 85%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.assistant-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.assistant-msg.bot {
  align-self: flex-start;
  background: var(--panel-head);
  border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
}
.assistant-msg.thinking { color: var(--muted); font-style: italic; }
.assistant-msg.error { background: var(--red-soft); border-color: #efc2bd; color: var(--red); }

/* --- report generator modal ------------------------------------------------ */
/* Two panes, each a step: 1 choose objectives (filters, list, scores) · 2 write the report (voice, notes, Generate, draft).
   The footer holds only what ends the job: the status line and Save & close. */

body.rg-open { overflow: hidden; }
.rg-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(29, 45, 62, .5);
}
.rg-overlay[hidden] { display: none; }
.rg-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  height: 100%;
  max-height: 820px;
  background: var(--panel);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
.rg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.rg-head h2 { margin: 0; font-size: 1.125rem; }
.rg-close {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.rg-close:hover { background: var(--accent-soft); color: var(--accent); }

.rg-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

/* Step headings: a numbered disc, so the order reads at a glance. */
.rg-step-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.rg-step { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9375rem; font-weight: 650; }
.rg-step-n {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Pane 1 */
.rg-listwrap { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--tint-faint); }
.rg-listwrap > .rg-step-head { padding: 12px 16px 8px; }
.rg-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px 10px;
}
.rg-filters .field { margin: 0; }
.rg-filters select, .rg-filters input { padding-top: 6px; padding-bottom: 6px; font-size: 0.875rem; }
.rg-search { grid-column: 1 / -1; }
.rg-tracked { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; font-weight: 600; }

.rg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 6px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}
.rg-key { display: inline-block; width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px; border-radius: 2px; }
.rg-key-tick { background: var(--accent); }
.rg-key-tracked { background: var(--accent-soft); border: 1px solid var(--edge); }
.rg-list { flex: 1; overflow-y: auto; background: var(--panel); }

/* Category rows and objective rows share one set of columns, so every checkbox sits on one line and an
   objective's checkbox lines up under its topic's name. */
.rg-cat { --rg-pad: 16px; --rg-box: 16px; --rg-chev: 14px; --rg-gap: 10px; border-bottom: 1px solid var(--line-soft); }
.rg-cat-head { display: flex; align-items: center; gap: var(--rg-gap); padding: 0 var(--rg-pad); background: var(--panel-head); }
.rg-cat-head .rg-cat-check { flex: none; width: var(--rg-box); height: var(--rg-box); margin: 0; }
.rg-cat-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--rg-gap);
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.rg-cat-toggle:hover .rg-cat-name { color: var(--accent); }
.rg-chevron { flex: none; width: var(--rg-chev); color: var(--muted); text-align: center; transition: transform .12s ease; }
.rg-cat-toggle[aria-expanded="true"] .rg-chevron { transform: rotate(90deg); }
.rg-cat-name { min-width: 0; font-size: 0.9375rem; font-weight: 600; }
.rg-cat-meta { margin-left: auto; white-space: nowrap; }
.rg-cat-count {
  flex: none;
  min-width: 34px;
  padding: 1px 8px;
  border-radius: var(--r-chip);
  background: var(--badge-neutral);
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rg-cat-count.picked { background: var(--accent-soft); color: var(--accent-dark); }

.rg-obj {
  display: grid;
  grid-template-columns: var(--rg-box) minmax(0, 1fr) 170px;
  align-items: center;
  gap: 4px var(--rg-gap);
  padding: 7px var(--rg-pad) 7px calc(var(--rg-pad) + var(--rg-box) + var(--rg-chev) + 2 * var(--rg-gap));
  border-top: 1px solid var(--line-soft);
}
.rg-obj > input[type="checkbox"] { width: var(--rg-box); height: var(--rg-box); margin: 0; }
.rg-obj.tracked { background: var(--accent-soft); }
.rg-obj-text { margin: 0; font-weight: 400; font-size: 0.875rem; line-height: 1.4; cursor: pointer; }
.rg-score { padding: 4px 6px; font-size: 0.8125rem; }

.rg-listfoot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.rg-listfoot #rg-count { margin-right: auto; }

/* Pane 2: voice, notes, then the draft, which takes whatever height is left. */
.rg-out { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 16px; overflow-y: auto; }
.rg-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 10px;
}
.rg-settings .field { margin: 0; }
.rg-settings label { font-size: 0.8125rem; }
.rg-settings select { padding-top: 6px; padding-bottom: 6px; font-size: 0.875rem; }
.rg-settings-hint { grid-column: 1 / -1; margin: 0; }
.rg-generate-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.rg-generate-row #rg-generate { min-width: 168px; justify-content: center; }
.rg-ai-given { flex-basis: 100%; margin: 0; }          /* what the AI writer is given for this pupil, on its own line under Generate */
.rg-chart { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: #fff; }
.rg-chart svg { display: block; width: 100%; height: auto; }
.rg-draft-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.rg-draft-head label { margin: 0; font-weight: 650; }
.rg-out textarea { flex: 1 0 auto; min-height: 220px; resize: vertical; line-height: 1.55; }
.rg-out-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-savenote { margin: 0; }
/* "Report saved to Resources", shown on the page once the report window has closed. At the top: the bottom edge belongs to sticky action bars and the assistant. */
.rg-toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 60; max-width: min(560px, calc(100vw - 32px)); margin: 0;
  padding: 10px 14px; border-radius: var(--r-control); border: 1px solid #bcdfc7; background: var(--green-soft); color: #0b6130; font-size: 1rem;
  box-shadow: var(--shadow-dialog); }
.rg-toast[hidden] { display: none; }
.rg-toast a { color: inherit; font-weight: 600; }

.rg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel-head);
}
.rg-status { margin-right: auto; color: var(--muted); }
.rg-status.rg-error { color: var(--red); font-weight: 600; }

/* The wide report window (FEATURES new_nav; _report_modal.html). Full screen; writing gets two-thirds of the width; the draft takes the height;
   the lesson notes and the chart sit in a side column beside it. Below 1000px the ordinary layout applies (the phone sheet below). */
@media (min-width: 1000px) {
  .rg-overlay:has(.rg-wide) { padding: 12px; }
  .rg-modal.rg-wide { max-width: none; max-height: none; }
  .rg-wide .rg-body { grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr); }
  .rg-wide.rg-focus .rg-body { grid-template-columns: minmax(0, 1fr); }
  .rg-wide.rg-focus .rg-listwrap { display: none; }
  /* The draft's row never shrinks below the draft's own min-height (240px): with minmax(0, 1fr) a short window squeezed the row
     and the box spilled over its Print / Copy / Undo row and the save note. When the window is too short for everything,
     step 2 scrolls instead. */
  .rg-wide .rg-out {
    display: grid; overflow-x: hidden; overflow-y: auto; gap: 10px 18px; padding: 14px 18px;
    grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
    grid-template-rows: auto auto auto auto minmax(240px, 1fr) auto auto;
    grid-template-areas: "step step" "settings side" "gen side" "dhead side" "draft side" "actions side" "save side";
  }
  .rg-wide.rg-focus .rg-out { grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr); }
  .rg-wide .rg-out > .rg-step-head { grid-area: step; }
  .rg-wide .rg-out > .rg-settings { grid-area: settings; }
  .rg-wide .rg-out > .rg-generate-row { grid-area: gen; }
  .rg-wide .rg-out > .rg-draft-head { grid-area: dhead; }
  .rg-wide .rg-out > textarea { grid-area: draft; min-height: 240px; height: auto; resize: none; font-size: 1.0625rem; line-height: 1.65; padding: 14px 16px; }
  .rg-wide .rg-out > .rg-out-actions { grid-area: actions; }
  .rg-wide .rg-out > .rg-savenote { grid-area: save; }
  .rg-wide .rg-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
  /* The notes box takes the column's spare height and scrolls inside itself (summary pinned), so long notes never run out of
     the box and under the chart. (A <details> element's body sits in an anonymous slot, so flex on .rg-notes-body did nothing.) */
  .rg-wide .rg-side .rg-notes { flex: none; }
  .rg-wide .rg-side .rg-notes[open] { flex: 1 1 auto; min-height: 200px; overflow-y: auto; }
  .rg-wide .rg-side .rg-notes[open] > summary { position: sticky; top: 0; z-index: 1; background: #fff; border-radius: 6px 6px 0 0; box-shadow: 0 1px 0 var(--line-soft); }
  .rg-wide .rg-side .rg-notes-body { max-height: none; }
}
/* Short screens (a laptop at 125% scaling is about 1536x730 inside the browser; 1366x650 is smaller still): a lower floor for the
   draft, so after Generate the Print / Copy / Undo row and the save note need little or no scrolling. */
@media (min-width: 1000px) and (max-height: 760px) {
  .rg-wide .rg-out { grid-template-rows: auto auto auto auto minmax(160px, 1fr) auto auto; }
  .rg-wide .rg-out > textarea { min-height: 160px; }
}

@media (max-width: 760px) {
  .rg-overlay { padding: 0; }
  .rg-modal { max-height: none; border-radius: 0; }
  /* One scrolling sheet: step 1 (the list has its own scroll), then step 2. */
  .rg-modal { overflow-y: auto; }
  .rg-body { display: block; flex: none; }
  .rg-filters { grid-template-columns: 1fr 1fr; }
  .rg-tracked { grid-column: auto; align-self: center; line-height: 1.3; }
  .rg-listwrap { border-right: 0; border-bottom: 1px solid var(--line); }
  .rg-list { flex: none; height: 50vh; min-height: 280px; }
  .rg-out { overflow: visible; padding-bottom: 16px; }
  .rg-settings { grid-template-columns: 1fr; }
  .rg-cat-meta { display: none; }
  .rg-cat-count { margin-left: auto; }
  .rg-obj { grid-template-columns: var(--rg-box) minmax(0, 1fr); padding-left: calc(var(--rg-pad) + var(--rg-box) + var(--rg-gap)); }
  .rg-obj .rg-score { grid-column: 2; }
  .rg-foot { position: sticky; bottom: 0; flex-wrap: wrap; }
  .rg-foot .btn { flex: 1; }
  .rg-generate-row #rg-generate { flex: 1; }
  .rg-status { order: -1; flex-basis: 100%; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .rg-modal { animation: rg-in .16s ease-out; }
  @keyframes rg-in { from { opacity: 0; transform: translateY(8px); } }
}

/* --- quick progress panel (session-report page) ---------------------------- */
.qp-actions { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; }
.qp-actions .btn { font-family: var(--font-body); }
.qp-saved { color: var(--green); font-weight: 600; }
.qp-saved.qp-error { color: var(--red); }
.qp-cat { padding: 8px 0 2px; }
.qp-list { border-top: 1px solid var(--line-soft); }
.qp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 4px 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.qp-row label { margin: 0; font-weight: 400; font-size: 0.875rem; }
@media (max-width: 760px) { .qp-row { grid-template-columns: 1fr; } }
/* The three-state word beside each score (student_progress.js): the same words a family reads in the portal */
.qp-summary { margin: 0 0 6px; font-size: 0.875rem; color: var(--muted); }
.qp-score { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qp-state { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 650; white-space: nowrap;
            background: var(--badge-neutral); color: var(--ink); }
.qp-state-secure { background: #e3f4ea; color: #1d5c3a; }
.qp-state-getting-there { background: #fdf3e5; color: #7a4206; }
.qp-state-starting { background: #edf1f6; color: #2f4256; }

/* --- lesson notes panel in the report window ------------------------------- */
.rg-notes { flex: none; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.rg-notes > summary { cursor: pointer; padding: 7px 10px; font-weight: 600; font-size: 0.875rem; }
.rg-notes-body { max-height: 190px; overflow-y: auto; padding: 4px 12px 10px; border-top: 1px solid var(--line-soft); }
.rg-note { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.rg-note:last-child { border-bottom: 0; }

/* --- editing the draft ------------------------------------------------------ */
.rg-out textarea { font-size: 0.9375rem; }
.rg-out label .badge { margin-left: 6px; vertical-align: 1px; }

/* An author display rule beats the browser's [hidden]; this keeps hidden badges hidden. */
.badge[hidden] { display: none; }

/* --- custom objectives ------------------------------------------------------ */
.rg-custom { margin: 0 16px 10px; padding: 10px 12px 12px; background: var(--accent-soft); border: 1px solid var(--edge); border-radius: var(--r-control); }
.rg-custom[hidden] { display: none; }
.rg-custom .field { margin-bottom: 8px; }
.rg-c-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.rg-c-newrow { grid-template-columns: 1.3fr 1fr 1fr; }
.rg-c-newrow[hidden] { display: none; }
.rg-c-error { color: var(--red); font-weight: 600; margin: 0 0 8px; }
.rg-c-actions { display: flex; gap: 8px; }
.rg-obj-main { min-width: 0; }
.rg-obj-actions { color: var(--muted); }
.rg-obj-actions .rg-danger { color: var(--red); }
@media (max-width: 760px) { .rg-c-row, .rg-c-newrow { grid-template-columns: 1fr; } }

/* --- calendar sync page ------------------------------------------------- */
.sync-status { margin-bottom: 14px; }
.sync-status .stat { background: var(--panel); border: 1px solid var(--line); border-left-width: 3px;
                     border-radius: var(--radius); box-shadow: var(--shadow); }
.sync-status .stat.ok { border-left-color: var(--green); }
.sync-status .stat.warn { border-left-color: #e0a030; }
.sync-status .stat.bad { border-left-color: var(--red); }
.callout { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
           display: flex; flex-direction: column; gap: 2px; }
.callout.bad { background: var(--red-soft); border-color: #efc2bd; color: #6b1a1a; }
.sync-list { list-style: none; margin: 0; padding: 0; }
.sync-list li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 2px 12px; padding: 10px 14px;
                border-bottom: 1px solid var(--line-soft); align-items: center; }
.sync-list li:last-child { border-bottom: 0; }
.sync-list li[hidden] { display: none; }
.sync-list li.failed { background: var(--red-soft); }
.sync-when { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.sync-what { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 0.875rem; }
.sync-detail { grid-column: 2; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--accent-soft); color: var(--accent-dark); border-radius: 999px; padding: 2px 10px;
        font-size: 0.8125rem; }
.settings-fold { border-top: 1px solid var(--line); }
.settings-fold > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 0.875rem;
                           color: var(--accent-dark); list-style-position: inside; }
.settings-fold > summary:hover { background: var(--accent-soft); }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
                    border-top: 1px solid var(--line-soft); }
@media (max-width: 760px) {
  .grid.sync-status { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sync-status .stat { padding: 10px 11px; }
  .sync-status .stat .value { font-size: 1.25rem; }
  .sync-status .stat .value.small { font-size: 0.9375rem; }
  .sync-list li { grid-template-columns: 1fr; }
  .sync-detail { grid-column: 1; }
}

/* --- objectives hub ------------------------------------------------------ */
.obj-toolbar { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: flex-end; margin: 2px 0 14px; }
.obj-search { flex: 1; min-width: 220px; max-width: 360px; margin-bottom: 0; }
.obj-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.obj-chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px;
            padding: 5px 12px; font: inherit; font-size: 0.875rem; cursor: pointer; }
.obj-chip span { color: var(--muted); margin-left: 4px; }
.obj-chip:hover { background: var(--accent-soft); }
.obj-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.obj-chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .8); }
.obj-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.obj-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
            box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.obj-card[hidden] { display: none; }
.obj-card.is-due { border-left: 3px solid #e0a030; }
.obj-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.obj-name { font-size: 1rem; margin: 0; line-height: 1.25; text-transform: none; letter-spacing: 0;
            background: none; border: 0; padding: 0; color: var(--ink); display: block; }
.obj-family { display: inline-block; margin-top: 1px; }
.obj-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line-soft); }
.obj-bar span { display: block; min-width: 4px; }
.obj-meta, .obj-empty, .obj-last { margin: 0; }
.obj-empty { padding: 4px 0; }
.obj-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* --- assistant: prepared-change cards, language and voice ------------------- */
.assistant-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
                   padding: 6px 12px; border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.assistant-langlabel { display: flex; align-items: center; gap: 6px; }
.assistant-lang { font-size: 12px; padding: 2px 4px; }
.assistant-speak { display: flex; align-items: center; gap: 4px; cursor: pointer; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 4px rgba(187, 0, 0, .15); } }
@media (prefers-reduced-motion: reduce) { .assistant-mic.listening { animation: none; } }
.assistant-card { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius);
                  background: var(--panel); padding: 10px 12px; margin: 6px 0; font-size: 13px; }
.assistant-card.done { border-left-color: var(--green); background: var(--green-soft); }
.assistant-card-title { display: block; margin-bottom: 4px; }
.assistant-card-line { margin: 1px 0; }
.assistant-card-warn { margin-top: 4px; color: var(--amber); }
.assistant-card-google { margin-top: 6px; font-size: 12px; color: var(--muted); }
.assistant-card-actions { display: flex; gap: 6px; margin-top: 8px; }
.assistant-card-status { margin-top: 6px; font-size: 12.5px; }

/* --- Themes -------------------------------------------------------------------
   Settings > Theme. GENERATED by tools/make_themes.py: edit that, not this. Each block recolours
   everything that is blue by default. They match any element with data-theme (the page's <html>,
   and the small preview cards on the Theme page). */
[data-theme="classic"] {        /* the original flat palette, copied from :root so its preview card never borrows another theme's look */
  --panel-head: #f2f6fb;
  --line: #d3dde7;
  --line-soft: #e6ecf3;
  --accent: #0a6ed1;
  --accent-dark: #0854a0;
  --accent-soft: #e8f2fd;
  --nav-bg: #d6e6f6;
  --nav-ink: #22384d;
  --nav-ink-dim: #48627a;
  --nav-hover: #c2daf1;
  --ink: #1d2d3e;
  --muted: #5b738b;
  --label: #44586e;
  --tint-hover: #f4f8fd;
  --tint-faint: #f7fafd;
  --tint-stripe: #fafcfe;
  --edge: #b6cee8;
  --edge-input: #8495aa;
  --edge-hover: #a9cdf0;
  --edge-nav: #a9c6e4;
  --grad-a: #eaf3fc;
  --grad-b: #dbe9f8;
  --tile-icon: #cfe4fa;
  --badge-neutral: #e7edf4;
  --accent-rgb: 10, 110, 209;
  --accent-dark-rgb: 10, 84, 160;
  --bg: #ffffff;
  --panel: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(29, 45, 62, .06);
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: var(--font-body);
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: none;
  --nav-mini-size: auto;
  --page-art: #ffffff;
}
[data-theme="blue"] {
  --panel-head: #f4f7fb;
  --line: #d1dae6;
  --line-soft: #e3eaf2;
  --accent: #0a6ed1;
  --accent-dark: #0854a0;
  --accent-soft: #e7f1fd;
  --nav-bg: #dae7f6;
  --nav-ink: #203146;
  --nav-ink-dim: #394f6a;
  --nav-hover: #c5d9f1;
  --ink: #1a2430;
  --muted: #455568;
  --label: #374658;
  --tint-hover: #f4f8fd;
  --tint-faint: #f7fafd;
  --tint-stripe: #f9fbfd;
  --edge: #bcd1eb;
  --edge-input: #7896ba;
  --edge-hover: #a2c3ec;
  --edge-nav: #a1bee3;
  --grad-a: #eaf3fd;
  --grad-b: #dce9f9;
  --tile-icon: #d1e3fa;
  --badge-neutral: #e7edf3;
  --accent-rgb: 10, 110, 209;
  --accent-dark-rgb: 8, 84, 160;
  --bg: #f2f6fb;
  --panel: #fbfcfe;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(8, 84, 160, .12);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), radial-gradient(60% 50% at 12% 8%, #d7f7fc 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #dfe2fb 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #ece2fd 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #e1faee 0, transparent 70%), #f2f6fb;
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #d7f7fc 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #dfe2fb 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #ece2fd 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #e1faee 0, transparent 70%), #f2f6fb;
  --glass-rgb: 8, 84, 160;
  --glass-primary-a: #0a6ed1;
  --glass-primary-b: #0854a0;
  --glass-primary-border: #0854a0;
}
[data-theme="violet"] {
  --panel-head: #f5f4fb;
  --line: #d6d1e6;
  --line-soft: #e7e3f2;
  --accent: #5b3ec9;
  --accent-dark: #4527a8;
  --accent-soft: #ede7fd;
  --nav-bg: #e1daf6;
  --nav-ink: #292046;
  --nav-ink-dim: #45396a;
  --nav-hover: #d0c5f1;
  --ink: #1f1a30;
  --muted: #4e4568;
  --label: #3f3758;
  --tint-hover: #f6f4fd;
  --tint-faint: #f8f7fd;
  --tint-stripe: #faf9fd;
  --edge: #c8bceb;
  --edge-input: #9789c2;
  --edge-hover: #b4a2ec;
  --edge-nav: #b1a1e3;
  --grad-a: #efeafd;
  --grad-b: #e3dcf9;
  --tile-icon: #dbd1fa;
  --badge-neutral: #eae7f3;
  --accent-rgb: 91, 62, 201;
  --accent-dark-rgb: 69, 39, 168;
  --bg: #f4f2fb;
  --panel: #fcfbfe;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(69, 39, 168, .12);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), radial-gradient(60% 50% at 12% 8%, #d7ddfc 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #f0dffb 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #fde2fb 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #e1f3fa 0, transparent 70%), #f4f2fb;
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #d7ddfc 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #f0dffb 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #fde2fb 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #e1f3fa 0, transparent 70%), #f4f2fb;
  --glass-rgb: 69, 39, 168;
  --glass-primary-a: #5b3ec9;
  --glass-primary-b: #4527a8;
  --glass-primary-border: #4527a8;
}
[data-theme="yellow"] {
  --panel-head: #fdfbf2;
  --line: #eae4cc;
  --line-soft: #f6f1df;
  --accent: #8a6100;
  --accent-dark: #6b4c00;
  --accent-soft: #fffae5;
  --nav-bg: #fcf4d4;
  --nav-ink: #4f4417;
  --nav-ink-dim: #75672e;
  --nav-hover: #fbefbb;
  --ink: #352f15;
  --muted: #70663e;
  --label: #5f5630;
  --tint-hover: #fffcf2;
  --tint-faint: #fefdf5;
  --tint-stripe: #fefdf8;
  --edge: #f6e8b1;
  --edge-input: #a48f3c;
  --edge-hover: #fde791;
  --edge-nav: #f2df92;
  --grad-a: #fffae8;
  --grad-b: #fff7d6;
  --tile-icon: #fff5cc;
  --badge-neutral: #f6f3e4;
  --accent-rgb: 138, 97, 0;
  --accent-dark-rgb: 107, 76, 0;
  --bg: #fdfaf0;
  --panel: #fffefa;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(107, 76, 0, .12);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), radial-gradient(60% 50% at 12% 8%, #ffe4d4 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #faffdb 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #ecffe0 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #ffdbe2 0, transparent 70%), #fdfaf0;
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #ffe4d4 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #faffdb 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #ecffe0 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #ffdbe2 0, transparent 70%), #fdfaf0;
  --glass-rgb: 107, 76, 0;
  --glass-primary-a: #8a6100;
  --glass-primary-b: #6b4c00;
  --glass-primary-border: #6b4c00;
}
[data-theme="green"] {
  --panel-head: #f4fbf5;
  --line: #d2e4d5;
  --line-soft: #e4f1e6;
  --accent: #2e7d32;
  --accent-dark: #1f5c24;
  --accent-soft: #e9fcec;
  --nav-bg: #dcf4e0;
  --nav-ink: #234328;
  --nav-ink-dim: #3d6644;
  --nav-hover: #c8eecf;
  --ink: #1c2e1f;
  --muted: #48654d;
  --label: #39553e;
  --tint-hover: #f5fcf6;
  --tint-faint: #f7fdf8;
  --tint-stripe: #f9fdfa;
  --edge: #bfe8c6;
  --edge-input: #5da268;
  --edge-hover: #a7e6b2;
  --edge-nav: #a6deaf;
  --grad-a: #ecfbee;
  --grad-b: #def7e3;
  --tile-icon: #d4f7da;
  --badge-neutral: #e8f2ea;
  --accent-rgb: 46, 125, 50;
  --accent-dark-rgb: 31, 92, 36;
  --bg: #f2faf4;
  --panel: #fbfefc;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(31, 92, 36, .12);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), radial-gradient(60% 50% at 12% 8%, #e1f9da 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #e1f9ed 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #e4fbfb 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #f4f8e3 0, transparent 70%), #f2faf4;
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #e1f9da 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #e1f9ed 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #e4fbfb 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #f4f8e3 0, transparent 70%), #f2faf4;
  --glass-rgb: 31, 92, 36;
  --glass-primary-a: #2e7d32;
  --glass-primary-b: #1f5c24;
  --glass-primary-border: #1f5c24;
}
[data-theme="red"] {
  --panel-head: #fbf4f5;
  --line: #e6d1d4;
  --line-soft: #f2e3e5;
  --accent: #c8324a;
  --accent-dark: #9c2237;
  --accent-soft: #fde7ea;
  --nav-bg: #f6dade;
  --nav-ink: #462025;
  --nav-ink-dim: #6a3940;
  --nav-hover: #f1c5cb;
  --ink: #301a1d;
  --muted: #68454a;
  --label: #58373b;
  --tint-hover: #fdf4f5;
  --tint-faint: #fdf7f8;
  --tint-stripe: #fdf9fa;
  --edge: #ebbcc2;
  --edge-input: #bf828b;
  --edge-hover: #eca2ac;
  --edge-nav: #e3a1aa;
  --grad-a: #fdeaed;
  --grad-b: #f9dce0;
  --tile-icon: #fad1d7;
  --badge-neutral: #f3e7e9;
  --accent-rgb: 200, 50, 74;
  --accent-dark-rgb: 156, 34, 55;
  --bg: #fbf2f3;
  --panel: #fefbfb;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(156, 34, 55, .12);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), radial-gradient(60% 50% at 12% 8%, #fcd7eb 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #fbe5df 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #fdf5e2 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #f6e1fa 0, transparent 70%), #fbf2f3;
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #fcd7eb 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #fbe5df 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #fdf5e2 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #f6e1fa 0, transparent 70%), #fbf2f3;
  --glass-rgb: 156, 34, 55;
  --glass-primary-a: #c8324a;
  --glass-primary-b: #9c2237;
  --glass-primary-border: #9c2237;
}
[data-theme="purple"] {
  --panel-head: #f9f4fb;
  --line: #e1d1e5;
  --line-soft: #efe3f2;
  --accent: #9949c9;
  --accent-dark: #7a3aa5;
  --accent-soft: #f8e8fd;
  --nav-bg: #efdbf5;
  --nav-ink: #3d2145;
  --nav-ink-dim: #5f3a69;
  --nav-hover: #e7c6f0;
  --ink: #2b1a30;
  --muted: #604667;
  --label: #503857;
  --tint-hover: #fbf5fd;
  --tint-faint: #fcf7fd;
  --tint-stripe: #fcf9fd;
  --edge: #e0bdea;
  --edge-input: #af81bc;
  --edge-hover: #dba4ea;
  --edge-nav: #d4a2e1;
  --grad-a: #f8ebfc;
  --grad-b: #f2ddf8;
  --tile-icon: #f0d2f9;
  --badge-neutral: #f1e7f3;
  --accent-rgb: 153, 73, 201;
  --accent-dark-rgb: 122, 58, 165;
  --bg: #f8f2fa;
  --panel: #fdfbfe;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(122, 58, 165, .12);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), radial-gradient(60% 50% at 12% 8%, #e5d8fb 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #fbe0f8 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #fde3ed 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #e1e6f9 0, transparent 70%), #f8f2fa;
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #e5d8fb 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #fbe0f8 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #fde3ed 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #e1e6f9 0, transparent 70%), #f8f2fa;
  --glass-rgb: 122, 58, 165;
  --glass-primary-a: #9949c9;
  --glass-primary-b: #7a3aa5;
  --glass-primary-border: #7a3aa5;
}
[data-theme="orange"] {
  --panel-head: #fcf7f3;
  --line: #e8dace;
  --line-soft: #f4eae1;
  --accent: #ae5600;
  --accent-dark: #8f4700;
  --accent-soft: #fff1e5;
  --nav-bg: #f9e6d7;
  --nav-ink: #4b311b;
  --nav-ink-dim: #704f33;
  --nav-hover: #f7d9c0;
  --ink: #332417;
  --muted: #6c5541;
  --label: #5c4533;
  --tint-hover: #fef8f3;
  --tint-faint: #fefaf6;
  --tint-stripe: #fefbf9;
  --edge: #f1d1b6;
  --edge-input: #ba885e;
  --edge-hover: #f5c299;
  --edge-nav: #ebbe98;
  --grad-a: #fff2e8;
  --grad-b: #fce9d9;
  --tile-icon: #ffe3cc;
  --badge-neutral: #f5ece5;
  --accent-rgb: 174, 86, 0;
  --accent-dark-rgb: 143, 71, 0;
  --bg: #fcf6f0;
  --panel: #fefcfb;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(143, 71, 0, .12);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), radial-gradient(60% 50% at 12% 8%, #ffd5d4 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #fff7db 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #f6ffe0 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #fddeef 0, transparent 70%), #fcf6f0;
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #ffd5d4 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #fff7db 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #f6ffe0 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #fddeef 0, transparent 70%), #fcf6f0;
  --glass-rgb: 143, 71, 0;
  --glass-primary-a: #ae5600;
  --glass-primary-b: #8f4700;
  --glass-primary-border: #8f4700;
}
/* --- Artist themes (Gaudí, Dalí, Miró, Picasso, Van Gogh, Liquid Glass): added to the colours above, from tools/artist_themes.py --- */
[data-theme="gaudi"] {
  --panel-head: #f7f3e8;
  --line: #ded6c1;
  --line-soft: #ece6d6;
  --accent: #0b6b73;
  --accent-dark: #084f56;
  --accent-soft: #dcf0ed;
  --nav-bg: #dcebe4;
  --nav-ink: #16302f;
  --nav-ink-dim: #33504d;
  --nav-hover: #cfe4dc;
  --ink: #1c2b29;
  --muted: #4a5b57;
  --label: #384946;
  --tint-hover: #f8f5eb;
  --tint-faint: #faf8f1;
  --tint-stripe: #fcfaf5;
  --edge: #d5cbb0;
  --edge-input: #82988b;
  --edge-hover: #b9d6d1;
  --edge-nav: #b5cfc7;
  --grad-a: #f6edd6;
  --grad-b: #d5eae5;
  --tile-icon: #c9e5df;
  --badge-neutral: #ece7d8;
  --accent-rgb: 11, 107, 115;
  --accent-dark-rgb: 8, 79, 86;
  --bg: #f4f7f2;
  --panel: #fdfdf9;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(8, 79, 86, .12);
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Fraunces", Georgia, serif;
  --nav-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27228%27%20height%3D%27228%27%20viewBox%3D%270%200%20228%20228%27%3E%3Cg%20stroke%3D%27%23fbf7ec%27%20stroke-width%3D%272.6%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%270.0%2C0.0%2045.8%2C0.0%2048.0%2C37.0%200.0%2C44.3%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%2745.8%2C0.0%2096.5%2C0.0%2078.7%2C58.8%2048.0%2C37.0%27%20fill%3D%27%23dcebe4%27%2F%3E%3Cpolygon%20points%3D%2796.5%2C0.0%20128.3%2C0.0%20129.7%2C32.7%2078.7%2C58.8%27%20fill%3D%27%23f3e6b0%27%2F%3E%3Cpolygon%20points%3D%27128.3%2C0.0%20181.2%2C0.0%20176.3%2C59.2%20129.7%2C32.7%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%27181.2%2C0.0%20228.0%2C0.0%20228.0%2C44.3%20176.3%2C59.2%27%20fill%3D%27%23e9dcc0%27%2F%3E%3Cpolygon%20points%3D%270.0%2C44.3%2048.0%2C37.0%2045.9%2C94.8%200.0%2C92.8%27%20fill%3D%27%23bfe0dc%27%2F%3E%3Cpolygon%20points%3D%2748.0%2C37.0%2078.7%2C58.8%20103.9%2C95.4%2045.9%2C94.8%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%2778.7%2C58.8%20129.7%2C32.7%20135.8%2C89.6%20103.9%2C95.4%27%20fill%3D%27%23d5e4c7%27%2F%3E%3Cpolygon%20points%3D%27129.7%2C32.7%20176.3%2C59.2%20196.0%2C100.5%20135.8%2C89.6%27%20fill%3D%27%23f0d3bf%27%2F%3E%3Cpolygon%20points%3D%27176.3%2C59.2%20228.0%2C44.3%20228.0%2C92.8%20196.0%2C100.5%27%20fill%3D%27%23bcd8e0%27%2F%3E%3Cpolygon%20points%3D%270.0%2C92.8%2045.9%2C94.8%2053.6%2C125.7%200.0%2C148.4%27%20fill%3D%27%23f0d3bf%27%2F%3E%3Cpolygon%20points%3D%2745.9%2C94.8%20103.9%2C95.4%2094.4%2C127.4%2053.6%2C125.7%27%20fill%3D%27%23d5e4c7%27%2F%3E%3Cpolygon%20points%3D%27103.9%2C95.4%20135.8%2C89.6%20146.2%2C137.3%2094.4%2C127.4%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%27135.8%2C89.6%20196.0%2C100.5%20188.1%2C131.7%20146.2%2C137.3%27%20fill%3D%27%23f3e6b0%27%2F%3E%3Cpolygon%20points%3D%27196.0%2C100.5%20228.0%2C92.8%20228.0%2C148.4%20188.1%2C131.7%27%20fill%3D%27%23bcd8e0%27%2F%3E%3Cpolygon%20points%3D%270.0%2C148.4%2053.6%2C125.7%2040.2%2C171.2%200.0%2C181.5%27%20fill%3D%27%23bfe0dc%27%2F%3E%3Cpolygon%20points%3D%2753.6%2C125.7%2094.4%2C127.4%2077.9%2C183.2%2040.2%2C171.2%27%20fill%3D%27%23dcebe4%27%2F%3E%3Cpolygon%20points%3D%2794.4%2C127.4%20146.2%2C137.3%20140.6%2C182.4%2077.9%2C183.2%27%20fill%3D%27%23f3e6b0%27%2F%3E%3Cpolygon%20points%3D%27146.2%2C137.3%20188.1%2C131.7%20175.0%2C176.6%20140.6%2C182.4%27%20fill%3D%27%23e9dcc0%27%2F%3E%3Cpolygon%20points%3D%27188.1%2C131.7%20228.0%2C148.4%20228.0%2C181.5%20175.0%2C176.6%27%20fill%3D%27%23f0d3bf%27%2F%3E%3Cpolygon%20points%3D%270.0%2C181.5%2040.2%2C171.2%2045.8%2C228.0%200.0%2C228.0%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%2740.2%2C171.2%2077.9%2C183.2%2096.5%2C228.0%2045.8%2C228.0%27%20fill%3D%27%23f0d3bf%27%2F%3E%3Cpolygon%20points%3D%2777.9%2C183.2%20140.6%2C182.4%20128.3%2C228.0%2096.5%2C228.0%27%20fill%3D%27%23e9dcc0%27%2F%3E%3Cpolygon%20points%3D%27140.6%2C182.4%20175.0%2C176.6%20181.2%2C228.0%20128.3%2C228.0%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%27175.0%2C176.6%20228.0%2C181.5%20228.0%2C228.0%20181.2%2C228.0%27%20fill%3D%27%23d5e4c7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --nav-art-size: 228px 228px;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2796%27%20height%3D%2796%27%20viewBox%3D%270%200%2096%2096%27%3E%3Cg%20stroke%3D%27%23fbf7ec%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%270.0%2C0.0%2023.5%2C0.0%2024.1%2C25.3%200.0%2C23.3%27%20fill%3D%27%23f0d3bf%27%2F%3E%3Cpolygon%20points%3D%2723.5%2C0.0%2045.2%2C0.0%2042.1%2C28.5%2024.1%2C25.3%27%20fill%3D%27%23bcd8e0%27%2F%3E%3Cpolygon%20points%3D%2745.2%2C0.0%2073.7%2C0.0%2067.1%2C17.0%2042.1%2C28.5%27%20fill%3D%27%23e9dcc0%27%2F%3E%3Cpolygon%20points%3D%2773.7%2C0.0%2096.0%2C0.0%2096.0%2C23.3%2067.1%2C17.0%27%20fill%3D%27%23d5e4c7%27%2F%3E%3Cpolygon%20points%3D%270.0%2C23.3%2024.1%2C25.3%2019.5%2C48.2%200.0%2C48.9%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%2724.1%2C25.3%2042.1%2C28.5%2050.8%2C41.4%2019.5%2C48.2%27%20fill%3D%27%23bcd8e0%27%2F%3E%3Cpolygon%20points%3D%2742.1%2C28.5%2067.1%2C17.0%2072.4%2C41.7%2050.8%2C41.4%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%2767.1%2C17.0%2096.0%2C23.3%2096.0%2C48.9%2072.4%2C41.7%27%20fill%3D%27%23d5e4c7%27%2F%3E%3Cpolygon%20points%3D%270.0%2C48.9%2019.5%2C48.2%2025.9%2C76.2%200.0%2C78.1%27%20fill%3D%27%23bcd8e0%27%2F%3E%3Cpolygon%20points%3D%2719.5%2C48.2%2050.8%2C41.4%2054.9%2C78.7%2025.9%2C76.2%27%20fill%3D%27%23e9dcc0%27%2F%3E%3Cpolygon%20points%3D%2750.8%2C41.4%2072.4%2C41.7%2067.5%2C68.3%2054.9%2C78.7%27%20fill%3D%27%23d5e4c7%27%2F%3E%3Cpolygon%20points%3D%2772.4%2C41.7%2096.0%2C48.9%2096.0%2C78.1%2067.5%2C68.3%27%20fill%3D%27%23f3e6b0%27%2F%3E%3Cpolygon%20points%3D%270.0%2C78.1%2025.9%2C76.2%2023.5%2C96.0%200.0%2C96.0%27%20fill%3D%27%23dcebe4%27%2F%3E%3Cpolygon%20points%3D%2725.9%2C76.2%2054.9%2C78.7%2045.2%2C96.0%2023.5%2C96.0%27%20fill%3D%27%23cde6e0%27%2F%3E%3Cpolygon%20points%3D%2754.9%2C78.7%2067.5%2C68.3%2073.7%2C96.0%2045.2%2C96.0%27%20fill%3D%27%23bcd8e0%27%2F%3E%3Cpolygon%20points%3D%2767.5%2C68.3%2096.0%2C78.1%2096.0%2C96.0%2073.7%2C96.0%27%20fill%3D%27%23e9dcc0%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --nav-mini-size: 48px 48px;
  --page-art: radial-gradient(60% 50% at 12% 8%, #d5eae5 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #f6edd6 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #f5ddcd 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #dcebe4 0, transparent 70%), #f4f7f2;
  --glass-rgb: 8, 79, 86;
  --glass-primary-a: #0b6b73;
  --glass-primary-b: #084f56;
  --glass-primary-border: #084f56;
}
[data-theme="gaudi"] .card { background-image: linear-gradient(90deg, #0b6b73 0 25%, #d9a441 25% 50%, #c2714f 50% 75%, #7aa874 75%); background-size: 100% 3px; background-repeat: no-repeat; }
[data-theme="gaudi"] .card > h2, [data-theme="gaudi"] .card > .card-head { text-transform: none; font-size: 1rem; letter-spacing: 0; font-weight: 700; padding-top: 12px; }
[data-theme="gaudi"] .tile-icon { border-radius: 42% 58% 55% 45% / 52% 45% 55% 48%; }
[data-theme="dali"] {
  --panel-head: #faf4ec;
  --line: #e4d6c4;
  --line-soft: #f0e6d8;
  --accent: #a2481f;
  --accent-dark: #7c3213;
  --accent-soft: #fbeadf;
  --nav-bg: #ecdfcd;
  --nav-ink: #33251a;
  --nav-ink-dim: #58432f;
  --nav-hover: #e3d1b8;
  --ink: #2b211a;
  --muted: #5a4a3d;
  --label: #4a3b30;
  --tint-hover: #fbf6ee;
  --tint-faint: #fcf9f3;
  --tint-stripe: #fdfbf7;
  --edge: #dbc4a6;
  --edge-input: #b28a6f;
  --edge-hover: #e0b48c;
  --edge-nav: #d1b493;
  --grad-a: #e2edf2;
  --grad-b: #f4dfc2;
  --tile-icon: #f1d3b4;
  --badge-neutral: #eee5d9;
  --accent-rgb: 162, 72, 31;
  --accent-dark-rgb: 124, 50, 19;
  --bg: #f3ebe2;
  --panel: #fffdf9;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(124, 50, 19, .12);
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Playfair Display", Georgia, serif;
  --nav-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27160%27%20viewBox%3D%270%200%20200%20160%27%3E%3Cpath%20d%3D%27M6%2034%20C40%2030%2070%2036%20108%2032%27%20fill%3D%27none%27%20stroke%3D%27%236b4a33%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.45%27%2F%3E%3Cpath%20d%3D%27M42%2033%20C28%2062%2036%20104%2068%20114%20C102%20124%20126%20100%20118%2066%20C114%2048%20100%2038%2082%2034%20Z%27%20fill%3D%27%23eccd94%27%20stroke%3D%27%23a2481f%27%20stroke-width%3D%272%27%20opacity%3D%27.62%27%2F%3E%3Ccircle%20cx%3D%2774%27%20cy%3D%2780%27%20r%3D%2724%27%20fill%3D%27none%27%20stroke%3D%27%23a2481f%27%20stroke-width%3D%272%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M74%2080%20L74%2064%20M74%2080%20L86%2086%27%20stroke%3D%27%237c3213%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M74%2058%20v4%20M74%2098%20v4%20M52%2080%20h4%20M92%2080%20h4%27%20stroke%3D%27%23a2481f%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M96%20108%20C100%20122%20100%20134%2096%20142%20C90%20134%2090%20120%2096%20108%20Z%27%20fill%3D%27%23eccd94%27%20stroke%3D%27%23a2481f%27%20stroke-width%3D%271.6%27%20opacity%3D%27.55%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%27152%27%20rx%3D%2752%27%20ry%3D%275%27%20fill%3D%27%237c3213%27%20opacity%3D%27.14%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27228%27%20height%3D%2790%27%20viewBox%3D%270%200%20228%2090%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2090%20L0%2052%20L30%2040%20L52%2056%20L86%2026%20L120%2050%20L150%2034%20L190%2058%20L228%2044%20L228%2090%20Z%27%20fill%3D%27%23e5c9b8%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M0%2090%20L0%2068%20L40%2060%20L74%2074%20L118%2058%20L166%2072%20L228%2062%20L228%2090%20Z%27%20fill%3D%27%23d9b596%27%20opacity%3D%27.5%27%2F%3E%3C%2Fsvg%3E"), linear-gradient(180deg, #d7e5ee 0%, #e8e4dc 55%, #f2dcbf 56%, #ecd2ae 100%);
  --nav-art-size: 170px auto, 100% 90px, 100% 100%;
  --nav-art-pos: center bottom 10px, center bottom, 0 0;
  --nav-art-repeat: no-repeat;
  --nav-mini: linear-gradient(180deg, #d7e5ee 0%, #e8e4dc 55%, #f2dcbf 56%, #ecd2ae 100%);
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #dce8ef 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #f4e2c9 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #ecd6c9 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #f0dcbf 0, transparent 70%), #f6efe6;
  --glass-rgb: 124, 50, 19;
  --glass-primary-a: #a2481f;
  --glass-primary-b: #7c3213;
  --glass-primary-border: #7c3213;
}
[data-theme="dali"] .card { border-top: 3px solid rgba(201, 139, 75, .8); }
[data-theme="dali"] .card > h2, [data-theme="dali"] .card > .card-head { text-transform: none; font-size: 1rem; letter-spacing: .01em; font-weight: 700; }
[data-theme="dali"] .tile-icon { border-radius: 58% 42% 46% 54% / 40% 52% 48% 60%; }
[data-theme="miro"] {
  --panel-head: #faf4e4;
  --line: #ded3b8;
  --line-soft: #eee6d0;
  --accent: #b3261e;
  --accent-dark: #8c1c16;
  --accent-soft: #fdeadc;
  --nav-bg: #f6eedb;
  --nav-ink: #1e1a16;
  --nav-ink-dim: #453d33;
  --nav-hover: #efe3c6;
  --ink: #1f1b18;
  --muted: #514a41;
  --label: #3f392f;
  --tint-hover: #fbf7ea;
  --tint-faint: #fcfaf1;
  --tint-stripe: #fdfcf6;
  --edge: #d4c7a5;
  --edge-input: #b68870;
  --edge-hover: #e6a99f;
  --edge-nav: #d2c39c;
  --grad-a: #fbeec4;
  --grad-b: #f9d9cf;
  --tile-icon: #f8de84;
  --badge-neutral: #efe8d4;
  --accent-rgb: 179, 38, 30;
  --accent-dark-rgb: 140, 28, 22;
  --bg: #f9f3e3;
  --panel: #fffef9;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(140, 28, 22, .12);
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Fredoka", "Open Sans", sans-serif;
  --nav-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27228%27%20height%3D%27380%27%20viewBox%3D%270%200%20228%20380%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%231f1b18%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.22%27%3E%3Cpath%20d%3D%27M20%2040%20C60%2010%2090%2070%20130%2040%20S190%2030%20210%2060%27%2F%3E%3Cpath%20d%3D%27M30%20250%20C50%20280%2070%20230%2096%20262%20S150%20290%20190%20254%27%2F%3E%3Cpath%20d%3D%27M150%20120%20l30%2060%20M164%20118%20l-8%2070%20M176%20116%20l22%2056%27%20stroke-width%3D%271.6%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27%231f1b18%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.24%27%3E%3Cpath%20d%3D%27M62%20118%20v22%20M51%20129%20h22%20M54%20121%20l16%2016%20M70%20121%20l-16%2016%27%2F%3E%3Cpath%20d%3D%27M176%20300%20v20%20M166%20310%20h20%20M169%20303%20l14%2014%20M183%20303%20l-14%2014%27%2F%3E%3Cpath%20d%3D%27M198%20200%20v16%20M190%20208%20h16%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%27170%27%20r%3D%279%27%20fill%3D%27%23b3261e%27%20opacity%3D%27.28%27%2F%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%2734%27%20r%3D%277%27%20fill%3D%27%23f2c200%27%20opacity%3D%27.38%27%2F%3E%3Ccircle%20cx%3D%27104%27%20cy%3D%27330%27%20r%3D%2711%27%20fill%3D%27%232450a0%27%20opacity%3D%27.22%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27200%27%20r%3D%275%27%20fill%3D%27%231f1b18%27%20opacity%3D%27.24%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%27352%27%20r%3D%274%27%20fill%3D%27%23f2c200%27%20opacity%3D%27.4%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%2772%27%20r%3D%274%27%20fill%3D%27%232450a0%27%20opacity%3D%27.24%27%2F%3E%3Cpath%20d%3D%27M90%20214%20a20%2020%200%201%200%2022%2026%20a15%2015%200%201%201%20-22%20-26%20Z%27%20fill%3D%27%231f1b18%27%20opacity%3D%27.16%27%2F%3E%3C%2Fsvg%3E");
  --nav-art-size: 228px 380px;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27228%27%20height%3D%27380%27%20viewBox%3D%270%200%20228%20380%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%231f1b18%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.22%27%3E%3Cpath%20d%3D%27M20%2040%20C60%2010%2090%2070%20130%2040%20S190%2030%20210%2060%27%2F%3E%3Cpath%20d%3D%27M30%20250%20C50%20280%2070%20230%2096%20262%20S150%20290%20190%20254%27%2F%3E%3Cpath%20d%3D%27M150%20120%20l30%2060%20M164%20118%20l-8%2070%20M176%20116%20l22%2056%27%20stroke-width%3D%271.6%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27%231f1b18%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.24%27%3E%3Cpath%20d%3D%27M62%20118%20v22%20M51%20129%20h22%20M54%20121%20l16%2016%20M70%20121%20l-16%2016%27%2F%3E%3Cpath%20d%3D%27M176%20300%20v20%20M166%20310%20h20%20M169%20303%20l14%2014%20M183%20303%20l-14%2014%27%2F%3E%3Cpath%20d%3D%27M198%20200%20v16%20M190%20208%20h16%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%27170%27%20r%3D%279%27%20fill%3D%27%23b3261e%27%20opacity%3D%27.28%27%2F%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%2734%27%20r%3D%277%27%20fill%3D%27%23f2c200%27%20opacity%3D%27.38%27%2F%3E%3Ccircle%20cx%3D%27104%27%20cy%3D%27330%27%20r%3D%2711%27%20fill%3D%27%232450a0%27%20opacity%3D%27.22%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27200%27%20r%3D%275%27%20fill%3D%27%231f1b18%27%20opacity%3D%27.24%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%27352%27%20r%3D%274%27%20fill%3D%27%23f2c200%27%20opacity%3D%27.4%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%2772%27%20r%3D%274%27%20fill%3D%27%232450a0%27%20opacity%3D%27.24%27%2F%3E%3Cpath%20d%3D%27M90%20214%20a20%2020%200%201%200%2022%2026%20a15%2015%200%201%201%20-22%20-26%20Z%27%20fill%3D%27%231f1b18%27%20opacity%3D%27.16%27%2F%3E%3C%2Fsvg%3E");
  --nav-mini-size: 96px 160px;
  --page-art: radial-gradient(60% 50% at 12% 8%, #fbeec4 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #f9ddd4 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #dde6f7 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #f6eedb 0, transparent 70%), #fbf6e6;
  --glass-rgb: 140, 28, 22;
  --glass-primary-a: #b3261e;
  --glass-primary-b: #8c1c16;
  --glass-primary-border: #8c1c16;
}
[data-theme="miro"] .card > h2, [data-theme="miro"] .card > .card-head { text-transform: none; font-size: 1rem; letter-spacing: .01em; font-weight: 600; }
[data-theme="miro"] .tile:nth-child(3n+2) .tile-icon { background: #d5e0f6; }
[data-theme="miro"] .tile:nth-child(3n+3) .tile-icon { background: #f9d2cb; }
[data-theme="miro"] .btn, [data-theme="miro"] .sidebar nav a { border-radius: 999px; }
[data-theme="picasso"] {
  --panel-head: #f4f5f6;
  --line: #d5d9de;
  --line-soft: #e6e9ec;
  --accent: #27496d;
  --accent-dark: #1a344f;
  --accent-soft: #e4eaf0;
  --nav-bg: #d5dde5;
  --nav-ink: #132030;
  --nav-ink-dim: #2f4355;
  --nav-hover: #c6d1dc;
  --ink: #1b2733;
  --muted: #4a5866;
  --label: #37454f;
  --tint-hover: #f5f7f9;
  --tint-faint: #f8f9fa;
  --tint-stripe: #fafbfc;
  --edge: #bcc6d0;
  --edge-input: #8694a2;
  --edge-hover: #a7b6c6;
  --edge-nav: #a9b6c3;
  --grad-a: #e2e8ee;
  --grad-b: #ecd8c8;
  --tile-icon: #d3dde7;
  --badge-neutral: #e6e9ec;
  --accent-rgb: 39, 73, 109;
  --accent-dark-rgb: 26, 52, 79;
  --bg: #eef1f4;
  --panel: #fefefd;
  --radius: 0 18px 0 18px;
  --shadow: 0 8px 28px rgba(26, 52, 79, .12);
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Archivo", "Open Sans", sans-serif;
  --nav-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27228%27%20height%3D%27300%27%20viewBox%3D%270%200%20228%20300%27%3E%3Cg%20stroke%3D%27%2393a7ba%27%20stroke-width%3D%270.8%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%270.0%2C0.0%2058.2%2C0.0%200.0%2C61.5%27%20fill%3D%27%23bccad6%27%2F%3E%3Cpolygon%20points%3D%2758.2%2C0.0%2053.6%2C70.0%200.0%2C61.5%27%20fill%3D%27%23c3cfda%27%2F%3E%3Cpolygon%20points%3D%2758.2%2C0.0%20140.5%2C0.0%2053.6%2C70.0%27%20fill%3D%27%23e7cdb9%27%2F%3E%3Cpolygon%20points%3D%27140.5%2C0.0%20135.1%2C54.9%2053.6%2C70.0%27%20fill%3D%27%23d9dfe5%27%2F%3E%3Cpolygon%20points%3D%27140.5%2C0.0%20228.0%2C0.0%20228.0%2C61.5%27%20fill%3D%27%23b4c2cf%27%2F%3E%3Cpolygon%20points%3D%27140.5%2C0.0%20228.0%2C61.5%20135.1%2C54.9%27%20fill%3D%27%23d8d0c1%27%2F%3E%3Cpolygon%20points%3D%270.0%2C61.5%2053.6%2C70.0%2097.6%2C165.3%27%20fill%3D%27%23e7cdb9%27%2F%3E%3Cpolygon%20points%3D%270.0%2C61.5%2097.6%2C165.3%200.0%2C129.8%27%20fill%3D%27%23c3cfda%27%2F%3E%3Cpolygon%20points%3D%2753.6%2C70.0%20135.1%2C54.9%2097.6%2C165.3%27%20fill%3D%27%23e0c3ad%27%2F%3E%3Cpolygon%20points%3D%27135.1%2C54.9%20137.2%2C171.8%2097.6%2C165.3%27%20fill%3D%27%23d9dfe5%27%2F%3E%3Cpolygon%20points%3D%27135.1%2C54.9%20228.0%2C61.5%20137.2%2C171.8%27%20fill%3D%27%23e0c3ad%27%2F%3E%3Cpolygon%20points%3D%27228.0%2C61.5%20228.0%2C129.8%20137.2%2C171.8%27%20fill%3D%27%23d8d0c1%27%2F%3E%3Cpolygon%20points%3D%270.0%2C129.8%2097.6%2C165.3%2089.7%2C210.8%27%20fill%3D%27%23e7cdb9%27%2F%3E%3Cpolygon%20points%3D%270.0%2C129.8%2089.7%2C210.8%200.0%2C219.7%27%20fill%3D%27%23bccad6%27%2F%3E%3Cpolygon%20points%3D%2797.6%2C165.3%20137.2%2C171.8%2089.7%2C210.8%27%20fill%3D%27%23d8d0c1%27%2F%3E%3Cpolygon%20points%3D%27137.2%2C171.8%20169.0%2C240.6%2089.7%2C210.8%27%20fill%3D%27%23e0c3ad%27%2F%3E%3Cpolygon%20points%3D%27137.2%2C171.8%20228.0%2C129.8%20169.0%2C240.6%27%20fill%3D%27%23b4c2cf%27%2F%3E%3Cpolygon%20points%3D%27228.0%2C129.8%20228.0%2C219.7%20169.0%2C240.6%27%20fill%3D%27%23ced7df%27%2F%3E%3Cpolygon%20points%3D%270.0%2C219.7%2089.7%2C210.8%2058.2%2C300.0%27%20fill%3D%27%23d8d0c1%27%2F%3E%3Cpolygon%20points%3D%270.0%2C219.7%2058.2%2C300.0%200.0%2C300.0%27%20fill%3D%27%23ced7df%27%2F%3E%3Cpolygon%20points%3D%2789.7%2C210.8%20169.0%2C240.6%20140.5%2C300.0%27%20fill%3D%27%23b4c2cf%27%2F%3E%3Cpolygon%20points%3D%2789.7%2C210.8%20140.5%2C300.0%2058.2%2C300.0%27%20fill%3D%27%23e7cdb9%27%2F%3E%3Cpolygon%20points%3D%27169.0%2C240.6%20228.0%2C219.7%20228.0%2C300.0%27%20fill%3D%27%23e0c3ad%27%2F%3E%3Cpolygon%20points%3D%27169.0%2C240.6%20228.0%2C300.0%20140.5%2C300.0%27%20fill%3D%27%23c3cfda%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --nav-art-size: 228px 300px;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2796%27%20height%3D%27120%27%20viewBox%3D%270%200%2096%20120%27%3E%3Cg%20stroke%3D%27%2393a7ba%27%20stroke-width%3D%270.6%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%270.0%2C0.0%2024.5%2C0.0%200.0%2C24.6%27%20fill%3D%27%23bccad6%27%2F%3E%3Cpolygon%20points%3D%2724.5%2C0.0%2022.6%2C28.0%200.0%2C24.6%27%20fill%3D%27%23c3cfda%27%2F%3E%3Cpolygon%20points%3D%2724.5%2C0.0%2059.1%2C0.0%2022.6%2C28.0%27%20fill%3D%27%23e7cdb9%27%2F%3E%3Cpolygon%20points%3D%2759.1%2C0.0%2056.9%2C22.0%2022.6%2C28.0%27%20fill%3D%27%23d9dfe5%27%2F%3E%3Cpolygon%20points%3D%2759.1%2C0.0%2096.0%2C0.0%2096.0%2C24.6%27%20fill%3D%27%23b4c2cf%27%2F%3E%3Cpolygon%20points%3D%2759.1%2C0.0%2096.0%2C24.6%2056.9%2C22.0%27%20fill%3D%27%23d8d0c1%27%2F%3E%3Cpolygon%20points%3D%270.0%2C24.6%2022.6%2C28.0%2041.1%2C66.1%27%20fill%3D%27%23e7cdb9%27%2F%3E%3Cpolygon%20points%3D%270.0%2C24.6%2041.1%2C66.1%200.0%2C51.9%27%20fill%3D%27%23c3cfda%27%2F%3E%3Cpolygon%20points%3D%2722.6%2C28.0%2056.9%2C22.0%2041.1%2C66.1%27%20fill%3D%27%23e0c3ad%27%2F%3E%3Cpolygon%20points%3D%2756.9%2C22.0%2057.8%2C68.7%2041.1%2C66.1%27%20fill%3D%27%23d9dfe5%27%2F%3E%3Cpolygon%20points%3D%2756.9%2C22.0%2096.0%2C24.6%2057.8%2C68.7%27%20fill%3D%27%23e0c3ad%27%2F%3E%3Cpolygon%20points%3D%2796.0%2C24.6%2096.0%2C51.9%2057.8%2C68.7%27%20fill%3D%27%23d8d0c1%27%2F%3E%3Cpolygon%20points%3D%270.0%2C51.9%2041.1%2C66.1%2037.8%2C84.3%27%20fill%3D%27%23e7cdb9%27%2F%3E%3Cpolygon%20points%3D%270.0%2C51.9%2037.8%2C84.3%200.0%2C87.9%27%20fill%3D%27%23bccad6%27%2F%3E%3Cpolygon%20points%3D%2741.1%2C66.1%2057.8%2C68.7%2037.8%2C84.3%27%20fill%3D%27%23d8d0c1%27%2F%3E%3Cpolygon%20points%3D%2757.8%2C68.7%2071.2%2C96.3%2037.8%2C84.3%27%20fill%3D%27%23e0c3ad%27%2F%3E%3Cpolygon%20points%3D%2757.8%2C68.7%2096.0%2C51.9%2071.2%2C96.3%27%20fill%3D%27%23b4c2cf%27%2F%3E%3Cpolygon%20points%3D%2796.0%2C51.9%2096.0%2C87.9%2071.2%2C96.3%27%20fill%3D%27%23ced7df%27%2F%3E%3Cpolygon%20points%3D%270.0%2C87.9%2037.8%2C84.3%2024.5%2C120.0%27%20fill%3D%27%23d8d0c1%27%2F%3E%3Cpolygon%20points%3D%270.0%2C87.9%2024.5%2C120.0%200.0%2C120.0%27%20fill%3D%27%23ced7df%27%2F%3E%3Cpolygon%20points%3D%2737.8%2C84.3%2071.2%2C96.3%2059.1%2C120.0%27%20fill%3D%27%23b4c2cf%27%2F%3E%3Cpolygon%20points%3D%2737.8%2C84.3%2059.1%2C120.0%2024.5%2C120.0%27%20fill%3D%27%23e7cdb9%27%2F%3E%3Cpolygon%20points%3D%2771.2%2C96.3%2096.0%2C87.9%2096.0%2C120.0%27%20fill%3D%27%23e0c3ad%27%2F%3E%3Cpolygon%20points%3D%2771.2%2C96.3%2096.0%2C120.0%2059.1%2C120.0%27%20fill%3D%27%23c3cfda%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --nav-mini-size: 48px 60px;
  --page-art: radial-gradient(60% 50% at 12% 8%, #d8e1ea 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #eedccf 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #cfd9e3 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #ecd5c3 0, transparent 70%), #f0f2f5;
  --glass-rgb: 26, 52, 79;
  --glass-primary-a: #27496d;
  --glass-primary-b: #1a344f;
  --glass-primary-border: #1a344f;
}
[data-theme="picasso"] .card, [data-theme="picasso"] .toolbar { border-radius: 0 18px 0 18px; }
[data-theme="picasso"] .card > h2, [data-theme="picasso"] .card > .card-head { font-weight: 800; letter-spacing: .07em; }
[data-theme="picasso"] .tiles { border-radius: 0 24px 0 24px; }
[data-theme="picasso"] .tile { border-radius: 0 18px 0 18px; }
[data-theme="picasso"] .tile-icon { border-radius: 0; transform: rotate(45deg); width: 48px; height: 48px; margin: 10px 0 14px; }
[data-theme="picasso"] .tile-icon > * { transform: rotate(-45deg); }
[data-theme="picasso"] .btn { border-radius: 0 10px 0 10px; }
[data-theme="picasso"] .sidebar nav a { border-radius: 0 10px 0 10px; }
[data-theme="vangogh"] {
  --panel-head: #f4f6fc;
  --line: #d6dcee;
  --line-soft: #e6eaf6;
  --accent: #2b4fa8;
  --accent-dark: #1e3a80;
  --accent-soft: #e3eafc;
  --nav-bg: #dfe6f7;
  --nav-ink: #14213f;
  --nav-ink-dim: #34456b;
  --nav-hover: #d3ddf3;
  --ink: #161f38;
  --muted: #485372;
  --label: #343f5e;
  --tint-hover: #f4f6fd;
  --tint-faint: #f7f9fd;
  --tint-stripe: #fafbfe;
  --edge: #c5cfe9;
  --edge-input: #8191bb;
  --edge-hover: #a8b8ea;
  --edge-nav: #c1cdea;
  --grad-a: #e6ecfb;
  --grad-b: #fbefc5;
  --tile-icon: #dbe4fa;
  --badge-neutral: #e6e9f4;
  --accent-rgb: 43, 79, 168;
  --accent-dark-rgb: 30, 58, 128;
  --bg: #e8edf8;
  --panel: #fbfcff;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(30, 58, 128, .12);
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Lora", Georgia, serif;
  --nav-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%20viewBox%3D%270%200%20260%20260%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M28%2070%20c26-46%2096-40%20100%208%20c3%2040-46%2058-64%2030%20c-12-20%2010-40%2028-26%27%20stroke%3D%27%232b4fa8%27%20opacity%3D%27.22%27%2F%3E%3Cpath%20d%3D%27M150%20190%20c30-40%2092-26%2088%2018%20c-3%2034-44%2046-60%2022%20c-10-16%206-32%2022-22%27%20stroke%3D%27%232b4fa8%27%20opacity%3D%27.18%27%2F%3E%3Cpath%20d%3D%27M8%20176%20c40-14%2060%2026%20100%208%20s60-30%2096-8%27%20stroke%3D%27%235f86cf%27%20opacity%3D%27.22%27%2F%3E%3Cpath%20d%3D%27M120%2040%20c30%2010%2046%2044%2080%2030%20s40-30%2056-22%27%20stroke%3D%27%235f86cf%27%20opacity%3D%27.18%27%2F%3E%3Cpath%20d%3D%27M60%20236%20c20-16%2044-14%2066%200%20s40%2014%2062%200%27%20stroke%3D%27%23e2b93b%27%20opacity%3D%27.30%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23f2c94c%27%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%2752%27%20r%3D%277%27%20opacity%3D%27.55%27%2F%3E%3Ccircle%20cx%3D%2756%27%20cy%3D%27142%27%20r%3D%275%27%20opacity%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%27226%27%20cy%3D%27150%27%20r%3D%274%27%20opacity%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2796%27%20r%3D%273.5%27%20opacity%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%27232%27%20r%3D%273%27%20opacity%3D%27.45%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23f2c94c%27%20stroke-width%3D%271.6%27%20opacity%3D%27.35%27%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%2752%27%20r%3D%2713%27%2F%3E%3Ccircle%20cx%3D%2756%27%20cy%3D%27142%27%20r%3D%2710%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient(180deg, #dfe6f7, #d2dcf3);
  --nav-art-size: 260px 260px, 100% 100%;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%20viewBox%3D%270%200%20260%20260%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M28%2070%20c26-46%2096-40%20100%208%20c3%2040-46%2058-64%2030%20c-12-20%2010-40%2028-26%27%20stroke%3D%27%232b4fa8%27%20opacity%3D%27.22%27%2F%3E%3Cpath%20d%3D%27M150%20190%20c30-40%2092-26%2088%2018%20c-3%2034-44%2046-60%2022%20c-10-16%206-32%2022-22%27%20stroke%3D%27%232b4fa8%27%20opacity%3D%27.18%27%2F%3E%3Cpath%20d%3D%27M8%20176%20c40-14%2060%2026%20100%208%20s60-30%2096-8%27%20stroke%3D%27%235f86cf%27%20opacity%3D%27.22%27%2F%3E%3Cpath%20d%3D%27M120%2040%20c30%2010%2046%2044%2080%2030%20s40-30%2056-22%27%20stroke%3D%27%235f86cf%27%20opacity%3D%27.18%27%2F%3E%3Cpath%20d%3D%27M60%20236%20c20-16%2044-14%2066%200%20s40%2014%2062%200%27%20stroke%3D%27%23e2b93b%27%20opacity%3D%27.30%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23f2c94c%27%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%2752%27%20r%3D%277%27%20opacity%3D%27.55%27%2F%3E%3Ccircle%20cx%3D%2756%27%20cy%3D%27142%27%20r%3D%275%27%20opacity%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%27226%27%20cy%3D%27150%27%20r%3D%274%27%20opacity%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2796%27%20r%3D%273.5%27%20opacity%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%27232%27%20r%3D%273%27%20opacity%3D%27.45%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23f2c94c%27%20stroke-width%3D%271.6%27%20opacity%3D%27.35%27%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%2752%27%20r%3D%2713%27%2F%3E%3Ccircle%20cx%3D%2756%27%20cy%3D%27142%27%20r%3D%2710%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient(180deg, #dfe6f7, #d2dcf3);
  --nav-mini-size: 110px 110px, 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #c9d8f5 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #f6e6a8 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #b9c8ec 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #f9efc9 0, transparent 70%), #e6ecf8;
  --glass-rgb: 30, 58, 128;
  --glass-primary-a: #2b4fa8;
  --glass-primary-b: #1e3a80;
  --glass-primary-border: #1e3a80;
}
[data-theme="vangogh"] .card > h2, [data-theme="vangogh"] .card > .card-head { text-transform: none; font-style: italic; font-size: 1rem; letter-spacing: 0; font-weight: 700; }
[data-theme="vangogh"] h1 { font-style: italic; }
[data-theme="vangogh"] .tiles { background: linear-gradient(135deg, rgba(230, 236, 251, .55), rgba(251, 239, 197, .55)); }
[data-theme="vangogh"] .tile-icon { border-radius: 50% 50% 46% 54% / 55% 45% 55% 45%; }
[data-theme="vangogh"] .tile:nth-child(3n+2) .tile-icon { background: #fbefc5; }
[data-theme="liquid"] {
  --panel-head: #f3f5fc;
  --line: #d9def0;
  --line-soft: #e8ebf6;
  --accent: #3f4fd4;
  --accent-dark: #2f3aa8;
  --accent-soft: #e8ebff;
  --nav-bg: #e9eefb;
  --nav-ink: #14203c;
  --nav-ink-dim: #34446b;
  --nav-hover: #dfe6f8;
  --ink: #141c33;
  --muted: #4a5573;
  --label: #363f5c;
  --tint-hover: #f4f6fd;
  --tint-faint: #f7f8fd;
  --tint-stripe: #fafbfe;
  --edge: #c9d0ee;
  --edge-input: #848dcb;
  --edge-hover: #aab6f0;
  --edge-nav: #c7d0ee;
  --grad-a: #e6ecff;
  --grad-b: #efe3ff;
  --tile-icon: #dfe3ff;
  --badge-neutral: #e6e9f5;
  --accent-rgb: 63, 79, 212;
  --accent-dark-rgb: 47, 58, 168;
  --bg: #eef2fb;
  --panel: #fbfcff;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(60, 80, 150, .12);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --nav-art: none;
  --nav-art-size: auto;
  --nav-art-pos: 0 0;
  --nav-art-repeat: repeat;
  --nav-mini: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), radial-gradient(60% 50% at 12% 8%, #bcd4ff 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #d5c4ff 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #ffd0bf 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #bfeedd 0, transparent 70%), #e9eefb;
  --nav-mini-size: 100% 100%;
  --page-art: radial-gradient(60% 50% at 12% 8%, #bcd4ff 0, transparent 70%), radial-gradient(50% 45% at 88% 12%, #d5c4ff 0, transparent 70%), radial-gradient(55% 50% at 80% 92%, #ffd0bf 0, transparent 70%), radial-gradient(50% 45% at 10% 88%, #bfeedd 0, transparent 70%), #e9eefb;
}
[data-theme="liquid"] body { background: var(--page-art); background-attachment: fixed; }
[data-theme="liquid"] .sidebar { background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, .75); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5); }
[data-theme="liquid"] .shellbar { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .8); }
[data-theme="liquid"] .card, [data-theme="liquid"] .toolbar, [data-theme="liquid"] .tile { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 10px 32px rgba(60, 80, 150, .12), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(120, 140, 210, .10); }
[data-theme="liquid"] .card > h2, [data-theme="liquid"] .card > .card-head { background: rgba(255, 255, 255, .35); border-bottom-color: rgba(255, 255, 255, .8); text-transform: none; font-size: 1rem; letter-spacing: 0; font-weight: 600; }
[data-theme="liquid"] .tiles { background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; }
[data-theme="liquid"] .tile { border-radius: 20px; }
[data-theme="liquid"] .tile-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 10px rgba(63, 79, 212, .16); }
[data-theme="liquid"] .btn { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: 0 2px 8px rgba(60, 80, 150, .10), inset 0 1px 0 rgba(255, 255, 255, .95); }
[data-theme="liquid"] .btn.primary { background: linear-gradient(180deg, #5666e4, #3f4fd4); border-color: #3441b8; box-shadow: 0 4px 12px rgba(63, 79, 212, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
[data-theme="liquid"] .sidebar nav a { border-radius: 12px; }
[data-theme="liquid"] .sidebar nav a.active { background: rgba(255, 255, 255, .85); box-shadow: 0 2px 10px rgba(60, 80, 150, .14), inset 0 1px 0 #fff; border-left-color: transparent; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
[data-theme="liquid"] .sidebar { background: #eaf0fc; }
[data-theme="liquid"] .shellbar, [data-theme="liquid"] .card, [data-theme="liquid"] .toolbar, [data-theme="liquid"] .tile { background: rgba(255, 255, 255, .94); }
}

/* The artist themes' sidebar art. A colour theme sets none of these variables, so its sidebar stays the flat colour it always was. */
.sidebar { background-image: var(--nav-art, none); background-size: var(--nav-art-size, auto); background-position: var(--nav-art-pos, 0 0); background-repeat: var(--nav-art-repeat, repeat); }
[data-theme="gaudi"] .sidebar nav a, [data-theme="gaudi"] .nav-group { text-shadow: 0 0 2px #e6f0ea, 0 0 5px #e6f0ea, 0 0 9px #e6f0ea; }
[data-theme="miro"] .sidebar nav a, [data-theme="miro"] .nav-group { text-shadow: 0 0 2px #f6eedb, 0 0 5px #f6eedb, 0 0 9px #f6eedb; }
[data-theme="picasso"] .sidebar nav a, [data-theme="picasso"] .nav-group { text-shadow: 0 0 2px #d5dde5, 0 0 5px #d5dde5, 0 0 9px #d5dde5; }
[data-theme="vangogh"] .sidebar nav a, [data-theme="vangogh"] .nav-group { text-shadow: 0 0 2px #dfe6f7, 0 0 5px #dfe6f7, 0 0 9px #dfe6f7; }


/* The shared glass (tools/artist_themes.glass_rules): the colour themes and the glass artists. Liquid Glass keeps its own rules above. */
[data-theme="blue"] body, [data-theme="violet"] body, [data-theme="yellow"] body, [data-theme="green"] body, [data-theme="red"] body, [data-theme="purple"] body, [data-theme="orange"] body, [data-theme="gaudi"] body, [data-theme="dali"] body, [data-theme="miro"] body, [data-theme="picasso"] body, [data-theme="vangogh"] body { background: var(--page-art); background-attachment: fixed; }
[data-theme="blue"] .sidebar, [data-theme="violet"] .sidebar, [data-theme="yellow"] .sidebar, [data-theme="green"] .sidebar, [data-theme="red"] .sidebar, [data-theme="purple"] .sidebar, [data-theme="orange"] .sidebar { background-color: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, .75); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5); }
[data-theme="blue"] .shellbar, [data-theme="violet"] .shellbar, [data-theme="yellow"] .shellbar, [data-theme="green"] .shellbar, [data-theme="red"] .shellbar, [data-theme="purple"] .shellbar, [data-theme="orange"] .shellbar, [data-theme="gaudi"] .shellbar, [data-theme="dali"] .shellbar, [data-theme="miro"] .shellbar, [data-theme="picasso"] .shellbar, [data-theme="vangogh"] .shellbar { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .8); }
[data-theme="blue"] .card, [data-theme="blue"] .toolbar, [data-theme="blue"] .tile, [data-theme="violet"] .card, [data-theme="violet"] .toolbar, [data-theme="violet"] .tile, [data-theme="yellow"] .card, [data-theme="yellow"] .toolbar, [data-theme="yellow"] .tile, [data-theme="green"] .card, [data-theme="green"] .toolbar, [data-theme="green"] .tile, [data-theme="red"] .card, [data-theme="red"] .toolbar, [data-theme="red"] .tile, [data-theme="purple"] .card, [data-theme="purple"] .toolbar, [data-theme="purple"] .tile, [data-theme="orange"] .card, [data-theme="orange"] .toolbar, [data-theme="orange"] .tile, [data-theme="gaudi"] .card, [data-theme="gaudi"] .toolbar, [data-theme="gaudi"] .tile, [data-theme="dali"] .card, [data-theme="dali"] .toolbar, [data-theme="dali"] .tile, [data-theme="miro"] .card, [data-theme="miro"] .toolbar, [data-theme="miro"] .tile, [data-theme="picasso"] .card, [data-theme="picasso"] .toolbar, [data-theme="picasso"] .tile, [data-theme="vangogh"] .card, [data-theme="vangogh"] .toolbar, [data-theme="vangogh"] .tile { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 10px 32px rgba(var(--glass-rgb), .12), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(var(--glass-rgb), .10); }
[data-theme="blue"] .card > h2, [data-theme="blue"] .card > .card-head, [data-theme="violet"] .card > h2, [data-theme="violet"] .card > .card-head, [data-theme="yellow"] .card > h2, [data-theme="yellow"] .card > .card-head, [data-theme="green"] .card > h2, [data-theme="green"] .card > .card-head, [data-theme="red"] .card > h2, [data-theme="red"] .card > .card-head, [data-theme="purple"] .card > h2, [data-theme="purple"] .card > .card-head, [data-theme="orange"] .card > h2, [data-theme="orange"] .card > .card-head, [data-theme="gaudi"] .card > h2, [data-theme="gaudi"] .card > .card-head, [data-theme="dali"] .card > h2, [data-theme="dali"] .card > .card-head, [data-theme="miro"] .card > h2, [data-theme="miro"] .card > .card-head, [data-theme="picasso"] .card > h2, [data-theme="picasso"] .card > .card-head, [data-theme="vangogh"] .card > h2, [data-theme="vangogh"] .card > .card-head { background: rgba(255, 255, 255, .35); border-bottom-color: rgba(255, 255, 255, .8); }
[data-theme="blue"] .tiles, [data-theme="violet"] .tiles, [data-theme="yellow"] .tiles, [data-theme="green"] .tiles, [data-theme="red"] .tiles, [data-theme="purple"] .tiles, [data-theme="orange"] .tiles, [data-theme="gaudi"] .tiles, [data-theme="dali"] .tiles, [data-theme="miro"] .tiles, [data-theme="picasso"] .tiles, [data-theme="vangogh"] .tiles { background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; }
[data-theme="blue"] .tile, [data-theme="violet"] .tile, [data-theme="yellow"] .tile, [data-theme="green"] .tile, [data-theme="red"] .tile, [data-theme="purple"] .tile, [data-theme="orange"] .tile, [data-theme="gaudi"] .tile, [data-theme="dali"] .tile, [data-theme="miro"] .tile, [data-theme="picasso"] .tile, [data-theme="vangogh"] .tile { border-radius: 20px; }
[data-theme="blue"] .tile-icon, [data-theme="violet"] .tile-icon, [data-theme="yellow"] .tile-icon, [data-theme="green"] .tile-icon, [data-theme="red"] .tile-icon, [data-theme="purple"] .tile-icon, [data-theme="orange"] .tile-icon, [data-theme="gaudi"] .tile-icon, [data-theme="dali"] .tile-icon, [data-theme="miro"] .tile-icon, [data-theme="picasso"] .tile-icon, [data-theme="vangogh"] .tile-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 10px rgba(var(--glass-rgb), .16); }
[data-theme="blue"] .btn, [data-theme="violet"] .btn, [data-theme="yellow"] .btn, [data-theme="green"] .btn, [data-theme="red"] .btn, [data-theme="purple"] .btn, [data-theme="orange"] .btn, [data-theme="gaudi"] .btn, [data-theme="dali"] .btn, [data-theme="miro"] .btn, [data-theme="picasso"] .btn, [data-theme="vangogh"] .btn { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: 0 2px 8px rgba(var(--glass-rgb), .10), inset 0 1px 0 rgba(255, 255, 255, .95); }
[data-theme="blue"] .btn.primary, [data-theme="violet"] .btn.primary, [data-theme="yellow"] .btn.primary, [data-theme="green"] .btn.primary, [data-theme="red"] .btn.primary, [data-theme="purple"] .btn.primary, [data-theme="orange"] .btn.primary, [data-theme="gaudi"] .btn.primary, [data-theme="dali"] .btn.primary, [data-theme="miro"] .btn.primary, [data-theme="picasso"] .btn.primary, [data-theme="vangogh"] .btn.primary { background: linear-gradient(180deg, var(--glass-primary-a), var(--glass-primary-b)); border-color: var(--glass-primary-border);
  box-shadow: 0 4px 12px rgba(var(--glass-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
[data-theme="blue"] .sidebar nav a, [data-theme="violet"] .sidebar nav a, [data-theme="yellow"] .sidebar nav a, [data-theme="green"] .sidebar nav a, [data-theme="red"] .sidebar nav a, [data-theme="purple"] .sidebar nav a, [data-theme="orange"] .sidebar nav a, [data-theme="gaudi"] .sidebar nav a, [data-theme="dali"] .sidebar nav a, [data-theme="miro"] .sidebar nav a, [data-theme="picasso"] .sidebar nav a, [data-theme="vangogh"] .sidebar nav a { border-radius: 12px; }
[data-theme="blue"] .sidebar nav a.active, [data-theme="violet"] .sidebar nav a.active, [data-theme="yellow"] .sidebar nav a.active, [data-theme="green"] .sidebar nav a.active, [data-theme="red"] .sidebar nav a.active, [data-theme="purple"] .sidebar nav a.active, [data-theme="orange"] .sidebar nav a.active, [data-theme="gaudi"] .sidebar nav a.active, [data-theme="dali"] .sidebar nav a.active, [data-theme="miro"] .sidebar nav a.active, [data-theme="picasso"] .sidebar nav a.active, [data-theme="vangogh"] .sidebar nav a.active { background: rgba(255, 255, 255, .85); box-shadow: 0 2px 10px rgba(var(--glass-rgb), .14), inset 0 1px 0 #fff; border-left-color: transparent; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
[data-theme="blue"] .sidebar, [data-theme="violet"] .sidebar, [data-theme="yellow"] .sidebar, [data-theme="green"] .sidebar, [data-theme="red"] .sidebar, [data-theme="purple"] .sidebar, [data-theme="orange"] .sidebar { background-color: var(--nav-bg); }
[data-theme="blue"] .shellbar, [data-theme="blue"] .card, [data-theme="blue"] .toolbar, [data-theme="blue"] .tile, [data-theme="violet"] .shellbar, [data-theme="violet"] .card, [data-theme="violet"] .toolbar, [data-theme="violet"] .tile, [data-theme="yellow"] .shellbar, [data-theme="yellow"] .card, [data-theme="yellow"] .toolbar, [data-theme="yellow"] .tile, [data-theme="green"] .shellbar, [data-theme="green"] .card, [data-theme="green"] .toolbar, [data-theme="green"] .tile, [data-theme="red"] .shellbar, [data-theme="red"] .card, [data-theme="red"] .toolbar, [data-theme="red"] .tile, [data-theme="purple"] .shellbar, [data-theme="purple"] .card, [data-theme="purple"] .toolbar, [data-theme="purple"] .tile, [data-theme="orange"] .shellbar, [data-theme="orange"] .card, [data-theme="orange"] .toolbar, [data-theme="orange"] .tile, [data-theme="gaudi"] .shellbar, [data-theme="gaudi"] .card, [data-theme="gaudi"] .toolbar, [data-theme="gaudi"] .tile, [data-theme="dali"] .shellbar, [data-theme="dali"] .card, [data-theme="dali"] .toolbar, [data-theme="dali"] .tile, [data-theme="miro"] .shellbar, [data-theme="miro"] .card, [data-theme="miro"] .toolbar, [data-theme="miro"] .tile, [data-theme="picasso"] .shellbar, [data-theme="picasso"] .card, [data-theme="picasso"] .toolbar, [data-theme="picasso"] .tile, [data-theme="vangogh"] .shellbar, [data-theme="vangogh"] .card, [data-theme="vangogh"] .toolbar, [data-theme="vangogh"] .tile { background: rgba(255, 255, 255, .94); }
}

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.theme-card { position: relative; border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel);
              padding: 10px; cursor: pointer; display: block; margin: 0; }
.theme-card:hover { border-color: var(--edge-hover); }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.theme-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-mini { display: flex; height: 64px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 8px; }
.theme-mini .side { width: 30%; background-color: var(--nav-bg); background-image: var(--nav-mini, var(--nav-art, none)); background-size: var(--nav-mini-size, auto); background-repeat: var(--nav-art-repeat, repeat); padding: 6px 5px; }
.theme-mini .side i { display: block; height: 5px; border-radius: 3px; background: var(--nav-ink-dim); opacity: .55; margin-bottom: 5px; }
.theme-mini .side i:first-child { background: var(--accent); opacity: 1; }
.theme-mini .main { flex: 1; background: var(--page-art, #fff); padding: 7px; }
.theme-mini .main b { display: inline-block; height: 12px; width: 44px; border-radius: 3px; background: var(--accent); }
.theme-mini .main i { display: block; height: 14px; margin-top: 6px; border-radius: 3px; background: var(--accent-soft); border: 1px solid var(--edge); }
.theme-name { font-weight: 600; font-size: 0.875rem; }
.theme-note { font-size: 0.8125rem; color: var(--muted); }

/* --- invoice page: choose who the invoice email goes to ------------------------- */
.send-menu { position: relative; display: inline-block; }
.send-menu > summary { list-style: none; cursor: pointer; }
.send-menu > summary::-webkit-details-marker { display: none; }
.send-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; background: var(--panel);
              border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-dialog); padding: 12px; }
.send-title { font-size: 0.875rem; font-weight: 600; color: var(--label); margin-bottom: 6px; }
.send-row { align-items: flex-start; padding: 5px 0; margin: 0; }
.send-row input { margin-top: 3px; }

/* Policies: a list of documents, and a readable page for one. */
.policy-note { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.policy-list { padding: 0; }
.policy-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 6px 16px; align-items: center;
  padding: 11px 14px; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.policy-row:first-child { border-top: 0; }
.policy-row:hover { background: var(--tint-hover); }
.policy-title { font-weight: 600; color: var(--ink); }
.policy-summary { font-size: 0.875rem; color: var(--muted); }
.policy-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
mark.confirm { background: var(--amber-soft); color: var(--amber); padding: 0 3px; border-radius: 3px; font-weight: 600; }
.policy-draft { margin: 0 0 14px; font-size: 0.875rem; color: var(--muted); }
.policy-body { max-width: 74ch; line-height: 1.6; font-size: 0.9375rem; }
.policy-body h2 { font-size: 1.125rem; margin: 24px 0 8px; }
.policy-body h3 { font-size: 1rem; margin: 18px 0 6px; }
.policy-body p, .policy-body ul, .policy-body ol { margin: 0 0 10px; }
.policy-body table { border-collapse: collapse; width: 100%; margin: 10px 0 16px; font-size: 0.875rem; }
.policy-body th, .policy-body td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
.policy-body th { background: var(--panel-head); }
.policy-body blockquote { margin: 10px 0; padding: 2px 14px; border-left: 3px solid var(--line); color: var(--muted); }
.print-only { display: none; }
@media (max-width: 720px) {
  .policy-row { grid-template-columns: 1fr; }
  .policy-meta { justify-content: flex-start; }
  .policy-body table { display: block; overflow-x: auto; }
}
@media print {
  .sidebar, .no-print, .flash, .env-banner, .card > h2 { display: none !important; }
  .print-only { display: block; }
  .workspace, .card { border: 0 !important; box-shadow: none !important; margin: 0 !important; }
  .policy-body { max-width: none; font-size: 12pt; }
  mark.confirm { background: none; color: inherit; border: 1px solid #999; }
}

/* Settings: the monthly AI allowance meter. */
.ai-meter { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; margin: 8px 0; }
.ai-meter > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* Tax page: compact two-column tables inside cards. */
.policy-mini { border-collapse: collapse; width: 100%; }
.policy-mini td { padding: 3px 0; vertical-align: top; }
.policy-mini td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.policy-mini.dates td:last-child { text-align: left; padding-left: 12px; }
.policy-mini.dates td.tabnum { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Resources: pupil avatars, cards, drop zone, files (app/avatars.py, templates/_avatars.html) ------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.av { --bg: color-mix(in srgb, hsl(var(--h) 78% 52%) 16%, var(--panel)); --fg: color-mix(in srgb, hsl(var(--h) 62% 38%) 78%, var(--ink));
  display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--bg); color: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(var(--h) 60% 50%) 24%, transparent); }
.av svg { width: 56%; height: 56%; }
.av-sm { width: 34px; height: 34px; } .av-md { width: 52px; height: 52px; } .av-lg { width: 76px; height: 76px; }
.av-tile { width: 46px; height: 46px; border-radius: 13px; } .av-tile svg { width: 52%; height: 52%; }

.rs-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 16px; }
.rs-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 380px; background: var(--panel); border: 1px solid var(--edge-input);
  border-radius: 999px; padding: 0 14px; height: 38px; color: var(--muted); }
.rs-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rs-search input { border: 0; outline: none; /* ring: .rs-search:focus-within draws it round the whole box */ background: transparent; width: 100%; font: inherit; color: var(--ink); padding: 0; box-shadow: none; }
.rs-search-sm { flex: 0 1 220px; height: 34px; }
.rs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-chip { font: inherit; font-size: 0.875rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.rs-chip span { color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.rs-chip:hover { border-color: var(--edge-hover); background: var(--tint-hover); }
.rs-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rs-chip.is-on span { color: rgba(255, 255, 255, .85); }
.rs-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.875rem; color: var(--muted); }
.rs-sort select { min-height: 36px; height: auto; }

.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.rs-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  color: inherit; text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.rs-card:hover { transform: translateY(-2px); border-color: var(--edge-hover); box-shadow: 0 8px 22px -12px rgba(20, 30, 60, .35); text-decoration: none; }
.rs-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rs-card-main { display: flex; flex-direction: column; min-width: 0; }
.rs-card-name { font-size: 1rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-card-sub { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-card-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8125rem; color: var(--muted); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.rs-card-family { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rs-card-when { white-space: nowrap; }
.rs-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; padding: 3px 9px; border-radius: 999px; background: var(--tint-faint); color: var(--muted);
  font-variant-numeric: tabular-nums; }
.rs-pill .icon { width: 14px; height: 14px; }
.rs-pill-report { background: var(--accent-soft); color: var(--accent-dark); }
.rs-card[hidden] { display: none; }

.rs-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin: 0 0 18px; }
.rs-hero-av { position: relative; }
.rs-hero-main { flex: 1 1 260px; min-width: 0; }
.rs-hero-main h1 { margin: 2px 0 8px; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.rs-eyebrow { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.rs-hero-stats { display: flex; gap: 6px; margin: 0; }
.rs-hero-actions { display: flex; gap: 8px; align-items: flex-start; }
.rs-pick { position: absolute; right: -6px; bottom: -4px; }
.rs-pick > summary { list-style: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.rs-pick > summary::-webkit-details-marker { display: none; }
.rs-pick > summary:hover { color: var(--accent); border-color: var(--accent); }
.rs-pick-pop, .rs-menu-pop { position: absolute; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px;
  box-shadow: var(--shadow-dialog); }
.rs-pick-pop { left: -6px; top: 84px; width: 292px; }
.rs-pick-title { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.rs-pick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.rs-pick-grid label { cursor: pointer; display: grid; place-items: center; border-radius: 12px; padding: 3px; }
.rs-pick-grid input { position: absolute; opacity: 0; pointer-events: none; }
.rs-pick-grid label:hover { background: var(--tint-hover); }
.rs-pick-grid input:checked + .av { box-shadow: 0 0 0 2px var(--accent); }
.rs-pick-grid input:focus-visible + .av { box-shadow: 0 0 0 2px var(--ink); }
.rs-pick-actions { display: flex; gap: 8px; margin-top: 10px; }
.rs-menu { position: relative; }
.rs-menu > summary { list-style: none; cursor: pointer; }
.rs-menu > summary::-webkit-details-marker { display: none; }
.rs-menu-pop { right: 0; top: 44px; display: flex; gap: 8px; align-items: center; min-width: 280px; }
.rs-menu-pop input[type=text] { flex: 1; min-width: 0; }
.rs-menu-col { flex-direction: column; align-items: stretch; }
.rs-inline { display: flex; gap: 8px; }
.rs-inline input { flex: 1; min-width: 0; }

.rs-drop { position: relative; margin: 0 0 22px; }
.rs-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rs-drop-face { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 16px; border: 2px dashed var(--edge-input); border-radius: 16px;
  background: var(--tint-faint); color: var(--ink); transition: background .14s, border-color .14s; }
.rs-drop:hover .rs-drop-face, .rs-drop.is-over .rs-drop-face { background: var(--accent-soft); border-color: var(--accent); }
.rs-drop:focus-within .rs-drop-face { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-drop.is-busy .rs-drop-face { opacity: .6; }
.rs-drop-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--panel); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
.rs-drop-text { display: block; font-size: 0.9375rem; }
.rs-drop-text small { display: block; color: var(--muted); font-size: 0.8125rem; margin-top: 3px; }

.rs-h2 { font-size: 1rem; color: var(--muted); margin: 0 0 10px; }
.rs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 24px; }
.rs-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.rs-tile:hover { transform: translateY(-2px); border-color: var(--edge-hover); box-shadow: 0 8px 22px -12px rgba(20, 30, 60, .35); text-decoration: none; }
.rs-tile-main { display: flex; flex-direction: column; min-width: 0; }
.rs-tile-main strong { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-tile-main small { color: var(--muted); font-size: 0.8125rem; }
.rs-empty { text-align: center; padding: 28px 16px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); margin-bottom: 20px; }
.rs-empty p { margin: 4px 0; }
.rs-empty strong { color: var(--ink); }

.rs-files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rs-files-head .rs-h2 { margin: 0; }
.rs-files { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.rs-file { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line-soft); }
.rs-file:first-child { border-top: 0; }
.rs-file:hover { background: var(--tint-hover); }
.rs-file[hidden] { display: none; }
.rs-type { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; font-size: 0.6875rem; font-weight: 800; letter-spacing: .03em;
  background: color-mix(in srgb, hsl(var(--h) 75% 52%) 15%, var(--panel)); color: color-mix(in srgb, hsl(var(--h) 60% 36%) 80%, var(--ink)); }
.rs-file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rs-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rs-file-name:hover { color: var(--accent); }
.rs-file-meta { font-size: 0.8125rem; color: var(--muted); }
.rs-share { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.8125rem; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted); white-space: nowrap; }
.rs-share:hover { border-color: var(--edge-hover); color: var(--ink); }
.rs-share.is-on { background: var(--green-soft); border-color: transparent; color: var(--green); font-weight: 600; }
.rs-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.rs-icon-btn:hover { background: var(--tint-hover); color: var(--ink); text-decoration: none; }
.rs-icon-btn.danger:hover { background: var(--red-soft); color: var(--red); }
.rs-file form { margin: 0; }

@media (max-width: 720px) {
  .rs-sort { margin-left: 0; }
  .rs-file { flex-wrap: wrap; }
  .rs-file-main { flex-basis: calc(100% - 60px); }
  .rs-file-share { margin-left: 54px; }
  .rs-pick-pop { left: 0; }
  .rs-menu-pop { min-width: 240px; }
}

/* Join / Classroom buttons on lessons (templates/_joinlinks.html) and the calendar event wrapper they sit in. */
.jl { display: inline-flex; gap: 6px; align-items: center; vertical-align: middle; }
.jl-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); white-space: nowrap; }
.jl-btn:hover { background: var(--accent); color: #fff; text-decoration: none; }
.jl-class { background: var(--green-soft); border-color: transparent; color: var(--green); }
.jl-class:hover { background: var(--green); color: #fff; }
.cal-event a.ev-main { display: block; height: 100%; color: inherit; text-decoration: none; }
.cal-event .ev-links { position: absolute; top: 2px; right: 3px; }
.cal-event .ev-links .jl-btn { padding: 2px 5px; background: rgba(255, 255, 255, .92); border-color: transparent; color: #1f3a5f; }
.cal-event .ev-links .jl-class { color: #1a6a45; }
.cal-event .ev-links .jl-text { display: none; }
.cal-event .ev-links .jl { gap: 3px; }
.pupil-links { margin-top: 6px; }
.pupil-links > summary { cursor: pointer; color: var(--muted); }
.pupil-links-form { margin-top: 8px; max-width: 420px; }

/* Trial bar (customer tenants): a slim, friendly reminder of the free trial. */
.trial-bar { background: var(--accent-soft); color: var(--accent-dark); text-align: center; font-size: 0.875rem; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.trial-bar a { font-weight: 700; }
.trial-bar.urgent { background: var(--amber-soft); color: var(--amber); }

/* Plan & billing */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 0 18px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.plan-card.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.plan-card.is-soon { opacity: .78; border-style: dashed; }
.plan-card h2 { font-size: 1.25rem; margin: 0; }
.plan-flag { position: absolute; top: 14px; right: 14px; }
.plan-tag { margin: 0; color: var(--muted); font-size: 0.875rem; min-height: 2.6em; }
.plan-price { margin: 8px 0 4px; }
.plan-price .amount { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-price .per { color: var(--muted); font-size: 0.875rem; }
.plan-features { list-style: none; padding: 0; margin: 0 0 14px; flex: 1; }
.plan-features li { position: relative; padding: 5px 0 5px 22px; font-size: 0.875rem; line-height: 1.4; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan-always { margin: 8px 0 0 18px; padding: 0; }

/* ---- First-time setup wizard (templates/welcome.html, static/welcome.js) ------------------------------------------------------------------------------ */
body.wz { margin: 0; min-height: 100vh; background: radial-gradient(1200px 600px at 15% -10%, var(--accent-soft), transparent 60%), radial-gradient(900px 500px at 100% 0%, var(--tint-faint), transparent 55%), var(--bg);
  color: var(--ink); font-family: "Open Sans", system-ui, sans-serif; }
.skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 12px; top: 12px; background: var(--panel); color: var(--ink, inherit); padding: 8px 12px; border-radius: 8px; z-index: 1000; }
#main:focus:not(:focus-visible) { outline: none; }        /* the skip link lands here; a keyboard still sees the ring */
.wz-skip-link { position: absolute; left: -9999px; } .wz-skip-link:focus { left: 12px; top: 12px; background: var(--panel); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.wz-top { display: flex; align-items: center; justify-content: space-between; max-width: 980px; margin: 0 auto; padding: 18px 20px; }
.wz-brand { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wz-maestry { font-family: "Fraunces", Georgia, serif; text-transform: none; letter-spacing: 0; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.wz-link, .wz-btn.text { background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.875rem; cursor: pointer; text-decoration: underline; padding: 6px; }
.wz-link:hover { color: var(--ink); }
.wz-stage { max-width: 980px; margin: 0 auto; padding: 0 20px 70px; }
.wz-steps { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 4px 0 22px; flex-wrap: wrap; }
.wz-steps li { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; font-size: 0.875rem; color: var(--muted); background: transparent; }
.wz-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line-soft); font-size: 0.8125rem; font-weight: 700; }
.wz-steps li.is-current { color: var(--accent-dark); background: var(--accent-soft); font-weight: 600; }
.wz-steps li.is-current span { background: var(--accent); color: #fff; }
.wz-steps li.is-done span { background: var(--green); color: #fff; font-size: 0; }
.wz-steps li.is-done span::after { content: "✓"; font-size: 0.875rem; }
.wz-live { position: absolute; left: -9999px; }
.wz-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 26px; padding: 38px 40px 34px; box-shadow: 0 24px 60px -32px rgba(20, 30, 60, .35); animation: wz-in .35s ease both; overflow: hidden; }
@keyframes wz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wz-card h1 { font-family: var(--font-head); font-size: 2rem; line-height: 1.1; margin: 0 0 8px; letter-spacing: 0; }
.wz-sub { margin: 0 0 22px; color: var(--muted); font-size: 1rem; line-height: 1.5; max-width: 60ch; }
.wz-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 36px; align-items: start; }
.wz-label { display: block; font-weight: 600; margin: 14px 0 6px; }
.wz-label em, .wz-sub em { font-style: normal; font-weight: 400; color: var(--muted); }
body.wz .wz-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 13px 16px; border: 1.5px solid var(--edge-input); border-radius: 14px; background: var(--panel); color: var(--ink); resize: vertical; }
body.wz .wz-input:focus, body.wz .wz-form input:focus, body.wz .wz-form select:focus, body.wz .wz-table input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
body.wz .wz-big { font-size: 1.5rem; padding: 16px 18px; font-weight: 600; }
.wz-hint { margin: 8px 2px 0; font-size: 0.875rem; color: var(--muted); }
.wz-error, .wz-hint.wz-error { color: var(--red); font-size: 0.875rem; margin: 8px 2px 0; }
.wz-ok { color: var(--green); font-size: 0.875rem; margin: 8px 2px 0; }
.wz-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }
.wz-btn { font: inherit; font-size: 1rem; font-weight: 600; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--edge-input); background: var(--panel); color: var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.wz-btn:hover:not(:disabled) { transform: translateY(-1px); }
.wz-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px var(--accent); }
.wz-btn.primary:hover:not(:disabled) { background: var(--accent-dark); }
.wz-btn.ghost:hover { background: var(--tint-hover); }
.wz-btn.big { font-size: 1.125rem; padding: 15px 30px; }
.wz-btn:disabled { opacity: .55; cursor: default; }
.wz-btn.is-busy { position: relative; }
.wz-drop { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 16px 18px; border: 2px dashed var(--edge-input); border-radius: 16px; background: var(--tint-faint); cursor: pointer; transition: background .14s, border-color .14s; }
.wz-drop:hover, .wz-drop.is-over, .wz-drop:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.wz-drop.is-busy { opacity: .6; }
.wz-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wz-drop-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--panel); color: var(--accent); font-size: 1.5rem; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.wz-drop small { display: block; color: var(--muted); font-size: 0.8125rem; margin-top: 2px; }
.wz-preview .wz-mock { display: grid; grid-template-columns: 38% 1fr; height: 210px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px -26px rgba(20, 30, 60, .5); background: var(--panel); }
.wz-mock-side { background: var(--nav-bg); padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.wz-mock-logo img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,.7); }
.wz-mock-name { font-family: var(--font-head); font-weight: 600; font-size: 0.875rem; line-height: 1.15; color: var(--nav-ink); overflow-wrap: anywhere; }
.wz-mock-powered { font-size: 7px; letter-spacing: .08em; color: var(--nav-ink-dim); margin-bottom: 4px; }
.wz-mock-line { height: 7px; width: 90%; border-radius: 4px; background: rgba(255,255,255,.55); } .wz-mock-line.short { width: 60%; }
.wz-mock-main { padding: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-content: start; }
.wz-mock-bar { grid-column: 1 / -1; height: 14px; width: 45%; border-radius: 5px; background: var(--line); }
.wz-mock-tile { height: 44px; border-radius: 9px; background: var(--accent-soft); }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wz-chip { font: inherit; font-size: 0.875rem; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--tint-faint); color: var(--ink); cursor: pointer; }
.wz-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.wz-source { padding: 10px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 0.9375rem; margin: 0 0 16px; }
.wz-source.is-good { background: var(--accent-soft); color: var(--accent-dark); }
.wz-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.wz-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
body.wz .wz-form input, body.wz .wz-form select { font: inherit; font-size: 1rem; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--edge-input); border-radius: 12px; background: var(--panel); color: var(--ink); }
.wz-row { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.wz-link-btn { font-size: 0.875rem; color: var(--accent); cursor: pointer; text-decoration: underline; }
.wz-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--tint-faint); font-size: 0.875rem; cursor: pointer; }
.wz-consent em { color: var(--muted); font-style: normal; }
.wz-warnings { margin: 0 0 12px; padding: 0 0 0 18px; color: var(--amber); font-size: 0.875rem; }
.wz-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; max-height: 46vh; overflow-y: auto; }
.wz-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.wz-table th { text-align: left; padding: 9px 10px; font-size: 0.875rem; font-weight: 650; color: var(--muted); background: var(--panel-head); position: sticky; top: 0; }
.wz-table td { padding: 4px 6px; border-top: 1px solid var(--line-soft); }
body.wz .wz-table input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9375rem; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); min-width: 80px; }
.wz-table input.wide { min-width: 140px; } .wz-table input.is-bad { border-color: var(--amber); background: var(--amber-soft); }
.wz-table input:hover { border-color: var(--line); }
.wz-x { border: 0; background: none; color: var(--muted); font-size: 1.25rem; cursor: pointer; padding: 2px 8px; border-radius: 8px; } .wz-x:hover { background: var(--red-soft); color: var(--red); }
.wz-done { text-align: center; padding-top: 44px; }
.wz-done .wz-sub { margin-left: auto; margin-right: auto; }
.wz-trial { display: inline-block; margin: 0 0 20px; padding: 12px 20px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-dark); font-size: 1rem; }
.wz-next { text-align: left; max-width: 520px; margin: 0 auto 8px; padding-left: 20px; line-height: 1.7; color: var(--muted); }
.wz-next strong { color: var(--ink); }
.wz-confetti { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; }
.wz-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; background: var(--accent); opacity: 0; animation: wz-fall 2.6s ease-out .1s both; }
.wz-confetti i:nth-child(3n) { background: var(--green); } .wz-confetti i:nth-child(3n+1) { background: var(--amber); } .wz-confetti i:nth-child(4n) { background: var(--red); }
.wz-confetti i:nth-child(1) { left: 6%; animation-delay: .05s; } .wz-confetti i:nth-child(2) { left: 14%; animation-delay: .3s; } .wz-confetti i:nth-child(3) { left: 23%; animation-delay: .15s; }
.wz-confetti i:nth-child(4) { left: 33%; animation-delay: .45s; } .wz-confetti i:nth-child(5) { left: 42%; animation-delay: .1s; } .wz-confetti i:nth-child(6) { left: 51%; animation-delay: .35s; }
.wz-confetti i:nth-child(7) { left: 60%; animation-delay: .2s; } .wz-confetti i:nth-child(8) { left: 69%; animation-delay: .5s; } .wz-confetti i:nth-child(9) { left: 77%; animation-delay: .08s; }
.wz-confetti i:nth-child(10) { left: 85%; animation-delay: .28s; } .wz-confetti i:nth-child(11) { left: 92%; animation-delay: .4s; } .wz-confetti i:nth-child(12) { left: 48%; animation-delay: .6s; }
@keyframes wz-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(340px) rotate(420deg); } }
@media (max-width: 760px) {
  .wz-card { padding: 26px 20px 24px; border-radius: 20px; } .wz-card h1 { font-size: 2rem; }
  .wz-split { grid-template-columns: 1fr; gap: 22px; } .wz-preview { order: -1; } .wz-form { grid-template-columns: 1fr; }
  .wz-steps li { padding: 4px; font-size: 0; } .wz-steps li span { font-size: 0.8125rem; }
  .wz-actions .wz-btn { flex: 1 1 auto; text-align: center; }
}

body.wz .wz-done .wz-actions { justify-content: center; }

/* Getting started checklist (a new customer's dashboard) */
.gs-bar { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; margin-bottom: 12px; } .gs-bar > span { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.gs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 20px; }
.gs-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.9375rem; }
.gs-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--edge-input); font-size: 0.8125rem; color: #fff; flex: none; }
.gs-list li.is-done .gs-tick { background: var(--green); border-color: var(--green); } .gs-list li.is-done { color: var(--muted); }
@media (max-width: 600px) {
  .wz-table thead { display: none; } .wz-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px; border-top: 1px solid var(--line-soft); } .wz-table tr:first-child { border-top: 0; }
  .wz-table td { border: 0; padding: 0; } .wz-table td::before { content: attr(data-label); display: block; font-size: 0.8125rem; color: var(--muted); margin-bottom: 2px; }
  .wz-table td:first-child, .wz-table td:nth-child(5) { grid-column: 1 / -1; } .wz-table td:last-child { grid-column: 1 / -1; text-align: right; } .wz-table td:last-child::before { content: none; }
  .wz-table input, .wz-table input.wide { min-width: 0; border-color: var(--line); }
}

/* ---- Invoices: folders with unread badges, move bar, drag to folder, email preview (templates/invoices_list.html, invoice_detail.html,
        invoice_email_preview.html, static/invoices_ui.js). Same look as Resources: soft cards, pills, generous spacing. ----------------------- */
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--tint-hover); border-color: var(--line); }
.btn .icon { vertical-align: -3px; margin-right: 6px; }
.btn.small .icon { margin-right: 4px; }

.iv-folders { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.iv-folder { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-weight: 550; font-size: 0.9375rem; transition: background .15s, border-color .15s, transform .15s; }
.iv-folder:hover { text-decoration: none; border-color: var(--edge-hover); background: var(--tint-hover); }
.iv-folder .icon { color: var(--muted); }
.iv-folder.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.iv-folder.is-on .icon { color: #fff; }
.iv-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 0.8125rem; font-weight: 700;
  background: var(--accent); color: #fff; font-variant-numeric: tabular-nums; }
.iv-folder.is-on .iv-unread { background: #fff; color: var(--accent-dark); }
body.iv-dragging .iv-folder:not(.is-on) { border-style: dashed; border-color: var(--accent); }
.iv-folder.is-over { transform: scale(1.06); background: var(--accent-soft); border-style: solid !important; }

.iv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 16px; }
.iv-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.iv-stat-label { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.iv-stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.iv-stat-sub { font-size: 0.8125rem; color: var(--muted); }
.iv-stat.is-due .iv-stat-value, .iv-stat-sub.is-due { color: var(--amber); }
.iv-stat.is-settled .iv-stat-value { color: var(--green); }

.iv-bar .rs-chip { text-decoration: none; }
.iv-filter { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.iv-filter select { min-height: 36px; height: auto; max-width: 200px; }
.iv-filter.is-live .iv-apply { display: none; }

.iv-card { padding: 0; overflow: visible; }
/* The move bar below is position: fixed, and a backdrop-filter makes an element the containing block of its fixed children: under the
   glass themes (blue, the default) the bar was pinned to the bottom of this card, out of sight under a long list, not to the window. */
.card.iv-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel); }
.iv-check { width: 36px; }
.iv-row { transition: background .12s; }
.iv-row:hover { background: var(--tint-hover); }
.iv-row.is-picked { background: var(--accent-soft); }
.iv-row.is-dragged { opacity: .5; }
.iv-row[draggable="true"] { cursor: default; }
/* A number wraps at its hyphens when the column is tight (the invoice_number filter keeps '2026-003' together); a prefix is free text. */
.iv-num { position: relative; display: inline-block; font-weight: 600; overflow-wrap: anywhere; }   /* a long unbroken number breaks rather than push the table off the card */
.iv-row.is-unread .iv-num, .iv-row.is-unread .iv-client { font-weight: 750; }
/* The unread dot sits in the gutter to the left of the number's first line, so read and unread numbers start on the same line as
   'issued' beneath. */
.iv-dot { position: absolute; left: -13px; top: calc(.5lh - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.iv-issued { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
.iv-sub-period { display: none; }
.iv-client { display: inline-flex; align-items: center; gap: 9px; }
.iv-mono { --bg: color-mix(in srgb, hsl(var(--h) 78% 52%) 16%, var(--panel)); --fg: color-mix(in srgb, hsl(var(--h) 62% 38%) 78%, var(--ink));
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); color: var(--fg);
  font-weight: 700; font-size: 0.875rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(var(--h) 60% 50%) 24%, transparent); }
.iv-mono-lg { width: 64px; height: 64px; font-size: 1.5rem; }
.iv-owed { color: var(--amber); font-weight: 600; }
.iv-row-menu, .iv-row-menu-h { width: 44px; text-align: right; }
.iv-hint { margin: 0; padding: 10px 16px 14px; font-size: 0.8125rem; color: var(--muted); }
body:not(.iv-js) .iv-hint { display: none; }

.iv-menu { position: relative; display: inline-block; }
.iv-menu > summary { list-style: none; cursor: pointer; }
.iv-menu > summary::-webkit-details-marker { display: none; }
.iv-menu-pop { position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-dialog); text-align: left; }
.iv-menu-pop form { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.iv-menu-title { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding: 4px 8px; }
.iv-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: 0.9375rem; color: var(--ink); cursor: pointer; text-align: left; }
.iv-menu-item:hover, .iv-menu-item:focus-visible { background: var(--tint-hover); }
.iv-menu-item .icon { color: var(--muted); }
.iv-menu-sep { height: 1px; background: var(--line-soft); margin: 4px 2px; }

/* The move bar: fixed along the bottom while anything is ticked. Without JavaScript it simply sits under the table. */
.iv-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.iv-selcount { font-size: 0.9375rem; margin-right: 6px; }
.iv-seltitle { font-size: 0.8125rem; color: var(--muted); }
.iv-selsep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
body.iv-js .iv-selbar { position: fixed; left: 50%; bottom: 22px; z-index: 50; transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel);
  box-shadow: var(--shadow-dialog); transition: transform var(--t-ui) ease, opacity var(--t-ui) ease; }
body.iv-js .iv-selbar.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
body:not(.iv-js) .iv-selcount, body:not(.iv-js) .iv-clear { display: none; }

.iv-crumbs { margin: 0 0 10px; font-size: 0.875rem; }
.iv-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.iv-crumbs a:hover { color: var(--accent); }
.iv-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin: 0 0 18px; }
.iv-hero-main { flex: 1 1 300px; min-width: 0; }
.iv-hero-main h1 { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.iv-hero-sub { margin: 0; color: var(--muted); }
.iv-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.iv-menu-right { right: 0; left: auto; }
/* Payment link: the provider and the button side by side at their own widths (in the .row grid the button stretched to half the card). */
.iv-link-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.iv-link-form .field { flex: 0 1 280px; min-width: 0; margin-bottom: 0; }

.iv-preview { display: grid; grid-template-columns: minmax(260px, 330px) 1fr; gap: 16px; align-items: start; }
.iv-preview-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.iv-preview-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.iv-panel { padding: 16px; margin: 0; }
.iv-panel h2 { margin: 0 0 10px; font-size: 1rem; }
/* These panels carry their own 16px padding, so their headings are plain headings, not the card's tinted header band: the band sat
   inset in the panel and pushed each heading 16px right of the text under it. */
.iv-preview .card.iv-panel > h2 { padding: 0; background: none; border-bottom: 0; display: block; }
.iv-person { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.iv-person:first-of-type { border-top: 0; }
.iv-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: 0.875rem; }
.iv-facts dt { color: var(--muted); }
.iv-facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.iv-note { background: var(--amber-soft); color: var(--amber); padding: 8px 10px; border-radius: 10px; margin: 0 0 12px; }
.iv-send-btn { width: 100%; justify-content: center; padding: 11px 14px; font-size: 1rem; }
.iv-mail-head { display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--line-soft); font-size: 0.9375rem; }
.iv-mail-head > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; }   /* a long subject wraps under itself */
.iv-mail-k { display: inline-block; min-width: 64px; color: var(--muted); font-size: 0.8125rem; }
/* The file's icon and name sit together: `.card > h2` (space-between) outranked a plain .iv-doc-title and threw the name to the far right. */
.iv-preview .card.iv-panel > h2.iv-doc-title { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
/* Raise invoices: should the preview ever be wider than its card, it scrolls inside it rather than losing Total past the clipped edge. */
.iv-gen-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.iv-frame { width: 100%; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; display: block; }
.iv-frame-mail { height: 420px; }
.iv-frame-doc { height: 1000px; }

@media (max-width: 900px) {
  .iv-preview { grid-template-columns: 1fr; }
  .iv-preview-side { position: static; }
  .iv-filter { margin-left: 0; width: 100%; }
  .iv-filter select { flex: 1; max-width: none; }
}
/* The invoice list and the Raise invoices preview fold by the room their card really has, not by the window's width. The list's card
   was 625 to 1003px wide from 761 to 1279px while its nine columns needed 936px, so the table ran out of the card and off the window and
   Period folded to one word a line; Raise invoices lost its Total column past the card's clipped edge; and the Reading panel's larger
   text needs more room again. So each table's wrapper is a size container whose thresholds are in em of the wrapper: 1rem (the reader's
   text size), a little more under wide letter spacing. That font size is only the ruler: every size in the tables is in rem or px, so it
   changes nothing you see. Measured at the default size: the full list needs 56em (61 with wide spacing, before the ruler), the folded
   list 40em (43), Raise invoices 39em (43).
   Under 58em: the list's Period moves under the invoice number, the client's initial goes and the cells are tighter.
   Under 42em: each row becomes a labelled block, as on a phone (the same rules as table.stack under 760px, which still apply there). */
.iv-wrap, .iv-gen-wrap { container: ivfold / inline-size; font-size: 1rem; }
html[data-read-spacing="wide"] .iv-wrap, html[data-read-spacing="wide"] .iv-gen-wrap { font-size: 1.09rem; }
@container ivfold (max-width: 58em) {
  .iv-table th, .iv-table td { padding-left: 8px; padding-right: 8px; }
  .iv-table .iv-col-period, .iv-table .iv-mono { display: none; }
  .iv-sub-period { display: block; }
}
@container ivfold (max-width: 42em) {
  .iv-fold, .iv-fold tbody, .iv-fold tr, .iv-fold td { display: block; }
  .iv-fold thead, .iv-sub-period { display: none; }
  .iv-fold tr { padding: 11px 14px; border-bottom: 1px solid var(--line); }
  .iv-fold td { padding: 3px 0; border: none; text-align: left; white-space: normal; }
  .iv-fold td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
  .iv-fold td[data-label]::before { content: attr(data-label); flex: none; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
  .iv-fold td.cell-main { position: relative; font-size: 1rem; font-weight: 600; padding: 0 18px 6px 0; }
  .iv-table .iv-col-period { display: flex; }
  .iv-table .iv-mono { display: inline-grid; }
  /* Every value ends on the one right-hand edge: the Select box, the row menu's dots (the button's padding all moves to its left, so it
     keeps its size to tap) and the unread dot, which moves to the end of the number's line. */
  .iv-check { width: auto; }
  .iv-check input { margin-right: 0; }
  .iv-row-menu, .iv-row-menu-h { width: auto; text-align: left; }
  .iv-row-menu .iv-menu > summary { padding-left: 24px; padding-right: 0; }
  .iv-row-menu .iv-menu > summary .icon { margin-right: -3px; }   /* its last dot is drawn 2.5px in from the icon's edge */
  .iv-num { position: static; }
  .iv-dot { left: auto; right: 0; }
}
@media (max-width: 760px) {
  .iv-hero-main h1 { font-size: 1.5rem; }
  .iv-frame-doc { height: 720px; }
  body.iv-js .iv-selbar { bottom: 12px; border-radius: 14px; }
}

/* ---- Lessons: a diary, day by day (templates/lessons_list.html, static/lessons_ui.js). Reuses the invoice tabs, stats and menus. Each lesson is
        one row of five parts that never overflow the page; below 760px a row becomes a two-line card. ----------------------------------------- */
a.iv-menu-item { text-decoration: none; }
.iv-menu-item.ls-danger { color: var(--red); }
.iv-menu-item.ls-danger .icon { color: var(--red); }
.ls-warn { background: var(--amber); }
.iv-folder.is-on .ls-warn { background: #fff; color: var(--amber); }
.ls-count { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.iv-folder.is-on .ls-count { color: rgba(255, 255, 255, .85); }
.ls-sep { color: var(--muted); font-weight: 400; }

.ls-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 16px; }
.ls-month { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ls-month-form { margin: 0; }
.ls-month input[type=month] { min-height: 36px; height: auto; min-width: 0; width: 170px; }
.ls-month .ls-arrow { font-size: 1.5rem; line-height: 1; min-width: 36px; height: 36px; padding: 0 8px; display: inline-grid; place-items: center; }
.ls-search { flex: 1 1 220px; max-width: 360px; }
.ls-month .rs-chip { text-decoration: none; }

.ls-days { display: flex; flex-direction: column; gap: 18px; }
.ls-day[hidden] { display: none; }
.ls-day { scroll-margin-top: 76px; }            /* clears the sticky top bar, so the day heading shows */
.ls-day-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding: 0 4px; }
.ls-day-head h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.ls-day.is-today .ls-day-head h2 { color: var(--accent); }
.ls-day-meta { font-size: 0.8125rem; color: var(--muted); }
.ls-list { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: visible; }
.ls-day.is-today .ls-list { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft); }

.ls-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px 216px 124px; align-items: center; gap: 14px;
  padding: 12px 16px; border-top: 1px solid var(--line-soft); transition: background .12s; }
.ls-row:first-child { border-top: 0; }
.ls-row:hover { background: var(--tint-hover); }
.ls-row:first-child { border-radius: 16px 16px 0 0; }
.ls-row:last-child { border-radius: 0 0 16px 16px; }
.ls-row:only-child { border-radius: 16px; }
.ls-row[hidden] { display: none; }
.ls-row.is-unmatched { background: color-mix(in srgb, var(--amber-soft) 55%, transparent); }
.ls-row.ls-cancelled_free .ls-name, .ls-row.ls-rescheduled .ls-name { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); }

.ls-time { display: flex; flex-direction: column; line-height: 1.25; }
.ls-time strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.ls-time span { font-size: 0.8125rem; color: var(--muted); }
.ls-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ls-who .av { width: 36px; height: 36px; }
.ls-q-av { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--amber-soft); color: var(--amber); font-weight: 700; }
.ls-who-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ls-name { font-size: 1rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-sub { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.ls-sub a { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ls-sub a:hover { color: var(--accent); }
.ls-event { overflow: hidden; text-overflow: ellipsis; }
.ls-event::before { content: "·"; margin-right: 8px; }
.ls-src { display: inline-flex; color: var(--muted); opacity: .8; }
.ls-assign { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; }
.ls-assign select { min-width: 0; max-width: 100%; flex: 1 1 180px; min-height: 34px; height: auto; }

.ls-money { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ls-money strong { font-variant-numeric: tabular-nums; }
.ls-money span { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }

.ls-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ls-status form { width: 100%; }
.ls-status form { margin: 0; }
.ls-status-pick { height: 32px; padding: 2px 26px 2px 10px; font-size: 0.875rem; font-weight: 600; border-radius: 999px; width: 100%; max-width: 216px; }
.ls-status-pick.tone-green { background-color: var(--green-soft); color: var(--green); border-color: transparent; }
.ls-status-pick.tone-blue { background-color: var(--accent-soft); color: var(--accent-dark); border-color: transparent; }
.ls-status-pick.tone-amber { background-color: var(--amber-soft); color: var(--amber); border-color: transparent; }
.ls-status-pick.tone-grey { background-color: var(--tint-faint); color: var(--muted); border-color: transparent; }
.ls-inv { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--muted); }
.ls-inv:hover { color: var(--accent); }

.ls-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ls-actions .jl { display: inline-flex; gap: 6px; }

@media (max-width: 1100px) {
  .ls-row { grid-template-columns: 56px minmax(0, 1fr) 216px 110px; }
  .ls-money { display: none; }
}
@media (max-width: 760px) {
  .ls-bar { gap: 10px; }
  .ls-search { max-width: none; flex-basis: 100%; }
  .ls-month { width: 100%; }
  .ls-month input[type=month] { flex: 1; width: auto; }
  .ls-row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "time who actions" "time status money"; gap: 8px 12px; padding: 12px; }
  /* scoped to .ls-row: these area names exist only there (an unscoped grid-area put every child of Home's rows in the first cell) */
  .ls-row .ls-time { grid-area: time; align-self: start; }
  .ls-row .ls-who { grid-area: who; }
  .ls-row .ls-actions { grid-area: actions; align-self: start; }
  .ls-status { grid-area: status; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ls-status form { width: auto; flex: 1 1 170px; max-width: 220px; }
  .ls-money { grid-area: money; display: flex; align-self: center; }
  .ls-who .av, .ls-q-av { width: 32px; height: 32px; }
  .ls-actions .jl-text { display: none; }
  .ls-name { white-space: normal; }
  .ls-stats.iv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ls-stats .iv-stat { padding: 10px; border-radius: 12px; }
  .ls-stats .iv-stat-value { font-size: 1rem; overflow-wrap: anywhere; }
  .ls-stats .iv-stat-label { font-size: 0.6875rem; }
  .ls-stats .iv-stat-sub { font-size: 0.75rem; }
  .ls-status-pick { font-size: 0.9375rem; }
}

/* ---- Calendar (templates/schedule.html, static/schedule_ui.js): soft tinted events with a coloured edge, a now line, overlaps that only share
        width where they really clash, and on a phone a day-by-day list instead of seven crushed columns. ------------------------------------- */
.cal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; margin: 0 0 12px; }
.cal-eyebrow { margin: 0 0 2px; font-size: 0.8125rem; color: var(--muted); }
.cal-head h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; }
.cal-tools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.cal-views { display: flex; gap: 6px; }
.cal-views .rs-chip { text-decoration: none; }
.cal-nav { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel); }
.cal-nav .btn { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.cal-nav .btn:hover { background: var(--tint-hover); }
.cal-nav .cal-arrow { font-size: 1.25rem; line-height: 1; padding: 6px 14px; }
.cal-nav .cal-jump { border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); font-weight: 600; min-width: 96px; justify-content: center; }

.cal-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.cal-summary .rs-pill { font-size: 0.875rem; padding: 5px 11px; background: var(--panel); border: 1px solid var(--line); }
.cal-summary .rs-pill strong { color: var(--ink); }
.cal-pill-warn { background: var(--amber-soft) !important; border-color: transparent !important; color: var(--amber) !important; font-weight: 600; text-decoration: none; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; font-size: 0.8125rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* one colour set for events, chips, dots and the legend */
.ev-blue { --ev: var(--cal-scheduled); } .ev-green { --ev: var(--cal-delivered); } .ev-amber { --ev: var(--cal-needs-client); } .ev-muted { --ev: var(--cal-cancelled); }
.cal-legend i, .cal-dots i { background: var(--ev); }

.cal-card { padding: 0; overflow: visible; }
.cal-card .cal-grid { border-radius: 16px; }
.cal-day-head { gap: 1px; }
.cal-day-head .cal-day-n { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.cal-day-head.today .dom { background: var(--accent); color: #fff; border-radius: 999px; min-width: 30px; padding: 1px 8px; }
.cal-col.is-today { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cal-hour-row { height: 52px; }
.cal-hour-label { height: 52px !important; box-sizing: border-box; }      /* the same height as a grid row, so labels never drift */
.cal-event.is-narrow .ev-end { display: none; }
.cal-hour-label:first-child { transform: none; }            /* the first would otherwise hide under the day headings */

.cal-event { background: color-mix(in srgb, var(--ev) 16%, var(--panel)) !important; color: var(--ink) !important; border: 0; border-left: 3px solid var(--ev);
  border-radius: 8px; padding: 4px 6px 4px 7px; box-shadow: 0 1px 2px rgba(20, 30, 60, .08); overflow: hidden; transition: box-shadow .12s, transform .12s; }
.cal-event:hover { box-shadow: 0 6px 16px -8px rgba(20, 30, 60, .45); transform: translateY(-1px); filter: none; z-index: 3; }
.cal-event .ev-time { font-size: 0.75rem; font-weight: 700; color: color-mix(in srgb, var(--ev) 70%, var(--ink)); opacity: 1; }
.cal-event .ev-end { font-weight: 500; opacity: .75; }
.cal-event .ev-title { font-size: 0.875rem; font-weight: 650; }
.cal-event .ev-sub { color: var(--muted) !important; opacity: 1; }
.cal-event.ev-muted .ev-title { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); }
.cal-event.is-short { padding-top: 2px; padding-bottom: 2px; }
.cal-event.is-short .ev-main { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.cal-event.is-short .ev-end, .cal-event.is-short .ev-sub { display: none; }
.cal-event .ev-links .jl-btn { background: var(--panel); box-shadow: 0 1px 2px rgba(20, 30, 60, .15); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 4; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

.cal-month-day { min-height: 112px; gap: 3px; display: flex; flex-direction: column; }
.cal-month-day.today { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.cal-month-daynum { align-self: flex-start; }
@media (max-width: 760px) { .cal-month-daynum { align-self: center; } }
.cal-month-chip { background: color-mix(in srgb, var(--ev) 16%, var(--panel)) !important; color: var(--ink) !important; border-left: 3px solid var(--ev);
  border-radius: 6px; padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-time { font-weight: 700; color: color-mix(in srgb, var(--ev) 70%, var(--ink)); }
.cal-dots { display: none; }
.cal-agenda { display: none; }

@media (max-width: 760px) {
  .cal-head h1 { font-size: 1.25rem; }
  .cal-tools { width: 100%; justify-content: space-between; }
  .cal-tools > .btn.primary { order: 3; width: 100%; justify-content: center; }
  .cal-legend { margin-left: 0; width: 100%; gap: 10px; }
  /* week: the list replaces the grid */
  .cal-desktop:not(.cal-oneday) { display: none; }
  .cal-agenda { display: flex; flex-direction: column; gap: 12px; }
  .cal-ag-day { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; scroll-margin-top: 64px; }
  .cal-ag-day.is-today { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft); }
  .cal-ag-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; background: var(--tint-faint); color: var(--ink); text-decoration: none; }
  .cal-ag-day.is-today .cal-ag-head { color: var(--accent); }
  .cal-ag-n { font-size: 0.8125rem; color: var(--muted); }
  .cal-ag-day ul { list-style: none; margin: 0; padding: 0; }
  .cal-ag-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-soft); border-left: 4px solid var(--ev); }
  .cal-ag-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
  .cal-ag-time { display: flex; flex-direction: column; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; }
  .cal-ag-time small, .cal-ag-who small { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
  .cal-ag-who { display: flex; flex-direction: column; min-width: 0; }
  .cal-ag-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-ag-row.ev-muted strong { text-decoration: line-through; color: var(--muted); }
  /* month: dots instead of chips, so seven days fit across */
  .cal-month-day { min-height: 58px; padding: 5px 3px; align-items: center; }
  .cal-month-chip, .cal-month-more { display: none; }
  .cal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; }
  .cal-dots i { width: 7px; height: 7px; border-radius: 50%; }
  .cal-dots b { font-size: 0.6875rem; line-height: 7px; color: var(--muted); }
  .cal-month-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-month-dow div { font-size: 0.6875rem; padding: 6px 0; }
}

/* ---- Clients (templates/clients_list.html, client_detail.html, static/clients_ui.js): family cards like Resources, and a client page with pupil
        cards, section links and tables that stack on a phone. ----------------------------------------------------------------------------------- */
.cl-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cl-card.is-archived { opacity: .7; }
.cl-mono { width: 44px; height: 44px; font-size: 1.125rem; }
.cl-cur { margin-left: auto; align-self: flex-start; }
.cl-pupils { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; }
.cl-pupil { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--tint-faint); font-size: 0.8125rem; }
.cl-pupil .av { width: 26px; height: 26px; }
.cl-none, .cl-more { font-size: 0.8125rem; color: var(--muted); }
.cl-owed { background: var(--amber-soft); color: var(--amber); }
.cl-owed.is-overdue { background: var(--red-soft); color: var(--red); }
.cl-clear { background: var(--green-soft); color: var(--green); }

.cl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.cl-sections { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.cl-sections a { font-size: 0.875rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; }
.cl-sections a:hover { border-color: var(--edge-hover); background: var(--tint-hover); }
.cl-sections a span { color: var(--muted); margin-left: 4px; }
.cl-section, #invoices, #lessons, #details, #matching, #payments, #portal { scroll-margin-top: 70px; }

.cl-pupil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 14px 16px; }
.cl-pupil-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); min-width: 0; }
.cl-shared { background: var(--tint-faint); }
.cl-pc-head { display: flex; align-items: center; gap: 12px; }
.cl-pc-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cl-pc-name { font-size: 1rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-pc-sub { font-size: 0.8125rem; color: var(--muted); }
.cl-rates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-rates li { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 10px; border-radius: 10px; background: var(--tint-faint); }
.cl-rate-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-rate-what { font-size: 0.8125rem; color: var(--muted); flex: 1; min-width: 0; }
.cl-rate-none { font-size: 0.8125rem; color: var(--amber); background: var(--amber-soft) !important; }
.cl-x { color: var(--muted); padding: 3px 6px; }
.cl-x:hover { color: var(--red); }
.cl-pc-links { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.875rem; align-items: center; }
.cl-pupil-card .pupil-links { margin: 0; }
.cl-add { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 16px; align-items: flex-start; }
.cl-add-box { flex: 1 1 320px; }
.cl-add-box > summary { list-style: none; cursor: pointer; display: inline-flex; }
.cl-add-box > summary::-webkit-details-marker { display: none; }
.cl-add-box[open] { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.cl-add-box[open] > summary { margin-bottom: 10px; }

@media (max-width: 760px) {
  .cl-pupil-grid { grid-template-columns: 1fr; padding: 12px; }
  .cl-sections { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .cl-sections a { white-space: nowrap; }
  .cl-add { padding: 0 12px 12px; }
}
@media (max-width: 760px) {
  /* summary cards: two to a row on a phone instead of a tall stack (lessons uses three: .ls-stats) */
  .iv-stats:not(.ls-stats) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .iv-stats:not(.ls-stats) .iv-stat { padding: 10px 12px; border-radius: 12px; }
  .iv-stats:not(.ls-stats) .iv-stat-value { font-size: 1.125rem; overflow-wrap: anywhere; }
  .iv-stats:not(.ls-stats) .iv-stat-label { font-size: 0.6875rem; }
  .iv-stats:not(.ls-stats) .iv-stat-sub { font-size: 0.75rem; }
}
.cl-rule { overflow-wrap: anywhere; }

/* ---- Expenses, Reports, Tax (templates/expenses_list.html, reports.html, tax.html): period chips, bar lists, month groups, a tax headline. ---- */
.ex-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; margin: 0 0 10px; }
.ex-bar .rs-chip, .ex-cats .rs-chip, .tx-years .rs-chip { text-decoration: none; }
.ex-more { flex: 1 1 auto; }
.ex-more > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ex-more > summary::-webkit-details-marker { display: none; }
.ex-form { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ex-form .field { margin: 0; flex: 1 1 150px; }
.ex-cats { margin: 0 0 16px; }
.ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.ex-months { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ex-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 64px; }
.ex-panel { padding: 0 0 8px; margin: 0; }
.ex-panel .bar-list { padding: 6px 10px; }
.ex-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 110px auto; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line-soft); }
.ex-row:first-child { border-top: 0; }
.ex-row:hover { background: var(--tint-hover); }
.ex-icon .av { width: 34px; height: 34px; }
.ex-main { display: flex; flex-direction: column; min-width: 0; }
.ex-sup { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-sub { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-amt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ex-amt strong { font-variant-numeric: tabular-nums; }
.ex-amt span { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.ex-actions { display: flex; align-items: center; gap: 2px; }
.ex-norcpt { display: inline-grid; place-items: center; width: 30px; color: var(--line); }

.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bar-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.bar-list a:hover { background: var(--tint-hover); }
.bl-name { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-name small, .bl-val small { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.bl-val { font-size: 0.875rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--tint-faint); overflow: hidden; }
.bl-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ex-panel .bl-bar i, .rp-bars-exp .bl-bar i { background: #e9730c; }
.rp-bars { padding: 6px 10px 12px; }

.rp-curs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 0 0 8px; }
.rp-cur { padding: 14px 16px; margin: 0; }
.rp-cur-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.rp-cur-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 0.875rem; }
.rp-cur-kv dt { color: var(--muted); }
.rp-cur-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rp-note { margin: 0 0 16px; }
.rp-legend { display: inline-flex; gap: 12px; font-size: 0.8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.rp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rp-inc { background: var(--accent); } .rp-exp { background: #e9730c; }
.rp-chart { padding: 12px 16px 8px; }
.rp-chart .col { text-decoration: none; border-radius: 8px; }
.rp-chart .col:hover, .rp-chart .col.is-on { background: var(--tint-hover); }
.rp-chart .bar { border-radius: 4px 4px 0 0; }
.rp-owed { list-style: none; margin: 0; padding: 4px 0; }
.rp-owed li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line-soft); }
.rp-owed li:first-child { border-top: 0; }
.rp-owed-main { display: flex; flex-direction: column; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.rp-owed-main span { font-size: 0.8125rem; color: var(--muted); }
.rp-owed-amt { font-variant-numeric: tabular-nums; }

.tx-years { margin: 0 0 14px; }
.tx-hero { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; }
.tx-hero > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); flex: 1 1 200px; }
.tx-hero-main { flex: 2 1 320px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel)) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) !important; }
.tx-hero-label { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.tx-hero-value { font-size: 2rem; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tx-hero-pct { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tx-hero-sub { font-size: 0.875rem; color: var(--muted); }
.policy-mini td:first-child { padding-right: 14px; }

@media (max-width: 1000px) {
  .ex-layout { grid-template-columns: 1fr; }
  .ex-side { position: static; }
}
@media (max-width: 760px) {
  .ex-bar > .rs-chips, .ex-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .ex-bar .rs-chip, .ex-cats .rs-chip { white-space: nowrap; }
  .ex-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "icon main amt" "icon cat actions"; gap: 4px 10px; padding: 10px 12px; }
  .ex-icon { grid-area: icon; align-self: start; } .ex-main { grid-area: main; } .ex-amt { grid-area: amt; }
  .ex-cat { grid-area: cat; justify-self: start; } .ex-actions { grid-area: actions; justify-self: end; }
  .tx-hero-value { font-size: 2rem; }
  .rp-chart .tick { font-size: 0.6875rem; }
}

/* ---- Session reports (templates/session_reports*.html, static/session_reports_ui.js) ------------------------------------------------------------ */
.sr-pupils { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sr-pupil { display: inline-flex; align-items: center; gap: 7px; padding: 3px 6px 3px 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 0.875rem; }
.sr-pupil:hover { border-color: var(--edge-hover); background: var(--tint-hover); }
.sr-pupil .av { width: 28px; height: 28px; }
.sr-pupil b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 0.75rem; display: inline-grid; place-items: center; }
.sr-section { margin: 0 0 22px; }
.sr-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.sr-head h2 { margin: 0; font-size: 1.125rem; }
.sr-tools { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.sr-tools .btn:disabled { opacity: .5; cursor: default; }
.sr-row { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line-soft); }
.sr-row:first-child { border-top: 0; }
.sr-row:hover { background: var(--tint-hover); }
.sr-row.is-picked { background: var(--accent-soft); }
.sr-name { color: var(--ink); text-decoration: none; }
.sr-name:hover { color: var(--accent); }
.sr-written { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sr-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink);
  text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.sr-card:hover { transform: translateY(-2px); border-color: var(--edge-hover); box-shadow: 0 8px 22px -12px rgba(20, 30, 60, .35); text-decoration: none; }
.sr-card-top { display: flex; align-items: center; gap: 10px; }
.sr-card-main { display: flex; flex-direction: column; min-width: 0; }
.sr-card-main span { font-size: 0.8125rem; color: var(--muted); }
.sr-card-body { font-size: 0.875rem; line-height: 1.45; color: var(--ink); }
.sr-card-next { font-size: 0.8125rem; color: var(--muted); }
.sr-write { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 18px; align-items: start; }
.sr-fields { padding: 16px; margin: 0 0 12px; }
.sr-field textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.sr-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; bottom: 12px; z-index: 5; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-dialog); }
.sr-spacer { flex: 1; }
/* Dictation on the write page: the assistant's microphone (soundwave while listening), what was heard, and an Undo. */
.sr-voice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; margin: 0 0 12px; }
.sr-voice[hidden], .sr-voice [hidden] { display: none; }
.sr-voice .assistant-mic:disabled { opacity: .5; cursor: default; }
.sr-voice-main { flex: 1; min-width: 0; }
.sr-voice-main p { margin: 2px 0 0; }
.sr-voice-status { color: var(--muted); }
.sr-voice-status.sr-voice-error { color: var(--amber); }
.sr-voice-heard { max-height: 120px; overflow-y: auto; margin-top: 6px !important; padding: 6px 10px; border-left: 3px solid var(--line); background: var(--tint-hover); border-radius: 0 5px 5px 0; line-height: 1.45; }
.sr-voice-privacy { margin-top: 6px !important; }
.sr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sr-side .card { margin: 0; }
.sr-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.sr-block { padding: 0; margin: 0; }
.sr-text { padding: 12px 16px 16px; white-space: pre-wrap; line-height: 1.55; }
@media (max-width: 900px) {
  .sr-write { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sr-pupils { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .sr-pupil { white-space: nowrap; }
  .sr-row { grid-template-columns: 22px 48px minmax(0, 1fr); grid-template-areas: "box time who" "box time write"; gap: 6px 10px; padding: 10px 12px; }
  .sr-row > input { grid-area: box; align-self: start; margin-top: 4px; }
  .sr-row .ls-time { grid-area: time; align-self: start; }
  .sr-row .ls-who { grid-area: who; }
  .sr-row > .btn { grid-area: write; justify-self: start; }
}
@media print {
  .iv-hero-actions, .iv-crumbs { display: none !important; }
  .sr-view { display: block; }
  .sr-block { break-inside: avoid; margin-bottom: 12px; }
}

/* ---- Settings (templates/settings.html, static/settings_ui.js): a section list beside the cards, a header per card, a save bar that stays in view -- */
.st-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.st-nav { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.st-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; color: var(--ink); font-size: 0.875rem; text-decoration: none; }
.st-nav a .icon { color: var(--muted); }
.st-nav a:hover { background: var(--tint-hover); }
.st-nav a.is-on { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.st-nav a.is-on .icon { color: var(--accent); }
.st-main { min-width: 0; }
.st-card { scroll-margin-top: 70px; }
.st-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 4px; }
.st-head h2 { margin: 0; padding: 0; font-size: 1rem; background: none; border: 0; text-transform: none; letter-spacing: 0; }
.st-head p { margin: 2px 0 0; font-size: 0.875rem; color: var(--muted); }
.st-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); flex: none; }
.st-save { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 18px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-dialog); }
.st-dirty { font-size: 0.875rem; color: var(--muted); margin-right: auto; }
.st-save.is-dirty { border-color: var(--amber); }
.st-save.is-dirty .st-dirty { color: var(--amber); font-weight: 600; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-grid > .card { margin: 0; }
.st-grid .st-wide { grid-column: 1 / -1; }
#expense-rules { margin-top: 16px; }
@media (max-width: 900px) {
  .st-layout { grid-template-columns: 1fr; }
  .st-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .st-nav a { white-space: nowrap; }
  .st-grid { grid-template-columns: 1fr; }
}

/* ---- Policies (templates/policies.html, policy.html, static/policies_ui.js): documents as cards; a reading column with contents and a to-confirm list -- */
.po-group { margin: 0 0 20px; }
.po-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.po-group-head h2 { margin: 0; font-size: 1.125rem; }
.po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.po-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 14px 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.po-card { text-align: left; align-items: stretch; justify-items: start; }
.po-card > span { text-align: left; }
.po-card:hover { transform: translateY(-2px); border-color: var(--edge-hover); box-shadow: 0 8px 22px -12px rgba(20, 30, 60, .35); text-decoration: none; }
.po-card .policy-title { font-weight: 650; font-size: 1rem; padding-right: 30px; }
.po-card .policy-summary { font-size: 0.875rem; color: var(--muted); }
.po-card .policy-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.po-num { position: absolute; top: 12px; right: 12px; font-size: 0.75rem; font-weight: 700; color: var(--muted); background: var(--tint-faint); border-radius: 8px; padding: 2px 6px; }
.po-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.po-layout .policy-doc { margin: 0; }
.po-layout .policy-body { max-width: 72ch; line-height: 1.6; }
.policy-body h2, .policy-body h3 { scroll-margin-top: 70px; }
.policy-body mark.confirm { scroll-margin-top: 90px; transition: box-shadow .2s; }
.policy-body mark.confirm.is-focus { box-shadow: 0 0 0 3px var(--amber); }
.po-side { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 80px); overflow: auto; }
.po-panel { margin: 0; }
.po-toc, .po-confirms { margin: 0; padding: 8px 10px 10px 30px; font-size: 0.875rem; display: flex; flex-direction: column; gap: 3px; }
.po-toc li.po-sub { margin-left: 12px; font-size: 0.8125rem; }
.po-toc a, .po-confirms a { color: var(--ink); text-decoration: none; display: block; padding: 3px 4px; border-radius: 6px; }
.po-toc a:hover, .po-confirms a:hover { background: var(--tint-hover); color: var(--accent); }
.po-confirms a span { display: block; }
.po-confirms a small { display: block; color: var(--muted); font-size: 0.75rem; }
.po-confirms li::marker { color: var(--amber); font-weight: 700; }
.po-pager { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 0; }
.po-page { display: flex; flex-direction: column; gap: 2px; max-width: 48%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  color: var(--ink); text-decoration: none; }
.po-page:hover { border-color: var(--edge-hover); background: var(--tint-hover); }
.po-page span { font-size: 0.8125rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.po-next { margin-left: auto; text-align: right; align-items: flex-end; }
@media (max-width: 1000px) {
  .po-layout { grid-template-columns: 1fr; }
  .po-side { position: static; max-height: none; order: -1; }
}
@media print { .po-layout { display: block; } }
.po-card .policy-meta { justify-content: flex-start; }

/* wide document tables scroll inside their card on a narrow screen instead of pushing the page sideways */
.policy-body, .card-body.small { overflow-x: auto; }
.policy-body table { min-width: 480px; }

/* ---- Home and Objectives in the shared style (templates/dashboard.html, objectives.html) ------------------------------------------------------- */
.hm-section { margin: 0 0 22px; }
.hm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hm-cols .ls-list, .hm-cols .rp-owed { margin: 0; }
.hm-attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-attn-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); }
.hm-attn-row:hover { border-color: var(--edge-hover); }
.hm-attn-title { font-weight: 650; color: var(--ink); text-decoration: none; }
.hm-attn-title:hover { color: var(--accent); }
.hm-attn-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 750; font-variant-numeric: tabular-nums; }
.hm-attn-n.amber { background: var(--amber-soft); color: var(--amber); }
.hm-attn-n.red { background: var(--red-soft); color: var(--red); }
.hm-attn-main { display: flex; flex-direction: column; min-width: 0; }
.hm-attn-main span { font-size: 0.875rem; color: var(--muted); }
.hm-attn-main span a { color: var(--accent); }
.hm-attn-go { font-size: 0.875rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.hm-up { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line-soft); }
.hm-up:first-child { border-top: 0; }
.hm-up .ls-time span { white-space: nowrap; }
.rp-owed.card { padding: 0; }
.obj-legend-card { grid-column: span 1; }
.obj-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
.obj-legend span { display: inline-flex; align-items: center; gap: 5px; }
.obj-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.08); }
.obj-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.obj-card { cursor: default; }
.obj-card:hover { transform: none; }
.obj-card.is-due { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.obj-card .obj-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--tint-faint); }
.obj-card .obj-bar span { display: block; height: 100%; }
.obj-pill-ind { background: var(--green-soft); color: var(--green); }
.obj-card .rs-card-foot a { color: var(--muted); }
.obj-card .obj-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-card-top .badge { margin-left: auto; align-self: flex-start; }
@media (max-width: 900px) {
  .hm-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hm-attn-row { grid-template-columns: 34px minmax(0, 1fr); }
  .hm-attn-go { display: none; }
  .hm-up { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; padding: 10px 12px; }     /* the time column fits its date, so it never runs under the avatar */
  .hm-up .ls-name { white-space: normal; }
  .hm-up .ls-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 120px; }
}

/* Invoice lines on a phone: each line is a small block (date, description, amount on the right, quantity and rate beneath) instead of a
   six-column table that had to be scrolled sideways to reach the Amount and the Total. Desktop keeps the table. */
@media (max-width: 760px) {
  .card > table.inv-lines { display: block; overflow: visible; }
  table.inv-lines thead { display: none; }
  table.inv-lines tbody, table.inv-lines tfoot { display: block; }
  table.inv-lines tbody tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "date date amount" "desc desc desc" "qty rate rate" "remove remove remove";
    gap: 2px 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.inv-lines td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.inv-lines tbody td:nth-child(1) { grid-area: date; }
  table.inv-lines tbody td:nth-child(2) { grid-area: desc; }
  table.inv-lines tbody td:nth-child(3) { grid-area: qty; font-size: 0.8125rem; }
  table.inv-lines tbody td:nth-child(3)::before { content: "Qty "; }
  table.inv-lines tbody td:nth-child(4) { grid-area: rate; font-size: 0.8125rem; }
  table.inv-lines tbody td:nth-child(4)::before { content: "at "; }
  table.inv-lines tbody td:nth-child(5) { grid-area: amount; justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; }
  table.inv-lines tbody td:nth-child(6) { grid-area: remove; justify-self: end; }
  table.inv-lines tbody td:nth-child(6):empty { display: none; }
  table.inv-lines tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
  table.inv-lines tfoot td:empty { display: none; }
  table.inv-lines tfoot td.num { font-variant-numeric: tabular-nums; }
}

/* --- Agency pages (SB4): team, assignments, master calendar, analytics ------------------------------------------------------------------------ */
.ag-table-wrap { overflow-x: auto; padding: 0; }
.ag-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ag-table th { text-align: left; font-size: 0.875rem; font-weight: 650; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.ag-table td { padding: 10px 14px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.ag-table tr:first-child td { border-top: 0; }
.ag-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ag-table tr.is-off td { opacity: .55; }
.ag-table tr.is-picked td { background: var(--accent-soft); }
.ag-tick { width: 34px; }
.ag-person { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ag-person:hover { color: var(--accent); }
.ag-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, #888); }
.ag-avatar { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 1.5rem; font-weight: 700; color: #fff; background: var(--c, #888); flex: none; }
.ag-bar { display: inline-block; vertical-align: middle; width: 80px; height: 7px; border-radius: 4px; background: var(--line-soft); overflow: hidden; margin-right: 6px; }
.ag-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ag-tag { display: inline-flex; align-items: center; margin: 2px 4px 2px 0; padding: 2px 9px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  color: var(--ink); background: color-mix(in srgb, var(--c, #888) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, #888) 45%, transparent); }
.ag-load { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ag-load-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 0.875rem; color: var(--ink); text-decoration: none; }
.ag-load-chip b { font-variant-numeric: tabular-nums; color: var(--muted); }
.ag-selbar { position: sticky; top: 56px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin: 0 0 10px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ag-js .ag-selbar:not(.is-open) { display: none; }
.ag-selbar select { max-width: 240px; }
.ag-link { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ag-copy { display: flex; gap: 8px; }
.ag-copy input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 0.8125rem; }
.ag-invite { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.ag-invite .field { margin: 0; }
.ag-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ag-checklist, .ag-mini-list { list-style: none; margin: 0 0 10px; padding: 0; }
.ag-checklist li, .ag-mini-list li { padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 0.875rem; }
.ag-checklist li:first-child, .ag-mini-list li:first-child { border-top: 0; }
.ag-mini-list li strong { display: inline-block; min-width: 150px; font-variant-numeric: tabular-nums; }
.ag-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.ag-stack .field { margin-bottom: 10px; }
.ag-assign-more { display: grid; gap: 6px; margin-top: 14px; }
.ag-assign-more select { width: 100%; }
.ag-rule { border: 0; border-top: 1px solid var(--line-soft); margin: 14px 0; }
.ag-steps { margin: 0; padding-left: 20px; line-height: 1.7; }
.ag-hours { display: grid; gap: 6px; }
.ag-hours-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.ag-hours-row:first-child { border-top: 0; }
.ag-hours-day { width: 92px; font-weight: 600; font-size: 0.875rem; }
.ag-hours-slot { display: inline-flex; align-items: center; gap: 4px; }
.ag-hours-slot input { width: 104px; padding: 4px 6px; }
.ag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.ag-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 0.875rem; cursor: pointer; }
.ag-filter-chip input { margin: 0; }
.ag-cal { display: grid; grid-template-columns: 46px repeat(7, minmax(110px, 1fr)); gap: 0; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.ag-cal-times { position: relative; border-right: 1px solid var(--line-soft); margin-top: 38px; height: calc(var(--rows) * 26px); }
.ag-cal-times span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-cal-day { border-right: 1px solid var(--line-soft); min-width: 110px; }
.ag-cal-day:last-child { border-right: 0; }
.ag-cal-day > header { height: 38px; display: flex; align-items: center; gap: 5px; padding: 0 8px; font-size: 0.875rem; border-bottom: 1px solid var(--line-soft); }
.ag-cal-day.is-today > header { color: var(--accent); background: var(--accent-soft); }
.ag-cal-body { position: relative; height: calc(var(--rows) * 26px); background-image: linear-gradient(var(--line-soft) 1px, transparent 1px); background-size: 100% 52px; }
.ag-band { position: absolute; width: calc(var(--strip) - 1px); border-radius: 3px; background: color-mix(in srgb, var(--c) 70%, transparent); }
.ag-slot { position: absolute; left: calc(var(--strips, 0) * var(--strip, 0px) + 6px); right: 4px; overflow: hidden; padding: 2px 6px; border-radius: 7px; font-size: 0.75rem; line-height: 1.3; color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--c) 22%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.ag-slot b { font-variant-numeric: tabular-nums; }
.ag-slot.st-cancelled_free, .ag-slot.st-cancelled_charged { opacity: .5; text-decoration: line-through; }
.ag-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; }
.ag-legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .ag-table th:nth-child(n+5), .ag-table td:nth-child(n+5) { display: none; }
  #ag-table th:nth-child(3), #ag-table td:nth-child(3) { display: none; }
  #ag-table th:nth-child(4), #ag-table td:nth-child(4) { display: table-cell; }
  .ag-cal { grid-template-columns: 40px repeat(7, 118px); }
  .ag-mini-list li strong { display: block; min-width: 0; }
  .ag-hours-day { width: 100%; }
}

/* ---- Settings > Support: the panel and the support chat window ------------------------------------------------------------------------ */
.sp-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-intro p { flex: 1 1 320px; }
.sp-page .st-card { max-width: 860px; }
.sp-tickets { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.sp-tickets-head { font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.sp-tickets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-tickets li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.875rem; }
.sp-t-subject { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sp-t-meta { color: var(--muted); font-size: 0.8125rem; }
.sp-t-body { flex-basis: 100%; }
.sp-t-body pre { white-space: pre-wrap; font: 0.8125rem/1.45 var(--font, inherit); background: var(--tint-hover); border-radius: 10px; padding: 8px 10px; margin: 6px 0 0; }
.sp-chat { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px));
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-dialog); overflow: hidden; }
.sp-chat[hidden] { display: none; }
.sp-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sp-chat-ico { width: 32px; height: 32px; border-radius: 10px; }
.sp-chat-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sp-chat-title strong { font-size: 1rem; }
.sp-chat-title span { font-size: 0.8125rem; color: var(--muted); }
.sp-chat-log { flex: 1; min-height: 0; overflow-y: auto; max-height: none; }
.assistant-msg.done { background: var(--green-soft); border-color: transparent; color: var(--green); }
.sp-chat-form { display: flex; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--line); }
.sp-chat-form[hidden] { display: none; }
.sp-chat-input { flex: 1; min-width: 0; }
.sp-send { display: inline-grid; place-items: center; width: 36px; padding: 0; border-radius: 10px; }
.sp-chat-foot { display: flex; justify-content: center; padding: 2px 12px 10px; }
.sp-chat-foot[hidden] { display: none; }
.sp-more-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--accent); font-size: 0.875rem; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.sp-more-link:hover { background: var(--accent-soft); }
.sp-chat-foot.sp-nudge .sp-more-link { background: var(--accent-soft); font-weight: 600; }
.sp-more { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-top: 1px solid var(--line); }
.sp-more[hidden] { display: none; }
.sp-more textarea { width: 100%; resize: vertical; min-height: 70px; }
.sp-more-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) {
  .sp-chat { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100vh - 16px); border-radius: 16px; }
}

/* ---- The assistant's microphone: an outline mic that becomes a live soundwave while listening -------------------------------------------- */
.assistant-mic { position: relative; display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
  transition: width .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.assistant-mic:hover { background: var(--tint-hover); }
.assistant-mic:disabled { opacity: .5; cursor: default; background: var(--panel); }      /* while the assistant is answering */
.assistant-mic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.assistant-mic-icon { display: inline-grid; place-items: center; }
.assistant-wave { display: none; align-items: center; gap: 3px; height: 16px; }
.assistant-wave i { display: block; width: 3px; height: 16px; border-radius: 3px; background: currentColor; transform: scaleY(.25);
  transform-origin: center; transition: transform .08s linear; }
.assistant-mic.listening { width: 58px; background: var(--accent); border-color: var(--accent); color: #fff; animation: none; }
.assistant-mic.listening .assistant-mic-icon { display: none; }
.assistant-mic.listening .assistant-wave { display: inline-flex; }
/* Without a live level (the browser would not share the microphone twice), the bars breathe on their own. */
.assistant-mic.listening:not(.metered) .assistant-wave i { animation: mic-wave 1s ease-in-out infinite; }
.assistant-mic.listening:not(.metered) .assistant-wave i:nth-child(2) { animation-delay: .12s; }
.assistant-mic.listening:not(.metered) .assistant-wave i:nth-child(3) { animation-delay: .24s; }
.assistant-mic.listening:not(.metered) .assistant-wave i:nth-child(4) { animation-delay: .36s; }
.assistant-mic.listening:not(.metered) .assistant-wave i:nth-child(5) { animation-delay: .48s; }
@keyframes mic-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(.95); } }
@media (prefers-reduced-motion: reduce) { .assistant-mic.listening:not(.metered) .assistant-wave i { animation: none; transform: scaleY(.6); } }
.assistant-form { align-items: center; }
/* The support chat and the assistant share the bottom-right corner: while support is open, the assistant steps aside. */
body.sp-chat-open .assistant { display: none; }

/* ---- Lesson planning (app/routes/lesson_plans.py): a pupil's name on Lessons opens it ------------------------------------------------ */
.ls-name-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line); }
.ls-name-link:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.lp-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.lp-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; }
.lp-result:hover { border-color: var(--edge-hover); background: var(--tint-hover); text-decoration: none; }
.lp-result.has-acts { border-left: 4px solid var(--accent); }
.lp-result-main { display: flex; flex-direction: column; min-width: 0; }
.lp-result-main small { color: var(--muted); font-size: 0.8125rem; }
.lp-result-side { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.lp-back { margin: 0 0 12px; }
.lp-objective { padding: 14px 18px; margin-bottom: 18px; }
.lp-obj-title { margin: 2px 0 4px; font-size: 1.25rem; font-weight: 650; font-family: var(--font-head); }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.lp-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.lp-card h3 { margin: 0; font-size: 1.125rem; }
.lp-card p { margin: 0; }
.lp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.lp-notes { margin-top: 6px; border-top: 1px solid var(--line-soft); padding-top: 8px; font-size: 0.875rem; }
.lp-notes summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.lp-notes p { margin: 8px 0 2px; }
.lp-notes ol, .lp-notes ul { margin: 2px 0 6px; padding-left: 1.3em; }

/* --- Reading preferences ------------------------------------------------------------------------------------------------------------------
   The Reading panel (templates/_reading_prefs.html, static/reading.js) stores a reader's choices in the `reading` cookie; the server puts them
   on <html> as data-read-* attributes, and everything below keys off those, so a page is right before any script runs. Kept at the end of
   the file so a choice wins over a theme. Contract and values: docs/design/2026-10-04-ux-direction.md. */

/* Font: Lexend (self-hosted, see the @font-face near the top) or the device's own face. Either replaces a theme's heading face too. */
html[data-read-font="lexend"] { --font-body: "Lexend", "Open Sans", Verdana, sans-serif; --font-head: var(--font-body); }
html[data-read-font="system"] { --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-head: var(--font-body); }
html[data-read-font] .wz-card h1, html[data-read-font] .wz-mock-name { font-family: var(--font-head); }

/* Text size: a percentage of the browser's own size, never a fixed px, so a reader's device setting still counts. */
html[data-read-size="large"] { font-size: 106.25%; }
html[data-read-size="larger"] { font-size: 118.75%; }
/* Every size in the staff shell is in rem (see the top of the file), so a bigger choice reaches all of it without further rules. */

/* Letter and word spacing (the strongest evidence of anything here) and line height. */
html[data-read-spacing="wide"] body { letter-spacing: .06em; word-spacing: .16em; }
html[data-read-lines="tall"] body, html[data-read-lines="tall"] p, html[data-read-lines="tall"] li, html[data-read-lines="tall"] td,
html[data-read-lines="tall"] th, html[data-read-lines="tall"] dd, html[data-read-lines="tall"] label, html[data-read-lines="tall"] .hint { line-height: 1.8; }

/* Background: calm (cream paper, dark blue-grey ink) or dark. Both replace the theme's palette wholesale and switch the glass off, so the
   page, sidebar, header, cards, tables and inputs all follow. Every pair below was measured: ink on cream 12.6:1, muted 7.0:1, accent 5.9:1,
   input edge 4.3:1; on dark, ink 13.2:1, muted 7.8:1, accent 7.3:1, dark text on the accent button 8.2:1, input edge 5.2:1. */
html[data-read-bg="calm"] {
  color-scheme: light;
  --bg: #FBF7EE; --panel: #FBF7EE; --panel-head: #F3EDDF; --page-art: #FBF7EE;
  --ink: #2B2D42; --muted: #50536B; --label: #3E405A;
  --line: #DED6C4; --line-soft: #EAE3D3; --edge: #D3C9B2; --edge-input: #7E7461; --edge-hover: #B8AC92; --edge-nav: #CFC4AA;
  --nav-bg: #F3EDDF; --nav-ink: #2B2D42; --nav-ink-dim: #4F5270; --nav-hover: #EAE2CF; --nav-art: none; --nav-mini: none;
  --tint-hover: #F5EFE1; --tint-faint: #F7F2E6; --tint-stripe: #F8F3E8; --grad-a: #F3EDDF; --grad-b: #EAE2CF; --tile-icon: #EADFC6; --badge-neutral: #EDE6D6;
  --accent: #0A5FB4; --accent-dark: #084A8C; --accent-soft: #E6E9EE; --accent-rgb: 10, 95, 180; --accent-dark-rgb: 8, 74, 140;
  --green: #1E6B3A; --green-soft: #E7EEE2; --amber: #8A5200; --amber-soft: #F6EBD6; --red: #B01E1E; --red-soft: #F6E2DA;
  --glass-primary-a: #0A5FB4; --glass-primary-b: #084A8C; --glass-primary-border: #084A8C;
  --shadow: 0 1px 2px rgba(43, 45, 66, .08); --shadow-lift: 0 2px 8px rgba(43, 45, 66, .12);
  --focus: #2B2D42;
}
html[data-read-bg="dark"] {
  color-scheme: dark;
  --bg: #15181F; --panel: #1E222B; --panel-head: #252A35; --page-art: #15181F;
  --ink: #E7EAF0; --muted: #AEB6C4; --label: #C5CCD8;
  --line: #343B48; --line-soft: #2B313D; --edge: #3D4554; --edge-input: #8A94A6; --edge-hover: #6E7A90; --edge-nav: #3D4554;
  --nav-bg: #1A1E26; --nav-ink: #E7EAF0; --nav-ink-dim: #AEB6C4; --nav-hover: #262C38; --nav-art: none; --nav-mini: none;
  --tint-hover: #232935; --tint-faint: #20252F; --tint-stripe: #1C212A; --grad-a: #232935; --grad-b: #1E222B; --tile-icon: #2E3645; --badge-neutral: #2E3645;
  --accent: #7FB3F5; --accent-dark: #A9CBF8; --accent-soft: #233349; --accent-rgb: 127, 179, 245; --accent-dark-rgb: 169, 203, 248;
  --green: #7BD69F; --green-soft: #1E2F27; --amber: #F2B65C; --amber-soft: #332A1C; --red: #FF8F8F; --red-soft: #35211F;
  --glass-primary-a: #7FB3F5; --glass-primary-b: #7FB3F5; --glass-primary-border: #7FB3F5;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lift: 0 2px 8px rgba(0, 0, 0, .5); --shadow-dialog: 0 12px 36px rgba(0, 0, 0, .6);
  --focus: #FFDD00;
}
html[data-read-bg="calm"] :focus-visible, html[data-read-bg="dark"] :focus-visible { outline-width: 3px; }
/* Flat surfaces: no scene behind the page and no frosted glass, whichever theme is chosen. */
html[data-read-bg] body { background: var(--bg); }
html[data-read-bg] .sidebar { background: var(--nav-bg); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-right: 1px solid var(--line); box-shadow: none; }
html[data-read-bg] .sidebar nav a, html[data-read-bg] .nav-group { text-shadow: none; }
html[data-read-bg] .sidebar nav a.active { background: var(--panel); box-shadow: none; }
html[data-read-bg] .shellbar { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); }
html[data-read-bg] .card, html[data-read-bg] .toolbar, html[data-read-bg] .tile, html[data-read-bg] .tiles { background: var(--panel); background-image: none; border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow); }
html[data-read-bg] .card > h2, html[data-read-bg] .card > .card-head { background: var(--panel-head); border-bottom-color: var(--line); }
html[data-read-bg] .btn { background: var(--panel); border-color: var(--edge-input); color: var(--ink); box-shadow: none; }
html[data-read-bg] .btn:hover { background: var(--tint-hover); border-color: var(--accent); }
html[data-read-bg] .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
html[data-read-bg] .btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
html[data-read-bg] input[type=text], html[data-read-bg] input[type=email], html[data-read-bg] input[type=number], html[data-read-bg] input[type=date],
html[data-read-bg] input[type=datetime-local], html[data-read-bg] input[type=month], html[data-read-bg] input[type=password], html[data-read-bg] input[type=url],
html[data-read-bg] input[type=search], html[data-read-bg] select, html[data-read-bg] textarea, html[data-read-bg] input[type=color] { background: var(--panel); color: var(--ink); }
html[data-read-bg="dark"] .btn.primary, html[data-read-bg="dark"] .brand-mark, html[data-read-bg="dark"] .pill { color: #15181F; }
html[data-read-bg="dark"] .btn.primary:hover { color: #15181F; }
html[data-read-bg="dark"] .brand-mark, html[data-read-bg="dark"] .pill { background: var(--accent); }
html[data-read-bg="dark"] .logo-mark { background: var(--panel); border-color: var(--line); }
html[data-read-bg="dark"] .skip-link:focus { background: var(--panel); color: var(--ink); }
html[data-read-bg="dark"] .tile-icon, html[data-read-bg="dark"] .badge { background: var(--badge-neutral); color: var(--ink); }
html[data-read-bg="dark"] .flash { background: var(--panel-head); border-color: var(--line); color: var(--ink); }
html[data-read-bg="dark"] img.logo-mark, html[data-read-bg="dark"] .maestry-m { filter: brightness(.92); }
html[data-read-bg="dark"] .env-banner { color: #fff; }

/* The reading ruler itself is drawn by reading.js (.rp-ruler, styled in _reading_prefs.html); nothing shows unless data-read-ruler="on". */

/* --- tiles (FEATURES new_nav): the activity directory and "Plan a lesson" -------------------------------------------------------------------
   A launchpad of tiles, in TutorMaestry's own look rather than an ERP's: soft cards on the page's own background, a coloured stripe and an icon chip
   that say what kind of thing it is, the title as the one link (the whole tile is its target), a short summary, one number at the foot, and
   tags last. Colour is never the only signal: the badge says it in words. Tiles in a row share a height, and hiding some (search, filters) never
   changes a tile's width. */
.ms-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--s-3); }
.ms-tile {
  --tile-hue: var(--accent);
  position: relative; display: flex; flex-direction: column; gap: var(--s-2); min-height: 216px; padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden;
  transition: box-shadow var(--t-fast, 150ms) ease, border-color var(--t-fast, 150ms) ease;
}
.ms-tile[hidden] { display: none; }
.ms-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tile-hue); }
.ms-tile:hover { border-color: var(--edge-hover); box-shadow: var(--shadow-lift); }
.ms-tile:has(.ms-tile-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-tile[data-hue="tactile"] { --tile-hue: #b4532a; }
.ms-tile[data-hue="card"] { --tile-hue: #6a4fc4; }
.ms-tile[data-hue="physical"] { --tile-hue: #2f7d3b; }
.ms-tile[data-hue="visual"] { --tile-hue: #1f6fb2; }
.ms-tile[data-hue="board"] { --tile-hue: #0f7b7b; }
.ms-tile[data-hue="digital"] { --tile-hue: var(--accent); }
.ms-tile[data-hue="maths"] { --tile-hue: #1f6fb2; }
.ms-tile[data-hue="english"] { --tile-hue: #6a4fc4; }
.ms-tile[data-hue="other"] { --tile-hue: #0f7b7b; }
.ms-tile-top { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; }
.ms-tile-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  color: var(--tile-hue); background: var(--accent-soft); background: color-mix(in srgb, var(--tile-hue) 12%, var(--panel));
}
.ms-tile-eyebrow { font-size: var(--text-xs); color: var(--muted); font-weight: 600; line-height: 1.3; }
.ms-tile-title { margin: 0; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-tile-link { color: var(--ink); text-decoration: none; }
.ms-tile-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.ms-tile-link:hover { color: var(--accent); }
.ms-tile-link:focus-visible { outline: none; /* ring: .ms-tile:has(.ms-tile-link:focus-visible) draws it round the whole tile */ }
.ms-tile-sum { margin: 0; font-size: var(--text-xs); color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-tile-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-2); }
.ms-kpi { display: flex; align-items: baseline; gap: 4px; color: var(--ink); font-size: var(--text-xs); }
.ms-kpi strong { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--tile-hue); font-variant-numeric: tabular-nums; }
html[data-read-bg="dark"] .ms-kpi strong { color: var(--ink); }     /* the hues are tuned for light panels; purple is 2.7:1 on the dark one */
.ms-kpi-sub { color: var(--muted); }
.ms-tile-action { position: relative; z-index: 1; }
.ms-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ms-tags li { font-size: 0.8125rem; line-height: 1.4; padding: 1px 8px; border-radius: 999px; background: var(--tint-faint); border: 1px solid var(--line-soft); color: var(--ink); }
.ms-tags li.ms-tag-strong { background: var(--accent-soft); border-color: var(--edge); }
/* An on-screen activity's built-in help (facts, not need tags), and why it is shown for a need that was asked for. */
.ms-tags.ms-helps { margin-top: 4px; }
.ms-tags.ms-helps li { background: var(--panel); border-style: dashed; }
.ms-tile-why { margin: 4px 0 0; font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
.ms-level { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink); position: relative; z-index: 1; }
.ms-level i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0, 0, 0, .15); }
/* Suggested activities (app/recommend.py): the "For: <objective>" line on a Plan a lesson tile, and the pupil page's short list. */
.rec-for { display: block; margin: 0; font-size: var(--text-xs); color: var(--muted); line-height: 1.5; }
.rec-for strong { color: var(--ink); font-weight: 600; }
.rec-for .ms-level { display: flex; margin-top: 2px; }
.rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.rec-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.rec-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
/* Play helpers on the pupil page (templates/pupil.html, app/pupil_helpers.py): tick boxes with one line each, the reading look, Save. */
.ph-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ph-check { display: flex; align-items: flex-start; gap: var(--s-2); min-height: 44px; cursor: pointer; }
.ph-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.ph-line { display: block; font-size: var(--text-xs); color: var(--muted); line-height: 1.4; }
.ph-look { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-3); }
.ph-select { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); font-weight: 600; }
.ph-select select { min-width: 140px; }
.ph-plan-size { margin: var(--s-1) 0 0 calc(18px + var(--s-2)); }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ph-in-use { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-input, 8px); background: var(--accent-soft); color: var(--ink); font-size: var(--text-sm); }

/* The activity directory's toolbar and groups (templates/activities.html). */
.ad-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); position: sticky; top: 64px; z-index: 6; box-shadow: var(--shadow); }
.ad-toolbar .field { margin: 0; }
.ad-toolbar label { font-size: var(--text-xs); font-weight: 600; }
.ad-search { flex: 2 1 280px; }
.ad-toolbar select { min-width: 150px; }
.ad-search-box { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--edge-input, var(--line)); border-radius: var(--r-control); background: var(--panel); }
.ad-search-box:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.ad-search-box input { border: 0; outline: none; /* ring: .ad-search-box:focus-within draws it round the whole box */ padding: 10px 0; flex: 1; background: transparent; font: inherit; min-width: 0; }
.ad-search-box .icon { color: var(--muted); flex: none; }
.ad-js .ad-apply { display: none; }
/* With the script, Clear keeps its place while there is nothing to clear (invisible, and out of the tab order), so the fields never move. */
.ad-reset-off { visibility: hidden; }
.ad-count { margin: 0 0 var(--s-1); min-height: 1.5em; font-weight: 600; }
.ad-note { margin: 0 0 var(--s-4); }
.ad-now { margin: 4px 0 0; }
.ad-noscreen { margin-bottom: var(--s-4); }
.ad-noscreen .empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); }
.ad-noscreen .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }     /* a long search wraps inside the button on a phone */
.ad-noscreen .btn span { min-width: 0; }
.ad-group { margin-bottom: var(--s-6, 32px); }
.ad-group[hidden] { display: none; }
.ad-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); margin-bottom: var(--s-3); }
.ad-group-head h2 { margin: 0; font-size: var(--text-lg); display: flex; align-items: center; gap: var(--s-2); }
.ad-group-head p { margin: 0; }
.ad-group-head h2 svg { color: var(--muted); }
.ms-tile-sub { margin: 0 0 4px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft, var(--ink)); }
/* The in-person section: a disclosure, closed until asked for, so what plays on screen is what a tutor sees first. */
.ad-group-person { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ad-group-person > summary { cursor: pointer; list-style: none; }
.ad-group-person > summary::-webkit-details-marker { display: none; }
.ad-group-person > summary h2::before { content: "›"; display: inline-block; width: 1em; color: var(--muted); transition: transform .15s; }
.ad-group-person[open] > summary h2::before { transform: rotate(90deg); }
.ad-group-person > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .ad-group-person > summary h2::before { transition: none; } }
.ad-givebar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-card);
  background: var(--accent-soft); border: 1px solid var(--edge); }
.ad-givebar .field { margin: 0; flex: 0 1 320px; }
.ad-givebar p { margin: 0; flex: 1 1 260px; }

/* One activity (templates/activity_detail.html). */
.ad-facts { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); }
.ad-facts li { padding: var(--s-3) var(--s-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }
.ad-facts span { display: block; font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.ad-facts strong { display: block; font-size: 1.0625rem; margin-top: 2px; }
.ad-detail { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: var(--s-4); align-items: start; }
.ad-detail .card-body > :first-child { margin-top: 0; }
.ad-detail ol, .ad-detail ul { padding-left: 1.2em; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ad-detail .ad-need { font-weight: 700; }
.ad-sources li { word-break: break-word; }
.ad-lead { font-size: 1.0625rem; max-width: 65ch; }
@media (max-width: 900px) { .ad-detail { grid-template-columns: 1fr; } .ad-toolbar { position: static; } }
@media print {
  .ad-noprint { display: none !important; }
  body:has(.ad-detail) .shellbar, body:has(.ad-detail) .hub-tabs, body:has(.ad-detail) .assistant { display: none !important; }   /* this page only */
  .ad-detail { display: block; }
  .ad-detail .card { break-inside: avoid; margin-bottom: 12px !important; }
}

/* "Plan a lesson" as tiles (templates/lesson_plan_tiles.html). */
.lpt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.lpt-head h1 { margin: 0; font-size: var(--text-xl); }
.lpt-head p { margin: 4px 0 0; color: var(--muted); }
.lpt-section { margin-bottom: var(--s-6, 32px); }
.lpt-section > h2 { font-size: var(--text-lg); margin: 0 0 var(--s-1); display: flex; align-items: center; gap: var(--s-2); }
.lpt-section > p { margin: 0 0 var(--s-3); }
.lpt-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-4); margin-bottom: var(--s-4);
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-card); }
.lpt-chosen h2 { margin: 0; font-size: var(--text-lg); flex: 1 1 320px; }
.lpt-notes { position: relative; z-index: 1; font-size: var(--text-xs); }
.lpt-notes > summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 24px; padding-block: 2px; }
.lpt-notes[open] { padding-top: var(--s-1); }
.lpt-notes p, .lpt-notes ol, .lpt-notes ul { margin: 4px 0; }
@media (prefers-reduced-motion: reduce) { .ms-tile { transition: none; } }
.ad-detail h2.card-head { font-size: 1rem; margin: 0; font-weight: 650; }
@media print { .ad-detail .card > h2.card-head { display: flex !important; } }
.lpt-chosen-title { margin: 0; font-size: var(--text-xl); line-height: 1.25; }
/* Last time's next steps, at the top of Plan a lesson (the latest written session note). */
.lpt-last { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-card); }
.lpt-last p { margin: 0; flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }

/* --- the quiz maker (FEATURES quiz_maker): the form, the editor and the slides ---------------------------------------------------------------- */
.qz-form .field, .qz-edit .field { margin-bottom: var(--s-3); }
.qz-q { border: 1px solid var(--line); padding: var(--s-3) var(--s-4) var(--s-2); margin: 0 0 var(--s-3); }
.qz-q legend { font-weight: 650; padding: 0 6px; }
.qz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 var(--s-3); }
.qz-savebar { position: sticky; bottom: 0; padding: var(--s-3) 0; background: linear-gradient(transparent, var(--bg, #fff) 30%); z-index: 2; }
.qz-delete { margin-top: var(--s-4); }

/* The slides: bright, but text always dark on a light surface (contrast at least 7:1), big and left-aligned. */
body.qz { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #f3efe6; color: #1d2433; }
.qz-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; }
.qz-count { font-weight: 650; color: #3b4458; }
.qz-tools { display: flex; gap: 8px; }
.qz-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 8px 18px 18px; }
.qz-slide { width: min(1100px, 100%); box-sizing: border-box; padding: clamp(24px, 4vw, 56px); margin: 0 0 18px; border-radius: 28px;
  background: #fffdf8; border: 3px solid var(--qz-tone); box-shadow: 0 10px 0 var(--qz-tone-soft); text-align: left;
  outline: none; /* ring: .qz-slide border (3px, in the slide's colour) marks it; a slide takes focus only from script (tabindex -1), so a screen reader reads it */ }
.qz-js .qz-slide { min-height: min(68vh, 640px); margin: 0; display: flex; flex-direction: column; justify-content: center; }
.qz-js .qz-slide[hidden] { display: none; }
.qz-slide[data-tone="1"] { --qz-tone: #e0533d; --qz-tone-soft: #f6c3b8; }
.qz-slide[data-tone="2"] { --qz-tone: #2c7be5; --qz-tone-soft: #bcd6f7; }
.qz-slide[data-tone="3"] { --qz-tone: #2e9e5b; --qz-tone-soft: #bfe5cd; }
.qz-slide[data-tone="4"] { --qz-tone: #8b5cf6; --qz-tone-soft: #d9cafc; }
.qz-slide[data-tone="5"] { --qz-tone: #e3a008; --qz-tone-soft: #f7e0a6; }
.qz-eyebrow { margin: 0 0 12px; font-weight: 700; color: var(--qz-tone); font-size: clamp(1rem, 1.6vw, 1.25rem); filter: brightness(.8); }
.qz-slide h1, .qz-slide h2 { margin: 0 0 16px; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.2; color: #1d2433; }
.qz-sub { margin: 0; font-size: clamp(1.125rem, 2vw, 1.5rem); color: #3b4458; }
.qz-slide .qz-qtext { font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.qz-options { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qz-options li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; font-size: clamp(1.125rem, 2.4vw, 1.75rem); font-weight: 600;
  background: #fff; border: 3px solid #e6dfd2; min-height: 64px; }
.qz-options li:nth-child(1) { background: #fff4cc; border-color: #f2cf5b; }
.qz-options li:nth-child(2) { background: #dcecff; border-color: #8ab8f2; }
.qz-options li:nth-child(3) { background: #ffe0ea; border-color: #f29ab6; }
.qz-options li:nth-child(4) { background: #dcf5df; border-color: #86cf92; }
.qz-letter { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #1d2433; color: #fff; font-weight: 700; font-size: 1.125rem; }
.qz-q-small { margin: 0 0 18px; font-size: clamp(1.125rem, 2vw, 1.5rem); color: #3b4458; }
.qz-right { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 18px 22px; border-radius: 20px; background: #dcf5df; border: 3px solid #2e9e5b;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); font-weight: 700; }
.qz-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #2e9e5b; color: #fff; font-size: 1.75rem; }
.qz-why { margin: 0; font-size: clamp(1.125rem, 2.2vw, 1.6rem); line-height: 1.5; color: #1d2433; max-width: 60ch; }
.qz-nav { display: flex; justify-content: center; gap: 12px; padding: 0 18px 22px; }
.qz-nav .btn { min-width: 140px; min-height: 48px; font-size: 1.0625rem; }
.qz-nav { display: none; }
.qz-js .qz-nav { display: flex; }
/* Dyslexia-friendly: more space between letters, words and lines, and no busy borders. */
.qz-clear .qz-slide { line-height: 1.6; box-shadow: none; }
html:not([data-read-spacing="wide"]) .qz-clear .qz-slide { letter-spacing: .03em; word-spacing: .12em; }     /* a reader's wide spacing wins */
.qz-clear .qz-options li { border-width: 2px; }
html[data-read-bg="dark"] body.qz { background: #15181f; }
html[data-read-bg="dark"] .qz-count { color: var(--muted); }
.qz-options li, .qz-right, .qz-qtext { overflow-wrap: anywhere; }     /* a long word wraps rather than being cut off by the slide on a phone */
@media (max-width: 700px) { .qz-options { grid-template-columns: minmax(0, 1fr); } .qz-bar { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .qz-slide { transition: none; } }
@media print {
  body.qz { background: #fff; }
  .qz-bar, .qz-nav { display: none !important; }
  .qz-slide { display: flex !important; break-after: page; box-shadow: none; min-height: auto; }
}
.lpt-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-5); }
.lpt-search .rs-search { flex: 1 1 360px; max-width: 620px; }
/* More colour: the page takes the slide's tone (pastel, so text stays dark on light), and each slide has a band of its colour. */
body.qz { transition: background-color var(--t-ui, 220ms) ease; }
body.qz[data-tone="1"] { background: #fde8e3; }
body.qz[data-tone="2"] { background: #e3eefc; }
body.qz[data-tone="3"] { background: #e2f4e8; }
body.qz[data-tone="4"] { background: #efe8fd; }
body.qz[data-tone="5"] { background: #fcf1d7; }
.qz-slide { position: relative; overflow: hidden; }
.qz-slide::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 14px; background: repeating-linear-gradient(90deg, var(--qz-tone) 0 48px, var(--qz-tone-soft) 48px 96px); }
.qz-eyebrow { display: inline-block; align-self: flex-start; padding: 4px 14px; border-radius: 999px; background: var(--qz-tone-soft); color: #1d2433; filter: none; }
@media (prefers-reduced-motion: reduce) { body.qz { transition: none; } }

/* Contextual help: the (i) button and the drawer it opens (templates/_info.html, static/ui.js). The drawer floats over the page, so opening
   it never moves anything; on a phone it is a sheet from the bottom. */
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 0 0 4px; padding: 0; vertical-align: middle;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; line-height: 0; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft, rgba(43, 45, 66, .08)); }
.info-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1 .info-btn, h2 .info-btn, h3 .info-btn { position: relative; top: -1px; }
label .info-btn { margin-left: 2px; }
.info-panel[hidden] { display: none; }                           /* the detail, out of the way until asked for */
.info-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(20, 24, 32, .28); }
.info-scrim[hidden] { display: none; }
.info-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(440px, 100vw); box-sizing: border-box; overflow: auto;
  background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 36px rgba(20, 24, 32, .16); padding: 18px 22px 28px; }
.info-drawer[hidden] { display: none; }
.info-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.info-drawer-title { margin: 0; font-size: var(--text-lg); line-height: 1.3; }
.info-drawer-body { font-size: var(--text-sm, .9375rem); line-height: 1.55; }
.info-drawer-body > :first-child { margin-top: 0; }
.info-drawer-body p, .info-drawer-body ul, .info-drawer-body ol { margin: 0 0 10px; }
.info-drawer-body h3 { font-size: var(--text-base, 1rem); margin: 16px 0 6px; }
.info-drawer-body dt { font-weight: 600; margin-top: 10px; }
.info-drawer-body dd { margin: 2px 0 0; }
body.info-open { overflow: hidden; }
@media (max-width: 700px) {
  .info-drawer { top: auto; left: 0; width: auto; max-height: 85vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .info-drawer { animation: info-in .18s ease-out; }
  @keyframes info-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (max-width: 700px) { @keyframes info-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } }
}
@media print { .info-btn, .info-drawer, .info-scrim { display: none !important; } .info-panel { display: block !important; } }