/*
 * R Creative Uptime — application styles.
 *
 * Self-hosted only: no runtime font/CDN/icon-kit requests.
 * Layers keep specificity flat: later layers win regardless of selector weight.
 * Theme: theme.js sets <html data-theme="light|dark"> before paint. Without JS
 * the prefers-color-scheme fallback below applies. The two dark token blocks
 * MUST stay identical (see docs/ui-design.md).
 *
 * CSP note: nothing here requires inline styles. Proportional bars use SVG
 * geometry attributes (see .meter) instead of style="width:…".
 */

@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- fonts */
/* Montserrat variable (wght 400–800), SIL OFL 1.1 — see ../fonts/montserrat/OFL.txt */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin.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;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[class], ul[class] { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

/* --------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* Brand — rcreative.marketing */
    --rc-yellow: #FEE700;
    --rc-yellow-logo: #FDE600;
    --rc-navy: #172433;
    --rc-ink: #060606;
    --rc-surface: #101010;
    --rc-surface-raised: #1A1A1A;
    --rc-white: #FFFFFF;

    /* Type */
    --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --fs-2xs: 0.6875rem;  /* 11 — eyebrows only, always bold + uppercase */
    --fs-xs: 0.75rem;     /* 12 */
    --fs-sm: 0.8125rem;   /* 13 */
    --fs-base: 0.9375rem; /* 15 */
    --fs-md: 1.0625rem;   /* 17 */
    --fs-lg: 1.25rem;     /* 20 */
    --fs-xl: 1.625rem;    /* 26 */
    --lh-tight: 1.15;
    --lh-body: 1.5;
    --track-caps: 0.08em;

    /* Space / shape (4px grid, matches site --space-*) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --tap: 44px;
    --content-max: 1240px;
    --focus-width: 2px;

    /* Semantic — light (cool neutrals keyed to navy; no cream) */
    --c-page: #EEF0F3;
    --c-surface: #FFFFFF;
    --c-surface-2: #F5F6F8;
    --c-sunken: #E3E6EA;
    --c-line: #CBD0D7;
    --c-line-strong: #737C89;  /* form/control borders, ≥3:1 on surfaces */
    --c-text: #101010;
    --c-muted: #4A5361;
    --c-accent: var(--rc-navy);       /* links, active indicators */
    --c-indicator: var(--rc-navy);    /* nav underline, checked borders */
    --c-focus: var(--rc-navy);
    --c-on-accent: var(--rc-white);
    --c-primary-bg: var(--rc-yellow); /* primary button fill */
    --c-primary-fg: var(--rc-ink);
    --c-primary-edge: var(--rc-ink);
    --c-up: #146C35;
    --c-down: #B3261E;
    --c-warn: #8A4B00;
    --c-unknown: #5B6270;
    --c-paused: #3D4F66;
    --c-down-tint: #FBE9E7;
    --c-warn-tint: #FAF0DC;
    --c-on-down: #FFFFFF;
    --shadow-1: 0 1px 2px rgb(23 36 51 / 0.08);

    /* State strip ("annunciator") — navy band in light theme */
    --strip-bg: var(--rc-navy);
    --strip-tile: #1F3045;
    --strip-tile-alert: #3A1A20;
    --strip-tile-warn: #33301F;
    --strip-line: #34485F;
    --strip-text: #FFFFFF;
    --strip-muted: #B4C0CF;
    --strip-rule: var(--rc-yellow);
    --strip-up: #4CD685;
    --strip-down: #FF8A80;
    --strip-warn: #FFB547;
    --strip-unknown: #AEB6C2;
    --strip-paused: #9DB4D3;

    color-scheme: light;
  }

  /* Dark — explicit (theme.js). Keep identical to the media block below. */
  :root[data-theme="dark"] {
    --c-page: #060606;
    --c-surface: #101010;
    --c-surface-2: #1A1A1A;
    --c-sunken: #0B0B0B;
    --c-line: #2E2E2E;
    --c-line-strong: #6E6E6E;
    --c-text: #EDEDEA;
    --c-muted: #A6A6A0;
    --c-accent: #FEE700;
    --c-indicator: #FEE700;
    --c-focus: #FEE700;
    --c-on-accent: #060606;
    --c-primary-bg: #FEE700;
    --c-primary-fg: #060606;
    --c-primary-edge: #FEE700;
    --c-up: #4CD685;
    --c-down: #FF7A70;
    --c-warn: #FFB547;
    --c-unknown: #A3A7AE;
    --c-paused: #9DB4D3;
    --c-down-tint: #2A1311;
    --c-warn-tint: #2A1E0B;
    --c-on-down: #060606;
    --shadow-1: none;
    --strip-bg: #101010;
    --strip-tile: #1A1A1A;
    --strip-tile-alert: #2A1311;
    --strip-tile-warn: #2A1E0B;
    --strip-line: #2E2E2E;
    --strip-text: #EDEDEA;
    --strip-muted: #A6A6A0;
    --strip-rule: #FEE700;
    --strip-up: #4CD685;
    --strip-down: #FF7A70;
    --strip-warn: #FFB547;
    --strip-unknown: #A3A7AE;
    --strip-paused: #9DB4D3;
    color-scheme: dark;
  }

  /* Dark — no-JS fallback follows the OS. Keep identical to the block above. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --c-page: #060606;
      --c-surface: #101010;
      --c-surface-2: #1A1A1A;
      --c-sunken: #0B0B0B;
      --c-line: #2E2E2E;
      --c-line-strong: #6E6E6E;
      --c-text: #EDEDEA;
      --c-muted: #A6A6A0;
      --c-accent: #FEE700;
      --c-indicator: #FEE700;
      --c-focus: #FEE700;
      --c-on-accent: #060606;
      --c-primary-bg: #FEE700;
      --c-primary-fg: #060606;
      --c-primary-edge: #FEE700;
      --c-up: #4CD685;
      --c-down: #FF7A70;
      --c-warn: #FFB547;
      --c-unknown: #A3A7AE;
      --c-paused: #9DB4D3;
      --c-down-tint: #2A1311;
      --c-warn-tint: #2A1E0B;
      --c-on-down: #060606;
      --shadow-1: none;
      --strip-bg: #101010;
      --strip-tile: #1A1A1A;
      --strip-tile-alert: #2A1311;
      --strip-tile-warn: #2A1E0B;
      --strip-line: #2E2E2E;
      --strip-text: #EDEDEA;
      --strip-muted: #A6A6A0;
      --strip-rule: #FEE700;
      --strip-up: #4CD685;
      --strip-down: #FF7A70;
      --strip-warn: #FFB547;
      --strip-unknown: #A3A7AE;
      --strip-paused: #9DB4D3;
      color-scheme: dark;
    }
  }

  /*
   * State vocabulary → tone. Use data-state on .status, .tile, .callout,
   * table rows, .messages items. Text labels are always required; colour and
   * shape only reinforce them.
   *   up | ok        healthy / sent / fresh / resolved      ● circle
   *   down | failed  confirmed outage / delivery failed     ◆ diamond
   *   pending        suspect, awaiting confirmation         ◐ half circle
   *   stale | notice stale worker/feed, provider incident   ▲ triangle
   *   unknown        no evidence / N/A / coverage gap       ◌ dashed ring
   *   paused         monitoring paused / maintenance        ❚❚ bars
   */
  [data-state] { --tone: var(--c-unknown); --tone-tint: transparent; --tone-strip: var(--strip-unknown); }
  [data-state="up"], [data-state="ok"] { --tone: var(--c-up); --tone-strip: var(--strip-up); }
  [data-state="down"], [data-state="failed"] { --tone: var(--c-down); --tone-tint: var(--c-down-tint); --tone-strip: var(--strip-down); }
  [data-state="pending"], [data-state="stale"], [data-state="notice"] { --tone: var(--c-warn); --tone-tint: var(--c-warn-tint); --tone-strip: var(--strip-warn); }
  [data-state="paused"] { --tone: var(--c-paused); --tone-strip: var(--strip-paused); }
}

