/* Safety Watch: shared tokens + base */
:root {
  --bg: #F3F4F6; --card: #FFFFFF; --line: #E5E7EB; --line-2: #D1D5DB;
  --ink: #111827; --ink-2: #374151; --muted: #6B7280;
  --accent: #0F766E; --accent-ink: #FFFFFF; --accent-soft: #E6F4F1; --accent-2: #115E59;
  --clash: #DB2777; --clash-hover: #BE185D;          /* only the Book-a-demo click */
  --ok: #15803D; --ok-soft: #DCFCE7; --warn: #B45309; --warn-soft: #FEF3C7;
  --bad: #B42318; --bad-soft: #FEE4E2; --info: #1D4ED8; --info-soft: #DBEAFE;
  /* activity colours (charts/timelines), kept apart from status pills */
  --a-computer: #14B8A6; --a-other: #94A3B8; --a-phone: #6366F1; --a-away: #F59E0B; --a-asleep: #E11D48; --a-lunch: #E5E7EB; --a-none: #F3F4F6;
  --radius: 14px; --shadow: 0 1px 2px rgba(17,24,39,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0F14; --card: #121821; --line: #1F2937; --line-2: #374151;
    --ink: #F3F4F6; --ink-2: #D1D5DB; --muted: #9CA3AF;
    --accent: #2DD4BF; --accent-ink: #042F2E; --accent-soft: #0F2E2B; --accent-2: #5EEAD4;
    --ok: #4ADE80; --ok-soft: #0F2A1A; --warn: #FBBF24; --warn-soft: #2B2109;
    --bad: #F87171; --bad-soft: #2E1414; --info: #93C5FD; --info-soft: #14213D;
    --a-lunch: #1F2937; --a-none: #161D27; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0F14; --card: #121821; --line: #1F2937; --line-2: #374151;
  --ink: #F3F4F6; --ink-2: #D1D5DB; --muted: #9CA3AF;
  --accent: #2DD4BF; --accent-ink: #042F2E; --accent-soft: #0F2E2B; --accent-2: #5EEAD4;
  --ok: #4ADE80; --ok-soft: #0F2A1A; --warn: #FBBF24; --warn-soft: #2B2109;
  --bad: #F87171; --bad-soft: #2E1414; --info: #93C5FD; --info-soft: #14213D;
  --a-lunch: #1F2937; --a-none: #161D27; color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
img, video { max-width: 100%; display: block; }
.num { font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px;
  font: 600 15px/1 inherit; font-family: inherit; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-2); }
.btn-outline { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink-2); }
.btn-clash { background: var(--clash); color: #fff; }
.btn-clash:hover { background: var(--clash-hover); }
.btn-text { background: none; color: var(--accent); padding: 0 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.plain { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }