/* ==========================================================================
   Oncura Service Status — Industry design system
   The token block and the component classes below are copied from the design
   handoff's Industry sheet (docs/handoffs/2026-09-08-status-page/_ds/…/styles.css)
   so the page never links across projects. Page-specific rules follow the rule.
   Fonts are loaded from index.html (Barlow, Barlow Condensed, JetBrains Mono),
   each with a real fallback stack.
   ========================================================================== */

:root {
  /* Brand. Both values are sampled from the logo (apps/status/oncura-logo.png):
     the "oncura" wordmark is #578ECB (hue 211) and "PARTNERS" plus the eye mark
     are #5EC091 (hue 151). The PMS app carries the same two hues as --chart-2
     and --primary, so these are the company colours, not an approximation.
     Keep the ramps on hue 211 / 151; shifting the hue is what made this page
     read as generic blue-grey before. */
  /* Surface is LIGHTER than the page on light mode so a card reads as a card.
     It used to be darker than the background, which is why the boxes looked like
     outlines drawn on the page rather than panels sitting on it. Dark mode is the
     same relationship inverted, and is already correct. */
  --color-bg: #eef2f7;
  --color-surface: #ffffff;
  --color-text: #1b2027;
  --color-accent: #578ECB;
  --color-accent-2: #5EC091;
  --color-divider: color-mix(in srgb, #1b2027 16%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  /* Brand blue, hue 211, stepped by lightness. 500 is the logo value exactly. */
  --color-accent-100: #eef5fd;
  --color-accent-200: #d7e8f9;
  --color-accent-300: #b4d2f0;
  --color-accent-400: #8ab5e4;
  --color-accent-500: #578ECB;
  --color-accent-600: #3f73ad;
  --color-accent-700: #325a88;
  --color-accent-800: #264263;
  --color-accent-900: #1a2c42;

  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-5: 17px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* The five public states — swatch, text-on-tint, and row tint (handoff README + prototype). */
  /* Operational is the brand GREEN (hue 151), not the accent blue it used to be.
     Two reasons: green-for-healthy is what every reader already expects, and it
     puts the second logo colour to work instead of leaving the page one-note.
     The value is deepened from the logo's #5EC091 to L≈38% so it carries the
     same visual weight as the amber/orange/red beside it; at the logo lightness
     it looked like a highlight rather than a peer. */
  --st-operational: #37946c;
  --st-degraded: #9a7220;
  --st-partial_outage: #a34608;
  --st-major_outage: #96412f;
  --st-maintenance: #5d5d60;
  --fg-operational: #236046;
  --fg-degraded: #6f5314;
  --fg-partial_outage: #8a4a10;
  --fg-major_outage: #7a2a20;
  --fg-maintenance: #4a4a4d;
  --tint-operational: transparent;
  --tint-degraded: rgba(154, 114, 32, 0.07);
  --tint-partial_outage: rgba(163, 70, 8, 0.07);
  --tint-major_outage: rgba(150, 65, 47, 0.08);
  --tint-maintenance: rgba(93, 93, 96, 0.06);
  --hover-tint: rgba(29, 31, 32, 0.04);
}

/* ==========================================================================
   Dark mode — token overrides only, no component rules
   ⚠️ This block MUST stay after the base :root. A media query adds no specificity,
   so it wins on source order alone — move it above :root and dark mode silently
   stops applying, with no error anywhere to say so.
   Every colour above is a token, so the dark scheme is this one block. It follows
   the reader's OS setting; there is deliberately no toggle, because a toggle needs
   storage and this page's whole promise is that it reads one JSON file and works
   when everything else is down.

   The five public states are the information here, so they are not merely dimmed:
   on dark they are pushed further apart than they sit on light, where degraded
   and major outage both read as browns. Green / amber / orange / red / grey.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Navy-tinted rather than neutral grey: the same hue family (≈220) the PMS
       app uses for its dark shell, so the two products look related. */
    --color-bg: #12161c;
    --color-surface: #1b212a;
    --color-text: #e6eaef;
    --color-accent: #86b5e6;
    --color-accent-2: #6fcba0;
    --color-divider: color-mix(in srgb, #e6eaef 22%, transparent);

    /* The neutral ramp is inverted end to end, so every pairing that reads
       "pale background, dark ink" on light (.tag-neutral, .notice) keeps its
       contrast rather than needing a rule of its own. */
    --color-neutral-100: #232527;
    --color-neutral-200: #2b2d30;
    --color-neutral-300: #3a3d40;
    --color-neutral-400: #55585b;
    --color-neutral-500: #7b7e81;
    --color-neutral-600: #9a9da0;
    --color-neutral-700: #b4b7ba;
    --color-neutral-800: #d5d7d9;
    --color-neutral-900: #eceef0;

    --color-accent-100: #15212e;
    --color-accent-200: #1c2c3e;
    --color-accent-300: #2c4560;
    --color-accent-400: #3f6288;
    --color-accent-500: #578ECB;
    --color-accent-600: #8ab5e4;
    --color-accent-700: #aecbec;
    --color-accent-800: #cbdff5;
    --color-accent-900: #e8f1fc;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);

    --st-operational: #5EC091;
    --st-degraded: #d9a227;
    --st-partial_outage: #e4762f;
    --st-major_outage: #e2574d;
    --st-maintenance: #8e9295;

    /* Text on a tinted row. The light values are dark ink for pale washes and
       are invisible here, so all five are re-picked rather than reused. */
    --fg-operational: #8fd9b4;
    --fg-degraded: #e8bc5a;
    --fg-partial_outage: #f0996a;
    --fg-major_outage: #f08b82;
    --fg-maintenance: #b6babd;

    /* The light alphas (0.06–0.08) were calibrated against #f2f2f3 and vanish on
       a dark row, taking the "this one is affected" signal with them. */
    --tint-operational: transparent;
    --tint-degraded: rgba(217, 162, 39, 0.13);
    --tint-partial_outage: rgba(228, 118, 47, 0.13);
    --tint-major_outage: rgba(226, 87, 77, 0.15);
    --tint-maintenance: rgba(142, 146, 149, 0.12);

    --hover-tint: rgba(255, 255, 255, 0.05);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 32px; }
h4 { font-size: 17px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: var(--space-2); background: var(--color-accent); color: var(--color-bg); padding: var(--space-2) var(--space-3); z-index: 10; }
.skip:focus { left: var(--space-2); }

/* — card —
   Was a "blueprint frame": a transparent square box with four crosshair
   registration marks floating OUTSIDE its corners, like a technical drawing.
   Deliberate, but it read as an unfinished or half-rendered box rather than a
   style, so the marks are gone (render.js emits no .corner elements now) and
   these are ordinary finished cards: real surface, soft corners, slight lift.
   The class name is kept because 17 call sites and the noscript block use it. */
.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider);
  padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md);
  transition: background-color 120ms ease, color 120ms ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-accent); border-color: transparent; padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field { margin-top: var(--space-3); }
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.field__error { color: var(--st-major_outage); font-size: 12.5px; margin-top: var(--space-1); }
.field__error:empty { display: none; }

/* — tags — */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--color-accent-300, var(--color-divider)); background: var(--color-accent-100); color: var(--color-accent-800); font-size: 14px; }
.notice__close { margin-left: auto; font-size: 12px; color: var(--color-accent-700); text-decoration: underline; }

/* — navigation — */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; }
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; letter-spacing: 0.02em; }
/* The logo is blue-and-green on transparency, so it sits on the light sheet and
   the dark one without a second asset or a filter. */
.nav-brand__logo { height: 26px; width: auto; display: block; flex: none; }
.nav-brand__slash { color: var(--color-accent-2); }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* ==========================================================================
   Page
   ========================================================================== */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
main.wrap { padding-bottom: var(--space-8); }
.page-foot { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-8); font-size: 11.5px; color: var(--color-neutral-600); }

.kicker { font-family: var(--font-heading); font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-neutral-600); }
.kicker--state { color: var(--fg, var(--color-neutral-600)); }

.swatch { display: inline-block; width: 12px; height: 12px; flex: none; border: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent); background: var(--st-operational); vertical-align: middle; }
.swatch--operational { background: var(--st-operational); }
.swatch--degraded { background: var(--st-degraded); }
.swatch--partial_outage { background: var(--st-partial_outage); }
.swatch--major_outage { background: var(--st-major_outage); }
.swatch--maintenance { background: var(--st-maintenance); }
.fg--operational { --fg: var(--fg-operational); color: var(--fg-operational); }
.fg--degraded { --fg: var(--fg-degraded); color: var(--fg-degraded); }
.fg--partial_outage { --fg: var(--fg-partial_outage); color: var(--fg-partial_outage); }
.fg--major_outage { --fg: var(--fg-major_outage); color: var(--fg-major_outage); }
.fg--maintenance { --fg: var(--fg-maintenance); color: var(--fg-maintenance); }

/* — hero — */
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); padding: var(--space-6); margin-top: var(--space-6); }
/* Layered OVER the card surface, not instead of it: a bare tint is translucent,
   so setting it as the background turned an affected hero back into a wash on the
   page while every other card kept its surface. */
