/* SAFE — "Soft Slate" light theme override layer.
   Scoped under html.light so DARK stays the untouched default (zero regression).
   html.light .x  (0,2,1) beats  .x  (0,1,0) — no !important needed. */

/* ============================================================
   0. GLOBAL READABILITY SCALE (both themes)
   Bump the root font size so rem-based text, spacing and widths
   all scale up proportionally — the app was styled very small.
   ============================================================ */
html { font-size: 112.5%; }   /* 16px -> 18px base */

/* Crisper text + raise the floor on the smallest hardcoded sizes. The app
   uses a lot of text-[9px]/[10px]/[11px] fixed pixels that don't scale with
   the root and render soft; nudge them up to legible whole pixels. Higher
   specificity (html .x) so these beat the Tailwind CDN utilities. */
html body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html .text-\[9px\]  { font-size: 11px; }
html .text-\[10px\] { font-size: 12px; }
html .text-\[11px\] { font-size: 12px; }

/* ============================================================
   1. PAGE + SURFACE BACKGROUNDS (slate scale)
   dark: 900=page, 800=card, 700=input/secondary, 950=deep well
   light: page=#f8fafc, cards=#fff float on it, wells=#f1f5f9
   ============================================================ */
html.light body { background-color: #f8fafc; color: #0f172a; }

html.light .bg-slate-900 { background-color: #f8fafc; }   /* page */
html.light .bg-slate-800 { background-color: #ffffff; }   /* card */
html.light .bg-slate-700 { background-color: #f1f5f9; }   /* input / secondary surface */
html.light .bg-slate-600 { background-color: #e2e8f0; }
html.light .bg-slate-500 { background-color: #cbd5e1; }
html.light .bg-slate-950 { background-color: #f1f5f9; }   /* recessed well / input / camera backdrop */
/* bg-slate-200, bg-slate-50, bg-white already light — left as-is */

/* Slate background opacity variants (escaped slash).
   slate-900/* = translucent panels/headers/inner tiles -> light @ same intent */
html.light .bg-slate-900\/50 { background-color: rgba(248,250,252,0.70); }
html.light .bg-slate-900\/60 { background-color: rgba(248,250,252,0.75); }
html.light .bg-slate-900\/70 { background-color: rgba(248,250,252,0.80); }
html.light .bg-slate-900\/80 { background-color: rgba(248,250,252,0.85); }
html.light .bg-slate-900\/90 { background-color: rgba(248,250,252,0.92); }
html.light .bg-slate-900\/95 { background-color: rgba(248,250,252,0.95); }
html.light .bg-slate-950\/40 { background-color: rgba(241,245,249,0.60); }
html.light .bg-slate-800\/40 { background-color: #f1f5f9; }
html.light .bg-slate-800\/50 { background-color: #f1f5f9; }
html.light .bg-slate-800\/60 { background-color: rgba(241,245,249,0.80); }
html.light .bg-slate-800\/80 { background-color: rgba(241,245,249,0.90); }
html.light .bg-slate-700\/60 { background-color: rgba(226,232,240,0.80); }

/* Hover surface backgrounds (escaped colon) */
html.light .hover\:bg-slate-800:hover { background-color: #f1f5f9; }
html.light .hover\:bg-slate-700:hover { background-color: #e2e8f0; }

/* ============================================================
   2. BORDERS (slate) + DIVIDERS
   ============================================================ */
html.light .border-slate-800      { border-color: #e2e8f0; }
html.light .border-slate-700      { border-color: #cbd5e1; }
html.light .border-slate-700\/40  { border-color: rgba(203,213,225,0.60); }
html.light .border-slate-600      { border-color: #cbd5e1; }
html.light .border-slate-200      { border-color: #e2e8f0; }
/* border-gray-300, border-red-600 (login) already work on light — left as-is */

html.light .divide-slate-800 > * + * { border-color: #e2e8f0; }

/* ============================================================
   3. TEXT (slate scale) — primary/secondary/muted, all AA on white/#f8fafc
   ============================================================ */
html.light .text-slate-100     { color: #0f172a; }               /* primary  ~16:1 */
html.light .text-slate-200     { color: #1e293b; }               /* ~14:1 */
html.light .text-slate-200\/80 { color: rgba(15,23,42,0.85); }
html.light .text-slate-300     { color: #334155; }               /* secondary ~10:1 */
html.light .text-slate-400     { color: #475569; }               /* label/muted ~7.5:1 */
html.light .text-slate-500     { color: #64748b; }               /* muted ~4.8:1 */
html.light .text-slate-600     { color: #64748b; }               /* dim -> muted */
/* text-slate-800 already dark — left as-is (reads on light) */

html.light .hover\:text-slate-100:hover { color: #0f172a; }

/* ============================================================
   4. BRAND — safe.light heading swap (invisible pale teal -> dark teal)
   safe.primary teal buttons + white text stay as-is.
   ============================================================ */
html.light .text-safe-light { color: #0f766e; }                  /* was #ccfbf1; teal-700 ~4.5:1 on white */
html.light .text-teal-400   { color: #0f766e; }                  /* accent/link -> teal-700 */
html.light .hover\:text-teal-400:hover { color: #115e59; }       /* teal-800 */

/* ============================================================
   5. STATUS BADGES — dark translucent -> light tint + darker text
   preserve semantic hue; rule: /40,/30,/20,/60 tints = light bg;
   /80 opaque chips/buttons = solid saturated (keep white text)
   ============================================================ */

/* -- EMERALD (success) -- */
html.light .bg-emerald-900\/40 { background-color: #d1fae5; }    /* emerald-100 tint */
html.light .bg-emerald-900\/50 { background-color: #d1fae5; }    /* toast */
html.light .bg-emerald-800\/60 { background-color: #d1fae5; }
html.light .bg-emerald-700\/80 { background-color: #047857; }    /* solid button */
html.light .bg-emerald-600\/80 { background-color: #059669; }    /* solid */
html.light .text-emerald-300   { color: #047857; }               /* emerald-700 ~4.7:1 on #d1fae5 */
html.light .text-emerald-400   { color: #047857; }
html.light .text-emerald-500   { color: #047857; }
html.light .text-emerald-50    { color: #065f46; }               /* toast text: emerald-800 ~7:1 */
html.light .hover\:text-emerald-200:hover { color: #065f46; }
html.light .border-emerald-400\/80 { border-color: rgba(16,185,129,0.90); }
html.light .border-emerald-500\/70 { border-color: rgba(16,185,129,0.70); }
html.light .border-emerald-700\/40 { border-color: #6ee7b7; }    /* emerald-300 */
html.light .border-emerald-700\/60 { border-color: #6ee7b7; }

/* -- AMBER (warning) -- */
html.light .bg-amber-900\/40 { background-color: #fef3c7; }      /* amber-100 tint */
html.light .bg-amber-900\/30 { background-color: #fef3c7; }
html.light .bg-amber-900\/20 { background-color: #fefce8; }      /* amber-50 lighter */
html.light .bg-amber-800\/60 { background-color: #fef3c7; }
html.light .bg-amber-700\/80 { background-color: #b45309; }      /* solid button */
html.light .bg-amber-600\/80 { background-color: #d97706; }      /* solid */
html.light .text-amber-200 { color: #b45309; }                   /* amber-700 ~4.7:1 on tint */
html.light .text-amber-300 { color: #b45309; }
html.light .text-amber-400 { color: #b45309; }
html.light .border-amber-700\/40 { border-color: #fcd34d; }      /* amber-300 */
html.light .border-amber-700\/50 { border-color: #fcd34d; }
html.light .border-amber-700\/60 { border-color: #fcd34d; }

/* -- RED (danger) -- */
html.light .bg-red-900\/40 { background-color: #fee2e2; }        /* red-100 tint */
html.light .bg-red-900\/20 { background-color: #fef2f2; }        /* red-50 lighter */
html.light .bg-red-800\/60 { background-color: #fee2e2; }
html.light .hover\:bg-red-900\/35:hover { background-color: rgba(254,202,202,0.70); } /* red-200 */
html.light .text-red-200 { color: #b91c1c; }                     /* red-700 ~5.5:1 on tint */
html.light .text-red-300 { color: #b91c1c; }
html.light .text-red-400 { color: #b91c1c; }
html.light .text-red-500 { color: #b91c1c; }
html.light .text-red-600 { color: #b91c1c; }
html.light .hover\:text-red-200:hover { color: #991b1b; }        /* red-800 */
html.light .hover\:text-red-600:hover { color: #991b1b; }
html.light .border-red-700\/60 { border-color: #fca5a5; }        /* red-300 */
/* bg-red-600/700/800, bg-red-700/95, border-red-600, focus:border-red-600,
   focus:ring-red-500, shadow-red-900/40 — saturated red works on light, left as-is */

/* -- ROSE (danger alt) -- */
html.light .bg-rose-900\/30 { background-color: #ffe4e6; }       /* rose-100 tint */
html.light .bg-rose-900\/40 { background-color: #ffe4e6; }
html.light .text-rose-300 { color: #be123c; }                    /* rose-700 ~5.3:1 on tint */
html.light .text-rose-400 { color: #be123c; }
html.light .text-rose-600 { color: #be123c; }
html.light .hover\:text-rose-300:hover { color: #9f1239; }       /* rose-800 */
html.light .border-rose-700\/60 { border-color: #fda4af; }       /* rose-300 */

/* -- GREEN (success alt) -- */
html.light .text-green-600 { color: #15803d; }                   /* green-700 ~4.6:1 on white */
/* bg-green-600 button + white text — left as-is */

/* ============================================================
   6. PLACEHOLDERS
   ============================================================ */
html.light .placeholder-slate-500::placeholder { color: #94a3b8; } /* slate-400 muted */
/* placeholder-gray-300 (white login card) — left as-is */

/* ============================================================
   7. NEUTRAL WHITE-ON-SLATE PILL FIX
   rare: bg-slate-800 text-white (scan register-status default) would go
   white-on-white; force dark text when both classes co-occur.
   ============================================================ */
html.light .text-white.bg-slate-800 { color: #0f172a; }
html.light .bg-slate-800.text-white { color: #0f172a; }

/* ============================================================
   8. DELIBERATELY UNCHANGED (documented)
   - text-white / text-white/80 / text-black : on colored buttons
     (bg-red-600 / bg-safe-primary / bg-amber-300 / bg-emerald-400) or black
     overlays that stay dark in both themes -> kept.
   - bg-black + bg-black/40..70 : dim overlays / camera wells, valid both themes.
   - bg-emerald-400 / bg-red-400 / bg-amber-300 / bg-amber-400 : saturated JS
     status pills, identical intent both themes -> kept.
   - hover:bg-emerald-700 / hover:bg-amber-600 / hover:bg-red-700 /
     hover:bg-teal-700 / active:bg-red-800 : saturated button hovers -> kept.
   - group-hover:ring-teal-500 / focus:ring-red-500 : rings read on light -> kept.
   - login gray-* + border-gray-300 : live on an always-white card -> kept.
   ============================================================ */
/* ============================================================
   9. FLOATING THEME TOGGLE (injected by theme.js on every page)
   Base style works in dark; light variant scoped under html.light.
   ============================================================ */
.safe-theme-toggle{
  position:fixed; top:1rem; right:1rem; z-index:9998;
  display:inline-flex; align-items:center; gap:.4rem;
  height:2.25rem; padding:0 .9rem; border-radius:9999px;
  font-size:.8rem; font-weight:600; line-height:1; cursor:pointer;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(30,41,59,.94); color:#e2e8f0;
  box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:blur(6px);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.safe-theme-toggle:hover{ transform:translateY(-1px); }
html.light .safe-theme-toggle{
  background:#ffffff; border-color:#cbd5e1; color:#0f172a;
  box-shadow:0 4px 14px rgba(15,23,42,.15);
}

/* In-header toggle (main app pages) uses Tailwind classes; ensure the icon+label sit inline */
#theme-toggle{ white-space:nowrap; }

/* ---- Theme switch: iOS/macOS style. Clean track, plain white knob with a
   soft layered shadow, inline SVG sun/moon that cross-fade, one spring-ish
   curve. No emoji. ---- */
#theme-toggle, .safe-theme-toggle{ border:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; }
.safe-switch{
  position:relative; display:inline-block;
  width:51px; height:31px; border-radius:999px; cursor:pointer;
  background:rgba(120,120,128,.32);
  box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.06);
  transition:background .3s ease;
  vertical-align:middle;
}
.safe-switch:hover{ background:rgba(120,120,128,.42); }
html.light .safe-switch{ background:rgba(120,120,128,.16); box-shadow:inset 0 0 0 0.5px rgba(15,23,42,.06); }
html.light .safe-switch:hover{ background:rgba(120,120,128,.26); }
.safe-switch-knob{
  position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:#ffffff;
  box-shadow:0 3px 8px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.16), 0 0 0 0.5px rgba(0,0,0,.04);
  display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.25,1.35,.45,1);
}
.safe-switch[data-theme="light"] .safe-switch-knob{ transform:translateX(20px); }
.safe-switch-knob svg{ width:15px; height:15px; display:block; }
.safe-switch-knob .sw-moon{ color:#475569; }
.safe-switch-knob .sw-sun{ color:#f59e0b; }

/* ---- Pills: THE badge component. Soft tint + hairline inset ring (no hard
   borders), one height, one type size, optional status dot. Dark values are
   the defaults; html.light overrides swap to solid pastel tints. ---- */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  height:20px; padding:0 9px; border-radius:999px;
  font-size:11px; font-weight:600; line-height:1; white-space:nowrap;
  letter-spacing:.015em; vertical-align:middle;
}
.pill-dot::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex:0 0 auto;
}
.pill-red    { background:rgba(239,68,68,.16);  color:#fca5a5; box-shadow:inset 0 0 0 1px rgba(239,68,68,.30); }
.pill-amber  { background:rgba(245,158,11,.14); color:#fcd34d; box-shadow:inset 0 0 0 1px rgba(245,158,11,.28); }
.pill-emerald{ background:rgba(16,185,129,.14); color:#6ee7b7; box-shadow:inset 0 0 0 1px rgba(16,185,129,.28); }
.pill-sky    { background:rgba(14,165,233,.14); color:#7dd3fc; box-shadow:inset 0 0 0 1px rgba(14,165,233,.28); }
.pill-violet { background:rgba(139,92,246,.15); color:#c4b5fd; box-shadow:inset 0 0 0 1px rgba(139,92,246,.30); }
.pill-teal   { background:rgba(20,184,166,.14); color:#5eead4; box-shadow:inset 0 0 0 1px rgba(20,184,166,.28); }
.pill-slate  { background:rgba(148,163,184,.10); color:#cbd5e1; box-shadow:inset 0 0 0 1px rgba(148,163,184,.22); }
html.light .pill-red    { background:#fee2e2; color:#b91c1c; box-shadow:inset 0 0 0 1px #fecaca; }
html.light .pill-amber  { background:#fef3c7; color:#b45309; box-shadow:inset 0 0 0 1px #fde68a; }
html.light .pill-emerald{ background:#d1fae5; color:#047857; box-shadow:inset 0 0 0 1px #a7f3d0; }
html.light .pill-sky    { background:#e0f2fe; color:#0369a1; box-shadow:inset 0 0 0 1px #bae6fd; }
html.light .pill-violet { background:#ede9fe; color:#6d28d9; box-shadow:inset 0 0 0 1px #ddd6fe; }
html.light .pill-teal   { background:#ccfbf1; color:#0f766e; box-shadow:inset 0 0 0 1px #99f6e4; }
html.light .pill-slate  { background:#f1f5f9; color:#475569; box-shadow:inset 0 0 0 1px #e2e8f0; }
/* Critical severity chip: the industry pattern (PagerDuty P1 / Datadog SEV-1
   / shadcn destructive) — flat saturated red, white text, warning icon, no
   gloss and no motion. The icon is what makes it read as product design;
   the SVG comes from severityBadge() in incidents.js. */
.pill-critical{
  background:#dc2626;
  color:#fff;
  font-weight:700;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.pill-critical svg{ flex:0 0 auto; }

/* ---- Sortable table headers ---- */
th[data-sort]{ cursor:pointer; user-select:none; white-space:nowrap; }
th[data-sort]:hover{ color:#5eead4; }
html.light th[data-sort]:hover{ color:#0f766e; }
th[data-sort] .sort-arrow{ font-size:9px; opacity:.9; }

/* ---- Subtle table row hover (easier to track a row across 100+ rows) ---- */
tbody tr{ transition:background-color .12s ease; }
tbody tr:hover{ background-color:rgba(148,163,184,.06); }
html.light tbody tr:hover{ background-color:rgba(15,23,42,.035); }

/* ---- Critical-severity incident rows ----
   The industry pattern for critical items in lists (GitHub danger surfaces,
   Grafana firing alerts, PagerDuty P1): a VERY subtle red tint on the row,
   a slim solid accent bar on the left edge, and the authority carried by
   the chip — no gloss, no gradients, no motion. Tint values are GitHub
   Primer's battle-tested danger tokens. Explicit :hover outranks the
   generic tbody tr:hover above. */
.row-critical{ background:rgba(248,81,73,.08); }
.row-critical:hover{ background:rgba(248,81,73,.13); }
.row-critical > td:first-child{ box-shadow:inset 3px 0 0 #f85149; }
html.light .row-critical{ background:#fff1f1; }
html.light .row-critical:hover{ background:#ffe7e7; }
html.light .row-critical > td:first-child{ box-shadow:inset 3px 0 0 #cf222e; }

/* Red Zone "View profile" buttons. Dedicated class with explicit colours for
   BOTH themes - Tailwind red utilities here collided with the light-mode
   remap layer (bg remapped to #fee2e2 while text-red-100 stayed #fee2e2 =
   invisible text). Never style these with remappable utilities. */
.rz-view-btn{
  background:rgba(127,29,29,.30);
  border:1px solid rgba(185,28,28,.60);
  color:#fecaca;
  border-radius:.5rem;
  padding:.375rem .75rem;
  font-size:12px; font-weight:600; line-height:1.2;
}
.rz-view-btn:hover{ background:rgba(153,27,27,.50); color:#fff; }
html.light .rz-view-btn{ background:#fee2e2; border-color:#fca5a5; color:#b91c1c; }
html.light .rz-view-btn:hover{ background:#fecaca; color:#7f1d1d; }

/* ---- Care plan cards inside the profile (both modal modes) ----
   Explicit colours for BOTH themes (never remappable utilities here).
   Sized for the compact modal; the .emergency block scales them up. */
.cp-tile{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; height:2.4rem; width:2.4rem;
  border-radius:.7rem; color:#fff;
}
.cp-tile svg{ height:55%; width:55%; }
.cp-tile-doc, .cp-tile-red{ background:#dc2626; }
.cp-tile-amber{ background:#ea580c; }
.cp-summary, .cp-scen{
  display:flex; gap:.9rem; align-items:flex-start;
  border-radius:.9rem; padding:.85rem 1rem; border:1px solid transparent;
}
.cp-summary{ background:rgba(127,29,29,.16); border-color:rgba(185,28,28,.45); }
.cp-summary-title{ font-weight:700; color:#fecaca; }
.cp-summary-dx{ margin-top:.15rem; color:#f1f5f9; }
.cp-scen-red  { background:rgba(127,29,29,.13); border-color:rgba(185,28,28,.50); }
.cp-scen-amber{ background:rgba(120,53,15,.13); border-color:rgba(217,119,6,.45); }
.cp-scen-title{ font-weight:700; margin-bottom:.2rem; }
.cp-scen-red  .cp-scen-title{ color:#fca5a5; }
.cp-scen-amber .cp-scen-title{ color:#fdba74; }
.cp-lead{ font-weight:700; }
.cp-call{ display:flex; gap:.45rem; align-items:flex-start; margin-top:.4rem; }
.cp-call svg{ height:.95rem; width:.95rem; flex:0 0 auto; margin-top:.2rem; }
.cp-scen-red  .cp-call{ color:#fca5a5; }
.cp-scen-amber .cp-call{ color:#fdba74; }
.cp-call-lead{ font-weight:700; }
.cp-team{
  display:flex; gap:.6rem; align-items:flex-start;
  border:1px solid rgba(148,163,184,.22); border-radius:.8rem;
  padding:.7rem .9rem; color:#cbd5e1;
}
.cp-team svg{ height:1rem; width:1rem; flex:0 0 auto; margin-top:.15rem; color:#94a3b8; }
.cp-team-label{ font-weight:700; text-transform:uppercase; font-size:.85em; letter-spacing:.05em; color:#94a3b8; }
html.light .cp-summary{ background:#fef2f2; border-color:#fecaca; }
html.light .cp-summary-title{ color:#b91c1c; }
html.light .cp-summary-dx{ color:#0f172a; }
html.light .cp-scen-red  { background:#fef2f2; border-color:#fca5a5; }
html.light .cp-scen-amber{ background:#fff7ed; border-color:#fdba74; }
html.light .cp-scen-red  .cp-scen-title{ color:#dc2626; }
html.light .cp-scen-amber .cp-scen-title{ color:#ea580c; }
html.light .cp-scen-red  .cp-call{ color:#dc2626; }
html.light .cp-scen-amber .cp-call{ color:#ea580c; }
html.light .cp-team{ border-color:#e2e8f0; color:#334155; }

/* ---- Red Zone emergency profile: full-screen takeover ----
   Matches Kyle's reference mock: red banner, grey canvas, floating white
   cards (identity card with a red wash + ringed red avatar; plan card left;
   guardians + welfare cards right), large green call buttons. Dark theme =
   same architecture on dark surfaces. Compact profile untouched. */
#profile-modal.emergency{ padding:0; align-items:stretch; overscroll-behavior:contain; }
/* the compact profile scrolls via the container / 70vh body — contain those too */
#profile-modal{ overscroll-behavior:contain; }
#profile-body{ overscroll-behavior:contain; }
#profile-modal.emergency > div{
  max-width:none; width:100%; min-height:100dvh;
  border-radius:0; border:0;
  display:flex; flex-direction:column;
  background:#0b1120;                              /* canvas */
}
html.light #profile-modal.emergency > div{ background:#eef1f6; }
#profile-modal.emergency #profile-rz-banner{ display:flex; }
/* identity card */
#profile-modal.emergency #profile-header{
  margin:1.25rem 1.5rem 0;
  padding:1.4rem 1.6rem;
  align-items:center;
  border:1px solid rgba(148,163,184,.15);
  border-radius:1.1rem;
  background:
    radial-gradient(120% 170% at 0% 50%, rgba(220,38,38,.16), rgba(220,38,38,0) 55%),
    #0f172a;
  box-shadow:0 10px 28px -18px rgba(2,6,23,.7);
}
html.light #profile-modal.emergency #profile-header{
  border-color:#e2e8f0;
  background:
    radial-gradient(120% 170% at 0% 50%, rgba(220,38,38,.10), rgba(220,38,38,0) 55%),
    #fff;
  box-shadow:0 10px 25px -18px rgba(15,23,42,.25);
}
#profile-modal.emergency #profile-avatar{
  height:5.5rem; width:5.5rem; font-size:1.9rem;
  background-color:#dc2626 !important;   /* beats the JS name-hash inline colour */
  box-shadow:0 0 0 4px #0f172a, 0 0 0 6px rgba(220,38,38,.55);
}
html.light #profile-modal.emergency #profile-avatar{
  box-shadow:0 0 0 4px #fff, 0 0 0 6px rgba(220,38,38,.45);
}
#profile-modal.emergency #profile-avatar img{ height:5.5rem; width:5.5rem; }
#profile-modal.emergency #profile-name{ font-size:2.1rem; font-weight:700; line-height:1.1; letter-spacing:-.01em; }
#profile-modal.emergency #profile-class{ font-size:1rem; margin-top:.3rem; }
#profile-modal.emergency #profile-header .pill{ height:24px; font-size:12px; border-radius:.55rem; padding:0 10px; }
#profile-modal.emergency #btn-close-profile{
  font-size:1.4rem; padding:.55rem .95rem;
  border-radius:.9rem; border:1px solid rgba(148,163,184,.3);
  background:rgba(15,23,42,.55);
}
html.light #profile-modal.emergency #btn-close-profile{
  background:#fff; border-color:#e2e8f0; box-shadow:0 2px 8px rgba(15,23,42,.08);
}
#profile-modal.emergency #profile-body{
  max-height:none; flex:1;
  width:100%;
  /* centre the content with padding (not max-width+margin) so the scrollbar
     sits at the true screen edge instead of floating mid-screen */
  padding:1.25rem max(1.5rem, calc((100% - 82rem) / 2)) 2rem;
  overscroll-behavior:contain;   /* stop scroll chaining to the page behind */
}
#profile-modal.emergency #profile-body::-webkit-scrollbar{ width:10px; }
#profile-modal.emergency #profile-body::-webkit-scrollbar-track{ background:transparent; }
#profile-modal.emergency #profile-body::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:5px; }
html.light #profile-modal.emergency #profile-body::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.25); }
/* floating cards */
#profile-modal.emergency #profile-careplan-section,
#profile-modal.emergency #profile-guardians-section,
#profile-modal.emergency #profile-welfare-section{
  background:#0f172a; border:1px solid rgba(148,163,184,.15);
  border-radius:1.1rem; padding:1.25rem 1.4rem;
  box-shadow:0 10px 28px -18px rgba(2,6,23,.7);
}
html.light #profile-modal.emergency #profile-careplan-section,
html.light #profile-modal.emergency #profile-guardians-section,
html.light #profile-modal.emergency #profile-welfare-section{
  background:#fff; border-color:#e2e8f0;
  box-shadow:0 10px 25px -18px rgba(15,23,42,.18);
}
/* card titles: big, bold, title case (the tiny uppercase eyebrows read as
   admin chrome, not an emergency sheet) */
#profile-modal.emergency #profile-body h3{
  font-size:1.05rem; font-weight:700; letter-spacing:0; text-transform:none;
  color:#f1f5f9; margin-bottom:1rem; gap:.6rem;
}
html.light #profile-modal.emergency #profile-body h3{ color:#0f172a; }
#profile-modal.emergency #profile-body h3 svg{ height:1.25rem; width:1.25rem; color:#dc2626; }
/* plan card header row gets a hairline divider; its h3 sits inside that row */
#profile-modal.emergency #profile-careplan-section > .flex{
  border-bottom:1px solid rgba(148,163,184,.15);
  padding-bottom:.9rem; margin-bottom:1.1rem;
}
html.light #profile-modal.emergency #profile-careplan-section > .flex{ border-bottom-color:#eef2f7; }
#profile-modal.emergency #profile-careplan-section h3{ margin-bottom:0; }
#profile-modal.emergency #btn-edit-careplan{
  border:1px solid rgba(148,163,184,.3); border-radius:.7rem;
  padding:.45rem .95rem; font-size:.85rem; font-weight:600; color:#e2e8f0;
}
html.light #profile-modal.emergency #btn-edit-careplan{
  background:#fff; color:#0f172a; border-color:#e2e8f0;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
#profile-modal.emergency #profile-welfare,
#profile-modal.emergency #profile-careplan,
#profile-modal.emergency #profile-guardians{ font-size:.95rem; line-height:1.6; }
/* IHCP step number circles scale up with the text */
#profile-modal.emergency #profile-welfare .rounded-full{
  height:1.5rem; width:1.5rem; font-size:.8rem;
}
/* roomier welfare panels + red labels per the mock */
#profile-modal.emergency #profile-welfare .rounded-lg{ padding:1rem 1.25rem; border-radius:.9rem; }
#profile-modal.emergency #profile-welfare .text-amber-300{ color:#f87171; }
html.light #profile-modal.emergency #profile-welfare .text-amber-300{ color:#dc2626; }
/* scaled-up care plan cards */
#profile-modal.emergency .cp-tile{ height:3.5rem; width:3.5rem; border-radius:.9rem; }
#profile-modal.emergency .cp-summary,
#profile-modal.emergency .cp-scen{ padding:1.1rem 1.25rem; gap:1.1rem; }
#profile-modal.emergency .cp-scen-title{ font-size:1.05rem; }
/* Triage layout on wide screens: DO (plan) beside CALL (guardians + welfare).
   Markup wrappers keep this deterministic no matter which sections hide. */
@media (min-width: 1024px){
  #profile-modal.emergency #profile-body{ display:flex; align-items:flex-start; gap:1.5rem; }
  #profile-modal.emergency #profile-main-col{ flex:1.55; min-width:0; margin:0; }
  #profile-modal.emergency #profile-side-col{
    flex:1; min-width:0; position:sticky; top:0;
    margin:0 !important;   /* space-y-5 margin does not apply in row layout */
  }
}
/* Phone layout: the desktop header row does not survive 390px (close button
   lands on the name, chips stack in a squeezed column). Smaller avatar, the
   close button pinned to the card corner, tighter card + tile sizing. */
@media (max-width: 639px){
  #profile-modal.emergency #profile-header{
    margin:1rem 1rem 0; padding:1.1rem; gap:.9rem; position:relative;
  }
  #profile-modal.emergency #profile-avatar{ height:4rem; width:4rem; font-size:1.4rem; }
  #profile-modal.emergency #profile-avatar img{ height:4rem; width:4rem; }
  #profile-modal.emergency #profile-name{ font-size:1.45rem; padding-right:2.5rem; }
  #profile-modal.emergency #profile-class{ font-size:.9rem; }
  #profile-modal.emergency #btn-close-profile{
    position:absolute; top:.75rem; right:.75rem;
    font-size:1.1rem; padding:.4rem .7rem;
  }
  #profile-modal.emergency #profile-body{ padding-left:1rem; padding-right:1rem; }
  #profile-modal.emergency #profile-careplan-section,
  #profile-modal.emergency #profile-guardians-section,
  #profile-modal.emergency #profile-welfare-section{ padding:1rem 1.1rem; }
  #profile-modal.emergency .cp-tile{ height:2.6rem; width:2.6rem; border-radius:.7rem; }
  #profile-modal.emergency .cp-summary,
  #profile-modal.emergency .cp-scen{ padding:.9rem 1rem; gap:.8rem; }
}

/* Guardian cards: the CALL column - bigger names, full-width tap targets */
#profile-modal.emergency #profile-guardians > div{ padding:1rem 1.1rem; border-radius:1rem; }
html.light #profile-modal.emergency #profile-guardians > div{
  background:#fff; border-color:#e2e8f0; box-shadow:0 4px 12px -8px rgba(15,23,42,.15);
}
#profile-modal.emergency #profile-guardians .font-semibold{ font-size:1.05rem; }
#profile-modal.emergency #profile-guardians a[href^="tel:"]{
  background:#059669; border-color:#10b981; color:#fff;
  width:100%;
  padding:.75rem 1.1rem; font-size:1rem; font-weight:600; border-radius:.8rem;
}
#profile-modal.emergency #profile-guardians a[href^="tel:"]:hover{ background:#047857; }
#profile-modal.emergency #profile-guardians a[href^="tel:"] svg{ height:1.1rem; width:1.1rem; color:#fff; }
#profile-modal.emergency #profile-guardians a[href^="tel:"] .text-\[10px\]{ color:#a7f3d0; font-size:.75rem; }
#profile-modal.emergency #profile-guardians a[href^="mailto:"]{ width:100%; padding:.6rem 1rem; font-size:.9rem; }

/* ---- Wave 1 additions (Red Zone badges, message tag chips, trip role pills) ----
   Light-mode remaps for the sky / violet chip families + the deep-red Red Zone
   chrome, matching the contrast approach of the earlier badge remaps above. */
html.light .bg-sky-900\/40    { background-color: #e0f2fe; }   /* sky-100 tint */
html.light .text-sky-200      { color: #0369a1; }              /* sky-700 on tint */
html.light .border-sky-700\/60{ border-color: #7dd3fc; }       /* sky-300 */
html.light .bg-violet-900\/40 { background-color: #ede9fe; }   /* violet-100 tint */
html.light .text-violet-200   { color: #6d28d9; }              /* violet-700 on tint */
html.light .border-violet-700\/60 { border-color: #c4b5fd; }   /* violet-300 */
html.light .bg-red-900\/50    { background-color: #fee2e2; }   /* IHP + topic chips */
html.light .bg-red-950\/40    { background-color: #fecaca; }   /* Red Zone table head */
html.light .text-red-200\/90  { color: #7f1d1d; }              /* head text: red-900 */
html.light .border-red-900\/60{ border-color: #fca5a5; }       /* Red Zone card border */
html.light .hover\:bg-red-950\/20:hover { background-color: #fef2f2; }
html.light .bg-red-900\/30    { background-color: #fee2e2; }   /* Red Zone nav hover base */
html.light .hover\:bg-red-900\/30:hover { background-color: #fee2e2; }
html.light .bg-slate-700\/70  { background-color: #e2e8f0; }   /* child tag chip */

/* ---- Scanner action menu (scan.html) ----
   Explicit colours for BOTH themes (never remappable utilities on new UI).
   The menu buttons keep Tailwind's .hidden role-gating, so the flex layout
   lives on an INNER span, not the button itself. */
.scan-brand{ display:flex; align-items:center; gap:.45rem; font-size:1.05rem; font-weight:800; letter-spacing:.02em; }
.scan-brand svg{ height:1.5rem; width:1.5rem; color:#dc2626; }
.scan-brand .b1{ color:#f1f5f9; }
.scan-brand .b2{ color:#64748b; font-weight:600; letter-spacing:.16em; font-size:.85rem; }
html.light .scan-brand .b1{ color:#0f172a; }
.scan-school-line{ display:block; height:3px; width:2.5rem; border-radius:999px; background:#dc2626; margin:.3rem auto 0; }
.scan-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.3rem; width:2.3rem; border-radius:999px;
  background:#dc2626; color:#fff; font-weight:700; font-size:.85rem;
}
.sm-card{
  background:#0f172a; border:1px solid rgba(148,163,184,.15);
  border-radius:1.25rem; padding:1.5rem;
  box-shadow:0 10px 28px -18px rgba(2,6,23,.7);
}
html.light .sm-card{ background:#fff; border-color:#e2e8f0; box-shadow:0 10px 30px -18px rgba(15,23,42,.18); }
.sm-head{ font-size:1.35rem; font-weight:800; color:#f1f5f9; letter-spacing:-.01em; }
html.light .sm-head{ color:#0f172a; }
.sm-sub{ font-size:.9rem; color:#94a3b8; margin-top:.15rem; }
html.light .sm-sub{ color:#64748b; }
.sm-head-sm{ font-size:1.1rem; font-weight:700; color:#f1f5f9; letter-spacing:-.01em; }
html.light .sm-head-sm{ color:#0f172a; }
/* active Face Scan / Manual Search tab (JS toggles this + text-white) */
.scan-tab-active{ background:#b91c1c; }
/* login brand pane (scan.html) */
.sl-pane{
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.09), transparent 40%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px),
    linear-gradient(160deg, #7f1d1d, #450a0a 70%, #5f1616);
  background-size:auto, 22px 22px, auto;
  color:#fff; min-height:576px;
}
.sl-brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.15rem; letter-spacing:.02em; }
.sl-brand svg{ height:1.75rem; width:1.75rem; color:#fca5a5; }
.sl-brand span{ color:#fecaca; font-weight:600; letter-spacing:.16em; font-size:.9rem; }
.sl-big{ font-size:1.9rem; font-weight:800; line-height:1.15; letter-spacing:-.01em; max-width:20ch; }
.sl-sub{ margin-top:.9rem; color:rgba(255,255,255,.90); font-size:.95rem; line-height:1.55; max-width:40ch; }
.sl-foot{ display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.72); font-size:.85rem; }
.sl-foot svg{ height:1.1rem; width:1.1rem; color:#fca5a5; }
.sl-mark{ height:4rem; width:4rem; border-radius:1rem; }
.sm-tile{
  display:flex; align-items:center; justify-content:center;
  height:3.25rem; width:3.25rem; border-radius:.9rem; flex:0 0 auto;
  background:rgba(239,68,68,.13); color:#f87171;
}
html.light .sm-tile{ background:#fee2e2; color:#b91c1c; }
.sm-tile svg{ height:55%; width:55%; }
.sm-row{
  width:100%; text-align:left; border-radius:1rem;
  border:1px solid rgba(148,163,184,.18); background:#111c30;
  padding:1.05rem 1.2rem;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sm-row:hover{ transform:translateY(-1px); background:#16233b; }
html.light .sm-row{ background:#fff; border-color:#e2e8f0; box-shadow:0 2px 8px -4px rgba(15,23,42,.08); }
html.light .sm-row:hover{ background:#fff; box-shadow:0 10px 22px -12px rgba(15,23,42,.22); }
.sm-row-inner{ display:flex; align-items:center; gap:1rem; }
.sm-row-title{ display:block; font-weight:700; font-size:1rem; color:#f1f5f9; }
html.light .sm-row-title{ color:#0f172a; }
.sm-row-desc{ display:block; font-size:.85rem; color:#94a3b8; margin-top:.15rem; }
html.light .sm-row-desc{ color:#64748b; }
.sm-chev{ margin-left:auto; height:1.25rem; width:1.25rem; flex:0 0 auto; color:#64748b; }
/* primary action: solid teal, elevated (same in both themes) */
.sm-row-primary{
  background:linear-gradient(135deg,#dc2626,#991b1b);
  border-color:#ef4444;
  box-shadow:0 14px 30px -14px rgba(220,38,38,.55);
}
.sm-row-primary:hover{ background:linear-gradient(135deg,#991b1b,#7f1d1d); }
html.light .sm-row-primary{ background:linear-gradient(135deg,#7f1d1d,#450a0a); border-color:rgba(153,27,27,.5); box-shadow:0 14px 30px -14px rgba(127,29,29,.4); }
html.light .sm-row-primary:hover{ background:linear-gradient(135deg,#991b1b,#7f1d1d); }
/* html.light variants repeated: the theme's html.light text rules carry an
   extra specificity point and would otherwise paint dark text on the maroon */
.sm-row-primary .sm-row-title,
html.light .sm-row-primary .sm-row-title{ color:#fff; }
.sm-row-primary .sm-row-desc,
html.light .sm-row-primary .sm-row-desc{ color:rgba(255,255,255,.95); }
.sm-row-primary .sm-tile,
html.light .sm-row-primary .sm-tile{ background:rgba(255,255,255,.20); color:#fff; }
.sm-row-primary .sm-chev,
html.light .sm-row-primary .sm-chev{ color:rgba(255,255,255,.85); }
.sm-foot{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:1.25rem 0 .5rem; font-size:.85rem; color:#64748b;
}
.sm-foot svg{ height:1.4rem; width:1.4rem; color:#dc2626; opacity:.85; }
/* red variant of the scan toast (showError) */
#toast.toast-error{ border-color:rgba(239,68,68,.7); background:rgba(127,29,29,.6); color:#fecaca; }
html.light #toast.toast-error{ border-color:#fca5a5; background:#fee2e2; color:#b91c1c; }
/* phones: tighter action rows so titles keep to two lines */
@media (max-width: 479px){
  .sm-tile{ height:2.75rem; width:2.75rem; border-radius:.75rem; }
  .sm-row{ padding:.9rem 1rem; }
  .sm-row-inner{ gap:.8rem; }
  .sm-row-title{ font-size:.95rem; }
  .sm-row-desc{ font-size:.8rem; }
  .sm-head{ font-size:1.2rem; }
}
/* subtle canvas: two teal glows + a dot grid behind the kiosk content */
#view-main{ position:relative; }
#view-main::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 6% 15%, rgba(239,68,68,.06), transparent 30%),
    radial-gradient(circle at 94% 85%, rgba(239,68,68,.05), transparent 32%),
    radial-gradient(rgba(148,163,184,.10) 1px, transparent 1.4px);
  background-size:auto, auto, 24px 24px;
}
html.light #view-main::before{
  background:
    radial-gradient(circle at 6% 15%, rgba(220,38,38,.06), transparent 30%),
    radial-gradient(circle at 94% 85%, rgba(220,38,38,.05), transparent 32%),
    radial-gradient(rgba(15,23,42,.05) 1px, transparent 1.4px);
  background-size:auto, auto, 24px 24px;
}
/* give the action menu a little more room than the camera flows */
#view-main main:has(#panel-menu:not(.hidden)){ max-width:44rem; }

/* ============================================================
   MESSAGES (school-side parent chat) - dedicated classes, explicit both
   themes (never remappable Tailwind colour utilities on new UI).
   ============================================================ */
/* avatars */
.msg-av{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.5rem; width:2.5rem; border-radius:999px; flex:0 0 auto;
  color:#fff; font-weight:700; font-size:.85rem; line-height:1;
}
.msg-av-sm{ height:1.9rem; width:1.9rem; font-size:.7rem; }
.msg-av-hd{ height:2rem; width:2rem; font-size:.75rem; }

/* thread rows */
.msg-thread{
  width:100%; display:flex; align-items:center; gap:.75rem;
  padding:.7rem .85rem; text-align:left; border:0; background:transparent;
  border-bottom:1px solid rgba(148,163,184,.12); cursor:pointer;
  transition:background .12s ease;
}
.msg-thread:hover{ background:rgba(148,163,184,.08); }
html.light .msg-thread{ border-bottom-color:#eef2f7; }
html.light .msg-thread:hover{ background:#f1f5f9; }
.msg-thread-active{ background:rgba(220,38,38,.10); }
.msg-thread-active:hover{ background:rgba(220,38,38,.14); }
html.light .msg-thread-active{ background:#fff1f1; }
html.light .msg-thread-active:hover{ background:#ffe7e7; }
.msg-thread-main{ flex:1; min-width:0; }
.msg-thread-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.msg-thread-name{ font-size:.9rem; color:#e2e8f0; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.light .msg-thread-name{ color:#0f172a; }
.msg-thread-name.msg-unread{ font-weight:700; color:#fff; }
html.light .msg-thread-name.msg-unread{ color:#0f172a; }
.msg-thread-time{ font-size:.7rem; color:#64748b; flex:0 0 auto; }
.msg-thread-bottom{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.15rem; }
.msg-thread-preview{ font-size:.78rem; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
html.light .msg-thread-preview{ color:#64748b; }
.msg-badge{
  flex:0 0 auto; min-width:1.15rem; height:1.15rem; padding:0 .35rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#dc2626; color:#fff; font-size:.68rem; font-weight:700;
}

/* conversation bubbles */
.msg-row{ display:flex; align-items:flex-end; gap:.5rem; margin:.5rem 0; }
.msg-row.msg-out{ justify-content:flex-end; }
.msg-bubble{ max-width:78%; border-radius:1.1rem; padding:.55rem .8rem; }
.msg-bubble-in{ background:#1e293b; color:#e2e8f0; border-bottom-left-radius:.35rem; }
html.light .msg-bubble-in{ background:#f1f5f9; color:#0f172a; }
.msg-bubble-out{ background:linear-gradient(135deg,#b91c1c,#7f1d1d); color:#fff; border-bottom-right-radius:.35rem; }
.msg-meta{ font-size:.68rem; opacity:.72; margin-bottom:.15rem; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
.msg-bubble-out .msg-meta{ opacity:.85; }
.msg-text{ font-size:.9rem; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.msg-tg{
  display:inline-flex; align-items:center; gap:.15rem;
  background:rgba(14,165,233,.18); color:#7dd3fc; border-radius:.4rem;
  padding:0 .3rem; font-size:.62rem; font-weight:600;
}
.msg-bubble-out .msg-tg{ background:rgba(255,255,255,.20); color:#fff; }
html.light .msg-bubble-in .msg-tg{ background:#e0f2fe; color:#0369a1; }

/* date separators */
.msg-datesep{ display:flex; align-items:center; justify-content:center; margin:.9rem 0 .5rem; }
.msg-datesep span{
  font-size:.68rem; font-weight:600; color:#94a3b8;
  background:rgba(148,163,184,.14); border-radius:999px; padding:.15rem .7rem;
}
html.light .msg-datesep span{ color:#64748b; background:#eef2f7; }

/* empty states */
.msg-empty-list{ padding:1.5rem 1rem; text-align:center; font-size:.8rem; color:#94a3b8; }
.msg-empty-list span{ font-size:.72rem; color:#64748b; }
html.light .msg-empty-list{ color:#64748b; }
.msg-empty-conv{ padding:2rem 1rem; text-align:center; font-size:.8rem; color:#94a3b8; }
html.light .msg-empty-conv{ color:#64748b; }

/* compose send button */
.msg-send-btn{
  display:inline-flex; align-items:center; gap:.4rem; flex:0 0 auto;
  background:#dc2626; color:#fff; border-radius:.75rem; padding:0 1rem;
  font-size:.85rem; font-weight:600;
}
.msg-send-btn:hover{ background:#b91c1c; }
.msg-send-btn:disabled{ opacity:.4; }
.msg-send-btn svg{ height:1.05rem; width:1.05rem; }

/* bound the panels so the conversation + list scroll INSIDE them instead of
   growing the page (min-h-[50vh] alone let tall threads slide under the sticky
   header). The higher-specificity selector beats the Tailwind min-h utility. */
@media (min-width: 768px){
  [data-view="messages"] .msg-list-col,
  [data-view="messages"] .msg-conv-col{ height:72vh; min-height:0; }
}
@media (max-width: 767px){
  [data-view="messages"].msg-thread-open .msg-conv-col{ height:74vh; min-height:0; }
}

/* mobile back button - hidden on desktop, shown when a thread is open on phone */
.msg-back-btn{ display:none; align-items:center; justify-content:center; height:2rem; width:2rem; border-radius:.6rem; color:#94a3b8; }
.msg-back-btn:hover{ background:rgba(148,163,184,.12); }
.msg-back-btn svg{ height:1.25rem; width:1.25rem; }
@media (max-width: 767px){
  /* app-style: on phones show ONE panel at a time */
  [data-view="messages"] .msg-conv-col{ display:none; }
  [data-view="messages"].msg-thread-open .msg-list-col{ display:none; }
  [data-view="messages"].msg-thread-open .msg-conv-col{ display:flex; }
  [data-view="messages"].msg-thread-open .msg-back-btn{ display:inline-flex; }
  .msg-bubble{ max-width:85%; }
}

/* ============================================================
   SAFEGUARDING case detail - reads as an internal case record, NOT a chat
   (reporting is one-way/anonymous). Dedicated classes, explicit both themes.
   ============================================================ */
.wb-report-body{
  position:relative;
  border-radius:.9rem; padding:.9rem 1rem .9rem 2.4rem; margin-bottom:.9rem;
  background:#1e293b; color:#f1f5f9; font-size:.92rem; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
  border:1px solid rgba(148,163,184,.14);
  border-left:3px solid #dc2626;
}
html.light .wb-report-body{ background:#fff; color:#0f172a; border-color:#e2e8f0; border-left-color:#dc2626; }
.sg-quotemark{
  position:absolute; left:.8rem; top:.3rem;
  font-family:Georgia,'Times New Roman',serif; font-size:2rem; line-height:1;
  color:#ef4444; font-weight:700;
}
html.light .sg-quotemark{ color:#dc2626; }
.wb-oneway{
  display:flex; gap:.5rem; align-items:flex-start;
  border-radius:.75rem; padding:.6rem .8rem; margin-bottom:1rem;
  background:rgba(180,83,9,.14); border:1px solid rgba(217,119,6,.4);
  color:#fcd34d; font-size:.78rem; line-height:1.4;
}
.wb-oneway svg{ flex:0 0 auto; margin-top:.1rem; }
.wb-oneway b{ color:#fde68a; }
html.light .wb-oneway{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
html.light .wb-oneway b{ color:#78350f; }
.wb-notes-title{
  font-size:.8rem; font-weight:700; color:#e2e8f0; margin-bottom:.6rem;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.wb-notes-title span{ font-size:.68rem; font-weight:500; color:#64748b; }
html.light .wb-notes-title{ color:#0f172a; }
.wb-notes-log{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.75rem; max-height:15rem; overflow-y:auto; }
.wb-note{
  border-radius:.7rem; padding:.55rem .75rem;
  background:rgba(148,163,184,.10); border:1px solid rgba(148,163,184,.16);
}
html.light .wb-note{ background:#f1f5f9; border-color:#e2e8f0; }
.wb-note-meta{ display:flex; align-items:center; gap:.4rem; font-size:.66rem; color:#94a3b8; margin-bottom:.2rem; }
.wb-note-dot{ width:.45rem; height:.45rem; border-radius:50%; background:#dc2626; }
.wb-note-body{ font-size:.85rem; color:#e2e8f0; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
html.light .wb-note-body{ color:#0f172a; }
.wb-empty{ font-size:.8rem; color:#94a3b8; padding:.5rem 0; }
html.light .wb-empty{ color:#64748b; }
.wb-note-add{ display:flex; gap:.5rem; margin-bottom:1rem; }
.wb-note-input{
  flex:1; min-width:0; border-radius:.7rem; padding:.55rem .8rem; font-size:.85rem;
  background:#0f172a; border:1px solid rgba(148,163,184,.25); color:#f1f5f9;
}
.wb-note-input::placeholder{ color:#64748b; }
html.light .wb-note-input{ background:#fff; border-color:#cbd5e1; color:#0f172a; }
.wb-note-input:disabled{ opacity:.5; }
.wb-note-btn{ flex:0 0 auto; border-radius:.7rem; padding:0 1rem; font-size:.82rem; font-weight:600; background:#dc2626; color:#fff; }
.wb-note-btn:hover{ background:#b91c1c; }
.wb-note-btn:disabled{ opacity:.4; }
.wb-status-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; border-top:1px solid rgba(148,163,184,.16); padding-top:.75rem; }
html.light .wb-status-row{ border-top-color:#e2e8f0; }
.wb-status-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  border-radius:.65rem; padding:.42rem .9rem; font-size:.74rem; font-weight:600;
  border:1px solid rgba(148,163,184,.3); color:#e2e8f0; background:transparent;
}
html.light .wb-status-btn{ color:#334155; border-color:#cbd5e1; }
.wb-status-btn.sgs-reviewing{ color:#fbbf24; }
.wb-status-btn.sgs-escalated{ color:#a78bfa; }
.wb-status-btn.sgs-closed{ color:#34d399; }
.wb-status-btn.sgs-reviewing:hover{ background:rgba(245,158,11,.10); }
.wb-status-btn.sgs-escalated:hover{ background:rgba(139,92,246,.10); }
.wb-status-btn.sgs-closed:hover{ background:rgba(16,185,129,.10); }
html.light .wb-status-btn.sgs-reviewing{ color:#b45309; }
html.light .wb-status-btn.sgs-escalated{ color:#6d28d9; }
html.light .wb-status-btn.sgs-closed{ color:#047857; }
html.light .wb-status-btn.sgs-reviewing:hover{ background:#fef3c7; }
html.light .wb-status-btn.sgs-escalated:hover{ background:#ede9fe; }
html.light .wb-status-btn.sgs-closed:hover{ background:#d1fae5; }
.wb-status-current{ pointer-events:none; }
.wb-status-current.sgs-reviewing{ border-color:#f59e0b; background:rgba(245,158,11,.14); }
.wb-status-current.sgs-escalated{ border-color:#8b5cf6; background:rgba(139,92,246,.14); }
.wb-status-current.sgs-closed{ border-color:#10b981; background:rgba(16,185,129,.14); }
html.light .wb-status-current.sgs-reviewing{ border-color:#f59e0b; background:#fef3c7; }
html.light .wb-status-current.sgs-escalated{ border-color:#8b5cf6; background:#ede9fe; }
html.light .wb-status-current.sgs-closed{ border-color:#10b981; background:#d1fae5; }

/* ---- Incident detail: captured GPS row with map link ---- */
.im-loc{
  display:flex; align-items:center; gap:.35rem; margin-top:.35rem;
  font-size:.72rem; color:#94a3b8;
}
.im-loc svg{ flex:0 0 auto; color:#f87171; }
.im-loc a{ color:#f87171; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.im-loc a:hover{ color:#fca5a5; }
html.light .im-loc{ color:#64748b; }
html.light .im-loc svg{ color:#dc2626; }
html.light .im-loc a{ color:#dc2626; }
html.light .im-loc a:hover{ color:#b91c1c; }

/* ---- Safeguarding redesign (Kyle's mock 2026-07-22): two-pane master/detail.
   Dedicated sg-* classes, explicit values both themes (never raw Tailwind
   colour utilities here - the light remap layer won't cover new combos). ---- */
.sg-title-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:.8rem; flex:0 0 auto; margin-top:.15rem;
  background:rgba(16,185,129,.14); color:#34d399;
}
html.light .sg-title-ico{ background:#d1fae5; color:#047857; }

.sg-btn-outline{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:.75rem; padding:.55rem 1rem; font-size:.78rem; font-weight:600;
  border:1px solid rgba(148,163,184,.3); color:#e2e8f0; background:transparent;
}
.sg-btn-outline:hover{ background:rgba(148,163,184,.12); }
html.light .sg-btn-outline{ border-color:#cbd5e1; color:#334155; background:#fff; }
html.light .sg-btn-outline:hover{ background:#f1f5f9; }
.sg-btn-solid{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:.75rem; padding:.55rem 1rem; font-size:.78rem; font-weight:700;
  background:#dc2626; color:#fff;
}
.sg-btn-solid:hover{ background:#b91c1c; }

.sg-layout{ display:grid; grid-template-columns:1fr; gap:1rem; align-items:start; }
@media (min-width:900px){ .sg-layout{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); } }

.sg-list-col{
  border-radius:1rem; overflow:hidden; display:flex; flex-direction:column;
  background:rgba(15,23,42,.8); border:1px solid #1e293b;
}
html.light .sg-list-col{ background:#fff; border-color:#e2e8f0; }
.sg-detail-col{
  border-radius:1rem; padding:1.1rem 1.15rem;
  background:rgba(15,23,42,.8); border:1px solid #1e293b;
}
html.light .sg-detail-col{ background:#fff; border-color:#e2e8f0; }

/* Tabs above, search below: side by side they fight for a narrow column */
.sg-list-tools{ display:flex; flex-direction:column; gap:.55rem; padding:.7rem; border-bottom:1px solid #1e293b; }
html.light .sg-list-tools{ border-bottom-color:#e2e8f0; }
.sg-select{
  flex:0 0 auto; border-radius:.7rem; padding:.45rem .6rem; font-size:.74rem;
  background:#0f172a; border:1px solid rgba(148,163,184,.25); color:#e2e8f0;
}
html.light .sg-select{ background:#fff; border-color:#cbd5e1; color:#0f172a; }
.sg-search{ position:relative; flex:1; min-width:0; }
.sg-search svg{ position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:#64748b; pointer-events:none; }
.sg-search input{
  width:100%; border-radius:.7rem; padding:.45rem .7rem .45rem 2rem; font-size:.76rem;
  background:#0f172a; border:1px solid rgba(148,163,184,.25); color:#f1f5f9;
}
.sg-search input::placeholder{ color:#64748b; }
html.light .sg-search input{ background:#fff; border-color:#cbd5e1; color:#0f172a; }

.sg-list{ flex:1; overflow-y:auto; max-height:62vh; }
.sg-list-hint{ padding:1rem .9rem; font-size:.76rem; color:#94a3b8; }
html.light .sg-list-hint{ color:#64748b; }
.sg-list-err{ padding:1rem .9rem; font-size:.76rem; color:#f87171; }
html.light .sg-list-err{ color:#b91c1c; }

.sg-item{
  display:flex; gap:.7rem; align-items:center; width:100%; text-align:left;
  padding:.7rem .8rem; border-bottom:1px solid rgba(30,41,59,.8);
  border-left:3px solid transparent;
}
.sg-item:hover{ background:rgba(148,163,184,.07); }
html.light .sg-item{ border-bottom-color:#f1f5f9; }
html.light .sg-item:hover{ background:#f8fafc; }
.sg-item-active{ border-left-color:#dc2626; background:rgba(220,38,38,.08); }
.sg-item-active:hover{ background:rgba(220,38,38,.11); }
html.light .sg-item-active{ background:#fef2f2; }
html.light .sg-item-active:hover{ background:#fee2e2; }

.sg-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:2.35rem; height:2.35rem; border-radius:999px;
}
.sg-ico svg{ width:1.1rem; height:1.1rem; }
.sg-ico-lg{ width:2.9rem; height:2.9rem; border-radius:.9rem; }
.sg-ico-lg svg{ width:1.35rem; height:1.35rem; }
.sg-ico-new{ background:rgba(239,68,68,.15); color:#f87171; }
.sg-ico-reviewing{ background:rgba(245,158,11,.15); color:#fbbf24; }
.sg-ico-escalated{ background:rgba(139,92,246,.16); color:#a78bfa; }
.sg-ico-closed{ background:rgba(16,185,129,.15); color:#34d399; }
html.light .sg-ico-new{ background:#fee2e2; color:#dc2626; }
html.light .sg-ico-reviewing{ background:#fef3c7; color:#d97706; }
html.light .sg-ico-escalated{ background:#ede9fe; color:#7c3aed; }
html.light .sg-ico-closed{ background:#d1fae5; color:#059669; }

.sg-item-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.22rem; }
.sg-item-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.sg-item-cat{ display:block; font-size:.85rem; font-weight:700; color:#f1f5f9; }
html.light .sg-item-cat{ color:#0f172a; }
.sg-item-sub{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.sg-item-ref{ display:block; margin-top:.1rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; color:#64748b; }
.sg-item-when{ font-size:.68rem; color:#64748b; white-space:nowrap; margin-left:auto; }
.sg-item-when i{ font-style:normal; color:#475569; }

/* Status tabs (replaced the dropdown) */
.sg-tabs{ display:flex; gap:.25rem; padding:.25rem; border-radius:.75rem; background:rgba(148,163,184,.09); width:100%; overflow-x:auto; scrollbar-width:none; }
.sg-tabs::-webkit-scrollbar{ display:none; }
/* On phones let the tabs wrap instead of running off the edge */
@media (max-width: 640px){
  .sg-tabs{ flex-wrap:wrap; overflow-x:visible; }
  .sg-tab{ flex:1 1 auto; min-width:calc(33.333% - .25rem); }
}
html.light .sg-tabs{ background:#f1f5f9; }
.sg-tab{
  flex:1 1 auto; white-space:nowrap; border-radius:.6rem; padding:.45rem .7rem;
  font-size:.75rem; font-weight:600; color:#94a3b8;
  transition:background-color .15s ease, color .15s ease;
}
.sg-tab:hover{ color:#e2e8f0; }
html.light .sg-tab{ color:#64748b; } html.light .sg-tab:hover{ color:#0f172a; }
.sg-tab-on{ background:#0f766e; color:#fff; box-shadow:0 4px 12px -6px rgba(15,118,110,.9); }
html.light .sg-tab-on{ background:#0f766e; color:#fff; }
.sg-tab-on:hover{ color:#fff; }

/* Meta pills on the detail header */
.sg-tagpill{
  display:inline-flex; align-items:center; gap:.25rem;
  border-radius:9999px; padding:.15rem .55rem; font-size:.68rem; font-weight:600;
  background:rgba(148,163,184,.14); color:#cbd5e1; border:1px solid rgba(148,163,184,.2);
}
html.light .sg-tagpill{ background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.sg-tagpill-green{ background:rgba(16,185,129,.14); color:#6ee7b7; border-color:rgba(16,185,129,.28); }
html.light .sg-tagpill-green{ background:#d1fae5; color:#047857; border-color:#a7f3d0; }
.sg-tagpill-amber{ background:rgba(245,158,11,.14); color:#fcd34d; border-color:rgba(245,158,11,.3); }
html.light .sg-tagpill-amber{ background:#fef3c7; color:#92400e; border-color:#fde68a; }

.sg-pager{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.65rem; border-top:1px solid #1e293b;
}
html.light .sg-pager{ border-top-color:#e2e8f0; }
.sg-pgbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:2rem; border-radius:.6rem; font-size:.74rem; font-weight:600;
  border:1px solid rgba(148,163,184,.25); color:#cbd5e1; background:transparent;
}
.sg-pgbtn:hover{ background:rgba(148,163,184,.12); }
.sg-pgbtn:disabled{ opacity:.35; pointer-events:none; }
html.light .sg-pgbtn{ border-color:#e2e8f0; color:#475569; background:#fff; }
html.light .sg-pgbtn:hover{ background:#f1f5f9; }
.sg-pgbtn-cur{ background:#dc2626; border-color:#dc2626; color:#fff; pointer-events:none; }
html.light .sg-pgbtn-cur{ background:#dc2626; border-color:#dc2626; color:#fff; }
.sg-pgdot{ color:#64748b; font-size:.8rem; }

.sg-back{
  display:none; align-items:center; gap:.35rem; margin-bottom:.8rem;
  font-size:.78rem; font-weight:600; color:#cbd5e1;
}
html.light .sg-back{ color:#334155; }

.sg-detail-empty{ font-size:.8rem; color:#64748b; padding:.5rem 0; }

.sg-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.5rem; flex-wrap:wrap; }
.sg-head-left{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.sg-head-text{ display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }
.sg-head-title{ font-size:1.3rem; font-weight:800; color:#f1f5f9; line-height:1.1; }
html.light .sg-head-title{ color:#0f172a; }
.sg-head-ref{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:#64748b; margin-top:.3rem; }

.sg-received{ font-size:.74rem; color:#94a3b8; margin-bottom:.8rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
html.light .sg-received{ color:#64748b; }
.sg-dotsep{ color:#475569; }
.sg-anon{ display:inline-flex; align-items:center; gap:.3rem; color:#34d399; font-weight:600; }
html.light .sg-anon{ color:#047857; }
.sg-contact{ color:#fbbf24; }
html.light .sg-contact{ color:#b45309; }
.sg-contact-val{ color:#e2e8f0; }
html.light .sg-contact-val{ color:#0f172a; }

.sg-notes-lock{ display:inline-flex; align-items:center; gap:.3rem; }
/* Empty case notes: centred invitation to act, not a warning strip */
.sg-notes-empty{
  display:flex; flex-direction:column; gap:.35rem; align-items:center; text-align:center;
  border-radius:.8rem; padding:1.6rem 1rem;
  background:transparent; border:1px dashed rgba(148,163,184,.22);
  font-size:.78rem; color:#94a3b8; line-height:1.45;
}
html.light .sg-notes-empty{ background:#f8fafc; border-color:#e2e8f0; color:#475569; }
.sg-notes-empty-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:2.6rem; height:2.6rem; border-radius:9999px; margin-bottom:.25rem;
  background:rgba(148,163,184,.14); color:#94a3b8;
}
html.light .sg-notes-empty-ico{ background:#f1f5f9; color:#64748b; }
.sg-notes-empty-title{ font-size:.85rem; font-weight:650; color:#e2e8f0; }
html.light .sg-notes-empty-title{ color:#0f172a; }
.sg-notes-empty-hint{ font-size:.75rem; color:#94a3b8; max-width:28rem; }
html.light .sg-notes-empty-ico{ background:#d1fae5; color:#047857; }

.sg-status-label{ font-size:.72rem; color:#94a3b8; }
html.light .sg-status-label{ color:#64748b; }
.sgs-ico{ display:inline-flex; }
.sgs-ico svg{ width:13px; height:13px; display:block; }

.sg-footnote{
  margin-top:.8rem; border-radius:.7rem; padding:.55rem .8rem;
  font-size:.72rem; background:rgba(139,92,246,.12); color:#c4b5fd;
}
html.light .sg-footnote{ background:#f5f3ff; color:#6d28d9; }

@media (max-width:899px){
  .sg-detail-col{ display:none; }
  .sg-layout.sg-open .sg-detail-col{ display:block; }
  .sg-layout.sg-open .sg-list-col{ display:none; }
  .sg-layout.sg-open .sg-back{ display:inline-flex; }
}

/* ---- Bell-panel Telegram connect footer (clean button, not a raw link) ---- */
.attn-tg{ display:flex; flex-direction:column; gap:.5rem; }
/* Plain text flow: this was display:flex, which split the sentence into
   separate flex items (each word group spaced apart) instead of wrapping
   as one line of text. */
.attn-tg-lead{ font-size:.72rem; color:#94a3b8; line-height:1.45; }
.attn-tg-lead svg{ vertical-align:-2px; margin-right:.25rem; color:#38bdf8; }
.attn-tg-lead b{ color:#e2e8f0; }
html.light .attn-tg-lead{ color:#64748b; }
html.light .attn-tg-lead b{ color:#0f172a; }
.attn-tg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; align-self:flex-start;
  background:#0ea5e9; color:#fff; border-radius:.6rem; padding:.4rem .8rem; font-size:.78rem; font-weight:600;
}
.attn-tg-btn:hover{ background:#0284c7; }
.attn-tg.linked{ flex-direction:row; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.72rem; color:#94a3b8; }
.attn-tg-badge{ display:inline-flex; align-items:center; gap:.3rem; background:rgba(14,165,233,.16); color:#7dd3fc; border-radius:.5rem; padding:.15rem .5rem; font-size:.7rem; font-weight:600; }
html.light .attn-tg.linked{ color:#64748b; }
html.light .attn-tg-badge{ background:#e0f2fe; color:#0369a1; }

/* =====================================================================
   INCIDENT RECORD (modal)
   Read under pressure: what happened, how bad, where, what's been done.
   Cards carry one job each; the severity of the record drives the chrome
   rather than decoration. Works in both themes.
   ===================================================================== */
.im-shell{ width:100%; max-width:46rem; border-radius:1.25rem; background:#0b1424; border:1px solid #1e293b; overflow:hidden; }
html.light .im-shell{ background:#fff; border-color:#e2e8f0; box-shadow:0 24px 60px -30px rgba(15,23,42,.35); }

/* Header: name + what it is + how bad. A high-severity record tints the strip. */
.im-head{ padding:1.15rem 1.35rem; border-bottom:1px solid #1e293b; background:linear-gradient(180deg, rgba(148,163,184,.06), transparent); }
html.light .im-head{ border-color:#e2e8f0; background:linear-gradient(180deg,#f8fafc,#fff); }
.im-head.sev-critical, .im-head.sev-high{ background:linear-gradient(180deg, rgba(239,68,68,.14), transparent); }
html.light .im-head.sev-critical, html.light .im-head.sev-high{ background:linear-gradient(180deg,#fef2f2,#fff); }
.im-title{ font-size:1.35rem; font-weight:700; letter-spacing:-.02em; color:#f1f5f9; line-height:1.2; }
html.light .im-title{ color:#0f172a; }
.im-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .85rem; margin-top:.5rem; font-size:.75rem; color:#94a3b8; }
html.light .im-meta{ color:#64748b; }
.im-meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.im-meta svg{ height:.85rem; width:.85rem; opacity:.75; }
.im-x{ height:2.25rem; width:2.25rem; border-radius:.7rem; border:1px solid #334155; color:#94a3b8; display:inline-flex; align-items:center; justify-content:center; transition:background-color .15s ease, color .15s ease; }
.im-x:hover{ background:#1e293b; color:#f1f5f9; }
html.light .im-x{ border-color:#e2e8f0; color:#64748b; }
html.light .im-x:hover{ background:#f1f5f9; color:#0f172a; }

/* Cards */
.im-body{ padding:1.35rem; display:flex; flex-direction:column; gap:1rem; background:#070f1c; }
html.light .im-body{ background:#f8fafc; }
.im-card{ border:1px solid #1e293b; background:#0b1424; border-radius:1rem; padding:1.1rem; }
html.light .im-card{ border-color:#e2e8f0; background:#fff; }
.im-card-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.9rem; }
.im-card-title{ display:flex; align-items:center; gap:.6rem; font-size:.95rem; font-weight:650; color:#e2e8f0; }
html.light .im-card-title{ color:#0f172a; }
.im-tile{ height:2rem; width:2rem; border-radius:.6rem; display:inline-flex; align-items:center; justify-content:center; background:rgba(20,184,166,.14); color:#5eead4; flex:0 0 auto; }
html.light .im-tile{ background:#ccfbf1; color:#0f766e; }
.im-tile svg{ height:1.05rem; width:1.05rem; }

/* Fields */
.im-fields{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width: 640px){ .im-fields{ grid-template-columns:1fr; } }
.im-label{ display:block; font-size:.75rem; color:#94a3b8; margin-bottom:.35rem; }
html.light .im-label{ color:#475569; }
.im-control{ position:relative; }
.im-control select, .im-control input, .im-textarea{
  width:100%; border-radius:.7rem; border:1px solid #334155; background:#0f172a; color:#e2e8f0;
  padding:.6rem .75rem; font-size:.82rem; transition:border-color .15s ease, box-shadow .15s ease;
}
.im-control select{ padding-left:1.85rem; appearance:none; }
.im-control select:focus, .im-control input:focus, .im-textarea:focus{ outline:none; border-color:#0d9488; box-shadow:0 0 0 3px rgba(13,148,136,.25); }
html.light .im-control select, html.light .im-control input, html.light .im-textarea{ background:#fff; border-color:#cbd5e1; color:#0f172a; }
.im-dot{ position:absolute; left:.7rem; top:50%; transform:translateY(-50%); height:.5rem; width:.5rem; border-radius:9999px; background:#64748b; pointer-events:none; }
.im-dot.low{ background:#38bdf8; } .im-dot.medium{ background:#fbbf24; }
.im-dot.high{ background:#fb923c; }   .im-dot.critical{ background:#ef4444; }
.im-dot.open{ background:#10b981; }   .im-dot.closed{ background:#64748b; } .im-dot.archived{ background:#475569; }
.im-textarea{ resize:vertical; min-height:5rem; }
.im-check{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:#cbd5e1; cursor:pointer; }
html.light .im-check{ color:#334155; }

/* Location: an honest preview (we hold coordinates, not a map tile) */
.im-loc-wrap{ display:grid; grid-template-columns:minmax(0,17rem) 1fr; gap:1rem; }
@media (max-width: 720px){ .im-loc-wrap{ grid-template-columns:1fr; } }
.im-map{
  position:relative; border-radius:.85rem; overflow:hidden; min-height:9.5rem; border:1px solid #1e293b;
  background:
    linear-gradient(90deg, rgba(148,163,184,.12) 1px, transparent 1px) 0 0/2.2rem 2.2rem,
    linear-gradient(0deg, rgba(148,163,184,.12) 1px, transparent 1px) 0 0/2.2rem 2.2rem,
    radial-gradient(circle at 62% 38%, rgba(13,148,136,.18), transparent 55%),
    #0d1a2b;
}
html.light .im-map{ border-color:#e2e8f0; background:
    linear-gradient(90deg, rgba(100,116,139,.16) 1px, transparent 1px) 0 0/2.2rem 2.2rem,
    linear-gradient(0deg, rgba(100,116,139,.16) 1px, transparent 1px) 0 0/2.2rem 2.2rem,
    radial-gradient(circle at 62% 38%, rgba(13,148,136,.14), transparent 55%),
    #f1f5f9; }
.im-map{ min-height:12.5rem; }
/* The map itself sits in an iframe. The button sits top-right so it never
   covers OpenStreetMap's attribution strip along the bottom. */
.im-map-cta{ position:absolute; top:.5rem; right:.5rem; z-index:2; display:inline-block; font-size:.7rem; font-weight:600; padding:.35rem .6rem; border-radius:.5rem; background:rgba(15,23,42,.88); color:#5eead4; backdrop-filter:blur(4px); transition:background-color .15s ease, color .15s ease; }
html.light .im-map-cta{ background:rgba(255,255,255,.94); color:#0f766e; border:1px solid #e2e8f0; }
.im-map-cta:hover{ background:#0f766e; color:#fff; }
.im-facts{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1rem; align-content:start; }
@media (max-width: 480px){ .im-facts{ grid-template-columns:1fr; } }
.im-fact{ display:flex; gap:.55rem; align-items:flex-start; }
.im-fact svg{ height:1rem; width:1rem; color:#5eead4; flex:0 0 auto; margin-top:.15rem; }
html.light .im-fact svg{ color:#0f766e; }
.im-fact-k{ display:block; font-size:.7rem; color:#94a3b8; }
html.light .im-fact-k{ color:#64748b; }
.im-fact-v{ display:block; font-size:.82rem; color:#e2e8f0; font-weight:600; word-break:break-word; }
html.light .im-fact-v{ color:#0f172a; }
.im-note-strip{ margin-top:.9rem; display:flex; gap:.5rem; align-items:center; font-size:.75rem; border-radius:.6rem; padding:.5rem .7rem; background:rgba(56,189,248,.1); color:#7dd3fc; }
html.light .im-note-strip{ background:#eff6ff; color:#1d4ed8; }
.im-empty{ font-size:.8rem; color:#64748b; font-style:italic; }

/* =====================================================================
   TOUCH TARGETS
   Apple and Google both ask for about 44px. Several controls sat near 28px,
   which is fine with a mouse and fiddly with a thumb. Applied on touch
   screens only, so desktop density is untouched.
   ===================================================================== */
@media (max-width: 900px) and (pointer: coarse){
  .sg-btn-outline, .sg-btn-solid, .sg-tab,
  #theme-toggle, .safe-theme-toggle, .btn-ghost, .btn-primary,
  .pf-back, .pf-x, .im-x,
  [data-nav], [data-open-profile], [data-open-incident], [data-wb-open]{
    min-height:2.75rem;
  }
  /* Dashboard quick actions and any small pill button in a flex row */
  .view-section button.inline-flex{ min-height:2.75rem; }
  /* Checkbox rows: make the whole label a comfortable target */
  label:has(> input[type="checkbox"]){ min-height:2.5rem; display:flex; align-items:center; }
}

/* =====================================================================
   LOADING SKELETONS
   Three rules keep these from feeling like decoration:
   1. A skeleton mirrors the SHAPE of what replaces it, so nothing jumps
      when the data lands.
   2. It fades in after 120ms, so a fast response never flashes a
      skeleton at anyone. Below that delay the user just sees content.
   3. The shimmer is a hint, not a light show, and it stops entirely for
      anyone who asked for reduced motion.
   ===================================================================== */
.sk{
  position:relative; overflow:hidden; display:block;
  background:#1b2740; border-radius:.5rem;
  animation:skIn .22s ease .12s both;
}
html.light .sk{ background:#e8edf4; }
.sk::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.16), transparent);
  animation:skShimmer 1.5s ease-in-out infinite;
}
html.light .sk::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); }
@keyframes skIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes skShimmer{ to{ transform:translateX(100%) } }

.sk-line{ height:.7rem; }
.sk-line.sm{ height:.55rem; }
.sk-line.lg{ height:1.05rem; }
.sk-pill{ height:1.3rem; border-radius:9999px; }
.sk-circle{ border-radius:9999px; }
.sk-btn{ height:2.1rem; border-radius:.65rem; }
.sk-box{ border-radius:.85rem; }
.sk-stack{ display:flex; flex-direction:column; gap:.5rem; }
.sk-row{ display:flex; align-items:center; gap:.75rem; padding:.75rem 0; }
.sk-card{ border:1px solid #233149; border-radius:1rem; padding:1rem; }
html.light .sk-card{ border-color:#e2e8f0; }
.sk-card + .sk-card{ margin-top:.6rem; }

@media (prefers-reduced-motion: reduce){
  .sk{ animation:none; opacity:1; }
  .sk::after{ animation:none; display:none; }
}

/* =====================================================================
   DARK MODE LIFT
   The dark theme is the app's default and was built on flat near-black
   panels: cards, page and header all sat at nearly the same value, so
   surfaces disappeared and edges vanished. This gives the dark theme the
   same sense of depth the light theme gets for free, without touching a
   thousand utility classes: slightly lighter card surfaces, visible
   borders, and muted text raised to a readable contrast.
   ===================================================================== */
html.dark .border-slate-800{ border-color:#233149; }
html.dark .border-slate-700{ border-color:#33425c; }
/* A whisper of top-light on panels reads as "raised surface" */
html.dark .bg-slate-900\/80,
html.dark .bg-slate-900\/60,
html.dark .bg-slate-900\/50,
html.dark .bg-slate-950\/40,
html.dark .bg-slate-950\/60{
  background-image:linear-gradient(180deg, rgba(148,163,184,.05), rgba(148,163,184,0) 62%);
}
/* Muted body text was slate-400 on near-black: legible, but tiring */
html.dark .text-slate-400{ color:#9fadc2; }
html.dark .text-slate-500{ color:#8494ab; }
/* Table rows need a visible separator once surfaces are lifted */
html.dark .divide-slate-800 > * + *{ border-color:#233149; }
/* Modals sit above the page, so give them real elevation */
html.dark #incident-modal > div,
html.dark #wellnessModal > div:not(.absolute),
html.dark #profile-modal > div,
html.dark #staff-profile-modal > div{
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(148,163,184,.06);
}

/* =====================================================================
   SCANNER PROFILE SHEET (emergency view)
   Someone is standing in front of you. Contacts and medical facts read
   first; logging an incident is a deliberate, clearly-marked act.
   ===================================================================== */
.pf-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1.1rem; border-bottom:1px solid #1e293b; background:#0b1424; }
html.light .pf-head{ border-color:#e2e8f0; background:#fff; }
.pf-back{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:#cbd5e1; border-radius:.6rem; padding:.45rem .6rem; transition:background-color .15s ease, color .15s ease; }
.pf-back:hover{ background:#1e293b; color:#fff; }
html.light .pf-back{ color:#475569; } html.light .pf-back:hover{ background:#f1f5f9; color:#0f172a; }
.pf-title{ font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:#f1f5f9; line-height:1.15; }
html.light .pf-title{ color:#0f172a; }
.pf-sub{ font-size:.75rem; color:#94a3b8; margin-top:.1rem; }
html.light .pf-sub{ color:#64748b; }
.pf-x{ height:2.1rem; width:2.1rem; border-radius:.6rem; display:inline-flex; align-items:center; justify-content:center; color:#94a3b8; transition:background-color .15s ease, color .15s ease; }
.pf-x:hover{ background:#1e293b; color:#f1f5f9; }
html.light .pf-x:hover{ background:#f1f5f9; color:#0f172a; }

.pf-body{ padding:1rem; display:flex; flex-direction:column; gap:.9rem; background:#070f1c; max-height:70vh; overflow-y:auto; }
html.light .pf-body{ background:#f8fafc; }
.pf-card{ border:1px solid #1e293b; background:#0b1424; border-radius:1rem; padding:1rem; }
html.light .pf-card{ border-color:#e2e8f0; background:#fff; }
.pf-card-title{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:650; color:#e2e8f0; margin-bottom:.75rem; }
html.light .pf-card-title{ color:#0f172a; }
.pf-card-title svg{ height:1.15rem; width:1.15rem; color:#34d399; flex:0 0 auto; }
html.light .pf-card-title svg{ color:#059669; }

/* Contacts */
.pf-contact{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; border:1px solid #1e293b; border-radius:.85rem; padding:.7rem .8rem; }
html.light .pf-contact{ border-color:#e2e8f0; }
.pf-contact + .pf-contact{ margin-top:.55rem; }
.pf-who{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.pf-avatar{ height:2.6rem; width:2.6rem; border-radius:9999px; background:rgba(52,211,153,.16); color:#34d399; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
html.light .pf-avatar{ background:#d1fae5; color:#059669; }
.pf-avatar svg{ height:1.3rem; width:1.3rem; }
.pf-name{ font-size:.9rem; font-weight:650; color:#f1f5f9; }
html.light .pf-name{ color:#0f172a; }
.pf-rel{ font-size:.75rem; color:#94a3b8; }
html.light .pf-rel{ color:#64748b; }
/* Calling is the action: make it unmistakable */
.pf-call{ display:inline-flex; align-items:center; gap:.45rem; background:#047857; color:#fff; font-weight:700; font-size:.85rem; border-radius:.6rem; padding:.6rem .9rem; flex:0 0 auto; transition:background-color .15s ease, transform .05s ease; }
.pf-call:hover{ background:#059669; }
.pf-call:active{ transform:scale(.985); }
.pf-call svg{ height:.95rem; width:.95rem; }
.pf-call.sm{ padding:.4rem .7rem; font-size:.78rem; }

/* Phones: the call button and the name were fighting for one row, and the
   name lost ("Blak...", "Chl..."). In an emergency the name matters most,
   so it takes the full width and the call button sits under it, full width
   and easy to hit. */
@media (max-width: 480px){
  .pf-contact{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .pf-call{ justify-content:center; width:100%; padding:.75rem 1rem; }
  .pf-name, .pf-rel{ white-space:normal; }
}

/* Wellness facts */
.pf-two{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width: 640px){ .pf-two{ grid-template-columns:1fr; } }
.pf-box{ border:1px solid #1e293b; border-radius:.85rem; padding:.75rem; }
html.light .pf-box{ border-color:#e2e8f0; }
.pf-box-k{ display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:#94a3b8; margin-bottom:.35rem; }
html.light .pf-box-k{ color:#64748b; }
.pf-box-k svg{ height:.95rem; width:.95rem; color:#34d399; }
html.light .pf-box-k svg{ color:#059669; }
.pf-box-v{ font-size:.85rem; font-weight:650; color:#f1f5f9; }
html.light .pf-box-v{ color:#0f172a; }
.pf-row{ display:flex; gap:.6rem; padding-top:.75rem; margin-top:.75rem; border-top:1px solid #1e293b; }
html.light .pf-row{ border-color:#e2e8f0; }
.pf-row svg{ height:1.05rem; width:1.05rem; color:#34d399; flex:0 0 auto; margin-top:.1rem; }
html.light .pf-row svg{ color:#059669; }
.pf-row-k{ font-size:.82rem; font-weight:650; color:#e2e8f0; }
html.light .pf-row-k{ color:#0f172a; }
.pf-row-v{ font-size:.8rem; color:#94a3b8; }
html.light .pf-row-v{ color:#64748b; }

/* Log an incident: a red-headed panel, so it never gets pressed by accident */
.pf-inc{ border:1px solid #7f1d1d; border-radius:1rem; overflow:hidden; }
html.light .pf-inc{ border-color:#fecaca; }
.pf-inc-head{ display:flex; align-items:center; gap:.6rem; background:#dc2626; color:#fff; font-weight:700; font-size:.95rem; padding:.8rem 1rem; }
.pf-inc-head svg{ height:1.15rem; width:1.15rem; }
.pf-inc-body{ padding:1rem; background:#0b1424; display:flex; flex-direction:column; gap:.7rem; }
html.light .pf-inc-body{ background:#fff; }
.pf-field label{ display:block; font-size:.78rem; color:#94a3b8; margin-bottom:.3rem; }
html.light .pf-field label{ color:#475569; }
.pf-field select, .pf-inc-body input[type=text]{
  width:100%; border-radius:.7rem; border:1px solid #334155; background:#0f172a; color:#e2e8f0;
  padding:.65rem .75rem; font-size:.85rem; transition:border-color .15s ease, box-shadow .15s ease;
}
html.light .pf-field select, html.light .pf-inc-body input[type=text]{ background:#fff; border-color:#cbd5e1; color:#0f172a; }
.pf-field select:focus, .pf-inc-body input[type=text]:focus{ outline:none; border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.22); }
.pf-geo{ display:flex; align-items:flex-start; gap:.45rem; font-size:.78rem; line-height:1.35; }
.pf-geo svg{ height:1rem; width:1rem; flex:0 0 auto; margin-top:.05rem; }
.pf-inc-actions{ display:flex; gap:.6rem; }
.pf-confirm{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:#dc2626; color:#fff; font-weight:700; font-size:.9rem; border-radius:.75rem; padding:.85rem 1rem; transition:background-color .15s ease, transform .05s ease; }
.pf-confirm:hover{ background:#b91c1c; } .pf-confirm:active{ transform:scale(.99); }
.pf-confirm[disabled]{ opacity:.6; cursor:not-allowed; }
.pf-cancel{ border:1px solid #dc2626; color:#f87171; font-weight:650; font-size:.9rem; border-radius:.75rem; padding:.85rem 1.4rem; transition:background-color .15s ease, color .15s ease; }
.pf-cancel:hover{ background:rgba(220,38,38,.12); color:#fff; }
html.light .pf-cancel{ color:#dc2626; } html.light .pf-cancel:hover{ background:#fef2f2; color:#b91c1c; }
.pf-log-btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; background:#dc2626; color:#fff; font-weight:700; font-size:.95rem; border-radius:.85rem; padding:.9rem 1rem; transition:background-color .15s ease, transform .05s ease; }
.pf-log-btn:hover{ background:#b91c1c; } .pf-log-btn:active{ transform:scale(.99); }
.pf-log-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ---- Brand logo variants: dark-bg lockup by default, light-bg lockup when
   the light theme is active (the dark variant's sub-word is white). ---- */
.logo-light { display: none; }
html.light .logo-dark { display: none; }
html.light .logo-light { display: block; }

/* Message tag chips live INSIDE colored chat bubbles (teal school bubble /
   slate parent bubble), so they keep fixed self-contained colors in BOTH
   themes rather than following the surface remaps. */
.msg-chip       { background: rgba(148,163,184,.28); color: #f8fafc; }
.msg-chip-topic { background: #b91c1c; color: #ffffff; }
.msg-bubble-out .msg-chip { background: rgba(255,255,255,.22); color:#fff; }
.msg-bubble-out .msg-chip-topic { background:#fff; color:#b91c1c; }
/* chips ride inside chat bubbles: readable, with a subtle icon dot */
.pill.msg-chip, .pill.msg-chip-topic { height: 18px; padding: 0 8px; font-size: 11px; font-weight:600; gap:4px; }
.pill.msg-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; }

/* compose + filter dropdowns light up when a tag / filter is actually set,
   so it's obvious the tag is armed and the filter is active */
.msg-tag-on{ border-color:#dc2626 !important; box-shadow:0 0 0 1px rgba(220,38,38,.55); color:#fecaca; }
html.light .msg-tag-on{ color:#b91c1c; background:#fff1f1; }

/* Thread-list + generic row hovers used dark slate; keep them subtle on light. */
html.light .hover\:bg-slate-800\/60:hover { background-color: rgba(15,23,42,0.06); }
html.light .hover\:bg-slate-800:hover     { background-color: rgba(15,23,42,0.08); }

/* ---- Reports chart bars (validated per-mode fills; identity always carried
   by the row label / tooltip, never color alone) ---- */
.rep-bar       { background: #0d9488; }   /* trend + categories: single teal hue, passes both modes */
.rep-bar-crit  { background: #b91c1c; }
.rep-bar-high  { background: #ef4444; }
.rep-bar-med   { background: #d97706; }
.rep-bar-low   { background: #059669; }
.rep-bar-muted { background: #64748b; }
html.light .rep-bar-high  { background: #dc2626; }
html.light .rep-bar-muted { background: #94a3b8; }

/* ============================================================
   WHISTLEBLOW PAGE (body.wb-page)
   This page stores NOTHING on the reporter's device, so it never reads the
   saved theme; it follows prefers-color-scheme only. It also sits one step
   darker than the rest of the app (page=slate-950, card=slate-900, where the
   app uses 900/800), so the generic surface mapping above would render it
   flat (grey page + near-identical cards + white-on-white buttons).
   Remap the surfaces for this page's own scale.
   ============================================================ */
html.light body.wb-page                  { background-color: #f8fafc; }  /* page */
html.light .wb-page .bg-slate-900        { background-color: #ffffff; }  /* card */
html.light .wb-page .bg-slate-950        { background-color: #f8fafc; }  /* input well */
/* Secondary buttons (Check / Send) are bg-slate-800, which maps to white
   above and would vanish on a white card. Give them a visible surface. */
html.light .wb-page .bg-slate-800        { background-color: #e2e8f0; }
html.light .wb-page .hover\:bg-slate-700:hover { background-color: #cbd5e1; }
/* Reporter's own message bubble needs to read as distinct from the card. */
html.light .wb-page .bg-slate-700        { background-color: #e2e8f0; }