/* ----------------------------------------------------------------- base */
@layer base {
  body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-page);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; }
  h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.025em; }
  h2 { font-size: var(--fs-md); }
  h3 { font-size: var(--fs-base); }
  p + p { margin-top: var(--sp-3); }
  a { color: var(--c-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  strong, b { font-weight: 700; }
  code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
  small { font-size: var(--fs-sm); }
  hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-5) 0; }
  time { white-space: nowrap; }

  :focus-visible {
    outline: var(--focus-width) solid var(--c-focus);
    outline-offset: 2px;
  }
  ::selection { background: var(--rc-yellow); color: var(--rc-ink); }
}

/* --------------------------------------------------------------- layout */
@layer layout {
  .skip-link {
    position: absolute; left: var(--sp-2); top: -100px; z-index: 100;
    padding: var(--sp-2) var(--sp-4);
    background: var(--rc-yellow); color: var(--rc-ink);
    font-weight: 700; border-radius: var(--radius-sm);
  }
  .skip-link:focus { top: var(--sp-2); outline-color: var(--rc-ink); }

  .app-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
  }
  .app-main {
    width: 100%; max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-7);
    display: grid; gap: var(--sp-5);
  }
  .app-main > * { min-width: 0; }
  .app-footer {
    max-width: var(--content-max); margin: 0 auto;
    padding: var(--sp-4); color: var(--c-muted); font-size: var(--fs-xs);
  }

  .grid-2 { display: grid; gap: var(--sp-5); }
  @media (min-width: 960px) {
    .app-header { padding: var(--sp-2) var(--sp-5); flex-wrap: nowrap; }
    .app-main { padding: var(--sp-6) var(--sp-5) var(--sp-7); }
    .grid-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  }
}

