/* Uptimia status page v11 ("Beacon"). Ported from docs/status-page-mockup-v11.html. Loaded only when the page has opted into the v11 design. */
  /* ============================================================
     Beacon v3 — Flooded Verdict + Auditable Ribbon.
     Tokens = canonical Uptimia system (docs/dashboard-mockups/components.html)
     + the v2 dark remap. Zero raw hex in logic — semantic tokens only.
  ============================================================ */
  :root, [data-theme="light"] {
    --bg: #f6f7f9; --canvas: #eceef1; --surface: #ffffff; --surface-2: #fafbfc;
    --line: #ececef; --line-2: #e0e1e5; --line-strong: #c4c5cb;
    --ink: #18181b; --ink-2: #27272a; --muted: #52525b; --subtle: #6c6c75; --faint: #c8c8cd;

    --brand: #00a35f; --brand-2: #008a4f; --brand-soft: #e6f6ee; --good-ink: #007a45;
    --good: #15803d; --good-soft: #e6f6ee;
    --warn: #b45309; --warn-soft: #fef3e2;
    --bad: #b91c1c;  --bad-soft: #fdecec;
    --info: #4338ca; --info-soft: #eef0fb;
    --warn-ink: #92660a; --bad-ink: #c11717; --info-ink: #1d4ed8; /* AA text-on-soft for ported history */

    --seg-ok: #00a35f; --seg-warn: #d97706; --seg-bad: #e02424; --seg-maint: #6366f1; --seg-none: #e3e5e8;

    --shadow-sm: 0 1px 2px rgba(15,17,26,.04);
    --shadow-md: 0 1px 2px rgba(15,17,26,.04), 0 4px 12px -6px rgba(15,17,26,.08);
    --shadow-lg: 0 1px 2px rgba(15,17,26,.04), 0 12px 32px -12px rgba(15,17,26,.16);

    --hero-grad: radial-gradient(120% 140% at 50% -20%, #eafaf1 0%, rgba(234,250,241,0) 60%);
    --ring: rgba(0,163,95,.38);
    --tip-bg: #0b0e14; --tip-ink: #ffffff; --tip-sub: #c8ccd4;
    --radius: 10px; --radius-lg: 14px; --radius-xl: 18px;
    /* chrome-only customer brand token (firewalled from status colors) */
    --brand-custom: #00a35f;
    --accent: var(--brand); --accent-soft: var(--brand-soft);
  }
  [data-theme="dark"] {
    --bg: #0d1016; --canvas: #1a1f29; --surface: #151a22; --surface-2: #1b212b;
    --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.24);
    --ink: #e9ebef; --ink-2: #cdd2da; --muted: #97a0ad; --subtle: #828b97; --faint: #3a424e;

    --brand: #16c172; --brand-2: #2bd07f; --brand-soft: rgba(22,193,114,.15); --good-ink: #2bd07f;
    --good: #2bd07f; --good-soft: rgba(43,208,127,.15);
    --warn: #f0a83c; --warn-soft: rgba(240,168,60,.15);
    --bad: #f2615a;  --bad-soft: rgba(242,97,90,.15);
    --info: #8b93f8; --info-soft: rgba(139,147,248,.15);
    --warn-ink: var(--warn); --bad-ink: var(--bad); --info-ink: var(--info);

    --seg-ok: #16c172; --seg-warn: #f0a83c; --seg-bad: #f2615a; --seg-maint: #8b93f8; --seg-none: #2a313c;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px -8px rgba(0,0,0,.5);
    --shadow-lg: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -14px rgba(0,0,0,.65);

    --hero-grad: radial-gradient(120% 140% at 50% -20%, rgba(22,193,114,.12) 0%, rgba(22,193,114,0) 60%);
    --ring: rgba(43,208,127,.5);
    --tip-bg: #05080d;
    --brand-custom: #16c172;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 14px; line-height: 1.55; font-feature-settings: "cv11","ss01";
    -webkit-font-smoothing: antialiased; transition: background .25s, color .25s;
  }
  a { color: inherit; }
  button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
  input { font: inherit; color: inherit; }
  .mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
  .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;
  }
  :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 6px; }

  /* Skip link */
  .skip {
    position: fixed; top: 10px; left: 10px; z-index: 100;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
    padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px;
    box-shadow: var(--shadow-lg); transform: translateY(-160%); transition: transform .15s;
  }
  .skip:focus-visible { transform: none; }

  /* ============================================================ Top bar */
  .sp-top {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line);
  }
  .sp-top-in { max-width: 1080px; margin: 0 auto; height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 11px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
  .brand .logo { flex: none; display: inline-flex; align-items: center; }
  .brand .logo img { height: 26px; width: auto; max-width: 150px; object-fit: contain; display: block; }
  /* Uptimia fallback wordmark: dark-text variant on light themes, white variant on dark. */
  .brand .logo-up .dk { display: none; }
  .brand .logo-up .lt { display: block; }
  [data-theme="dark"] .brand .logo-up .lt { display: none; }
  [data-theme="dark"] .brand .logo-up .dk { display: block; }
  .brand .bn { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; white-space: nowrap; }
  .sp-top .spacer { flex: 1; }
  .iconbtn { width: 34px; height: 34px; border-radius: 8px; color: var(--muted); display: grid; place-items: center; }
  .iconbtn:hover { background: var(--canvas); color: var(--ink); }
  .iconbtn svg { width: 17px; height: 17px; }
  .tlink { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; }
  .tlink:hover { background: var(--canvas); color: var(--ink); }
  .tlink svg { width: 15px; height: 15px; }
  .btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 8px;
    border: 1px solid var(--brand-custom); background: var(--brand-custom); color: #fff; font-weight: 600; font-size: 13px;
    box-shadow: 0 1px 2px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18);
  }
  [data-theme="dark"] .btn { color: #04120b; }
  .btn:hover { filter: brightness(.95); }
  .btn svg { width: 15px; height: 15px; }
  .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); font-weight: 500; }
  .btn.ghost:hover { background: var(--canvas); filter: none; border-color: var(--line-strong); }

  /* segmented (used for tz + demo + metric range) */
  .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
  .seg button { height: 28px; padding: 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; border-right: 1px solid var(--line); }
  .seg button:last-child { border-right: 0; }
  .seg button:hover { background: var(--canvas); color: var(--ink); }
  .seg button[aria-selected="true"], .seg button.active { background: var(--ink); color: var(--surface); }
  .seg.tz button { height: 30px; padding: 0 9px; font-size: 11px; }

  /* ============================================================ Layout */
  .wrap { max-width: 1080px; margin: 0 auto; padding: 24px 20px 8px; display: flex; flex-direction: column; gap: 20px; }
  .wrap > section { order: 5; }
  .wrap > .hero { order: 2; } .wrap > .ribbon { order: 3; }
  .wrap > .bento { order: 5; } .wrap > #activeIncident { order: 6; } .wrap > #maintNotice { order: 7; }
  .wrap > .components { order: 8; } .wrap > .metrics { order: 9; } .wrap > .history { order: 10; }

  /* net-new tag (mockup scoping affordance) */
  .nn { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--info);
        border: 1px dashed color-mix(in srgb, var(--info) 45%, transparent); padding: 1px 6px; border-radius: 999px; }

  /* ============================================================ Hero — flooded verdict */
  .hero {
    position: relative; border-radius: var(--radius-xl); overflow: hidden;
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    box-shadow: var(--shadow-md); transition: background .22s ease, border-color .22s ease;
  }
  .hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-grad); opacity: 0; transition: opacity .3s; pointer-events: none; }
  .hero[data-state="ok"]::before { opacity: 1; }
  .hero-in { position: relative; padding: 22px 24px; display: flex; align-items: center; gap: 18px; }
  .o-icon {
    width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center;
    background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .o-icon svg { width: 30px; height: 30px; }
  .o-body { min-width: 0; flex: 1; }
  .o-title { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--ink); }
  .o-sub { margin-top: 4px; color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .o-sub .mono { color: var(--ink-2); }
  .live-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 11px; font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  }
  .live-pill .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .hero[data-state="ok"] .live-pill .pulse { animation: ring 1.8s ease-out infinite; }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

  /* action line (degraded/outage/maintenance) */
  .o-action { display: none; margin-top: 12px; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .hero:not([data-state="ok"]) .o-action { display: flex; }
  .o-impact { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
  .o-eta {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent);
    background: color-mix(in srgb, var(--surface) 65%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    padding: 3px 9px; border-radius: 999px;
  }
  .o-eta svg { width: 13px; height: 13px; }
  .o-eta.stale { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); animation: nudgeIn .4s ease; }
  @keyframes nudgeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
  .o-anchor { text-decoration: none; }
  /* neutral high-contrast CTA on the flooded band — never a green button inside a red/amber hero */
  .hero:not([data-state="ok"]) .o-anchor.btn { background: var(--ink); border-color: var(--ink); color: var(--surface); }
  .hero:not([data-state="ok"]) .o-anchor.btn:hover { filter: none; opacity: .9; }
  .hero[data-state="bad"] .o-anchor.btn { box-shadow: 0 1px 2px rgba(0,0,0,.18); }

  /* right rail */
  .o-up { flex: none; padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); align-self: stretch; display: flex; flex-direction: column; justify-content: center; text-align: right; }
  .o-up .uv { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
  .o-up .ul { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--subtle); margin-top: 2px; }
  .o-streak { display: none; } .hero[data-state="ok"] .o-streak { display: block; }
  .o-uptime { display: none; } .hero:not([data-state="ok"]) .o-uptime { display: block; }

  /* ============================================================ Reliability ribbon */
  .ribbon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 15px 17px; }
  .rbar { display: flex; gap: 2px; height: 38px; }
  .alabels { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-size: 11px; color: var(--subtle); }
  .alabels .mid { color: var(--ink-2); font-weight: 600; }
  .alabels .ln { flex: 1; height: 1px; border-top: 1px dotted var(--line-2); margin: 0 10px; }

  /* uptime segments + non-color channels (WCAG 1.4.1) */
  .seg-u { flex: 1; min-width: 0; border-radius: 3px; padding: 0; cursor: pointer; display: block; background-color: var(--seg-ok); transition: opacity .12s, transform .12s; }
  .seg-u:hover { opacity: .8; transform: scaleY(1.05); }
  .seg-u.warn  { background-color: var(--seg-warn);  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px); }
  .seg-u.bad   { background-color: var(--seg-bad);   box-shadow: inset 0 5px 0 -2px rgba(0,0,0,.34), inset 0 0 0 1px rgba(0,0,0,.18); }
  .seg-u.maint { background-color: var(--seg-maint); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, transparent 1px 3px); }
  .seg-u.none  { background-color: var(--seg-none);  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 12%, transparent) 0 2px, transparent 2px 4px); cursor: default; }
  [data-theme="dark"] .seg-u.warn  { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.4) 0 1px, transparent 1px 3px); }
  [data-theme="dark"] .seg-u.maint { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, transparent 1px 3px); }

  /* one-time reveal wipe */
  @keyframes segIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .reveal .seg-u { animation: segIn .42s ease both; }

  /* ============================================================ Summary bento */
  .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .bcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 13px 15px; position: relative; }
  .bcard .bl { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--subtle); display: flex; align-items: center; gap: 6px; }
  .bcard .bl svg { width: 13px; height: 13px; }
  .bcard .bv { margin-top: 7px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
  .bcard .bv .u { font-size: 13px; color: var(--subtle); font-weight: 500; }
  .bcard .bv.ok { color: var(--good); } .bcard .bv.warn { color: var(--warn); } .bcard .bv.bad { color: var(--bad); }
  .bcard .bd { margin-top: 3px; font-size: 11px; color: var(--subtle); }
  .bcard .nn { position: absolute; top: 12px; right: 12px; }
  .bcard:has(.nn) .bl { padding-right: 50px; } /* keep the label clear of the Net-new tag */

  /* ============================================================ Banners */
  .banner { border-radius: var(--radius-lg); border: 1px solid; overflow: hidden; box-shadow: var(--shadow-sm); scroll-margin-top: 72px; }
  .banner-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; font-weight: 600; flex-wrap: wrap; }
  .banner-head .bi { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--surface); }
  .banner-head .bi svg { width: 16px; height: 16px; }
  .banner-head .bt { font-size: 14px; letter-spacing: -0.01em; }
  .banner-head .nextup { margin-left: auto; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
  .banner-head .nextup.stale { color: var(--warn); }
  .banner-head .nextup svg { width: 13px; height: 13px; }
  .banner-head .sev { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 9px; border-radius: 999px; color: #fff; }
  .banner.bad  { background: var(--bad-soft);  border-color: color-mix(in srgb, var(--bad) 30%, transparent);  color: var(--bad);  } .banner.bad .sev  { background: var(--bad);  } .banner.bad .bi  { color: var(--bad);  }
  .banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); } .banner.warn .sev { background: var(--warn); } .banner.warn .bi { color: var(--warn); }
  .banner.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); } .banner.info .sev { background: var(--info); } .banner.info .bi { color: var(--info); }
  /* Neutral "note" tone — announcements (general threads, default severity). */
  .banner.note { background: var(--surface-2); border-color: var(--line-2); color: var(--muted); } .banner.note .sev { background: var(--subtle); color: #fff; } .banner.note .bi { color: var(--muted); }
  /* dark badge fills are light hues — use a near-black ink so the label clears WCAG (white fails) */
  [data-theme="dark"] .banner-head .sev { color: #1a1205; }
  /* the note badge fill (--subtle) is dark in dark mode, so keep its label white */
  [data-theme="dark"] .banner.note .sev { color: #fff; }
  .banner-body { background: var(--surface); }
  .update { display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding: 13px 16px; }
  .update .rail { display: flex; flex-direction: column; align-items: center; position: relative; }
  /* Continuous timeline spine (matches the Incident history view): instead of a
     per-update line segment that breaks across the inter-update padding, each rail
     draws ONE line that overflows 14px past its box top & bottom. The inter-update
     gap is a fixed 26px (13px+13px padding), so consecutive 14px overhangs overlap
     and the spine reads as a single unbroken stroke regardless of update height.
     The first rail starts the line at its dot; the last rail ends it at its dot. */
  .update .rail::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: -14px; bottom: -14px; width: 2px; background: var(--line-2); z-index: 0; }
  .banner-body .update:first-child .rail::before { top: 8px; }
  .banner-body .update:last-child .rail::before { bottom: calc(100% - 8px); }
  /* Dot sits above the spine with a surface ring so the line reads as a node, not a
     bisected blob. */
  .update .rail .dot { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: none; box-shadow: 0 0 0 3px var(--surface); }
  .update .rail .ln { display: none; }
  /* Banner stage labels use the SAME soft-pill treatment as the incident-history
     `.upd-stage` chip (mono, soft tint, ink text, hairline border) so a stage reads
     identically in the live banner and in the history below. Per-stage rules are
     `.u-stage.st-*` (specificity beats the `.st-*` text-colour map at line ~262). */
  .u-stage { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 7px; border-radius: 5px; margin-bottom: 5px; border: 1px solid var(--line); color: var(--muted); background: var(--canvas); vertical-align: 1px; }
  .u-stage.st-resolved, .u-stage.st-completed, .u-stage.st-closed { color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 28%, transparent); background: var(--good-soft); }
  .u-stage.st-monitoring, .u-stage.st-scheduled, .u-stage.st-update { color: var(--info-ink); border-color: color-mix(in srgb, var(--info) 28%, transparent); background: var(--info-soft); }
  .u-stage.st-identified, .u-stage.st-acknowledged, .u-stage.st-in_progress { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 28%, transparent); background: var(--warn-soft); }
  .u-stage.st-investigating { color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad) 28%, transparent); background: var(--bad-soft); }
  .u-stage.st-open { color: var(--muted); border-color: var(--line); background: var(--canvas); }
  .u-text { color: var(--ink-2); font-size: 13px; }
  .u-time { color: var(--subtle); font-size: 11.5px; margin-top: 5px; }
  /* Full per-stage colour map for spine dots + stage labels. Previously only
     resolved/monitoring/identified/investigating were defined, so acknowledged &
     in_progress dots rendered invisible (no background). `.dot` provides a neutral
     fallback that the per-stage rules override. */
  .dot { background: var(--line-2); }
  .st-open          { color: var(--muted); } .dot.st-open          { background: var(--line-2); }
  .st-acknowledged  { color: var(--warn); }  .dot.st-acknowledged  { background: var(--warn); }
  .st-investigating { color: var(--bad); }   .dot.st-investigating { background: var(--bad); }
  .st-identified    { color: var(--warn); }  .dot.st-identified    { background: var(--warn); }
  .st-in_progress   { color: var(--warn); }  .dot.st-in_progress   { background: var(--warn); }
  .st-scheduled     { color: var(--info); }  .dot.st-scheduled     { background: var(--info); }
  .st-monitoring    { color: var(--info); }  .dot.st-monitoring    { background: var(--info); }
  .st-update        { color: var(--info); }  .dot.st-update        { background: var(--info); }
  .st-completed     { color: var(--good); }  .dot.st-completed     { background: var(--good); }
  .st-resolved      { color: var(--good); }  .dot.st-resolved      { background: var(--good); }
  .st-closed        { color: var(--good); }  .dot.st-closed        { background: var(--good); }
  .affected { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
  .affected .tagx { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--canvas); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }

  /* ============================================================ Components panel */
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
  .panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .panel-title { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
  .legend { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
  .legend .li { display: inline-flex; align-items: center; gap: 5px; }
  .legend .sw { width: 12px; height: 11px; border-radius: 3px; }
  .sw.ok { background: var(--seg-ok); } .sw.warn { background-color: var(--seg-warn); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px); }
  .sw.bad { background-color: var(--seg-bad); box-shadow: inset 0 4px 0 -2px rgba(0,0,0,.34); } .sw.maint { background-color: var(--seg-maint); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, transparent 1px 3px); }
  .expand-all { font-size: 11.5px; font-weight: 600; color: var(--good-ink); padding: 4px 8px; border-radius: 6px; }
  .expand-all:hover { background: var(--canvas); }

  .group + .group .group-head { border-top: 1px solid var(--line); }
  .group-head { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 16px; background: var(--surface-2); text-align: left; }
  .group-head:hover { background: var(--canvas); }
  .group-head .chev { color: var(--subtle); display: grid; place-items: center; transition: transform .16s; }
  .group-head .chev svg { width: 15px; height: 15px; }
  .group-head[aria-expanded="false"] .chev { transform: rotate(-90deg); }
  .group-head .gname { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
  .group-head .gc { font-size: 11px; color: var(--subtle); font-weight: 600; }
  .group-head .gp { margin-left: auto; margin-right: 26px; }
  .group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .18s ease; }
  .group-head[aria-expanded="false"] + .group-body { grid-template-rows: 0fr; }
  .group-body > .gb-in { overflow: hidden; min-height: 0; }

  .row { border-top: 1px solid var(--line); }
  .row-head { width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 16px; text-align: left; }
  .row-head:hover { background: var(--surface-2); }
  .row .sd { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .sd.ok { background: var(--seg-ok); } .sd.warn { background: var(--seg-warn); } .sd.bad { background: var(--seg-bad); } .sd.maint { background: var(--seg-maint); } .sd.none { background: var(--faint); }
  .rmeta { min-width: 0; flex: 1; }
  .rmeta .cn { font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.2; }
  .rmeta .cs { font-size: 11.5px; color: var(--subtle); line-height: 1.2; margin-top: 1px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rright { display: flex; align-items: center; gap: 11px; flex: none; }
  .rright .pct { font-size: 12px; font-weight: 600; color: var(--good); width: 54px; text-align: right; }
  .rright .pct.warn { color: var(--warn); } .rright .pct.bad { color: var(--bad); }
  /* Reserved status column: only non-operational rows render a pill (the green dot + green %
     already say "fine"), but the slot is always present so percentages stack in one column
     and the rare problem pill left-aligns under the group badge. */
  .rright .pill-slot { min-width: 88px; display: flex; justify-content: flex-start; align-items: center; flex: none; }
  .rright .chev { color: var(--faint); display: grid; place-items: center; transition: transform .16s; }
  .rright .chev svg { width: 15px; height: 15px; }
  .row-head[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--muted); }

  .status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid; white-space: nowrap; }
  .status-pill .d { width: 6px; height: 6px; border-radius: 50%; }
  .sp-ok    { background: var(--brand-soft); color: var(--good-ink); border-color: color-mix(in srgb, var(--brand) 22%, transparent); } .sp-ok .d { background: var(--seg-ok); }
  .sp-warn  { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, transparent); } .sp-warn .d { background: var(--seg-warn); }
  .sp-bad   { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 28%, transparent); } .sp-bad .d { background: var(--seg-bad); }
  .sp-maint { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, transparent); } .sp-maint .d { background: var(--seg-maint); }
  .sp-none  { background: var(--canvas); color: var(--muted); border-color: var(--line-2); } .sp-none .d { background: var(--subtle); }

  .row-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .16s ease; }
  .row.expanded .row-detail { grid-template-rows: 1fr; }
  .row-detail > .rd-in { overflow: hidden; min-height: 0; }
  .uptime { margin: 0; padding: 2px 16px 15px 38px; }
  .ubar { display: flex; gap: 2px; height: 30px; }
  .ubar .seg-u { border-radius: 2px; }
  .ulabels { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font-size: 11px; color: var(--subtle); }
  .ulabels .mid { flex: 1; border-bottom: 1px dotted var(--line-2); margin: 0 10px; height: 0; }
  .rcaption { margin-top: 9px; font-size: 11.5px; color: var(--muted); }
  .regions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
  .region { font-size: 10.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); }
  .region .rd { width: 6px; height: 6px; border-radius: 50%; background: var(--seg-ok); }
  .region.warn .rd { background: var(--seg-warn); } .region.bad .rd { background: var(--seg-bad); } .region.maint .rd { background: var(--seg-maint); }

  /* ============================================================ Metrics */
  .metric-tabs { display: inline-flex; gap: 4px; }
  .metric-tabs button { height: 27px; padding: 0 10px; border-radius: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
  .metric-tabs button:hover { background: var(--canvas); color: var(--ink); }
  .metric-tabs button.active { background: var(--brand-soft); color: var(--good-ink); }
  .metric-body { padding: 15px 16px; }
  .metric-stat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .metric-stat .mv { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; }
  .metric-stat .mv .unit { font-size: 13px; color: var(--subtle); font-weight: 500; }
  .metric-stat .mdelta { font-size: 12px; font-weight: 600; color: var(--good); }
  .metric-stat .mdelta.bad { color: var(--bad); }
  .metric-stat .mrange { margin-left: auto; }
  .rt-chart { width: 100%; height: 120px; display: block; margin-top: 10px; }
  .rt-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--subtle); margin-top: 2px; }
  /* Legend (coloured swatch + current metric name + unit) + y-axis value ticks. The
     svg uses preserveAspectRatio=none so the value labels are an HTML overlay, never
     <text> inside the svg (which would distort). */
  .metric-legend { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .metric-swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--brand); flex: none; }
  .metric-plot { position: relative; margin-top: 8px; }
  .metric-plot .rt-chart { margin-top: 0; }
  .rt-yaxis { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; pointer-events: none; font-size: 10px; line-height: 1; color: var(--subtle); }
  .rt-yaxis span { background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 0 4px 0 0; border-radius: 3px; }

  /* ============================================================ History */
  .section-h { display: flex; align-items: baseline; gap: 12px; margin: 6px 2px 0; }
  .section-h h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
  .section-h a { margin-left: auto; font-size: 12.5px; color: var(--good-ink); text-decoration: none; font-weight: 500; }
  .section-h a:hover { text-decoration: underline; }
  /* Past incidents — v6-style month-grouped cards + update timeline, in v3 tokens */
  .month { margin-bottom: 26px; }
  .month-h { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 14px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .inc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 17px 19px; margin-bottom: 10px; scroll-margin-top: 72px; transition: background .3s, box-shadow .18s; }
  .inc.flash { background: var(--accent-soft); }
  /* Title shrinks/wraps while the dot, badge and duration stay pinned on the top
     row — a long title can never push the duration down onto the meta line. */
  .inc-h { display: flex; align-items: flex-start; gap: 11px; }
  .inc-h .id { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; }
  .inc-h .id.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
  .inc-h .id.bad  { background: var(--bad);  box-shadow: 0 0 0 3px var(--bad-soft); }
  .inc-h .id.info { background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
  .inc-h .id.ok   { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
  .inc-h .it { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
  .inc-h .badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 5px; color: var(--good-ink); background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 28%, transparent); flex: none; margin-top: 2px; }
  .inc-h .badge.completed { color: var(--info-ink); background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
  .inc-h .dur { margin-left: auto; flex: none; white-space: nowrap; margin-top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
  /* Indent by the dot (9px) + header gap (11px) so the meta line aligns with the
     title's text column rather than sitting flush under the status dot. */
  /* Desktop: timestamp and affected-services sit on one row (wrapping if needed);
     phones stack them (see the responsive block). */
  .inc-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--subtle); margin-top: 11px; padding-bottom: 9px; letter-spacing: 0.02em; padding-left: 20px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; }
  .inc-meta .meta-when { white-space: nowrap; }
  /* Affected services: names as subtle chips so they read as distinct components. */
  .inc-meta .meta-svc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .inc-meta .meta-svc::before { content: '·'; margin-right: 7px; color: var(--muted); }
  .inc-meta .meta-svc-lbl { color: var(--muted); }
  .inc-meta .svc-chip { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.5; padding: 2px 9px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--line); color: var(--ink-2); }
  .updates { margin-top: 15px; padding-left: 18px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 15px; }
  .upd-item { position: relative; }
  .upd-item::before { content: ''; position: absolute; left: -23px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); }
  .upd-item.resolved::before, .upd-item.completed::before, .upd-item.closed::before { border-color: var(--good); background: var(--good); }
  .upd-item.monitoring::before, .upd-item.scheduled::before, .upd-item.update::before { border-color: var(--info); background: var(--info); }
  .upd-item.identified::before, .upd-item.acknowledged::before, .upd-item.in_progress::before { border-color: var(--warn); background: var(--warn); }
  .upd-item.investigating::before { border-color: var(--bad); background: var(--bad); }
  .upd-stage { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 7px; border-radius: 5px; margin-right: 9px; border: 1px solid var(--line); color: var(--muted); background: var(--canvas); vertical-align: 1px; }
  .upd-stage.resolved, .upd-stage.completed, .upd-stage.closed { color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 28%, transparent); background: var(--good-soft); }
  .upd-stage.monitoring, .upd-stage.scheduled, .upd-stage.update { color: var(--info-ink); border-color: color-mix(in srgb, var(--info) 28%, transparent); background: var(--info-soft); }
  .upd-stage.identified, .upd-stage.acknowledged, .upd-stage.in_progress { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 28%, transparent); background: var(--warn-soft); }
  .upd-stage.investigating { color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad) 28%, transparent); background: var(--bad-soft); }
  .upd-stage.open { color: var(--muted); border-color: var(--line); background: var(--canvas); }
  .upd-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
  .upd-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--subtle); margin-top: 5px; letter-spacing: 0.02em; }
  .quiet { display: flex; align-items: center; gap: 9px; padding: 14px 4px; color: var(--good-ink); font-size: 12.5px; }
  .quiet svg { width: 16px; height: 16px; flex: none; }

  /* v11 sub-pages: full history / upcoming maintenance / single status update */
  .sp-crumb { margin: 2px 2px 16px; }
  .sp-crumb a { font-size: 13px; color: var(--muted); text-decoration: none; font-weight: 500; }
  .sp-crumb a:hover { color: var(--ink); text-decoration: underline; }
  .section-h h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
  .inc-h .badge.open { color: var(--bad-ink); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
  .inc-summary { margin-top: 12px; font-size: 13.5px; color: var(--ink); line-height: 1.55; padding-left: 20px; }
  .inc-more { margin-top: 12px; }
  .inc-more a { font-size: 12.5px; font-weight: 500; color: var(--good-ink); text-decoration: none; }
  .inc-more a:hover { text-decoration: underline; }

  /* ============================================================ Footer */
  .sp-foot { max-width: 1080px; margin: 22px auto 0; padding: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--subtle); font-size: 12.5px; }
  .sp-foot .pw { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--muted); text-decoration: none; }
  .sp-foot .pw-logo { height: 16px; width: auto; display: block; }
  .sp-foot .pw-logo.dk { display: none; }
  [data-theme="dark"] .sp-foot .pw-logo.lt { display: none; }
  [data-theme="dark"] .sp-foot .pw-logo.dk { display: block; }
  .sp-foot .pw:hover { color: var(--ink); }
  .sp-foot .fl { margin-left: auto; display: flex; gap: 16px; }
  .sp-foot .fl a { color: var(--muted); text-decoration: none; }
  .sp-foot .fl a:hover { color: var(--ink); }

  /* ============================================================ Subscribe popover */
  .pop-wrap { position: relative; }
  .pop { position: absolute; right: 0; top: calc(100% + 8px); width: 318px; background: var(--surface); border: 1px solid var(--line-2);
    border-radius: 12px; box-shadow: var(--shadow-lg); padding: 16px; z-index: 40; opacity: 0; transform: translateY(-6px) scale(.98);
    pointer-events: none; transition: opacity .14s, transform .14s; }
  .pop.open { opacity: 1; transform: none; pointer-events: auto; }
  .pop h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 7px; }
  .pop p { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
  .pop .field { display: flex; gap: 7px; }
  .pop input[type=email] { flex: 1; height: 36px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); font-size: 13px; }
  .pop input[type=email]:focus-visible { background: var(--surface); border-color: var(--brand); }
  .pop .chans { display: flex; gap: 8px; margin-top: 12px; }
  .pop .chan { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); font-size: 10px; font-weight: 600; color: var(--muted); }
  .pop .chan.soon { opacity: .55; }
  .pop .chan svg { width: 15px; height: 15px; }

  /* Tooltip */
  #tip { position: fixed; z-index: 60; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 8px 11px; font-size: 11.5px; line-height: 1.4; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(4px); transition: opacity .1s; max-width: 230px; }
  #tip.show { opacity: 1; transform: none; }
  #tip .tt-d { font-family: 'JetBrains Mono', monospace; }
  #tip .tt-s { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--tip-sub); }
  #tip .tt-s .dd { width: 7px; height: 7px; border-radius: 2px; flex: none; }

  /* ============================================================ Responsive */
  @media (max-width: 820px) {
    .wrap, .sp-top-in, .sp-foot { padding-left: 18px; padding-right: 18px; }
  }
  @media (max-width: 640px) {
    .wrap, .sp-top-in, .sp-foot { padding-left: 15px; padding-right: 15px; }
    .bento { grid-template-columns: 1fr 1fr; }
    .demo .muted { display: none; }
    .brand .bn { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
    .tlink.hist span { display: none; }
    .btn .blabel { display: none; }
    /* Header fits on phones: drop the flex spacer and let the brand take the slack
       (page name truncates with an ellipsis) so the right-hand controls never clip. */
    .sp-top .spacer { display: none; }
    .brand { flex: 1 1 auto; }
    .seg.tz, .iconbtn, .tlink.hist { flex: none; }
    /* Touch targets >= ~40px */
    .iconbtn { width: 40px; height: 40px; }
    .tlink.hist { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    .seg button { min-height: 38px; }
    .inc-more a, .sp-foot .fl a, .sp-crumb a { display: inline-block; padding: 8px 4px; }
    .section-h a { padding: 6px 2px; }
    /* More legible meta on mobile */
    .inc-meta, .inc-h .dur { font-size: 12px; }
    /* Stack timestamp over affected-services on phones (no room for one row). */
    .inc-meta { display: block; }
    .inc-meta .meta-when { display: block; white-space: normal; }
    .inc-meta .meta-svc { margin-top: 8px; }
    .inc-meta .meta-svc::before { content: none; }
    .hero-in { flex-wrap: wrap; }
    /* stack the incident action so the impact line + CTA never clip on a narrow phone */
    .o-action { width: 100%; flex-direction: column; align-items: flex-start; }
    .banner-head { row-gap: 4px; }
    .banner-head .nextup { margin-left: 0; }
    .o-up { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); padding: 12px 0 0; margin-top: 6px; width: 100%; text-align: left; flex-direction: row; gap: 10px; align-items: baseline; }
    .o-up .ul { margin-top: 0; }
    /* DOM-promote the active banner above bento+components during any incident/maintenance */
    .wrap.incident > #activeIncident { order: 4; }
    .wrap.incident > #maintNotice { order: 4; }
    .uptime { padding-left: 16px; }
    .rright .pct { width: auto; }
    .rright .pill-slot { min-width: 0; }
  }

  /* On phones the wide wordmark + controls leave no room for the page name —
     show just the logo (it carries identity); the name returns >=500px. */
  @media (max-width: 500px) {
    .brand .bn { display: none; }
  }

  /* On touch devices the 90-day ribbon segments are ~3px wide — drop the per-day
     tap/hover affordance (the aggregate uptime % is always shown). */
  @media (hover: none) and (pointer: coarse) {
    .seg-u { pointer-events: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }