/* ==========================================================================
   Maktab Letter Generator · app.css
   The "section colours" design (Claude Design v2 handoff), extended for the
   screens added since (build 2 and 3) and the incident log (v3, approved
   6 Oct 2026). Figtree is served from assets/fonts (SIL Open Font Licence).
   ========================================================================== */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("../fonts/figtree-latin-ext-wght-normal.woff2") 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: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("../fonts/figtree-latin-wght-normal.woff2") 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; }

/* ==========================================================================
   Maktab Letter Generator · app.css · v2 "Section colours"
   Drop-in replacement. Every class, ID and data-hook from DESIGN-BRIEF §6
   is still styled. Classes added in v2 are marked  NEW  in the comments.
   Order: 1 tokens · 2 section hues · 3 base · 4 shell · 5 layout · 6 buttons
          7 forms · 8 tables · 9 status · 10 navigation · 11 screens · 12 print
          13 responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Neutrals: cool slate-grey */
  --n-0: #ffffff;
  --n-25: #fafbfc;
  --n-50: #f5f6f8;
  --n-100: #eef0f3;
  --n-150: #e5e8ec;
  --n-200: #d7dbe1;
  --n-300: #bcc2cc;
  --n-400: #959dab;
  --n-500: #687183;   /* lowest text tone: 4.9:1 on white */
  --n-600: #4f5768;
  --n-700: #3b4252;
  --n-800: #262c38;
  --n-900: #151922;

  /* Section hues. Each is a tonal set:
     50 tint background · 100 soft fill · 200 line · 500 mid (bars, dots)
     600 strong (button fill, AA with --x-on) · icon (3:1 on white)
     700 ink (text-safe on white and on 50/100) · 900 deep */
  --indigo-50: #eef0ff;  --indigo-100: #e0e4ff; --indigo-200: #c5cbfc; --indigo-500: #5d63ee;
  --indigo-600: #4545d6; --indigo-700: #3734b0; --indigo-900: #221f6b; --indigo-on: #ffffff; --indigo-icon: #4545d6;

  --violet-50: #f5f0ff;  --violet-100: #ebe1ff; --violet-200: #d6c4fe; --violet-500: #8b5cf6;
  --violet-600: #7038d8; --violet-700: #5b27b5; --violet-900: #36176e; --violet-on: #ffffff; --violet-icon: #7038d8;

  --teal-50: #e8f7f5;    --teal-100: #cdeee9;   --teal-200: #9cddd3;   --teal-500: #14a090;
  --teal-600: #0b7d72;   --teal-700: #09645c;   --teal-900: #073f3a;   --teal-on: #ffffff;   --teal-icon: #0b7d72;

  --coral-50: #fff2ee;   --coral-100: #ffe1d8;  --coral-200: #ffc3b2;  --coral-500: #f0613c;
  --coral-600: #c9401b;  --coral-700: #a8320f;  --coral-900: #66200b;  --coral-on: #ffffff;  --coral-icon: #c9401b;

  --amber-50: #fff8e6;   --amber-100: #ffefc2;  --amber-200: #fcdc85;  --amber-500: #f4b02a;
  --amber-600: #e99b0b;  --amber-700: #8a5300;  --amber-900: #573400;  --amber-on: #3a2400;  --amber-icon: #b87400;

  --slate-50: #f1f4f8;   --slate-100: #e3e8ef;  --slate-200: #cbd3df;  --slate-500: #64748b;
  --slate-600: #475569;  --slate-700: #334155;  --slate-900: #1e293b;  --slate-on: #ffffff;  --slate-icon: #475569;

  /* Semantic */
  --success-50: #ebf8f0; --success-200: #b5e3c6; --success-600: #17803d; --success-900: #0c4a24;
  --warning-50: #fff8e6; --warning-100: #ffefc2; --warning-200: #fbd98a; --warning-600: #b25e00; --warning-900: #5c3300;
  --error-50: #fef1f0;   --error-200: #f8c5c0;   --error-600: #c2261b;   --error-700: #a11d14;   --error-900: #6e140e;
  --info-50: #edf5ff;    --info-200: #bcd8fb;    --info-600: #1b66c9;    --info-900: #0f3a73;

  /* Type: one family */
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-overline: .6875rem;  /* 11 */
  --fs-caption: .75rem;     /* 12 */
  --fs-label: .8125rem;     /* 13 */
  --fs-body: .90625rem;     /* 14.5 */
  --fs-body-lg: 1rem;       /* 16 */
  --fs-title: 1.0625rem;    /* 17  card titles */
  --fs-headline: 1.375rem;  /* 22  section headings */
  --fs-display: 1.625rem;   /* 26  page titles */
  --fs-stat: 1.75rem;       /* 28  numbers */
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* Spacing: 4pt grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Radius */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 999px;

  /* Elevation: soft, low-contrast */
  --e-1: 0 1px 2px rgba(21, 25, 34, .05), 0 1px 1px rgba(21, 25, 34, .03);
  --e-2: 0 1px 2px rgba(21, 25, 34, .04), 0 4px 12px -2px rgba(21, 25, 34, .08);
  --e-3: 0 2px 4px rgba(21, 25, 34, .04), 0 12px 28px -6px rgba(21, 25, 34, .14);
  --e-4: 0 4px 8px rgba(21, 25, 34, .06), 0 24px 48px -12px rgba(21, 25, 34, .24);

  /* Lines */
  --line: var(--n-150);
  --line-strong: var(--n-200);
  --line-soft: var(--n-100);

  /* Focus */
  --focus: #4545d6;
  --focus-ring: 0 0 0 3px rgba(69, 69, 214, .22);

  /* Motion: short and subtle */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);

  /* Layout */
  --side-w: 256px;
  --content-max: 1280px;
  --tap: 44px;
  --top-h: 65px;

  /* Icons used by CSS (masks) */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687183' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* Geometric motif: interlaced eight-point stars (login, brand, empty states only) */
  --pattern-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M10 10h20v20H10z'/%3E%3Cpath d='M20 5.86 34.14 20 20 34.14 5.86 20z'/%3E%3Cpath d='M0 20h5.86M34.14 20H40M20 0v5.86M20 34.14V40'/%3E%3C/g%3E%3C/svg%3E");

  /* Legacy aliases: the v1 names still resolve (inline styles in PHP may use them) */
  --bg: var(--n-50);
  --panel: #ffffff;
  --ink: var(--n-900);
  --ink-2: var(--n-700);
  --muted: var(--n-500);
  --line-2: var(--n-100);
  --danger: var(--error-600);
  --warn: var(--warning-600);
  --warn-soft: var(--warning-50);
  --ok: var(--success-600);
  --radius: var(--r-xl);
  --shadow: var(--e-1);
  color-scheme: light;
}

/* ---------- 2. Section hues ----------
   The page's section is set on <body data-section="…">  NEW
   Any element can borrow another section's hue with .hue-*  NEW
   Components only ever read the --sec-* variables.                        */
:root, [data-section="dash"], [data-section="letters"], .hue-dash, .hue-letters {
  --sec-50: var(--indigo-50); --sec-100: var(--indigo-100); --sec-200: var(--indigo-200); --sec-500: var(--indigo-500);
  --sec-600: var(--indigo-600); --sec-hover: var(--indigo-700); --sec-ink: var(--indigo-700); --sec-900: var(--indigo-900);
  --sec-on: var(--indigo-on); --sec-icon: var(--indigo-icon);
}
[data-section="templates"], .hue-templates {
  --sec-50: var(--violet-50); --sec-100: var(--violet-100); --sec-200: var(--violet-200); --sec-500: var(--violet-500);
  --sec-600: var(--violet-600); --sec-hover: var(--violet-700); --sec-ink: var(--violet-700); --sec-900: var(--violet-900);
  --sec-on: var(--violet-on); --sec-icon: var(--violet-icon);
}
[data-section="students"], .hue-students {
  --sec-50: var(--teal-50); --sec-100: var(--teal-100); --sec-200: var(--teal-200); --sec-500: var(--teal-500);
  --sec-600: var(--teal-600); --sec-hover: var(--teal-700); --sec-ink: var(--teal-700); --sec-900: var(--teal-900);
  --sec-on: var(--teal-on); --sec-icon: var(--teal-icon);
}
[data-section="incidents"], .hue-incidents {
  --sec-50: var(--coral-50); --sec-100: var(--coral-100); --sec-200: var(--coral-200); --sec-500: var(--coral-500);
  --sec-600: var(--coral-600); --sec-hover: var(--coral-700); --sec-ink: var(--coral-700); --sec-900: var(--coral-900);
  --sec-on: var(--coral-on); --sec-icon: var(--coral-icon);
}
[data-section="attendance"], .hue-attendance {
  --sec-50: var(--amber-50); --sec-100: var(--amber-100); --sec-200: var(--amber-200); --sec-500: var(--amber-500);
  --sec-600: var(--amber-600); --sec-hover: #d88d05; --sec-ink: var(--amber-700); --sec-900: var(--amber-900);
  --sec-on: var(--amber-on); --sec-icon: var(--amber-icon);
}
[data-section="admin"], .hue-admin {
  --sec-50: var(--slate-50); --sec-100: var(--slate-100); --sec-200: var(--slate-200); --sec-500: var(--slate-500);
  --sec-600: var(--slate-600); --sec-hover: var(--slate-700); --sec-ink: var(--slate-700); --sec-900: var(--slate-900);
  --sec-on: var(--slate-on); --sec-icon: var(--slate-icon);
}
/* v1 accent names follow the current section */
:root, [data-section], [class*="hue-"] {
  --accent: var(--sec-600);
  --accent-2: var(--sec-hover);
  --accent-soft: var(--sec-50);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--n-50); color: var(--n-900);
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--indigo-700); text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--indigo-900); text-decoration: underline; }
h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0 0 var(--sp-2); color: var(--n-900); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-display); letter-spacing: -.018em; }
h2 { font-size: var(--fs-headline); }
h3 { font-size: var(--fs-title); font-weight: 650; }
h4 { font-size: var(--fs-body); font-weight: 650; letter-spacing: 0; }
p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
b, strong { font-weight: 650; }
code, .mono { font-family: var(--font-mono); font-size: max(.86em, 12px); }
code { background: var(--n-100); color: var(--n-800); padding: 1px 6px; border-radius: var(--r-xs); }
pre.code { background: var(--n-25); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); overflow: auto; font-size: .82rem; white-space: pre-wrap; }
::selection { background: var(--indigo-100); color: var(--n-900); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--n-500); }
.small { font-size: var(--fs-label); }
.xsmall { font-size: var(--fs-caption); }
.strong { font-weight: 650; color: var(--n-900); }
a.strong { color: var(--n-900); }
a.strong:hover { color: var(--indigo-700); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.ic { flex: none; vertical-align: -3px; }
[hidden] { display: none !important; }

/* ---------- 4. Shell ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side {
  background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
}
.brand { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-5) var(--sp-4) var(--sp-4) var(--sp-5); }
.brand-mark {
  width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--indigo-600); color: #fff;
  display: grid; place-items: center; flex: none;
  box-shadow: 0 1px 2px rgba(34, 31, 107, .3), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.brand-mark .ic { width: 24px; height: 24px; }
.brand-text { min-width: 0; padding-top: 1px; }  /* NEW wrapper */
.brand-name { font-weight: 700; font-size: .9375rem; line-height: 1.25; color: var(--n-900); overflow-wrap: anywhere; letter-spacing: -.005em; }
.brand-sub { font-size: var(--fs-caption); color: var(--n-500); margin-top: 2px; }
.side nav { padding: var(--sp-2) var(--sp-3); flex: 1; }
.side nav a, .side-foot a, .side-foot .linkish {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: 6px 10px 6px 6px;
  border-radius: var(--r-md); color: var(--n-700); font-weight: 500; margin-bottom: 2px;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.side nav a > .ic, .side-foot a > .ic, .side-foot .linkish > .ic { color: var(--sec-icon); margin-left: 4px; } /* v1 markup fallback */
.nav-ic {  /* NEW: coloured icon tile */
  width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none;
  background: var(--sec-100); color: var(--sec-ink);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-ic .ic { width: 16px; height: 16px; stroke-width: 2; }
.side nav a:hover, .side-foot a:hover, .side-foot .linkish:hover { background: var(--n-50); color: var(--n-900); text-decoration: none; }
.side nav a.on, .side-foot a.on { background: var(--sec-50); color: var(--sec-900); font-weight: 650; }
.side nav a.on .nav-ic, .side-foot a.on .nav-ic { background: var(--sec-600); color: var(--sec-on); box-shadow: 0 1px 2px rgba(21, 25, 34, .16); }
.nav-sep { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: .08em; color: var(--n-500); padding: var(--sp-4) 10px 6px; font-weight: 700; }
.side-foot { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--line-soft); }
.side-foot form { margin: 0; }
.side-foot small { display: block; font-size: var(--fs-caption); color: var(--n-500); font-weight: 400; line-height: 1.2; }
.side-foot .nav-ic { background: var(--n-100); color: var(--n-600); }
.linkish { background: none; border: 0; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.main {
  min-width: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sec-50), var(--n-50) 280px) no-repeat, var(--n-50);
}
.top { display: flex; align-items: center; gap: 14px; padding: var(--sp-8) var(--sp-8) var(--sp-2); max-width: var(--content-max); width: 100%; }
.top h1 { margin: 0; line-height: 1.2; }
.top-ic {  /* NEW: page header icon in the section hue */
  width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--sec-600); color: var(--sec-on);
  display: grid; place-items: center; flex: none; box-shadow: 0 1px 2px rgba(21, 25, 34, .14), 0 6px 14px -6px var(--sec-500);
}
.top-ic .ic { width: 22px; height: 22px; }
.menu-btn {
  display: none; width: var(--tap); height: var(--tap); border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: #fff; color: var(--n-800); place-items: center; cursor: pointer; padding: 0; flex: none;
}
.menu-btn .ic { width: 20px; height: 20px; }
.content { padding: var(--sp-4) var(--sp-8) var(--sp-16); max-width: var(--content-max); width: 100%; }

