:root {
  --ink: #1a1a1a; --muted: #737373; --ink-dim: #555;
  --page: #fff; --soft: #fafafa; --line: #e5e5e5; --line-soft: #f1f1f1;
  --accent: #2e7d4f; --accent-ink: #26663f; --accent-wash: #f3f9f5; --accent-edge: #d5e8dc; --accent-bar: #4f9d72;
  --warn: #b45309; --warn-wash: #fdf6ec; --warn-edge: #f1dcc0;
  --crit: #b42318; --crit-wash: #fdf0ee; --crit-edge: #f3c9c2;
  --maint: #3b5bdb; --maint-wash: #eef2ff; --maint-edge: #cdd6f8;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 1.25rem 4rem; }
header.top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.wordmark { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.wordmark span { color: var(--muted); font-weight: 500; }
.top nav { display: flex; gap: 1.25rem; font-size: 0.9rem; }
.top nav a { color: var(--ink-dim); text-decoration: none; }
.top nav a:hover, .top nav a:focus-visible { text-decoration: underline; }

.overall { margin: 1.5rem 0 0; padding: 1rem 1.15rem; border: 1px solid var(--accent-edge); background: var(--accent-wash); border-radius: 6px; display: flex; gap: 0.85rem; align-items: flex-start; }
.overall .dot { flex: none; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--accent); margin-top: 0.35rem; box-shadow: 0 0 0 4px rgba(46,125,79,0.15); }
.overall h1 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
.overall p { margin: 0.15rem 0 0; color: var(--ink-dim); font-size: 0.92rem; }
.overall time { font-variant-numeric: tabular-nums; }
.overall.pending { border-color: var(--line); background: var(--soft); }
.overall.pending .dot { background: var(--line); box-shadow: none; }
.overall.degraded { border-color: var(--warn-edge); background: var(--warn-wash); }
.overall.degraded .dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(180,83,9,0.15); }
.overall.down { border-color: var(--crit-edge); background: var(--crit-wash); }
.overall.down .dot { background: var(--crit); box-shadow: 0 0 0 4px rgba(180,35,24,0.15); }
.overall.maint { border-color: var(--maint-edge); background: var(--maint-wash); }
.overall.maint .dot { background: var(--maint); box-shadow: 0 0 0 4px rgba(59,91,219,0.15); }
@media (prefers-reduced-motion: no-preference) { .overall.ok .dot { animation: pulse 2.4s ease-in-out infinite; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(46,125,79,0.15);} 50% { box-shadow: 0 0 0 7px rgba(46,125,79,0.08);} }

h2 { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 2.25rem 0 0.75rem; }
.legend { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }

.components { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.component { padding: 0.9rem 1rem 0.95rem; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name state" "bars bars" "meta meta"; row-gap: 0.5rem; column-gap: 1rem; }
.component:first-child { border-top: 0; }
.component .name { grid-area: name; font-weight: 600; }
.component .name small { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.state { grid-area: state; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; white-space: nowrap; align-self: start; color: var(--muted); }
.state::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); }
.state.ok { color: var(--accent-ink); } .state.ok::before { background: var(--accent); }
.state.degraded { color: var(--warn); } .state.degraded::before { background: var(--warn); }
.state.down { color: var(--crit); } .state.down::before { background: var(--crit); }
.state.maint { color: var(--maint); } .state.maint::before { background: var(--maint); }
.bars { grid-area: bars; display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 2rem; }
.bars i { display: block; background: var(--accent-bar); border-radius: 1px; }
.bars i.w { background: var(--warn); } .bars i.c { background: var(--crit); } .bars i.n { background: var(--line); }
.bars i:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.meta { grid-area: meta; display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta b { font-weight: 600; color: var(--ink-dim); }

.maintenance { border: 1px solid var(--maint-edge); background: var(--maint-wash); border-radius: 6px; padding: 0.9rem 1rem; }
.maintenance + .maintenance { margin-top: 0.75rem; }
.maintenance h3, .incident h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.maintenance p, .incident p { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--ink-dim); }
.when { font-size: 0.85rem; color: var(--maint); font-weight: 500; font-variant-numeric: tabular-nums; }
.none { color: var(--muted); font-size: 0.92rem; margin: 0; }

.day { margin-top: 1.25rem; }
.day h3.date { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.incident { border: 1px solid var(--line); border-radius: 6px; padding: 0.9rem 1rem; }
.incident + .incident { margin-top: 0.75rem; }
.tag { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 3px; margin-right: 0.4rem; vertical-align: 0.1em; }
.tag.resolved { background: var(--accent-wash); color: var(--accent-ink); border: 1px solid var(--accent-edge); }
.tag.open { background: var(--warn-wash); color: var(--warn); border: 1px solid var(--warn-edge); }
.updates { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; border-top: 1px solid var(--line-soft); padding-top: 0.75rem; }
.updates li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 0.75rem; font-size: 0.9rem; }
.updates time { color: var(--muted); font-variant-numeric: tabular-nums; }
.updates b { font-weight: 600; }

footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); display: grid; gap: 0.4rem; }
@media (max-width: 520px) { .top nav { display: none; } .component { grid-template-columns: 1fr; grid-template-areas: "name" "state" "bars" "meta"; } }