.hero--degraded { background: linear-gradient(var(--tint-degraded), var(--tint-degraded)), var(--color-surface); }
.hero--partial_outage { background: linear-gradient(var(--tint-partial_outage), var(--tint-partial_outage)), var(--color-surface); }
.hero--major_outage { background: linear-gradient(var(--tint-major_outage), var(--tint-major_outage)), var(--color-surface); }
.hero__lead { display: flex; align-items: center; gap: var(--space-3); }
.hero h1 { font-size: 32px; margin: var(--space-2) 0; }
.hero p { font-size: 15px; line-height: 1.6; max-width: 640px; margin: 0; }
.hero__meta { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--color-neutral-700); white-space: nowrap; line-height: 1.7; }

/* — active incident — */
.incident { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
.incident__head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; margin-bottom: var(--space-2); }
.incident__meta { font-size: 13px; color: var(--color-neutral-700); }
.upd { display: grid; grid-template-columns: 104px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-neutral-300); }
.upd:first-of-type { border-top: 0; }
.upd__when { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
.upd__state { display: block; margin-top: 2px; }
.upd__text { font-size: 14px; line-height: 1.65; margin: 0; }
.advice { padding: var(--space-6); }
.advice h4 { font-size: 17px; margin-bottom: var(--space-2); }
.advice ul { margin: 0 0 var(--space-3); padding-left: 18px; font-size: 13.5px; line-height: 1.65; }
.advice p { font-size: 13.5px; line-height: 1.65; }
.advice dl { margin: var(--space-3) 0; font-size: 13.5px; }
.advice dt { color: var(--color-neutral-600); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-heading); }
.advice dd { margin: 0 0 var(--space-2); }

/* — scheduled maintenance banner — */
.banner { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); margin-top: var(--space-6); font-size: 13.5px; line-height: 1.6; }
.banner .tag { margin-top: 3px; }
.banner p { margin: 0; }

/* — service groups — */
.group { margin-top: var(--space-8); }
.group__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); }
.group__note { font-size: 11.5px; color: var(--color-neutral-600); }
.svc { display: grid; grid-template-columns: 1fr 200px 74px 82px 148px; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none; transition: background-color 120ms ease; }
.svc + .svc { border-top: 1px solid var(--color-neutral-300); }
.svc:hover { background: var(--hover-tint); }
.svc--degraded { background: var(--tint-degraded); }
.svc--partial_outage { background: var(--tint-partial_outage); }
.svc--major_outage { background: var(--tint-major_outage); }
.svc--maintenance { background: var(--tint-maintenance); }
.svc__name { font-family: var(--font-heading); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.svc__desc { font-size: 12.5px; line-height: 1.4; color: var(--color-neutral-700); }
.svc__desc--symptom { color: var(--fg, var(--color-neutral-700)); font-weight: 500; }
.svc__sub { display: none; }
.svc__num { font-family: var(--font-mono); font-size: 13.5px; }
.svc__resp { color: var(--color-neutral-700); }
.svc__status { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.svc__status .swatch { width: 11px; height: 11px; }

/* — 90-day bar — */
/* An operational day draws NO mark (render.js filters them out), so these base
   ticks ARE the operational days. They therefore have to follow --st-operational,
   or the legend's green swatch would sit above a bar of blue "good" days. */
.bar90 { position: relative; height: 24px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--st-operational) 55%, transparent) 0 3px, transparent 3px 5.4px); }
.bar90 i { position: absolute; top: 0; bottom: 0; width: 3px; }
.bar90--tall { height: 40px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--st-operational) 55%, transparent) 0 4px, transparent 4px 7.2px); }
.bar90--tall i { width: 4px; }
.bar90 i.day--degraded { background: var(--st-degraded); }
.bar90 i.day--partial_outage { background: var(--st-partial_outage); }
.bar90 i.day--major_outage { background: var(--st-major_outage); }
.bar90 i.day--maintenance { background: var(--st-maintenance); }
.bar90--empty { opacity: 0.45; }

/* — legend — */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; margin-top: var(--space-4); font-size: 11.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 10px; height: 10px; }
.legend .legend__range { margin-left: auto; font-family: var(--font-mono); color: var(--color-neutral-700); }

/* — history — */
.recent { margin-top: var(--space-8); }
.intro { font-size: 14.5px; line-height: 1.6; max-width: 620px; }
.history-card { padding: var(--space-6); margin-top: var(--space-4); }
.history-card__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
.history-card h3 { font-size: 20px; margin: 0; }
.history-card__right { display: flex; gap: var(--space-3); align-items: center; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.history-card p { font-size: 14px; line-height: 1.65; margin: var(--space-2) 0; }
.history-card__meta { font-size: 12.5px; color: var(--color-neutral-600); }
.history-card .upd { padding: var(--space-3) 0; }
.history-card__updates { margin-top: var(--space-3); }
.history-card__updates[hidden] { display: none; }
.recent__more { margin-top: var(--space-3); }

/* — footer pair: subscribe + support — */
.footer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
.footer-pair > .blueprint { padding: var(--space-6); }
.footer-pair h4 { font-size: 17px; }
.footer-pair p { font-size: 13.5px; line-height: 1.6; }
.support__email { font-family: var(--font-heading); font-size: 22px; font-weight: 600; margin: var(--space-2) 0; overflow-wrap: anywhere; }
.support__email a { color: inherit; text-decoration: none; }
.support__email a:hover, .support__email a:focus-visible { text-decoration: underline; }
.subscribe__done { display: flex; align-items: center; gap: var(--space-3); font-size: 13.5px; margin-top: var(--space-3); }
.notice { font-size: 12.5px; color: var(--color-neutral-700); margin-top: var(--space-2); }
.notice--warn { color: var(--fg-degraded); }

/* — service detail — */
.back { margin-top: var(--space-4); }
.detail-hero { display: flex; justify-content: space-between; gap: var(--space-6); align-items: flex-start; padding: var(--space-6); margin-top: var(--space-3); }
.detail-hero h1 { font-size: 30px; margin: var(--space-2) 0; }
.detail-hero p { font-size: 14.5px; line-height: 1.6; max-width: 560px; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.stat { padding: var(--space-5); }
.stat__num { font-family: var(--font-mono); font-size: 26px; margin-top: var(--space-2); }
.bar-card { padding: var(--space-5); margin-top: var(--space-4); }
.bar-card .legend { margin-top: var(--space-3); }
.list { margin-top: var(--space-4); }
.list__item { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-neutral-300); font-size: 14px; }
.list__item:first-child { border-top: 0; }
.list__item .mono { font-size: 12px; white-space: nowrap; color: var(--color-neutral-700); }
.empty { padding: var(--space-6); font-size: 14px; color: var(--color-neutral-700); }

/* — error state (the document could not be read) — */
.hero--error { background: linear-gradient(var(--tint-maintenance), var(--tint-maintenance)), var(--color-surface); }

/* ==========================================================================
   Responsive — metrics drop first, then the bar, then rows collapse
   ========================================================================== */
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr 200px 148px; }
  .svc__num, .svc__resp { display: none; }
  .incident, .footer-pair, .stats { grid-template-columns: 1fr; }
  .hero__meta { white-space: normal; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--space-4); }
  /* The four links need 359px of a 348px row, so they wrapped 3 + 1 and orphaned
     "Contact support" under the brand. Two balanced rows instead: a one-row fit
     needs ~12px type, which depends on Barlow loading and breaks on the fallback. */
  .nav { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0 var(--space-2); }
  .nav-brand { width: 100%; margin-right: 0; }
  .nav-brand__logo { height: 22px; }
  .nav a { font-size: 13px; }
  .nav a:not(.nav-brand) { flex: 1 1 calc(50% - var(--space-3)); }
  .hero { flex-direction: column; align-items: center; text-align: center; padding: var(--space-6) var(--space-4); }
  /* The swatch stays BESIDE the headline. Stacking it and blowing it up to 40px
     put a bare coloured square above the text, which reads as a broken image
     rather than as this page's single most important piece of information. */
  .hero__lead { flex-direction: row; justify-content: center; gap: var(--space-2); }
  .hero__lead .swatch { width: 14px; height: 14px; }
  .hero h1 { font-size: 21px; }
  /* Kicker and headline stay centred; the paragraph does not. It carries the
     "what do I do now" instruction and centred multi-line text is harder to read. */
  .hero p { font-size: 14px; text-align: left; }
  .hero__meta { text-align: center; font-size: 11px; }
  .svc { grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .bar90 { display: none; }
  .svc__desc { display: none; }
  .svc__desc--symptom { display: block; }
  .svc__sub { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--color-neutral-700); margin-top: 2px; }
  .svc__status { font-size: 10px; }
  /* The 104px time gutter left update text ~230px wide, so every update wrapped to
     five or six lines. One column, with the stamp and the state on one line. */
  .upd { grid-template-columns: 1fr; gap: var(--space-2); }
  .upd__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
  .upd__state { display: inline; margin-top: 0; }
  .detail-hero { flex-direction: column; }
  .btn { width: 100%; min-height: 44px; font-size: 14.5px; }
  .history-card__head { flex-direction: column; }
  .page-foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}