/* ---------- 5. Cards & layout ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6); box-shadow: var(--e-1); margin-bottom: var(--sp-5);
}
.card-flush { padding: 0; overflow: hidden; overflow: clip; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.card-head h3 { margin: 0; }
.card-title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }  /* NEW */
.card-title p, .card-title .muted { margin: 2px 0 0; }
.card-ic {  /* NEW: small hue tile beside a card title */
  width: 34px; height: 34px; border-radius: var(--r-md); background: var(--sec-100); color: var(--sec-ink);
  display: grid; place-items: center; flex: none;
}
.card-ic .ic { width: 18px; height: 18px; }
.card-foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; background: var(--n-25); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-5); }
.grid-2 > .card { margin-bottom: 0; }
.grid-2.wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.sub { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-overline); font-weight: 700; color: var(--n-500); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: #fff; color: var(--n-800);
  font: inherit; font-size: var(--fs-body); font-weight: 600; line-height: 1.2; letter-spacing: 0;
  cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 1px rgba(21, 25, 34, .04);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn .ic { width: 18px; height: 18px; color: var(--n-600); }
.btn[class*="hue-"] .ic { color: var(--sec-icon); }  /* secondary button that leads to another section */
.btn:hover, .btn.is-hover { background: var(--n-50); border-color: var(--n-300); color: var(--n-900); text-decoration: none; }
.btn:active, .btn.is-active { background: var(--n-100); transform: translateY(.5px); }
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.btn-primary { background: var(--sec-600); border-color: var(--sec-600); color: var(--sec-on); box-shadow: 0 1px 2px rgba(21, 25, 34, .14), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary .ic, .btn-primary[class*="hue-"] .ic { color: currentColor; }
.btn-primary:hover, .btn-primary.is-hover { background: var(--sec-hover); border-color: var(--sec-hover); color: var(--sec-on); }
.btn-primary:active, .btn-primary.is-active { background: var(--sec-hover); filter: brightness(.94); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--n-700); }
.btn-ghost:hover, .btn-ghost.is-hover { background: var(--n-100); border-color: transparent; }
.btn-ghost:active { background: var(--n-150); }
.btn-danger-ghost { color: var(--error-700); border-color: var(--error-200); background: #fff; }
.btn-danger-ghost .ic { color: currentColor; }
.btn-danger-ghost:hover, .btn-danger-ghost.is-hover { background: var(--error-50); border-color: #eea59d; color: var(--error-700); }
.btn-danger { background: var(--error-600); border-color: var(--error-600); color: #fff; }  /* NEW */
.btn-danger .ic { color: currentColor; }
.btn-danger:hover { background: var(--error-700); border-color: var(--error-700); color: #fff; }
.btn-inverse { background: #fff; border-color: #fff; color: var(--sec-900); box-shadow: 0 1px 2px rgba(21, 25, 34, .18); }  /* NEW: on hero colour */
.btn-inverse .ic { color: var(--sec-600); }
.btn-inverse:hover { background: var(--sec-50); border-color: var(--sec-50); color: var(--sec-900); }
.btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-label); border-radius: var(--r-sm); gap: 6px; }
.btn-sm .ic { width: 16px; height: 16px; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: var(--fs-body-lg); border-radius: var(--r-lg); gap: 10px; }
.btn-lg .ic { width: 20px; height: 20px; }
.btn-block { width: 100%; justify-content: center; }
.icon-btn {
  width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--n-500); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.icon-btn .ic { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--n-100); color: var(--n-900); }
.icon-btn:active { background: var(--n-150); }
.icon-btn[data-confirm]:hover { background: var(--error-50); color: var(--error-700); }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }

/* ---------- 7. Forms ---------- */
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: var(--fs-label); color: var(--n-700); }
label small, .upload-box small { font-weight: 400; color: var(--n-500); font-size: var(--fs-caption); line-height: 1.4; }
input, select, textarea {
  font: inherit; font-size: var(--fs-body); font-weight: 400; color: var(--n-900); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 9px 12px; width: 100%; min-width: 0; min-height: 40px;
  box-shadow: inset 0 1px 1px rgba(21, 25, 34, .03);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
textarea { line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--n-500); opacity: 1; }
input:hover, select:hover, textarea:hover, .is-hover-input { border-color: var(--n-300); }
input:focus, select:focus, textarea:focus, .is-focus-input { outline: 2px solid transparent; border-color: var(--focus); box-shadow: var(--focus-ring); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .is-invalid { border-color: var(--error-600); }
input[aria-invalid="true"]:focus, .is-invalid:focus { box-shadow: 0 0 0 3px rgba(194, 38, 27, .18); }
input:disabled, select:disabled, textarea:disabled { background: var(--n-100); color: var(--n-500); cursor: not-allowed; border-color: var(--line); }
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #fff var(--select-chevron) no-repeat right 10px center / 18px 18px; padding-right: 36px;
}
select[multiple], select[size] { background-image: none; padding-right: 12px; }
input[type=checkbox], input[type=radio] {
  width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; cursor: pointer;
  accent-color: var(--sec-600); box-shadow: none;
}
input[type=color] { padding: 3px; height: 40px; width: 48px; cursor: pointer; }
input[type=file] { padding: 6px; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; font-size: var(--fs-label); color: var(--n-800); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--n-50); border-radius: var(--r-sm); padding: 6px 12px; margin-right: 12px;
}
.filters input, .filters select, .gen-row select, .inline-form select { width: auto; }
.input-xs { width: 76px !important; }
.input-sm { max-width: 150px; min-height: 32px; padding: 5px 10px; font-size: var(--fs-label); border-radius: var(--r-sm); }
select.input-sm { padding-right: 30px; background-position: right 8px center; background-size: 16px; }
label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; font-size: var(--fs-body); color: var(--n-800); cursor: pointer; min-height: 32px; }
.form-card { max-width: 980px; }
.form-card.narrow { max-width: 520px; display: flex; flex-direction: column; gap: var(--sp-4); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-section { margin: 28px 0 14px; padding-top: var(--sp-6); border-top: 1px solid var(--line-soft); font-size: var(--fs-body-lg); font-weight: 650; }
.form-card > .form-section:first-of-type, form > .form-section:first-child { border-top: 0; padding-top: 0; margin-top: var(--sp-1); }
.form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); align-items: center; }
.full { margin-top: var(--sp-2); }
.field-label { font-weight: 650; font-size: var(--fs-body); margin-bottom: 10px; color: var(--n-900); }
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--n-500); pointer-events: none; }
.search input { padding-left: 38px; min-width: 220px; }
.file-drop {
  border: 2px dashed var(--n-300); border-radius: var(--r-xl); padding: 28px var(--sp-5); align-items: center; text-align: center;
  cursor: pointer; color: var(--n-600); background: var(--n-25); transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.file-drop:hover { border-color: var(--sec-500); background: var(--sec-50); }
.file-drop input { border: 0; padding: 4px; max-width: 360px; background: transparent; box-shadow: none; }
.upload-box { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--n-25); }
.upload-preview { max-height: 80px; max-width: 240px; object-fit: contain; background: repeating-conic-gradient(#f0f1f3 0 25%, #fff 0 50%) 0 0/14px 14px; border-radius: var(--r-sm); padding: 4px; align-self: flex-start; border: 1px solid var(--line); }
.danger-zone {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--error-200); background: var(--error-50); color: var(--error-900); border-radius: var(--r-xl); max-width: 980px; flex-wrap: wrap;
}
.danger-zone .muted { color: var(--error-900); }
.danger-zone.wide { max-width: none; }

/* ---------- 8. Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th {
  text-align: left; font-size: var(--fs-caption); font-weight: 650; color: var(--n-500); letter-spacing: .01em;
  padding: 10px var(--sp-4); border-bottom: 1px solid var(--line); background: var(--n-25); white-space: nowrap;
}
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody td { transition: background var(--dur-1) var(--ease); }
.table tbody tr:hover td { background: var(--n-25); }
.table tbody tr:has(input[name="ids[]"]:checked) td { background: var(--sec-50); }
.table .num { text-align: right; width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .chk { width: 44px; padding-right: 0; }
.table tr.dim td { color: var(--n-500); }
.table tr.dim td > * { opacity: .7; }
.table tr.hl td { background: var(--sec-50); }
.table input:not([type=checkbox]):not([type=radio]):not([type=color]), .table select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-label); }
.table select { background-position: right 8px center; padding-right: 30px; }
.table input[name="name"], .table input[name$="_name"] { min-width: 160px; }
.table td > select { min-width: 120px; }
.card:not(.card-flush) .table th { background: transparent; }
.card:not(.card-flush) .table th:first-child, .card:not(.card-flush) .table td:first-child { padding-left: var(--sp-1); }
.name-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }  /* NEW */
.row-form { display: flex; gap: var(--sp-2); align-items: center; }
.row-form input[name=name] { flex: 1.2; }
.row-form input[name=teacher] { flex: 1; min-width: 120px; }
.map-table select { min-width: 220px; }
.pager { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.pager a, .pager b, .pager span { min-width: 32px; height: 32px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: var(--r-sm); font-size: var(--fs-label); font-weight: 600; color: var(--n-700); }
.pager b { background: var(--sec-600); color: var(--sec-on); }
.pager a:hover { background: var(--n-100); text-decoration: none; }

/* ---------- 9. Status: badges, pills, chips, notices ---------- */
/* Incident types: admin colour (--c) is only ever a dot, on a neutral pill, so any colour stays readable */
.badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-size: var(--fs-caption); font-weight: 600; line-height: 1; padding: 5px 10px 5px 8px; border-radius: var(--r-full);
  color: var(--n-800); background: var(--n-100); white-space: nowrap;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--n-400)); box-shadow: inset 0 0 0 1px rgba(21, 25, 34, .24); flex: none; }