/* ----------------------------------------------------------- components */
@layer components {

  /* Brand lockup: logo mark always on a white field (brand requirement). */
  .brand {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    margin-right: auto; min-height: var(--tap);
    color: inherit; text-decoration: none;
  }
  .brand__tile {
    flex: none; width: 40px; height: 40px; padding: 2px;
    background: var(--rc-white);
    border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  }
  .brand__tile img { width: 100%; height: 100%; }
  .brand__name { display: grid; line-height: 1.1; }
  .brand__name strong { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.015em; }
  .brand__name span { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); letter-spacing: 0.02em; }
  .logo-full { display: block; width: 120px; height: 120px; background: var(--rc-white); }

  /* Primary nav — scrolls horizontally on small screens. */
  .nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .nav ul { display: flex; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
  .nav a {
    display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3);
    color: var(--c-muted); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap;
    text-decoration: none; border-bottom: 3px solid transparent;
  }
  .nav a:hover { color: var(--c-text); }
  .nav a[aria-current="page"] { color: var(--c-text); border-bottom-color: var(--c-indicator); }
  .header-tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  @media (min-width: 960px) {
    .nav { order: 0; width: auto; }
    .brand { margin-right: var(--sp-4); }
    .header-tools { margin-left: auto; }
  }

  /* Theme switch: native radio group (arrow keys, SR "1 of 3"). Hidden until theme.js runs. */
  .theme-switch { display: none; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; border: 0; min-width: 0; }
  :root[data-theme-ready] .theme-switch { display: inline-flex; }
  .theme-switch legend {
    float: left; padding: 0; margin-right: var(--sp-2);
    font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted);
  }
  .theme-switch__options {
    display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: var(--radius-md);
    background: var(--c-surface-2); padding: 2px;
  }
  .theme-switch label { position: relative; display: block; cursor: pointer; }
  .theme-switch input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
  }
  .theme-switch label span {
    display: flex; align-items: center; min-height: 36px; min-width: 44px; padding: 0 var(--sp-3);
    justify-content: center;
    font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted);
    border-radius: var(--radius-sm);
  }
  .theme-switch input:checked + span { background: var(--c-primary-bg); color: var(--c-primary-fg); box-shadow: inset 0 0 0 1px var(--c-primary-edge); }
  .theme-switch input:focus-visible + span { outline: var(--focus-width) solid var(--c-focus); outline-offset: 1px; }
  .theme-switch__resolved { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; }

  /* Page heading */
  .page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
  .page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .meta { color: var(--c-muted); font-size: var(--fs-sm); font-weight: 500; }
  .eyebrow {
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-caps);
    text-transform: uppercase; color: var(--c-muted);
  }

  /* Panels */
  .panel {
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--radius-md); box-shadow: var(--shadow-1); min-width: 0;
  }
  .panel__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-line);
  }
  .panel__body { padding: var(--sp-4); }
  .panel__body--flush { padding: 0; }
  .panel__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-muted); }

  /* ---------------------------------------------------------------------
   * SIGNATURE — state strip. A compact annunciator band: one tile per
   * service (sites, provider feeds, worker, Slack delivery). Each tile has a
   * state lamp, a text label and honest coverage (unknown stays hatched).
   * ------------------------------------------------------------------- */
  .strip {
    background: var(--strip-bg); color: var(--strip-text);
    border-top: 3px solid var(--strip-rule);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    display: grid; gap: var(--sp-3);
  }
  .strip__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--sp-1) var(--sp-4); padding: 0 var(--sp-1);
  }
  .strip__title { font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--track-caps); text-transform: uppercase; }
  .strip__asof { font-size: var(--fs-xs); color: var(--strip-muted); font-weight: 600; }
  .strip__asof strong { color: var(--strip-text); }
  .strip__warning {
    display: flex; gap: var(--sp-2); align-items: baseline;
    padding: var(--sp-2) var(--sp-3);
    background: var(--strip-tile-warn); border-left: 3px solid var(--strip-warn);
    font-size: var(--fs-sm); font-weight: 600;
  }
  .strip__group { display: grid; gap: var(--sp-2); }
  .strip__label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--strip-muted); padding: 0 var(--sp-1); }
  .strip__tiles {
    display: grid; gap: 2px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--strip-line); border: 1px solid var(--strip-line); border-radius: var(--radius-sm);
    overflow: hidden;
  }
  @media (min-width: 640px) { .strip__tiles { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
  @media (min-width: 960px) { .strip { padding: var(--sp-3) var(--sp-4) var(--sp-4); } }

  .tile {
    position: relative; display: grid; align-content: start; gap: 2px;
    min-width: 0; padding: calc(var(--sp-3) + 4px) var(--sp-3) var(--sp-3);
    background: var(--strip-tile); color: var(--strip-text);
  }
  .tile::before { /* the lamp */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--tone-strip);
  }
  .tile[data-state="down"], .tile[data-state="failed"] { background: var(--strip-tile-alert); }
  .tile[data-state="pending"], .tile[data-state="stale"], .tile[data-state="notice"] { background: var(--strip-tile-warn); }
  .tile[data-state="unknown"]::before {
    background: repeating-linear-gradient(135deg, var(--strip-unknown) 0 3px, transparent 3px 7px);
  }
  .tile[data-state="paused"]::before {
    background: repeating-linear-gradient(90deg, var(--strip-paused) 0 10px, transparent 10px 14px);
  }
  .tile[data-state="pending"]::before { animation: lamp-pulse 1.6s ease-in-out infinite; }
  .strip--stale .tile::before { /* whole strip untrusted: hatch every lamp */
    background: repeating-linear-gradient(135deg, var(--tone-strip) 0 3px, transparent 3px 7px);
  }
  .tile__kind { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--strip-muted); }
  .tile__name {
    font-size: var(--fs-sm); font-weight: 700; line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .tile__name a { color: inherit; text-decoration: none; }
  .tile__name a::after { content: ""; position: absolute; inset: 0; } /* whole tile clickable */
  .tile__name a:hover { text-decoration: underline; }
  .tile__name a:focus-visible { outline-color: var(--strip-rule); }
  @supports selector(:has(*)) { /* ring the whole tile where supported */
    .tile:has(.tile__name a:focus-visible) { outline: var(--focus-width) solid var(--strip-rule); outline-offset: -2px; }
    .tile__name a:focus-visible { outline: none; }
  }
  .tile .status { color: var(--tone-strip); margin: var(--sp-1) 0; }
  .tile__meta { font-size: var(--fs-xs); color: var(--strip-muted); font-weight: 600; overflow-wrap: anywhere; }
  .tile__meta strong { color: var(--strip-text); font-weight: 700; }
  .tile .meter { margin-top: var(--sp-2); --meter-up: var(--strip-up); --meter-down: var(--strip-down); --meter-gap: var(--strip-unknown); --meter-track: transparent; }

  @keyframes lamp-pulse { 50% { opacity: 0.35; } }

  /* Status label: mark + text. Never colour alone. */
  .status {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
    color: var(--tone);
  }
  .status__mark { flex: none; width: 0.72em; height: 0.72em; background: currentColor; border-radius: 50%; }
  [data-state="down"] > .status__mark, [data-state="failed"] > .status__mark { border-radius: 0; transform: rotate(45deg) scale(0.9); }
  [data-state="pending"] > .status__mark { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
  [data-state="stale"] > .status__mark, [data-state="notice"] > .status__mark { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  [data-state="unknown"] > .status__mark { background: transparent; border: 1.5px dashed currentColor; }
  [data-state="paused"] > .status__mark { border-radius: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
  .status--plain { color: var(--c-text); } /* text in body colour, mark keeps tone */
  .status--plain > .status__mark { color: var(--tone); }

  /* Meter: decorative proportional bar (aria-hidden) — numbers live in text.
   * Markup: <span class="meter" aria-hidden="true"><svg viewBox="0 0 1000 1" preserveAspectRatio="none">
   *   <rect class="meter__up" x="0" width="915" height="1"/><rect class="meter__down" x="915" width="5" height="1"/></svg></span>
   * The uncovered remainder shows the hatched "no evidence" track. */
  .meter {
    --meter-up: var(--c-up); --meter-down: var(--c-down); --meter-gap: var(--c-unknown); --meter-track: transparent;
    display: block; height: 6px; overflow: hidden; border-radius: 1px;
    background: var(--meter-track) repeating-linear-gradient(135deg, var(--meter-gap) 0 1.5px, transparent 1.5px 4px);
  }
  .meter svg { width: 100%; height: 100%; }
  .meter__up { fill: var(--meter-up); }
  .meter__down { fill: var(--meter-down); }
  .meter--lg { height: 12px; }

  /* Key/value lists */
  .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
  .kv dt { color: var(--c-muted); font-weight: 600; }
  .kv dd { font-weight: 600; overflow-wrap: anywhere; }

  /* Figures row (report totals, site detail) */
  .figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--c-line); }
  .figure { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); }
  .figure:nth-child(odd) { border-right: 1px solid var(--c-line); }
  .figure__value { display: block; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; }
  .figure__value--na { color: var(--c-unknown); }
  .figure__label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
  @media (min-width: 760px) {
    .figures { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .figure { border-right: 1px solid var(--c-line); }
  }

  /* Tables */
  .table-wrap { overflow-x: auto; }
  .table-wrap:focus-visible { outline-offset: -2px; }
  .table { width: 100%; font-size: var(--fs-sm); }
  .table caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 700; }
  .table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
  .table thead th {
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase;
    color: var(--c-muted); background: var(--c-surface-2); white-space: nowrap;
  }
  .table tbody tr:last-child > * { border-bottom: 0; }
  .table .num { text-align: right; white-space: nowrap; }
  .table tr[data-state="down"] > :first-child,
  .table tr[data-state="failed"] > :first-child { box-shadow: inset 4px 0 0 var(--tone); }
  .table tr[data-state="down"], .table tr[data-state="failed"] { background: var(--tone-tint); }
  .table tr[data-state="pending"] > :first-child,
  .table tr[data-state="stale"] > :first-child { box-shadow: inset 4px 0 0 var(--tone); }
  .table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-3); }
  /* Stacked rows on small screens: add data-label="Column" to each td. */
  @media (max-width: 639px) {
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .table--stack, .table--stack tbody, .table--stack tr, .table--stack td, .table--stack th[scope="row"] { display: block; width: 100%; }
    .table--stack tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
    .table--stack tbody tr:last-child { border-bottom: 0; }
    .table--stack td, .table--stack th[scope="row"] { border: 0; padding: var(--sp-1) var(--sp-4); }
    .table--stack td[data-label] { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--sp-3); }
    .table--stack td[data-label]::before { content: attr(data-label); color: var(--c-muted); font-weight: 600; font-size: var(--fs-xs); }
    .table--stack .num { text-align: left; }
  }

  .code { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; padding: 1px 5px; background: var(--c-sunken); border-radius: var(--radius-sm); white-space: nowrap; }
  .source-label { /* "Provider-reported" vs "Observed by monitor" */
    display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase;
    color: var(--c-muted); border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); padding: 0 var(--sp-1);
  }

  /* Callouts: empty / stale / error / info states */
  .callout {
    display: grid; gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface-2); border: 1px solid var(--c-line); border-left: 4px solid var(--tone, var(--c-line-strong));
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
  }
  .callout[data-state="down"], .callout[data-state="failed"], .callout[data-state="pending"], .callout[data-state="stale"], .callout[data-state="notice"] { background: var(--tone-tint); }
  .callout__title { font-weight: 700; font-size: var(--fs-base); }
  .empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--c-muted); display: grid; gap: var(--sp-2); justify-items: center; }
  .empty__title { color: var(--c-text); font-weight: 700; font-size: var(--fs-md); }

  /* Django messages */
  .messages { display: grid; gap: var(--sp-2); }
  .messages > li { padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-line); border-left: 4px solid var(--tone, var(--c-line-strong)); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-sm); }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--tap); padding: 0 var(--sp-4);
    font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
    color: var(--c-text); background: var(--c-surface);
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .btn:hover { background: var(--c-surface-2); border-color: var(--c-text); }
  .btn--primary { background: var(--c-primary-bg); color: var(--c-primary-fg); border-color: var(--c-primary-edge); }
  .btn--primary:hover { background: var(--c-primary-bg); border-color: var(--c-primary-edge); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18); }
  .btn--danger { color: var(--c-down); border-color: var(--c-down); }
  .btn--danger:hover { background: var(--c-down); color: var(--c-on-down); border-color: var(--c-down); }
  .btn--quiet { background: transparent; border-color: transparent; color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.18em; padding: 0 var(--sp-2); }
  .btn--quiet:hover { background: transparent; border-color: transparent; text-decoration-thickness: 2px; }
  .btn--sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
  .inline-form { display: inline; }

  /* Forms */
  .form { display: grid; gap: var(--sp-4); max-width: 40rem; }
  .field { display: grid; gap: var(--sp-1); }
  .field > label, .field legend { font-weight: 700; font-size: var(--fs-sm); }
  .field__hint { font-size: var(--fs-xs); color: var(--c-muted); }
  .field__error { font-size: var(--fs-xs); font-weight: 700; color: var(--c-down); }
  .input, .select, .textarea {
    width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface); color: var(--c-text);
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
    font-size: 1rem; /* ≥16px avoids iOS zoom */
  }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline-offset: 0; border-color: var(--c-focus); }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-down); border-width: 2px; }
  .input--mono { font-family: var(--font-mono); }
  .checkbox { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: var(--tap); font-size: var(--fs-sm); font-weight: 600; }
  .checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-accent); }
  .form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .range-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); }
  .range-form .field { min-width: 10rem; flex: 1 1 10rem; }

  /* Show-once secret (API token) */
  .secret {
    display: grid; gap: var(--sp-2);
    padding: var(--sp-4); background: var(--c-surface-2);
    border: 1px solid var(--c-line); border-left: 4px solid var(--rc-yellow); border-radius: var(--radius-sm);
  }
  .secret__value { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; word-break: break-all; user-select: all; padding: var(--sp-2) var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); }

  /* Feed of provider notices / incidents */
  .feed > li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); display: grid; gap: var(--sp-1); }
  .feed > li:last-child { border-bottom: 0; }
  .feed__title { font-weight: 700; font-size: var(--fs-sm); }
  .feed__meta { font-size: var(--fs-xs); color: var(--c-muted); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; }

  /* User menu */
  .user { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
  .user__badge { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--rc-navy); color: var(--rc-yellow); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; }
  @media (max-width: 520px) { .user__name { display: none; } }

  /* Printable report shell (screen view; print.css finishes it) */
  .report { display: grid; gap: var(--sp-5); }
  .report__head { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
  .report__brand { display: flex; align-items: center; gap: var(--sp-4); }
  .report__brand .logo-full { width: 88px; height: 88px; border: 1px solid var(--c-line); }
  .precision-note { font-size: var(--fs-xs); color: var(--c-muted); border-top: 1px solid var(--c-line); padding-top: var(--sp-3); }
  .print-only { display: none; }
}

/* ------------------------------------------------------------ utilities */
@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .muted { color: var(--c-muted); }
  .nowrap { white-space: nowrap; }
  .mono { font-family: var(--font-mono); }
  .stack { display: grid; gap: var(--sp-3); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
}

/* ------------------------------------------------------ user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .status__mark, .tile::before, .meter { forced-color-adjust: none; }
  .status__mark { color: CanvasText; }
  .tile::before { background: CanvasText !important; }
  .tile[data-state="unknown"]::before, .strip--stale .tile::before { background: repeating-linear-gradient(135deg, CanvasText 0 3px, Canvas 3px 7px) !important; }
  .meter { --meter-up: CanvasText; --meter-down: Highlight; --meter-gap: GrayText; border: 1px solid CanvasText; }
  .strip, .tile, .panel, .callout, .btn { border: 1px solid CanvasText; }
  .theme-switch input:checked + span { outline: 2px solid Highlight; }
}