@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --background: 0 0% 99%; --foreground: 222 18% 16%; --muted-foreground: 222 15% 48%;
  --primary: 217 91% 50%; --accent: 265 85% 58%; --card: 0 0% 100%; --border: 220 8% 88%; --muted: 220 10% 96%;
  --success: 142 76% 36%; --warning: 38 92% 50%; --error: 0 84% 60%;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --background: 222 20% 9%; --foreground: 0 0% 98%; --muted-foreground: 0 0% 74%; --primary: 217 91% 60%; --accent: 265 85% 65%; --card: 220 16% 13%; --border: 220 14% 22%; --muted: 220 14% 17%; --success: 142 76% 45%; }
}
* { box-sizing: border-box; }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font: 16px/1.55 "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: hsl(var(--primary)); }
:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: hsl(var(--card)); padding: .5rem .8rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 56rem; margin: 0 auto; padding: 1rem 1.25rem; }
.brand { font-weight: 800; letter-spacing: .02em; text-decoration: none; color: inherit; } .brand span { color: hsl(var(--primary)); }
.topbar nav a { font-size: .9rem; }
main { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem 3rem; }
.summary { border: 1px solid hsl(var(--border)); border-radius: 1rem; background: linear-gradient(135deg, hsl(var(--primary) / .08), hsl(var(--accent) / .08)); padding: 1.5rem; margin: .5rem 0 2rem; }
.eyebrow { margin: 0 0 .25rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--primary)); }
h1 { margin: 0 0 .25rem; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; display: flex; align-items: center; gap: .6rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.muted { color: hsl(var(--muted-foreground)); }
.dot { width: .9rem; height: .9rem; border-radius: 50%; background: hsl(var(--muted-foreground)); flex: none; }
.dot.up, .state.up { background-color: hsl(var(--success)); } .dot.slow { background: hsl(var(--warning)); } .dot.down { background: hsl(var(--error)); }
.services, .incidents { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.service { border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--card)); padding: 1rem 1.1rem; }
.service-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.service-name { font-weight: 700; }
.state { font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .1rem .6rem; border: 1px solid hsl(var(--border)); }
.state.up { color: hsl(var(--success)); background: transparent; border-color: hsl(var(--success) / .5); }
.state.slow { color: hsl(30 90% 35%); border-color: hsl(var(--warning) / .6); } .state.down { color: hsl(var(--error)); border-color: hsl(var(--error) / .6); }
@media (prefers-color-scheme: dark) { .state.slow { color: hsl(var(--warning)); } }
.bars { display: flex; gap: 2px; margin: .75rem 0 .4rem; height: 1.6rem; }
.bar.up, .swatch.up { background: hsl(var(--success)); } .bar.slow, .swatch.slow { background: hsl(var(--warning)); } .bar.down, .swatch.down { background: hsl(var(--error)); } .bar.none, .swatch.none { background: hsl(var(--border)); }
.bars .bar { flex: 1; border-radius: 2px; min-width: 2px; }
.swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -1px; }
.service-meta, .legend { font-size: .85rem; margin: 0; } .legend { margin-top: .75rem; }
.incident { border-left: 3px solid hsl(var(--warning)); padding: .35rem .8rem; background: hsl(var(--muted)); border-radius: 0 .5rem .5rem 0; }
.foot { max-width: 56rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; font-size: .85rem; border-top: 1px solid hsl(var(--border)); }
@media (prefers-reduced-motion: no-preference) { .bars .bar { transition: opacity .15s; } .bars .bar:hover { opacity: .7; } }
.groups { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .5rem; }
.group { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: .6rem; padding: .6rem 1rem; }