.pill {
  display: inline-flex; justify-content: center; align-items: center; min-width: 24px; height: 22px; padding: 0 8px;
  font-size: var(--fs-caption); font-weight: 700; border-radius: var(--r-full); background: var(--sec-100); color: var(--sec-ink); font-variant-numeric: tabular-nums;
}
.pill-warn { background: var(--warning-100); color: var(--warning-900); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-label); font-weight: 550;
  padding: 4px 5px 4px 10px; border-radius: var(--r-full); background: #fff; color: var(--n-800); border: 1px solid var(--line-strong);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--n-400)); box-shadow: inset 0 0 0 1px rgba(21, 25, 34, .24); flex: none; }
.chip b { background: var(--n-100); border-radius: var(--r-full); padding: 1px 8px; font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Flash messages become floating toasts. Success hides itself after 6s; errors stay until closed. */
.flash {
  position: fixed; z-index: 200; right: var(--sp-6); bottom: var(--sp-6); width: min(420px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: 14px var(--sp-4); margin: 0;
  border-radius: var(--r-lg); border: 1px solid transparent; font-size: var(--fs-body); font-weight: 550; line-height: 1.4;
  box-shadow: var(--e-4); animation: toast-in var(--dur-3) var(--ease-out) both;
}
.flash::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i-check-circle) center/contain no-repeat; mask: var(--i-check-circle) center/contain no-repeat; }
.flash-success { background: var(--n-900); color: #fff; animation: toast-in var(--dur-3) var(--ease-out) both, toast-out var(--dur-3) var(--ease) 6s forwards; }
.flash-success::before { background: #5ee08d; }
.flash-success:hover { animation-play-state: paused; }
.flash-error { background: #fff; color: var(--error-900); border-color: var(--error-200); }
.flash-error::before { background: var(--error-600); -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.flash-close {  /* NEW */
  margin: -8px -10px -8px auto; width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-xs); color: inherit; opacity: .7; cursor: pointer; font: inherit; font-size: 18px; line-height: 1;
}
.flash-close:hover { opacity: 1; background: rgba(127, 127, 127, .16); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); visibility: hidden; } }
.warn-box {
  position: relative; background: var(--warning-50); border: 1px solid var(--warning-200); color: var(--warning-900);
  padding: 14px var(--sp-4) 14px 46px; border-radius: var(--r-lg); margin-bottom: var(--sp-4); font-size: var(--fs-body);
}
.warn-box::before { content: ""; position: absolute; left: var(--sp-4); top: 15px; width: 20px; height: 20px; background: var(--warning-600); -webkit-mask: var(--i-alert) center/contain no-repeat; mask: var(--i-alert) center/contain no-repeat; }
.warn-box ul { margin: 6px 0 2px; padding-left: 18px; }
.warn-box a { color: var(--warning-900); text-decoration: underline; }
.source-note {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--sp-4); font-size: var(--fs-body); color: var(--n-700); box-shadow: var(--e-1);
}
.source-note .ic { color: var(--sec-icon); }
.empty { position: relative; isolation: isolate; text-align: center; padding: 44px var(--sp-4) 36px; color: var(--n-600); }
.empty::before {  /* geometric motif behind the empty-state icon */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 360px; max-width: 100%; height: 170px; transform: translateX(-50%);
  background: var(--sec-200);
  -webkit-mask: var(--pattern-stars) center 4px/40px 40px repeat, radial-gradient(closest-side, #000 20%, transparent);
  -webkit-mask-composite: source-in;
  mask: var(--pattern-stars) center 4px/40px 40px repeat, radial-gradient(closest-side, #000 20%, transparent);
  mask-composite: intersect;
  opacity: .8;
}
.empty-ic {  /* NEW */
  width: 56px; height: 56px; margin: 0 auto var(--sp-4); border-radius: var(--r-xl); display: grid; place-items: center;
  background: #fff; color: var(--sec-ink); border: 1px solid var(--sec-200); box-shadow: var(--e-2);
}
.empty-ic .ic { width: 26px; height: 26px; }
.empty-title { font-weight: 700; color: var(--n-900); margin-bottom: 6px; font-size: var(--fs-body-lg); }
.empty p { max-width: 440px; margin: 0 auto var(--sp-2); font-size: var(--fs-body); }
.empty .actions { justify-content: center; margin-top: var(--sp-4); }
.card > .empty:only-child { padding-top: 28px; }

/* ---------- 10. Segmented controls & tabs ---------- */
.seg { display: inline-flex; background: var(--n-100); border-radius: var(--r-lg); padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg a, .seg label {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 32px; padding: 0 14px; border-radius: var(--r-sm); color: var(--n-600); font-size: var(--fs-label); font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.seg a:hover, .seg label:hover { color: var(--n-900); text-decoration: none; background: rgba(255, 255, 255, .6); }
.seg .on, .seg .on:hover { background: #fff; color: var(--n-900); box-shadow: 0 1px 2px rgba(21, 25, 34, .08), 0 1px 3px rgba(21, 25, 34, .06); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg .ic { width: 18px; height: 18px; color: var(--n-500); }
.seg .on .ic { color: var(--sec-icon); }
.seg-tabs { display: flex; width: 100%; margin-bottom: var(--sp-4); }
.seg-tabs label { flex: 1 1 0; min-height: 44px; font-size: var(--fs-body); }
.seg-tabs input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 14px; color: var(--n-600); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.tabs a:hover { text-decoration: none; color: var(--n-900); background: rgba(21, 25, 34, .04); }
.tabs a.on { color: var(--sec-ink); border-bottom-color: var(--sec-600); }

/* ---------- 11. Screens ---------- */
/* Dashboard */
.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.hello h2 { margin: 0 0 2px; }
.hello p { margin: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); margin-bottom: var(--sp-5); align-items: stretch; }  /* NEW */
.hero-grid > .card { margin: 0; }
.hero-stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }  /* NEW */
.hero-stack .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.hero-stack .hero-card { flex: 1; }
.hero-card {  /* NEW: the "Write letters" hero */
  display: flex; flex-direction: column; gap: var(--sp-3); padding: 28px; border-radius: var(--r-2xl);
  background: var(--sec-600); color: var(--sec-on); box-shadow: 0 1px 2px rgba(21, 25, 34, .12), 0 18px 36px -18px var(--sec-600);
}
.hero-card h2 { color: inherit; font-size: 1.625rem; margin: var(--sp-2) 0 0; }
.hero-card p { margin: 0; font-size: var(--fs-body-lg); max-width: 34em; }
.hero-card .actions { margin-top: var(--sp-2); }
.hero-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.hero-ic .ic { width: 26px; height: 26px; }
.hero-foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .24); font-size: var(--fs-label); }
.hero-foot a { color: inherit; text-decoration: underline; font-weight: 600; }
.due-total { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px var(--sp-3); border-radius: var(--r-full); background: var(--sec-50); color: var(--sec-ink); font-weight: 600; font-size: var(--fs-label); white-space: nowrap; }  /* NEW */
.due-total b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-4) 18px; box-shadow: var(--e-1);
  display: flex; flex-direction: column; color: var(--n-900);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.tile:has(.tile-ic) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.tile:hover { text-decoration: none; color: var(--n-900); border-color: var(--sec-200); box-shadow: var(--e-2); transform: translateY(-1px); }
