:root{
  /* --- Razzoozle cream design system (design.md §3) --- */
  --color-field-cream:#F4F1EA;
  --surface:#FFFFFF;
  --border-hairline:#E2DDD2;
  --color-primary:#7c3aed;        /* violet brand — white text OK on this FILL only */
  --color-secondary:#2e1065;      /* dark-ink headings */
  --color-accent:#ff9900;         /* AMBER accent — INK text on it */
  --accent-contrast-text:#0E1120;
  --game-fg:#0E1120;              /* CRITICAL: ink fg. default white => invisible on cream */
  --radius-theme:16px;
  --shadow-flat:0 1px 2px rgba(14,17,32,.06), 0 10px 30px rgba(14,17,32,.07); /* ONE flat rung */
  --footer-bg:#ffffff; --footer-text:#1f2937;
  --rank-up:#10b981; --timer-urgent:#ff3b30;
  --font-display:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- page-local derived tokens (still tokens, not literals) --- */
  --ink-muted:#4A4F5C;            /* secondary label ink; ~7:1 on cream & white */
  --gap:clamp(.875rem,2.5vw,1.25rem);
  --ease-out:cubic-bezier(.22,.61,.36,1);

  /* --- status tokens (design-system-consistent) --- */
  --status-operational:#10b981;   /* green  — == --rank-up        */
  --status-degraded:#ff9900;      /* amber  — == --color-accent   */
  --status-down:#ff3b30;          /* red    — == --timer-urgent   */
  --status-nodata:#E2DDD2;        /* grey   — == --border-hairline */
  /* soft washes for pills/banner accents — color-mix keeps them token-derived,
     no new hex. ~14% tint over white reads as a label chip, ink text on top. */
  --wash-operational:color-mix(in srgb, var(--status-operational) 14%, #fff);
  --wash-degraded:color-mix(in srgb, var(--status-degraded) 16%, #fff);
  --wash-down:color-mix(in srgb, var(--status-down) 14%, #fff);
  --wash-nodata:color-mix(in srgb, var(--status-nodata) 55%, #fff);
}
@font-face{
  font-family:'Rubik';
  src:url(/fonts/rubik.woff2) format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--color-field-cream);
  color:var(--game-fg);
  font-family:var(--font-display);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:56rem;
  margin-inline:auto;
  padding:clamp(1.25rem,4vw,2.5rem);
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

/* --- header: logo (the brand) + status subtitle --- */
.topbar{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem; margin-bottom:var(--gap);
}
.brand{ margin:0; line-height:0; }
.logo{ height:clamp(40px,7vw,48px); width:auto; display:block; }
.brand-sub{ margin:.35rem 0 0; font-size:.85rem; color:var(--ink-muted); }
.brand-sub span{ font-variant-numeric:tabular-nums; }

/* --- overall banner: white surface + LEFT accent bar (not a colored fill) --- */
.banner{
  display:flex; align-items:center; gap:1rem;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-left:6px solid var(--status-nodata);   /* recolored by state */
  box-shadow:var(--shadow-flat); border-radius:var(--radius-theme);
  padding:clamp(1.1rem,3.5vw,1.6rem) clamp(1.25rem,4vw,1.9rem);
  margin-block:var(--gap);
}
.banner[data-overall="operational"]{ border-left-color:var(--status-operational); }
.banner[data-overall="degraded"]   { border-left-color:var(--status-degraded); }
.banner[data-overall="down"]       { border-left-color:var(--status-down); }
.banner[data-overall="error"]      { border-left-color:var(--ink-muted); }
.banner-dot{
  width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  background:var(--status-nodata);
}
.banner[data-overall="operational"] .banner-dot{ background:var(--status-operational); }
.banner[data-overall="degraded"]    .banner-dot{ background:var(--status-degraded); }
.banner[data-overall="down"]        .banner-dot{ background:var(--status-down); }
.banner[data-overall="error"]       .banner-dot{ background:var(--ink-muted); }
.banner[data-overall="operational"] .banner-dot{ animation:pulse 2.4s var(--ease-out) infinite; }
.banner-head{
  margin:0; font-size:clamp(1.25rem,4vw,1.6rem); font-weight:700;
  color:var(--game-fg); letter-spacing:-.01em;
}
.banner-sub{ margin:.2rem 0 0; font-size:.9rem; color:var(--ink-muted); }

/* --- panels (surface cards) --- */
.panel{
  background:var(--surface); border:1px solid var(--border-hairline);
  box-shadow:var(--shadow-flat); border-radius:var(--radius-theme);
  padding:clamp(1.1rem,3.5vw,1.6rem); margin-block:var(--gap);
  opacity:0; transform:translateY(12px);
}
.wrap.in .panel{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.wrap.in .panel:nth-of-type(2){ transition-delay:.05s; }
.wrap.in .panel:nth-of-type(3){ transition-delay:.10s; }
.wrap.in .panel:nth-of-type(4){ transition-delay:.15s; }
.panel-h{
  margin:0 0 .75rem; font-size:1.05rem; font-weight:700;
  color:var(--color-secondary); letter-spacing:.01em;
}

/* --- component rows --- */
.components{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.component{ padding:1rem 0; border-top:1px solid var(--border-hairline); }
.component:first-child{ border-top:0; padding-top:0; }
.comp-top{
  display:grid; grid-template-columns:1fr auto auto; align-items:center;
  column-gap:.75rem;
}
.comp-name{ margin:0; font-size:1rem; font-weight:600; color:var(--game-fg); }
.comp-pct{
  font-size:.9rem; font-weight:600; color:var(--game-fg);
  font-variant-numeric:tabular-nums slashed-zero;
}
.comp-note{ margin:.3rem 0 0; font-size:.82rem; color:var(--ink-muted); }

/* --- status pill: wash fill + INK label + dot. never white-on-color --- */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.18rem .55rem; border-radius:999px; font-size:.78rem; font-weight:600;
  color:var(--game-fg); background:var(--wash-nodata);
  border:1px solid var(--border-hairline);
}
.pill-dot{ width:8px;height:8px;border-radius:50%; background:var(--status-nodata); }
.component[data-status="operational"] .pill{ background:var(--wash-operational); }
.component[data-status="operational"] .pill-dot{ background:var(--status-operational); }
.component[data-status="degraded"]    .pill{ background:var(--wash-degraded); }
.component[data-status="degraded"]    .pill-dot{ background:var(--status-degraded); }
.component[data-status="down"]        .pill{ background:var(--wash-down); }
.component[data-status="down"]        .pill-dot{ background:var(--status-down); }
.component[data-status="maintenance"] .pill,
.component[data-status="nodata"]      .pill{ background:var(--wash-nodata); }

/* ============================================================================
   90-SEGMENT DAILY UPTIME BAR — status.claude.com signature, FLAT-CREAM.
   90 thin vertical segments, one per day, oldest->newest left->right. Colour =
   that day's worst status from the --status-* tokens. nodata = hairline grey.
   Never color-only: each segment carries a native title= + aria-label, and the
   row pairs the bar with a pill + uptime %. Grow-in via transform:scaleY +
   opacity only; reduced-motion disables it.
   ========================================================================== */
.uptime{ margin:.6rem 0 .35rem; }
.uptime-track{
  display:grid;
  grid-template-columns:repeat(90, 1fr);
  gap:2px;
  align-items:stretch;
  height:34px;
  width:100%;
}
.uptime-seg{
  border-radius:2px;
  background:var(--status-nodata);
  min-width:0;
  transform:scaleY(.35);
  opacity:0;
  transform-origin:bottom;
}
.uptime-seg[data-day="operational"]{ background:var(--status-operational); }
.uptime-seg[data-day="degraded"]   { background:var(--status-degraded); }
.uptime-seg[data-day="down"]       { background:var(--status-down); }
.uptime-seg[data-day="nodata"]     { background:var(--status-nodata); }
.wrap.in .uptime-seg{
  transform:scaleY(1);
  opacity:1;
  transition:transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.wrap.in .uptime-seg:nth-child(10n+1){ transition-delay:.00s; }
.wrap.in .uptime-seg:nth-child(10n+2){ transition-delay:.02s; }
.wrap.in .uptime-seg:nth-child(10n+3){ transition-delay:.04s; }
.wrap.in .uptime-seg:nth-child(10n+4){ transition-delay:.06s; }
.wrap.in .uptime-seg:nth-child(10n+5){ transition-delay:.08s; }
.wrap.in .uptime-seg:nth-child(10n+6){ transition-delay:.10s; }
.wrap.in .uptime-seg:nth-child(10n+7){ transition-delay:.12s; }
.wrap.in .uptime-seg:nth-child(10n+8){ transition-delay:.14s; }
.wrap.in .uptime-seg:nth-child(10n+9){ transition-delay:.16s; }
.wrap.in .uptime-seg:nth-child(10n)  { transition-delay:.18s; }
.uptime-seg:hover,
.uptime-seg:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:1px;
  filter:brightness(1.06);
}
.uptime-axis{
  display:flex;
  justify-content:space-between;
  margin-top:.3rem;
  font-size:.72rem;
  color:var(--ink-muted);
  letter-spacing:.01em;
}
.uptime-pct{
  font-variant-numeric:tabular-nums slashed-zero;
  font-weight:600;
  color:var(--game-fg);
}
.uptime[data-state="loading"] .uptime-seg{
  background:var(--status-nodata);
  animation:seg-shim 1.4s var(--ease-out) infinite;
}
@keyframes seg-shim{ 0%,100%{opacity:.55;} 50%{opacity:.9;} }

/* --- live activity --- */
.live-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.live-pulse{
  display:inline-flex; align-items:center; gap:.5rem; margin:0;
  font-size:.85rem; color:var(--ink-muted);
}
.live-pulse .pulse-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--color-primary); animation:pulse 2s var(--ease-out) infinite;
}
.live-pulse[data-live="zero"]  .pulse-dot{ background:var(--color-accent); }
.live-pulse[data-live="error"] .pulse-dot{ background:var(--timer-urgent); animation-play-state:paused; }
.live-hero{ display:flex; flex-direction:column; margin:.5rem 0 1rem; }
.live-hero-label{
  font-size:.8rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-muted);
}
.live-hero-num{
  font-size:clamp(2.75rem,11vw,5rem); font-weight:700; line-height:.95;
  color:var(--game-fg); font-variant-numeric:tabular-nums slashed-zero;
}
.metrics{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.75rem;
}
.metric{
  display:flex; flex-direction:column; gap:.2rem; padding:.6rem 0;
  border-top:1px solid var(--border-hairline);
}
.metric-label{
  font-size:.78rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; color:var(--ink-muted);
}
.metric-val{
  font-size:clamp(1.3rem,4vw,1.8rem); font-weight:700; color:var(--game-fg);
  font-variant-numeric:tabular-nums slashed-zero;
}

/* --- incidents --- */
.incidents-empty{ margin:0; color:var(--ink-muted); font-size:.92rem; }

/* --- footer --- */
.foot{
  margin-top:calc(var(--gap)*2);
  padding-top:var(--gap);
  border-top:1px solid var(--border-hairline);
  color:var(--ink-muted);
  font-size:.85rem;
}
.foot p{margin:.25rem 0;}
.foot-fine{ font-size:.78rem; }

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.8);}
}

/* --- responsive --- */
@media (max-width:600px){
  .comp-top{ grid-template-columns:1fr auto; }
  .comp-pct{ grid-column:2; justify-self:end; }
}
@media (prefers-reduced-motion: reduce){
  .banner-dot,.live-pulse .pulse-dot{ animation:none; }
  .panel,.wrap.in .panel{ transition:none; opacity:1; transform:none; }
  .uptime-seg,
  .wrap.in .uptime-seg{ transition:none; transform:none; opacity:1; }
  .uptime[data-state="loading"] .uptime-seg{ animation:none; opacity:.7; }
  .uptime-seg:hover,.uptime-seg:focus-visible{ filter:none; }
}