.tile-ic { grid-row: span 2; width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--sec-100); color: var(--sec-ink); display: grid; place-items: center; }  /* NEW */
.tile-ic .ic { width: 22px; height: 22px; }
.tile-n { font-size: var(--fs-stat); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile-l { color: var(--n-600); font-size: var(--fs-label); font-weight: 500; }
.setup { border-color: var(--sec-200); background: linear-gradient(180deg, var(--sec-50), #fff 140px); }
.progress { height: 6px; border-radius: var(--r-full); background: var(--n-150); overflow: hidden; margin: -4px 0 var(--sp-4); }  /* NEW */
.progress > span { display: block; height: 100%; background: var(--sec-600); border-radius: inherit; }
.checklist { list-style: none; counter-reset: step; margin: 0 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2); }
.checklist li { counter-increment: step; display: flex; align-items: center; gap: 10px; padding: 10px var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.checklist li::before {
  content: counter(step); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: var(--fs-caption); font-weight: 700; color: var(--sec-ink); background: var(--sec-50); box-shadow: inset 0 0 0 1.5px var(--sec-200);
}
.checklist li.done { background: var(--n-25); }
.checklist li.done::before { content: ""; background: var(--success-600); box-shadow: none; -webkit-mask: var(--i-check-circle) center/24px no-repeat; mask: var(--i-check-circle) center/24px no-repeat; }
.checklist li a { font-weight: 600; color: var(--n-900); }
.checklist li.done a { color: var(--n-500); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--n-300); }
.due-group { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); background: #fff; }
.due-group:last-child { margin-bottom: 0; }
.due-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-bottom: 6px; }
.due-head > div { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.due-list, .feed { list-style: none; padding: 0; margin: 0; }
.due-list li { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; min-height: 40px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.due-list li:first-child { border-top: 0; }
.due-list li a { font-weight: 600; color: var(--n-900); }
.due-list .pill { margin-left: auto; }
.feed li { padding: 10px 0; min-height: 44px; border-top: 1px solid var(--line-soft); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.feed li:first-child { border-top: 0; }
.feed li > a { font-weight: 600; color: var(--n-900); }
.feed li > a:hover { color: var(--indigo-700); }
.feed.compact li { padding: 6px 0; min-height: 36px; }
.feed-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }  /* NEW */
.feed-main > a, .feed-main > b { font-weight: 600; color: var(--n-900); }
.feed li > .btn, .feed li > .inline-form { margin-left: auto; }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 32px; gap: var(--sp-3); align-items: center; font-size: var(--fs-label); }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--n-700); font-weight: 500; }
.bar-track { height: 8px; background: var(--n-100); border-radius: var(--r-full); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--r-full); }
.bar-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Student profile */
.profile-head { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.profile-head h2 { margin: 0 0 6px; }
.profile-id { flex: 1; min-width: 220px; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--n-600); font-size: var(--fs-label); }  /* NEW */
.profile-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.profile-meta .ic { width: 16px; height: 16px; color: var(--n-400); }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--sec-100); color: var(--sec-ink); display: grid; place-items: center; font-weight: 700; font-size: 1.0625rem; flex: none; letter-spacing: .02em; }
.profile-head .avatar { width: 64px; height: 64px; font-size: 1.25rem; box-shadow: 0 0 0 4px var(--sec-50); }
.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-caption); }  /* NEW */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-5); }  /* NEW */
.profile-grid > .card { margin: 0; }
.details { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px var(--sp-3); margin: 0; }
.details dt { color: var(--n-500); font-size: var(--fs-label); padding-top: 1px; }
.details dd { margin: 0; overflow-wrap: anywhere; }
.mini-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.mini-stats > div { flex: 1; min-width: 80px; background: var(--sec-50); border: 1px solid var(--sec-100); border-radius: var(--r-lg); padding: 10px var(--sp-3); }
.mini-stats b { display: block; font-size: 1.375rem; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--n-900); }
.mini-stats span { font-size: var(--fs-caption); color: var(--n-600); }

/* Bulk action bar: quiet until something is ticked (app.js adds .has-selection) */
.bulkbar {
  display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-4); border-bottom: 1px solid var(--line); background: var(--n-25);
  flex-wrap: wrap; position: sticky; top: 0; z-index: 6; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.bulkbar > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--n-600); font-size: var(--fs-label); margin-right: var(--sp-1); }
.bulkbar [data-count] { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--n-200); color: var(--n-700); font-size: var(--fs-caption); transition: background var(--dur-2) var(--ease); }
.bulkbar.has-selection { background: var(--sec-50); border-bottom-color: var(--sec-200); }
.bulkbar.has-selection > span:first-child { color: var(--sec-900); }
.bulkbar.has-selection [data-count] { background: var(--sec-600); color: var(--sec-on); }
.bulkbar:not(.has-selection) .btn, .bulkbar:not(.has-selection) select { opacity: .5; pointer-events: none; box-shadow: none; }
.bulkbar .sep { width: 1px; height: 24px; background: var(--line-strong); margin: 0 var(--sp-1); }
.bulkbar select { width: auto; min-width: 170px; }

/* Student picker */
.picker { border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.picker-bar { display: flex; gap: var(--sp-2); padding: 10px; background: var(--n-25); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.picker-bar select { width: auto; flex: 0 1 auto; }
.picker-bar .search { flex: 1 1 180px; }
.picker-bar .search input { min-width: 0; }
.picker-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: 6px 14px; min-height: 44px; border-bottom: 1px solid var(--line-soft); }
.picker-head [data-picker-count] { color: var(--sec-ink); font-size: var(--fs-body); }
.picker-list { max-height: 340px; overflow-y: auto; padding: 0 0 var(--sp-1); overscroll-behavior: contain; }
.picker-list label { flex-direction: row; align-items: center; gap: var(--sp-3); padding: 0 14px; min-height: 40px; font-weight: 500; font-size: var(--fs-body); color: var(--n-800); cursor: pointer; transition: background var(--dur-1) var(--ease); }
.picker-list label:hover { background: var(--n-50); }
.picker-list label:has(input:checked) { background: var(--sec-50); color: var(--sec-900); }
.picker-list label small { margin-left: auto; color: var(--n-500); font-size: var(--fs-caption); }
.picker-list .picker-group { position: sticky; top: 0; z-index: 1; background: rgba(255, 255, 255, .96); font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: .08em; color: var(--n-500); padding: 10px 14px 4px; font-weight: 700; }
.picker-empty { padding: var(--sp-5); text-align: center; color: var(--n-500); font-size: var(--fs-body); }

/* Incidents */
.log-card summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; flex-wrap: wrap; border-radius: var(--r-md); }
.log-card summary::-webkit-details-marker { display: none; }
.log-card[open] summary { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.log-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }  /* NEW */
.log-title b { font-size: var(--fs-title); color: var(--n-900); }
.log-card[open] .log-toggle { display: none; }  /* NEW: the button in the summary only shows while closed */
.log-card:not([open]) .log-close { display: none; }
.log-close { color: var(--n-500); font-size: var(--fs-label); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.log-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; }
.log-grid > div { display: flex; flex-direction: column; gap: var(--sp-5); }
.type-choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.type-choice { flex-direction: row; cursor: pointer; position: relative; }
.type-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.type-choice span {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4) 0 var(--sp-3);
  border-radius: var(--r-full); border: 1px solid var(--line-strong); background: #fff; color: var(--n-800); font-weight: 600; font-size: var(--fs-body);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.type-choice span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--n-400)); box-shadow: inset 0 0 0 1px rgba(21, 25, 34, .24); flex: none; }
.type-choice:hover span { border-color: var(--n-300); background: var(--n-25); }
.type-choice input:checked + span { background: var(--sec-50); border-color: var(--sec-600); color: var(--sec-900); box-shadow: inset 0 0 0 1px var(--sec-600); }
.type-choice input:checked + span::after { content: ""; width: 16px; height: 16px; margin-left: auto; background: var(--sec-600); -webkit-mask: var(--i-check) center/contain no-repeat; mask: var(--i-check) center/contain no-repeat; }
.type-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.custom-dates { display: inline-flex; gap: var(--sp-2); align-items: center; }
.register td:not(:first-child), .register th:not(:first-child) { text-align: center; width: 96px; }
.reg-opt { display: inline-flex; cursor: pointer; position: relative; padding: 4px; border-radius: 50%; }
.reg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reg-opt span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--n-300); display: inline-block; background: #fff center/18px no-repeat; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.reg-opt:hover span { border-color: var(--n-400); }
.reg-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.reg-present input:checked + span { background-color: var(--success-600); border-color: var(--success-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.reg-absent input:checked + span { background-color: var(--error-600); border-color: var(--error-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.reg-late input:checked + span { background-color: var(--warning-600); border-color: var(--warning-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.color { width: 48px !important; }

/* Templates */
.group-title { display: flex; align-items: center; gap: var(--sp-3); margin: 28px 0 var(--sp-3); font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: .08em; color: var(--n-500); font-weight: 700; }
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.tpl-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--e-1); transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.tpl-card:hover { box-shadow: var(--e-2); border-color: var(--sec-200); }
.tpl-thumb { height: 132px; background: var(--sec-50); padding: var(--sp-4) var(--sp-6) 0; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.tpl-thumb-inner { background: #fff; height: 100%; padding: 12px 14px; font: 6.5px/1.45 Georgia, serif; color: #555; overflow: hidden; border-radius: 3px 3px 0 0; box-shadow: 0 0 0 1px rgba(21, 25, 34, .06), 0 4px 12px -4px rgba(21, 25, 34, .14); transition: transform var(--dur-2) var(--ease); }
.tpl-card:hover .tpl-thumb-inner { transform: translateY(-3px); }
.tpl-body { padding: 14px var(--sp-4) 6px; flex: 1; }
.tpl-body h4 { margin-bottom: var(--sp-1); font-size: var(--fs-body-lg); }
.tpl-body p { margin-bottom: 6px; }
.tpl-actions { display: flex; gap: 6px; padding: 10px var(--sp-4) var(--sp-4); flex-wrap: wrap; align-items: center; }
.tpl-actions .inline-form { margin-left: auto; }

/* Template editor */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
.editor-meta { margin-bottom: var(--sp-4); }
.editor-meta .form-grid { margin-bottom: var(--sp-3); }
.editor-side { position: sticky; top: var(--sp-4); max-height: calc(100vh - 32px); overflow-y: auto; margin: 0; padding: var(--sp-5); }
.editor-side h3 { display: flex; align-items: center; gap: 10px; }
.editor-side .search { margin: var(--sp-3) 0 var(--sp-2); }
.editor-side .search input { min-width: 0; }
.field-group { border-top: 1px solid var(--line-soft); padding: 2px 0; }
.field-group summary, .help summary, .advanced summary {
  cursor: pointer; font-weight: 650; font-size: var(--fs-body); padding: 10px 0; list-style: none; color: var(--n-900);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); border-radius: var(--r-xs);
}
.field-group summary::-webkit-details-marker, .help summary::-webkit-details-marker, .advanced summary::-webkit-details-marker { display: none; }
.field-group summary::after, .help summary::after, .advanced summary::after {
  content: ""; width: 18px; height: 18px; flex: none; background: var(--n-500); transition: transform var(--dur-2) var(--ease);
  -webkit-mask: var(--i-chevron) center/contain no-repeat; mask: var(--i-chevron) center/contain no-repeat;
}
.field-group[open] > summary::after, .help[open] > summary::after, .advanced[open] > summary::after { transform: rotate(180deg); }
.field-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 var(--sp-3); }
.field-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 8px;
  font: inherit; font-size: var(--fs-label); font-weight: 550; cursor: pointer;
  border: 1px solid var(--sec-200); background: var(--sec-50); color: var(--sec-900); border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.field-chip::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--sec-600); -webkit-mask: var(--i-plus) center/contain no-repeat; mask: var(--i-plus) center/contain no-repeat; }
.field-chip:hover { background: var(--sec-100); border-color: var(--sec-500); }
.field-chip:active { transform: scale(.97); }
.help { border-top: 1px solid var(--line-soft); padding-top: 2px; margin-top: var(--sp-2); }
.help p { margin: var(--sp-2) 0; }
.sticky-actions {
  position: sticky; bottom: var(--sp-4); z-index: 10; padding: var(--sp-3); margin-top: var(--sp-4);
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e-3);
}
.sticky-hint { color: var(--n-500); font-size: var(--fs-label); margin-left: auto; }  /* NEW */
/* TinyMCE: light skin around the editor (the editor itself is unchanged) */
.tox-tinymce { border-radius: var(--r-xl) !important; border: 1px solid var(--line) !important; box-shadow: var(--e-1); }
.tox .tox-editor-header { box-shadow: none !important; border-bottom: 1px solid var(--line) !important; padding: 2px 4px !important; }
.tox .tox-menubar, .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar-overlord { background-color: #fff !important; }
.tox .tox-mbtn, .tox .tox-tbtn { border-radius: var(--r-sm) !important; font-family: var(--font) !important; }
.tox .tox-tbtn:hover, .tox .tox-mbtn:hover:not(:disabled) { background: var(--n-100) !important; }
.tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover, .tox .tox-mbtn--active { background: var(--sec-100) !important; color: var(--sec-900) !important; }
.tox .tox-statusbar { border-top: 1px solid var(--line) !important; font-family: var(--font) !important; }
.tox .tox-edit-area::before { border-color: var(--focus) !important; }

/* Write letters */
.gen-form > .card { margin-bottom: var(--sp-4); }
.gen-step { display: flex; gap: var(--sp-5); padding: var(--sp-6); }
.gen-num { width: 36px; height: 36px; border-radius: 50%; background: var(--sec-600); color: var(--sec-on); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-body-lg); flex: none; box-shadow: 0 0 0 5px var(--sec-50); }
.gen-content { flex: 1; min-width: 0; }
.gen-content > h3 { margin: 6px 0 var(--sp-4); }
.gen-content > p { margin: var(--sp-3) 0 0; }
.gen-content > p + .form-grid { margin-top: var(--sp-4); }
.gen-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gen-row select#gen-template { min-width: 340px; max-width: 100%; min-height: 48px; font-size: var(--fs-body-lg); font-weight: 500; }
.class-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.check-card, .radio-card {
  flex-direction: row; align-items: center; gap: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: var(--sp-3) 14px; cursor: pointer; font-weight: 500; background: #fff; color: var(--n-800); min-height: 60px;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.check-card:hover, .radio-card:hover { border-color: var(--n-300); background: var(--n-25); }
.check-card:has(input:checked), .radio-card:has(input:checked) { border-color: var(--sec-600); background: var(--sec-50); box-shadow: inset 0 0 0 1px var(--sec-600); color: var(--sec-900); }
.check-card:has(input:focus-visible), .radio-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.check-card span { display: flex; flex-direction: column; line-height: 1.3; }
.check-card b { color: inherit; }
.check-card small, .radio-card small { color: var(--n-500); font-weight: 400; font-size: var(--fs-caption); }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.radio-card { align-items: flex-start; padding: 14px var(--sp-4); }
.radio-card input { margin-top: 2px; }
.radio-card span { display: flex; flex-direction: column; gap: 2px; }
.preview-top {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; position: sticky; top: var(--sp-3); z-index: 20;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: var(--e-3);
}
.preview-top h3 { margin: 0; }
.preview-top > .actions { flex-wrap: nowrap; }
.preview-top p { margin: 0; }
.step-eyebrow { font-size: var(--fs-overline); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sec-ink); margin-bottom: 2px; }  /* NEW */
.preview-tip { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 14px; margin: 0 0 var(--sp-4); background: var(--info-50); color: var(--info-900); border: 1px solid var(--info-200); border-radius: var(--r-lg); }
.preview-tip .ic { color: var(--info-600); }
/* Screen chrome around the A4 sheets (the sheets themselves are untouched) */
.content .sheets-in-app { background: var(--n-150); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 28px var(--sp-4) var(--sp-2); }
.sheets .sheet-tools { padding: 0 4px var(--sp-2); font-size: var(--fs-body); font-weight: 650; color: var(--n-800); }
.sheets .sheet-tools .btn { background: #fff; border-color: var(--line-strong); }
.sheets .sheet-tools .btn:hover { background: var(--error-50); border-color: var(--error-200); color: var(--error-700); }
.sheets .sheet-body[contenteditable="true"]:hover { box-shadow: 0 0 0 1px var(--indigo-200); }
.sheets .sheet-body[contenteditable="true"]:focus { box-shadow: 0 0 0 2px var(--indigo-500); }
.advanced { margin-top: var(--sp-4); border-top: 1px solid var(--line-soft); padding-top: 2px; }
.test-result.ok { border-color: var(--success-200); background: var(--success-50); }
.test-result.bad { border-color: var(--error-200); background: var(--error-50); }
.test-result ul { padding-left: 20px; }

/* Sign-in & installer */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-6); position: relative; isolation: isolate; background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--indigo-50), var(--n-50) 70%); }
.auth-body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; background: var(--indigo-200); pointer-events: none;
  -webkit-mask: var(--pattern-stars) center top/40px 40px repeat, radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask: var(--pattern-stars) center top/40px 40px repeat, radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 80%);
  mask-composite: intersect;
}
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--sp-8); width: 100%; max-width: 400px; box-shadow: var(--e-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-card h1 { font-size: var(--fs-headline); margin: var(--sp-1) 0 0; overflow-wrap: anywhere; }
.auth-card p { margin: -10px 0 var(--sp-1); }
.auth-card input:not([type=checkbox]):not([type=radio]) { min-height: 48px; font-size: 1rem; }
.auth-card .btn-block { min-height: 48px; font-size: 1rem; margin-top: var(--sp-1); }
.auth-mark { width: 52px; height: 52px; border-radius: var(--r-xl); background: var(--indigo-600); color: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(34, 31, 107, .3), 0 10px 22px -10px var(--indigo-500); }
.auth-mark .ic { width: 30px; height: 30px; }
.install-card { max-width: 720px; width: 100%; }
.checks { display: grid; gap: 6px; margin: var(--sp-4) 0; font-size: var(--fs-body); }
.check-row { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--n-25); border: 1px solid var(--line-soft); }
.check-row span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-caption); font-weight: 700; color: #fff; margin-right: var(--sp-2); }
.check-row.ok span { background: var(--success-600); }
.check-row.bad span { background: var(--error-600); }
.check-row.warn span { background: var(--warning-600); }
.check-row small { display: block; margin-left: 30px; color: var(--n-500); }

/* Letters view: preview & print pages */
.letters-view { background: var(--n-150); }
.print-bar {
  position: sticky; top: 0; z-index: 30; display: flex; gap: 10px; align-items: center; padding: 10px var(--sp-5); min-height: 64px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line); box-shadow: var(--e-1);
}
.print-bar-ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--sec-600); color: var(--sec-on); display: grid; place-items: center; flex: none; }  /* NEW */
.print-bar-ic .ic { width: 20px; height: 20px; }
.print-bar-title { flex: 1; min-width: 200px; line-height: 1.35; }
.print-bar-title b { font-size: var(--fs-body-lg); }
.print-bar-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.print-bar-form label { flex-direction: row; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); }
.print-bar-form select { width: auto; max-width: 280px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.print-help { max-width: 210mm; margin: var(--sp-4) auto 0; padding: 10px 14px 10px 42px; position: relative; text-align: left; font-size: var(--fs-label); color: var(--info-900); background: var(--info-50); border: 1px solid var(--info-200); border-radius: var(--r-lg); }
.print-help::before { content: ""; position: absolute; left: 14px; top: 11px; width: 18px; height: 18px; background: var(--info-600); -webkit-mask: var(--i-info) center/contain no-repeat; mask: var(--i-info) center/contain no-repeat; }
.letters-view .warn-box { max-width: 210mm; margin: var(--sp-4) auto 0; }

/* ---------- 12. Print (app screens) ---------- */
@media print {
  .side, .top, .menu-btn, .sticky-actions, .bulkbar, .flash, .print-bar, .print-help { display: none !important; }
  .shell { display: block; }
  body, .main { background: #fff !important; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ---------- 13. Responsive ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stack { display: contents; }
  .hero-stack .hero-card { order: 1; }
  .hero-grid > .card { order: 2; }
  .hero-stack .tiles { order: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-stack > .card { order: 4; }
  .editor-layout { grid-template-columns: 1fr; }
  .editor-side { position: static; max-height: none; }
  .form-grid.four { grid-template-columns: 1fr 1fr; }
  .profile-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid-2.wide-left { grid-template-columns: minmax(0, 1fr); }
  .profile-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: 100%;
    transform: translateX(-100%); visibility: hidden; box-shadow: none;
    transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  }
  .side.open { transform: none; visibility: visible; box-shadow: 0 0 0 100vmax rgba(21, 25, 34, .42), var(--e-4); transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); }
  .menu-btn { display: inline-grid; }
  .top {
    position: sticky; top: 0; z-index: 40; padding: 10px var(--sp-4); gap: var(--sp-3); max-width: none;
    background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line);
  }
  .top h1 { font-size: 1.1875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-ic { width: 32px; height: 32px; border-radius: var(--r-md); box-shadow: none; }
  .top-ic .ic { width: 18px; height: 18px; }
  .main { background: linear-gradient(180deg, var(--sec-50), var(--n-50) 200px) no-repeat, var(--n-50); }
  .content { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  .grid-2, .grid-2.wide-left, .log-grid, .radio-cards, .profile-grid { grid-template-columns: 1fr; }
  .profile-grid > :last-child { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .search input { min-width: 0; }
  .filters { width: 100%; }
  .details { grid-template-columns: 108px minmax(0, 1fr); }
  .preview-top { top: calc(var(--top-h) + 8px); }
  .bulkbar { top: var(--top-h); }
  /* Touch targets: 44px minimum */
  .btn { min-height: var(--tap); }
  .btn-sm { min-height: 40px; padding: 0 14px; }
  .icon-btn { width: var(--tap); height: var(--tap); }
  input, select, textarea { min-height: 48px; font-size: 16px; }
  input[type=checkbox], input[type=radio] { min-height: 0; width: 20px; height: 20px; }
  .input-sm { min-height: 40px; font-size: 16px; }
  .seg a, .seg label { min-height: 40px; }
  .side nav a, .side-foot a, .side-foot .linkish { min-height: var(--tap); }
  label.check { min-height: var(--tap); }
  /* Log an incident on a phone */
  .type-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .type-choice span { width: 100%; min-height: 56px; border-radius: var(--r-lg); padding: 6px 14px; font-size: 15px; line-height: 1.25; }
  .picker-list { max-height: 60vh; }
  .picker-list label { min-height: 52px; font-size: 15px; }
  .picker-list input[type=checkbox] { width: 22px; height: 22px; }
  .reg-opt span { width: 36px; height: 36px; }
  .sticky-actions {
    bottom: var(--sp-2); margin: var(--sp-4) calc(var(--sp-2) * -1) 0; padding: 10px;
    border-radius: var(--r-xl); box-shadow: var(--e-4);
  }
  .sticky-actions .btn-primary { flex: 1 1 auto; }
  .sticky-hint { display: none; }
}
@media (max-width: 640px) {
  .card { padding: var(--sp-4); }
  .card-flush { padding: 0; }
  .checklist { gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
  .checklist li { border: 0; border-radius: 0; border-top: 1px solid var(--line-soft); min-height: 48px; }
  .checklist li:first-child { border-top: 0; }
  .tiles, .hero-stack .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile:has(.tile-ic) { grid-template-columns: 1fr; row-gap: 10px; padding: 14px; }
  .tile-ic { grid-row: auto; width: 36px; height: 36px; border-radius: var(--r-md); }
  .tile-ic .ic { width: 18px; height: 18px; }
  .tile-n { font-size: 1.5rem; }
  .hero-card { padding: 22px; }
  .hero-card h2 { font-size: 1.375rem; }
  .gen-step { flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); position: relative; }
  .gen-num { position: absolute; left: var(--sp-4); top: 18px; width: 30px; height: 30px; font-size: var(--fs-body); box-shadow: 0 0 0 4px var(--sec-50); }
  .gen-content > h3 { margin-top: 2px; padding-left: 44px; min-height: 30px; display: flex; align-items: center; }
  .class-choices { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .gen-row select#gen-template { min-width: 0; width: 100%; }
  .form-grid.four { grid-template-columns: 1fr; }
  .seg-tabs { flex-direction: column; }
  .seg-tabs label { justify-content: flex-start; }
  .toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .toolbar > .actions { order: -1; }
  .toolbar .actions .btn-primary { order: -1; }
  .filters > select, .filters > .search { flex: 1 1 140px; }
  .filters > .search { flex-basis: 100%; }
  .filters .search input { width: 100%; }
  .filters > .btn { flex: 0 0 auto; }
  .profile-head { gap: var(--sp-4); }
  .profile-head .actions { width: 100%; }
  .profile-head .inline-form { width: 100%; }
  .profile-head .inline-form select { flex: 1; width: auto; }
  .bar-row { grid-template-columns: 110px minmax(0, 1fr) 28px; }
  .flash { left: var(--sp-3); right: var(--sp-3); top: var(--sp-3); bottom: auto; width: auto; }
  .preview-top { position: static; }
  .content .sheets-in-app { padding: var(--sp-4) var(--sp-2) var(--sp-1); }
  .content .sheets-in-app .sheet-wrap { width: auto; max-width: 210mm; }
  .content .sheets-in-app .sheet { zoom: .44; }
  .print-bar { padding: var(--sp-2) var(--sp-3); }
  .auth-card { padding: var(--sp-6); }
  .danger-zone .btn { width: 100%; }
  /* Tables become stacked cards (needs data-label on each td) */
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody { display: block; width: 100%; }
  .table-stack tr { position: relative; display: flex; flex-direction: column; padding: 14px var(--sp-4); border-bottom: 1px solid var(--line-soft); }
  .table-stack td.cell-main { order: -1; }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td { display: flex; gap: var(--sp-3); align-items: baseline; padding: 3px 0 !important; border: 0 !important; text-align: left !important; width: auto !important; background: transparent !important; }
  .table-stack td[data-label]::before { content: attr(data-label); flex: 0 0 34%; max-width: 130px; font-size: var(--fs-caption); font-weight: 600; color: var(--n-500); }
  .table-stack td[data-label=""]::before, .table-stack td.cell-main::before { display: none; }
  .table-stack td.cell-main { font-size: var(--fs-body-lg); padding-bottom: 6px !important; padding-right: 52px !important; }
  .table-stack .row-form { flex-wrap: wrap; width: 100%; }
  .table-stack .row-form input { flex: 1 1 140px; }
  .table-stack td.chk { position: absolute; left: var(--sp-4); top: 17px; padding: 0 !important; }
  .table-stack tr:has(> td.chk) { padding-left: 52px; }
  .table-stack td.cell-actions { position: absolute; right: var(--sp-2); top: var(--sp-2); padding: 0 !important; }
  .table-stack td:empty { display: none; }
  .table-stack tbody tr:has(input[name="ids[]"]:checked) { background: var(--sec-50); }
  .table-stack input:not([type=checkbox]):not([type=radio]):not([type=color]), .table-stack select { flex: 1; }
  .card:not(.card-flush) .table-stack tr { padding-left: 0; padding-right: 0; }
  .card:not(.card-flush) .table-stack td.cell-actions { right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .tile:hover, .tpl-card:hover .tpl-thumb-inner { transform: none; }
}

/* ==========================================================================
   Build 2 and 3 screens the v2 handoff did not cover (organisations, roles, departments,
   staff on incidents, attachments…), restyled with the v2 tokens.
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.org-switch { padding: 0 var(--sp-3) var(--sp-2); }
.org-switch select { font-size: var(--fs-label); min-height: 36px; padding: 6px 32px 6px 10px; background-color: var(--n-50); font-weight: 600; color: var(--n-800); }
.top .scope-note { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--n-700);
  background: #fff; border: 1px solid var(--line-strong); padding: 4px 12px; border-radius: var(--r-full); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .scope-note .ic { width: 14px; height: 14px; color: var(--n-500); }
.flash-inline { color: var(--warning-600); font-weight: 600; }
.dept-grid, .org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.dept-grid .card, .org-grid .card { margin: 0; }
.dept-card { border-top: 4px solid var(--c); }
.dept-card .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.dept-card .details { grid-template-columns: 130px 1fr; }
.org-card.current { border-color: var(--sec-200); box-shadow: 0 0 0 3px var(--sec-50); }
.org-card.dim { opacity: .65; }
.org-card h3 { display: flex; align-items: center; gap: 6px; }
.org-edit > summary { list-style: none; }
.org-edit > summary::-webkit-details-marker { display: none; }
.org-edit[open] { flex-basis: 100%; }
.radio-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.perm-group { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 14px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.perm-group legend { font-weight: 700; font-size: var(--fs-label); padding: 0 6px; color: var(--n-700); }
.perm-group label.check { align-items: flex-start; font-size: var(--fs-body); }
.perm-group label.check input { margin-top: 3px; }
.perm-group small { color: var(--n-500); font-weight: 400; }
.org-only.is-off { opacity: .45; }
.concern-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
  color: var(--n-700); font-size: var(--fs-body); margin: 0 0 var(--sp-4); box-shadow: var(--e-1); }
.concern-hint .ic { flex: none; margin-top: 2px; color: var(--sec-icon); }
.tile-alert { border-color: var(--error-200); background: var(--error-50); }
.tile-alert .tile-n { color: var(--error-700); }
.bar-fill.one { background: var(--sec-500); border-radius: 0 4px 4px 0; }
.bars.wide .bar-row { grid-template-columns: minmax(150px, 220px) 1fr 34px; }
.prose { white-space: normal; }
.inline-upload { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.inline-upload input[type=file] { flex: 1; min-width: 180px; }
.add-box > summary { list-style: none; display: inline-flex; }
.add-box > summary::-webkit-details-marker { display: none; }
.add-box[open] > summary { margin-bottom: var(--sp-3); }
.todo-card { border-color: var(--sec-200); }
.overdue { color: var(--error-700); font-weight: 650; }
.lock { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 650; color: #fff; background: var(--n-900); border-radius: var(--r-full); padding: 2px 8px; vertical-align: 1px; }
.lock .ic { width: 12px; height: 12px; }
.role-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 6px; border-radius: var(--r-xs); font-size: var(--fs-caption); font-weight: 600;
  color: var(--n-600); background: #fff; border: 1px solid var(--n-200); white-space: nowrap; vertical-align: 1px; }
.cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 6px; }
.file-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.file-list li { display: flex; gap: var(--sp-3); align-items: center; padding: 6px; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.file-list li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-list .file-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: var(--r-sm); }
.file-ico { width: 54px; height: 54px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--n-100); color: var(--n-500); }
@media (max-width: 900px) { .radio-cards.three { grid-template-columns: 1fr; } .top .scope-note { display: none; } .org-switch select { font-size: 16px; } }

/* ==========================================================================
   v3 · Incident log · an extension of the v2 "section colours" design system
   Reads only v2 tokens (--n-*, --sec-*, semantic, --sp-*, --r-*, --e-*).
   Each dimension has its own visual language, so nothing competes:
     status      the reserved status palette, always icon + label, a pill
     severity    an ordinal 4-step meter in ink, no hue
     kind        a fixed icon on a small tinted tile (categorical, never a big fill)
     type        the admin colour as a dot on a neutral pill (v2 .badge)
     role        a quiet outlined tag; "Involved" is the default and has none
     confidential  a lock and a label on ink
   ========================================================================== */

.side-foot a > span:not(.nav-ic) { display: flex; flex-direction: column; line-height: 1.25; }
.av.xs { width: 20px; height: 20px; font-size: 9px; }

/* ---- incident kinds: validated for colour-blindness (OKLab ×100, worst pair ΔE 11.3 under deuteranopia; Other is neutral on purpose) ---- */
.k-behaviour    { --k: #e8590c; --k-ink: #b8430a; }
.k-accident     { --k: #0ca678; --k-ink: #087f5b; }
.k-bullying     { --k: #a61e4d; --k-ink: #a61e4d; }
.k-safeguarding { --k: #7048e8; --k-ink: #5f3dc4; }
.k-other        { --k: #64748b; --k-ink: #475569; }  /* neutral on purpose */
.kind { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 600; color: var(--n-700); white-space: nowrap; }
.kind-ic { width: 28px; height: 28px; border-radius: var(--r-sm); display: inline-grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--k) 13%, #fff); color: var(--k-ink); }
.kind-ic .ic { width: 16px; height: 16px; }
.kind-ic.lg { width: 48px; height: 48px; border-radius: var(--r-lg); }
.kind-ic.lg .ic { width: 24px; height: 24px; }
.kind-ic.sm { width: 22px; height: 22px; border-radius: 6px; }
.kind-ic.sm .ic { width: 13px; height: 13px; }

/* ---- status: the reserved palette, always icon + label ---- */
.st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-full);
  font-size: var(--fs-caption); font-weight: 650; white-space: nowrap; border: 1px solid transparent; }
.st .ic { width: 14px; height: 14px; }
.st-open     { background: var(--warning-50); color: var(--warning-900); border-color: var(--warning-200); }
.st-open .ic  { color: var(--warning-600); }
.st-review   { background: var(--info-50); color: var(--info-900); border-color: var(--info-200); }
.st-review .ic { color: var(--info-600); }
.st-resolved { background: var(--success-50); color: var(--success-900); border-color: var(--success-200); }
.st-resolved .ic { color: var(--success-600); }
.st-closed   { background: var(--n-100); color: var(--n-700); border-color: var(--n-150); }
.st-closed .ic { color: var(--n-500); }
.st-lg { height: 32px; padding: 0 12px 0 10px; font-size: var(--fs-label); }
.st-lg .ic { width: 16px; height: 16px; }

/* ---- severity: how serious, read as a meter in ink ---- */
.sev { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); font-weight: 600; color: var(--n-700); white-space: nowrap; }
.sev-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sev-bars span { width: 4px; border-radius: 1px; background: var(--n-200); }
.sev-bars span:nth-child(1) { height: 5px; }
.sev-bars span:nth-child(2) { height: 8px; }
.sev-bars span:nth-child(3) { height: 11px; }
.sev-bars span:nth-child(4) { height: 14px; }
.sev-1 .sev-bars span:nth-child(-n+1), .sev-2 .sev-bars span:nth-child(-n+2),
.sev-3 .sev-bars span:nth-child(-n+3), .sev-4 .sev-bars span { background: var(--n-800); }
.sev-4 { color: var(--n-900); font-weight: 750; }

/* ---- role on a case, and confidential ---- */
.role { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font-size: var(--fs-caption);
  font-weight: 600; color: var(--n-600); background: #fff; border: 1px solid var(--n-200); white-space: nowrap; }
.conf { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-full);
  background: var(--n-900); color: #fff; font-size: var(--fs-caption); font-weight: 650; white-space: nowrap; }
.conf .ic { width: 14px; height: 14px; }

/* ---- due dates; overdue never by colour alone: an icon, the word and a box ---- */
.due { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: 600; color: var(--n-600); white-space: nowrap; }
.due .ic { width: 14px; height: 14px; color: var(--n-500); }
.due.over { color: var(--error-700); }
.due.over .ic { color: var(--error-600); }
.due.over b { background: var(--error-50); border: 1px solid var(--error-200); padding: 1px 6px; border-radius: var(--r-xs); font-weight: 700; }
.due.today { color: var(--warning-900); }
.due.today .ic { color: var(--warning-600); }

/* ---- shell additions ---- */
.side .apps-link { display: flex; align-items: center; gap: 10px; margin: 0 12px 4px; padding: 8px 10px; min-height: 40px; border-radius: var(--r-md);
  background: var(--n-50); border: 1px solid var(--line); color: var(--n-800); font-weight: 600; }
.apps-link .ic { color: var(--n-500); }
.nav-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-full); background: var(--error-600); color: #fff;
  font-size: var(--fs-caption); font-weight: 700; font-style: normal; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--n-100); color: var(--n-700); font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center; flex: none; letter-spacing: .02em; }
.av.lg { width: 36px; height: 36px; font-size: 13px; }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tabs .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: var(--r-full);
  background: var(--n-100); color: var(--n-700); font-size: var(--fs-caption); font-weight: 700; }
.tabs a.on .count { background: var(--sec-100); color: var(--sec-ink); }
.tabs .count.alert, .tabs a.on .count.alert { background: var(--error-600); color: #fff; }
.tabs a { display: inline-flex; align-items: center; }
.tabs .t-more { margin-left: .3em; }
.tabs .count { grid-auto-flow: column; }  /* a flex item drops its leading space */

/* ---- the case page ---- */
.backlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--n-600); margin-bottom: 12px; min-height: 32px; }
.backlink .ic { width: 16px; height: 16px; }
.case-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 18px; align-items: start; }
.case-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.case-eyebrow .kind-name { font-size: var(--fs-label); font-weight: 650; color: var(--n-700); }
.case-title { font-size: var(--fs-headline); margin: 0 0 8px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--n-600); font-size: var(--fs-label); }
.case-meta span { display: inline-flex; align-items: center; gap: 6px; }
.case-meta .ic { width: 15px; height: 15px; color: var(--n-400); }
.case-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.next > div { padding: 16px 20px 18px; border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.next > div:first-child { border-left: 0; }
.next-l { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--n-500); }
.next-v { display: flex; align-items: center; gap: 10px; min-width: 0; }
.next-v b { display: block; color: var(--n-900); font-size: var(--fs-body); line-height: 1.3; }
.next-v small { display: block; font-weight: 500; color: var(--n-600); font-size: var(--fs-caption); margin-top: 2px; }
.next .attn { background: var(--error-50); }
.next .attn .next-l { color: var(--error-700); }
.next .ok-ic { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--success-50); color: var(--success-600); flex: none; }
.next .no-ic { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--warning-50); color: var(--warning-600); flex: none; }
.next .btn { align-self: flex-start; margin-top: auto; }

.case-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.case-grid > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.case-grid .card { margin: 0; }
.card h3 .muted { font-weight: 500; font-size: var(--fs-label); }
.prose { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--n-800); margin: 0 0 16px; }
.sub-l { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--n-500); margin: 18px 0 6px; }
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.kv dt { color: var(--n-500); font-size: var(--fs-label); }
.kv dd { margin: 0; color: var(--n-900); overflow-wrap: anywhere; }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 48px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.people li:first-child { border-top: 0; }
.people .pname { font-weight: 650; color: var(--n-900); }
.people .pclass { color: var(--n-500); font-size: var(--fs-label); }
.people .push { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.card-sub { color: var(--n-500); font-size: var(--fs-label); margin: -10px 0 12px; }

/* follow-ups (within a case and across cases) */
.fu { list-style: none; margin: 0; padding: 0; }
.fu li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.fu li:first-child { border-top: 0; }
.fu input[type=checkbox] { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--success-600); }
.fu-t { font-weight: 600; color: var(--n-900); overflow-wrap: anywhere; }
.fu-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-caption); color: var(--n-600); margin-top: 3px; }
.fu-m .who { font-weight: 600; color: var(--n-700); }
.fu-case { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--fs-caption); color: var(--n-600); min-width: 0; }
.fu-case > span:last-child { min-width: 0; overflow-wrap: anywhere; padding-top: 2px; }
.fu-case a { font-weight: 600; }
.fu li.done .fu-t { color: var(--n-500); text-decoration: line-through; text-decoration-color: var(--n-300); font-weight: 500; }
.fu-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* contact with parents */
.contact { list-style: none; margin: 0; padding: 0; }
.contact li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.contact li:first-child { border-top: 0; }
.contact-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--success-50); color: var(--success-600); }
.contact-ic .ic { width: 16px; height: 16px; }

/* timeline: nothing on it can be edited */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; position: relative; }
.tl li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--line); border-radius: 2px; }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::before { display: none; }
.tl-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--n-100); color: var(--n-600); }
.tl-ic .ic { width: 16px; height: 16px; }
.tl-ic.hue { background: var(--sec-100); color: var(--sec-ink); }
.tl-h { font-size: var(--fs-label); color: var(--n-600); padding-top: 5px; }
.tl-h b { color: var(--n-900); font-weight: 650; }
.tl-b { margin-top: 4px; color: var(--n-800); overflow-wrap: anywhere; }
.tl-b.quote { background: var(--n-25); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 8px 12px; }
.note-box { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 18px; }
.note-box textarea { min-height: 44px; }

/* attachments */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.att { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; display: flex; flex-direction: column; color: var(--n-800); }
.att-thumb { height: 92px; display: grid; place-items: center; background: var(--n-50); color: var(--n-400); border-bottom: 1px solid var(--line-soft); }
.att-thumb.photo { background: linear-gradient(135deg, #e9e1d6, #cdbfae); color: rgba(255, 255, 255, .85); }
.att-b { padding: 8px 10px; font-size: var(--fs-caption); color: var(--n-600); }
.att-b b { display: block; font-size: var(--fs-label); color: var(--n-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lock-note { display: inline-flex; align-items: center; gap: 6px; color: var(--n-500); font-size: var(--fs-caption); font-weight: 600; }
.lock-note .ic { width: 14px; height: 14px; }

/* ---- the log ---- */
.log-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
  color: var(--n-700); font-size: var(--fs-body); margin-bottom: 16px; box-shadow: var(--e-1); }
.log-note .ic { color: var(--sec-icon); margin-top: 2px; }
.inc-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inc-t a { font-weight: 650; color: var(--n-900); }
.inc-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-caption); color: var(--n-500); margin-top: 3px; align-items: center; }
.inc-sub .ic { width: 13px; height: 13px; }
.table td.tight { white-space: nowrap; width: 1%; }
.date-cell b { display: block; color: var(--n-900); font-weight: 650; }
.date-cell small { color: var(--n-500); font-size: var(--fs-caption); font-family: var(--font-mono); }
.inc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 14px 16px; box-shadow: var(--e-1); display: flex; flex-direction: column; gap: 10px; color: var(--n-800); }
.inc-card + .inc-card { margin-top: 10px; }
.inc-card .inc-t { align-items: flex-start; }
.inc-card .inc-t a { font-size: var(--fs-body-lg); line-height: 1.3; }
.inc-card-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.inc-card-foot .who { margin-left: auto; font-size: var(--fs-caption); color: var(--n-600); font-weight: 600; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: var(--fs-caption); color: var(--n-500); }

/* ---- the report form ---- */
.step-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px 16px; box-shadow: var(--e-1); }
.step-card + .step-card { margin-top: 14px; }
.step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-h h3 { margin: 0; }
.step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--sec-600); color: var(--sec-on); font-weight: 700; font-size: var(--fs-label); display: grid; place-items: center; flex: none; }
.step-n.done { background: var(--success-600); }
.kind-cards { display: grid; gap: 10px; }
.kind-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: #fff; cursor: pointer; min-height: 68px; font-weight: 400; flex-direction: row; }
.kind-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind-card b { display: block; color: var(--n-900); font-size: var(--fs-body-lg); font-weight: 650; }
.kind-card small { display: block; color: var(--n-600); font-size: var(--fs-label); margin-top: 1px; }
.kind-card .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--n-300); display: grid; place-items: center; color: transparent; }
.kind-card.on { border-color: var(--sec-600); box-shadow: inset 0 0 0 1px var(--sec-600); background: var(--sec-50); }
.kind-card.on .tick { background: var(--sec-600); border-color: var(--sec-600); color: #fff; }
.kind-card.on .tick .ic { width: 14px; height: 14px; }
.kind-chosen { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-strong); }
.kind-chosen b { color: var(--n-900); }
.kind-chosen .btn { margin-left: auto; }
.fields { display: flex; flex-direction: column; gap: 14px; }
.fields-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.calm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--violet-50); border: 1px solid var(--violet-200); color: var(--violet-900); font-size: var(--fs-body); line-height: 1.5; }
.calm > .ic { color: var(--violet-600); width: 22px; height: 22px; margin-top: 1px; }
.calm b { color: var(--violet-900); }
.calm ul { margin: 6px 0 0; padding-left: 18px; }
.calm li { margin: 3px 0; }
.role-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.role-rows li { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--n-25); }
.role-rows li > span b { color: var(--n-900); }
.role-rows li > span small { color: var(--n-500); margin-left: 6px; font-size: var(--fs-caption); }
.role-rows .seg { width: 100%; }
.role-rows .seg label { flex: 1 1 0; min-height: 40px; }
.picked { display: flex; flex-wrap: wrap; gap: 6px; }
.picked span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border-radius: var(--r-full); background: var(--sec-50);
  border: 1px solid var(--sec-200); color: var(--sec-900); font-weight: 600; font-size: var(--fs-label); }
.picked span .ic { width: 14px; height: 14px; color: var(--sec-ink); }
.sev-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sev-pick label { flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; font-weight: 600; font-size: var(--fs-label); color: var(--n-700); cursor: pointer; }
.sev-pick label.on { border-color: var(--n-800); box-shadow: inset 0 0 0 1px var(--n-800); background: var(--n-50); color: var(--n-900); }
.saved-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--e-2); }

/* ---- overview: one hue per series, one axis, direct labels ---- */
.hbars { display: grid; gap: 12px; }
.hbar { display: grid; grid-template-columns: 210px minmax(0, 1fr) 36px; gap: 12px; align-items: center; font-size: var(--fs-label); }
.hbar-l { display: flex; align-items: center; gap: 8px; color: var(--n-800); font-weight: 500; min-width: 0; }
.hbar-l span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 10px; background: var(--n-100); border-radius: var(--r-full); overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--sec-500); border-radius: 0 4px 4px 0; }
.hbar-n { text-align: right; font-weight: 700; color: var(--n-900); font-variant-numeric: tabular-nums; }
.cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: end; height: 190px; border-bottom: 1px solid var(--n-300); padding-top: 8px; }
.col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.col-n { font-size: var(--fs-caption); font-weight: 700; color: var(--n-900); font-variant-numeric: tabular-nums; }
.col-bar { width: 100%; max-width: 40px; background: var(--sec-500); border-radius: 4px 4px 0 0; }
.col-bar.zero { height: 2px; background: var(--n-200); }
.col-ls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 8px; text-align: center; font-size: var(--fs-caption); color: var(--n-600); font-weight: 600; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ov-grid .card { margin: 0; }
.periods { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

/* ---- dashboard: waiting for you ---- */
.wait-list { list-style: none; margin: 0; padding: 0; }
.wait-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.wait-list li:first-child { border-top: 0; }


/* ---- phones ---- */
@media (max-width: 1100px) { .next { grid-template-columns: 1fr 1fr; } .next > div:nth-child(3) { border-left: 0; } .next > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); } .case-grid, .ov-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .case-head { grid-template-columns: auto minmax(0, 1fr); }
  .case-actions { grid-column: 1 / -1; justify-content: stretch; }
  .case-actions .btn { flex: 1 1 auto; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .note-box { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
  .case-title { font-size: 1.25rem; }
  .next > div { padding: 14px; }
  .hbar { grid-template-columns: 1fr 32px; }
  .hbar-track { grid-column: 1 / -1; grid-row: 2; }
  .fu li { grid-template-columns: auto minmax(0, 1fr); }
  .fu li > .due { grid-column: 2; }
  .inc-list .table-stack td.cell-main { padding-right: 0 !important; }
  .cols { gap: 8px; }
  .col-ls { gap: 8px; }
}

/* ---- the incident log in the app (PHP markup of the approved mockups) ---- */
.inc-top { align-items: flex-end; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.inc-top .tabs { margin: 0; border-bottom: 0; flex: 1 1 auto; min-width: 0; }
.inc-top > .btn-primary { margin-bottom: 8px; }
.filters-bar .filters { flex: 1 1 auto; }
.inc-cards { display: none; padding: 12px; }
.inc-card { text-decoration: none; }
.inc-card:hover { text-decoration: none; border-color: var(--sec-200); color: var(--n-800); }
.inc-card .inc-t > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.inc-card-title { display: block; font-weight: 650; color: var(--n-900); font-size: var(--fs-body-lg); line-height: 1.3; overflow-wrap: anywhere; }
.inc-card-foot .who .av { width: 20px; height: 20px; font-size: 9px; }
.inc-table .inc-t a.strong { overflow-wrap: anywhere; }
.inc-table tr.is-done .inc-t a.strong { font-weight: 600; }
@media (max-width: 640px) {
  .inc-table-wrap { display: none; }
  .inc-cards { display: block; }
  .inc-list .card-foot { justify-content: center; }
  .inc-top { flex-wrap: nowrap; align-items: stretch; }
  .inc-tabs .t-more { display: none; }
  .inc-ov-pupils td.num a, .ov-grid td.num a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
  .inline-upload input[type=file], .inline-upload .btn { flex: 1 1 100%; }
  .inc-top > .btn-primary { order: -1; width: 100%; margin: 0 0 12px; min-height: 48px; }
  .inc-top .tabs { margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4); }
}
.fu-tick { position: relative; width: 44px; height: 44px; margin: -10px -10px -10px -11px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; color: #fff; }
.fu-tick::before { content: ""; position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--n-300); background: #fff;
  box-sizing: border-box; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
button.fu-tick:hover::before { border-color: var(--success-600); background: var(--success-50); }
button.fu-tick:focus-visible { outline: none; }
button.fu-tick:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 2px; }
.fu-tick.is-done::before, li.done .fu-tick::before { background: var(--success-600); border-color: var(--success-600); }
.fu-tick .ic { position: relative; width: 14px; height: 14px; }
span.fu-tick:not(.is-done)::before { background: var(--n-50); border-style: dashed; }
.card-ic.ic-alert { background: var(--error-50); color: var(--error-700); }
.tile-alert .tile-ic { background: var(--error-100, #fde3e1); color: var(--error-700); }
.fu li > .due { margin-top: 3px; }
.next-edit { margin-top: auto; }
.next-edit > summary { list-style: none; display: inline-flex; }
.next-edit > summary::-webkit-details-marker { display: none; }
.next-edit[open] > summary { margin-bottom: 10px; }
.next-edit form { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--e-2); }
.next-edit .seg-tabs { flex-wrap: wrap; margin-bottom: 0; }
.next-edit .seg-tabs label { flex: 1 1 45%; min-height: 36px; font-size: var(--fs-label); }
.next > div > form { margin-top: auto; }
.next > div > form .btn { margin-top: 0; }
.next-due { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.next-v small { overflow-wrap: anywhere; }
.att { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.att-thumb.photo { background: var(--n-100); }
.att-thumb { position: relative; overflow: hidden; }
.att-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.att-b a { color: var(--n-900); }
.att-b a:hover { color: var(--indigo-700); }
.att-del { position: absolute; top: 4px; right: 4px; margin: 0; }
.att-del .icon-btn { background: rgba(255, 255, 255, .92); box-shadow: var(--e-1); }
.people a.pname:hover { color: var(--indigo-700); }
.add-box form { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--n-25); }
.fu li > form.inline-form:last-child { margin-left: auto; }
.fu li { grid-template-columns: auto minmax(0, 1fr) auto; }
.inc-form { counter-reset: step; max-width: 860px; }
.inc-form .step-card:not([hidden]) { counter-increment: step; }
.inc-form .step-n::before { content: counter(step); }
.inc-form .step-card { padding: 22px 24px; }
.inc-form .step-card + .step-card { margin-top: 16px; }
.inc-form .picker { margin-bottom: 4px; }
.kind-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.kind-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.sev-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sev-pick label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.staff-rows { margin: 8px 0 10px; }
.staff-rows .role-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
.staff-rows .role-row select { flex: 1 1 220px; width: auto; }
.staff-rows .role-row .seg { flex: 1 1 300px; width: auto; margin: 0; }
.role-rows .seg-tabs { margin-bottom: 0; }
.role-rows .seg-tabs label { min-height: 40px; font-size: var(--fs-label); }
.inc-form .sticky-actions { max-width: 860px; }
@media (max-width: 640px) {
  .inc-form .step-card { padding: 18px 16px; }
  .staff-rows .role-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .staff-rows .role-row select, .staff-rows .role-row .seg { flex: none; width: 100%; min-width: 0; }
  /* these choices stay side by side on a phone: they are short words */
  .role-rows .seg-tabs, .next-edit .seg-tabs, .sev-pick.seg-tabs { flex-direction: row; }
  .role-rows .seg-tabs label, .sev-pick.seg-tabs label { justify-content: center; }
}
.saved-note { margin-bottom: var(--sp-5); }

/* phones: eyebrow labels at 12px, and links inside stacked tables big enough to tap */
@media (max-width: 640px) {
  :root { --fs-overline: .75rem; }
  .table-stack td a.strong, .table-stack td > a:only-child, .table-stack .cell-main a { display: inline-flex; align-items: center; min-height: 32px; }
  .table-stack td.num > a:only-child { min-width: 32px; justify-content: center; }
  .feed .feed-main > a { display: flex; align-items: center; min-height: 32px; }
  .table-stack details > summary, .due-list li a, .feed li > a, .checklist li > a, .card-head a.small, .details dd > a { display: inline-flex; align-items: center; min-height: 32px; }
  /* 16px stops phones zooming in when a box is tapped */
  .table input:not([type=checkbox]):not([type=radio]):not([type=color]), .table select { font-size: 16px; }
}
.chk-hit { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; margin: -6px; cursor: pointer; }

/* Letters dashboard in the app: a long Letters due list must not stretch the Write letters card */
.hero-grid { align-items: start; }
.hero-stack .hero-card { flex: none; }
.hero-stack > .card { margin: 0; }

/* pupil profile: the three columns and the Concerns / HT Tests / detentions card */
.profile-grid .stack { gap: var(--sp-5); }
.profile-grid .stack > .card { margin: 0; }
.inc-feed li { align-items: flex-start; }
.inc-feed .kind-ic { margin-top: 2px; }
.inc-feed .feed-main a { font-weight: 600; color: var(--n-900); overflow-wrap: anywhere; }
.raise-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); }
.raise-cols .sub-l { margin-top: 0; }
.show-more > summary { list-style: none; margin-top: var(--sp-2); }
.show-more > summary::-webkit-details-marker { display: none; }
.show-more[open] > summary { display: none; }
.show-more > .feed { margin-top: 0; border-top: 1px solid var(--line-soft); }