/* Status pages: shared layout. Brand colours come from brand.css (CSS variables). No web fonts,
   no external assets: the CSP allows only files from this origin. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg)}
a{color:var(--link)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{width:100%;max-width:960px;margin:0 auto;padding-left:16px;padding-right:16px}
.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:-10000px;top:8px;z-index:10;padding:8px 12px;border-radius:6px;background:var(--surface);color:var(--ink)}
.skip:focus{left:16px}

/* header */
header.top{background:var(--header-bg);color:var(--header-ink)}
header.top .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.brand svg{display:block;height:32px;width:auto;flex:none}
.brand svg.wordmark{height:18px}
.brand-sub{padding-left:12px;border-left:1px solid var(--header-line);font-weight:500;opacity:.9}

/* overall */
main{padding-top:24px;padding-bottom:48px}
.overall{margin:0 0 8px;padding:18px 20px;border:1px solid var(--line);border-left-width:6px;border-radius:12px;background:var(--surface)}
.overall-head{display:flex;align-items:center;gap:12px}
.overall .dot{width:16px;height:16px}
.overall h1{margin:0;font-size:1.4rem;line-height:1.3}
.updated{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.stale-banner{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:var(--stale-bg);color:var(--ink);font-weight:600}
.overall[data-state=up]{border-left-color:var(--up)}
.overall[data-state=degraded]{border-left-color:var(--degraded)}
.overall[data-state=down]{border-left-color:var(--down)}
.overall[data-state=maintenance]{border-left-color:var(--maintenance)}
.overall[data-state=unknown]{border-left-color:var(--unknown)}
.overall[data-state=up] .dot{--sc:var(--up)}
.overall[data-state=degraded] .dot{--sc:var(--degraded)}
.overall[data-state=down] .dot{--sc:var(--down)}
.overall[data-state=maintenance] .dot{--sc:var(--maintenance)}
.overall[data-state=unknown] .dot{--sc:var(--unknown)}

/* range toggle (needs JavaScript) */
.controls{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin:20px 0 4px}
.js .controls{display:flex}
.controls-label{color:var(--muted);font-size:.9rem}
.controls button{font:inherit;font-size:.9rem;min-height:36px;padding:4px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.controls button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* groups and components */
.group h2{margin:28px 0 10px;font-size:1rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.component{margin:0 0 12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.c-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.c-head h3{margin:0;font-size:1.05rem;line-height:1.35}
.state{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:600;font-size:.95rem}
.dot{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--sc)}
.s-up{--sc:var(--up)}
.s-degraded{--sc:var(--degraded)}
.s-down{--sc:var(--down)}
.s-maintenance{--sc:var(--maintenance)}
.s-unknown{--sc:var(--unknown)}
.state.s-unknown .dot{background:transparent;border:2px dotted var(--unknown)}
.state.s-maintenance .dot{background:repeating-linear-gradient(135deg,var(--maintenance) 0 2px,transparent 2px 4px);border:1px solid var(--maintenance)}
.uptime{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 8px;color:var(--muted);font-size:.9rem}
.more{margin:10px 0 0;font-size:.95rem}

/* interval strip and daily bars: height is a second cue next to colour
   (operational low, degraded higher, unavailable and maintenance full) */
.bars{margin-top:8px}
.bars-label{margin:0 0 4px;color:var(--muted);font-size:.8rem}
ol.strip,ol.days{display:grid;align-items:end;list-style:none;margin:0;padding:0;height:30px}
ol.strip{grid-template-columns:repeat(288,minmax(0,1fr))}
ol.days{grid-template-columns:repeat(90,minmax(0,1fr));column-gap:1px}
main[data-range="30"] ol.days{grid-template-columns:repeat(30,minmax(0,1fr));column-gap:2px}
main[data-range="30"] ol.days li.older{display:none}
ol.strip li,ol.days li{min-width:0;height:50%;background:var(--sc)}
ol.days li{border-radius:1px}
ol.strip li.s-degraded,ol.days li.s-degraded{height:78%}
ol.strip li.s-down,ol.days li.s-down,ol.strip li.s-maintenance,ol.days li.s-maintenance{height:100%}
ol.strip li.s-maintenance,ol.days li.s-maintenance{background:repeating-linear-gradient(135deg,var(--maintenance) 0 2px,var(--maintenance-soft) 2px 4px)}
ol.strip li.s-unknown,ol.days li.s-unknown{background:radial-gradient(circle,var(--unknown) 0 1px,transparent 1.2px) 0 0/4px 4px,var(--unknown-soft)}
.axis{display:flex;justify-content:space-between;margin:2px 0 0;color:var(--muted);font-size:.75rem}

/* incidents, maintenance, about */
.notes h2,.about h2{margin:36px 0 10px;font-size:1.15rem}
.incident,.maint{margin:0 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.incident h3,.maint h3{margin:0 0 4px;font-size:1rem}
.meta{margin:0 0 6px;color:var(--muted);font-size:.9rem}
.updates{list-style:none;margin:0;padding:0}
.updates li{padding:8px 0 0;border-top:1px solid var(--line);margin-top:8px}
.updates p{margin:0}
.u-head{font-size:.9rem;color:var(--muted)}
.note-state{font-weight:700;color:var(--ink)}
.empty{color:var(--muted)}
.about{color:var(--ink)}
.about p{max-width:70ch}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:12px 0 0;padding:0;font-size:.9rem}
.legend li{display:inline-flex;align-items:center;gap:8px}
.swatch{display:inline-block;width:14px;height:14px;border-radius:2px;background:var(--sc)}
.swatch.s-maintenance{background:repeating-linear-gradient(135deg,var(--maintenance) 0 2px,var(--maintenance-soft) 2px 4px)}
.swatch.s-unknown{background:radial-gradient(circle,var(--unknown) 0 1px,transparent 1.2px) 0 0/4px 4px,var(--unknown-soft)}

/* stale data: everything grey, the banner says why */
.stale .component,.stale .overall-head{filter:grayscale(1);opacity:.7}
.stale .overall{border-left-color:var(--unknown)}

footer.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;padding:20px 0 32px}
footer.foot p{margin:4px 0}
footer.foot .links a{margin-right:14px;display:inline-block}

@media (min-width:720px){
  .overall h1{font-size:1.6rem}
  ol.strip,ol.days{height:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .controls,.skip{display:none}
}

/* interval spans of pre-rendered runs */
.n-2{grid-column:span 2}
.n-3{grid-column:span 3}
.n-4{grid-column:span 4}
.n-5{grid-column:span 5}
.n-6{grid-column:span 6}
.n-7{grid-column:span 7}
.n-8{grid-column:span 8}
.n-9{grid-column:span 9}
.n-10{grid-column:span 10}
.n-11{grid-column:span 11}
.n-12{grid-column:span 12}
.n-13{grid-column:span 13}
.n-14{grid-column:span 14}
.n-15{grid-column:span 15}
.n-16{grid-column:span 16}
.n-17{grid-column:span 17}
.n-18{grid-column:span 18}
.n-19{grid-column:span 19}
.n-20{grid-column:span 20}
.n-21{grid-column:span 21}
.n-22{grid-column:span 22}
.n-23{grid-column:span 23}
.n-24{grid-column:span 24}
.n-25{grid-column:span 25}
.n-26{grid-column:span 26}
.n-27{grid-column:span 27}
.n-28{grid-column:span 28}
.n-29{grid-column:span 29}
.n-30{grid-column:span 30}
.n-31{grid-column:span 31}
.n-32{grid-column:span 32}
.n-33{grid-column:span 33}
.n-34{grid-column:span 34}
.n-35{grid-column:span 35}
.n-36{grid-column:span 36}
.n-37{grid-column:span 37}
.n-38{grid-column:span 38}
.n-39{grid-column:span 39}
.n-40{grid-column:span 40}
.n-41{grid-column:span 41}
.n-42{grid-column:span 42}
.n-43{grid-column:span 43}
.n-44{grid-column:span 44}
.n-45{grid-column:span 45}
.n-46{grid-column:span 46}
.n-47{grid-column:span 47}
.n-48{grid-column:span 48}
.n-49{grid-column:span 49}
.n-50{grid-column:span 50}
.n-51{grid-column:span 51}
.n-52{grid-column:span 52}
.n-53{grid-column:span 53}
.n-54{grid-column:span 54}
.n-55{grid-column:span 55}
.n-56{grid-column:span 56}
.n-57{grid-column:span 57}
.n-58{grid-column:span 58}
.n-59{grid-column:span 59}
.n-60{grid-column:span 60}
.n-61{grid-column:span 61}
.n-62{grid-column:span 62}
.n-63{grid-column:span 63}
.n-64{grid-column:span 64}
.n-65{grid-column:span 65}
.n-66{grid-column:span 66}
.n-67{grid-column:span 67}
.n-68{grid-column:span 68}
.n-69{grid-column:span 69}
.n-70{grid-column:span 70}
.n-71{grid-column:span 71}
.n-72{grid-column:span 72}
.n-73{grid-column:span 73}
.n-74{grid-column:span 74}
.n-75{grid-column:span 75}
.n-76{grid-column:span 76}
.n-77{grid-column:span 77}
.n-78{grid-column:span 78}
.n-79{grid-column:span 79}
.n-80{grid-column:span 80}
.n-81{grid-column:span 81}
.n-82{grid-column:span 82}
.n-83{grid-column:span 83}
.n-84{grid-column:span 84}
.n-85{grid-column:span 85}
.n-86{grid-column:span 86}
.n-87{grid-column:span 87}
.n-88{grid-column:span 88}
.n-89{grid-column:span 89}
.n-90{grid-column:span 90}
.n-91{grid-column:span 91}
.n-92{grid-column:span 92}
.n-93{grid-column:span 93}
.n-94{grid-column:span 94}
.n-95{grid-column:span 95}
.n-96{grid-column:span 96}
.n-97{grid-column:span 97}
.n-98{grid-column:span 98}
.n-99{grid-column:span 99}
.n-100{grid-column:span 100}
.n-101{grid-column:span 101}
.n-102{grid-column:span 102}
.n-103{grid-column:span 103}
.n-104{grid-column:span 104}
.n-105{grid-column:span 105}
.n-106{grid-column:span 106}
.n-107{grid-column:span 107}
.n-108{grid-column:span 108}
.n-109{grid-column:span 109}
.n-110{grid-column:span 110}
.n-111{grid-column:span 111}
.n-112{grid-column:span 112}
.n-113{grid-column:span 113}
.n-114{grid-column:span 114}
.n-115{grid-column:span 115}
.n-116{grid-column:span 116}
.n-117{grid-column:span 117}
.n-118{grid-column:span 118}
.n-119{grid-column:span 119}
.n-120{grid-column:span 120}
.n-121{grid-column:span 121}
.n-122{grid-column:span 122}
.n-123{grid-column:span 123}
.n-124{grid-column:span 124}
.n-125{grid-column:span 125}
.n-126{grid-column:span 126}
.n-127{grid-column:span 127}
.n-128{grid-column:span 128}
.n-129{grid-column:span 129}
.n-130{grid-column:span 130}
.n-131{grid-column:span 131}
.n-132{grid-column:span 132}
.n-133{grid-column:span 133}
.n-134{grid-column:span 134}
.n-135{grid-column:span 135}
.n-136{grid-column:span 136}
.n-137{grid-column:span 137}
.n-138{grid-column:span 138}
.n-139{grid-column:span 139}
.n-140{grid-column:span 140}
.n-141{grid-column:span 141}
.n-142{grid-column:span 142}
.n-143{grid-column:span 143}
.n-144{grid-column:span 144}
.n-145{grid-column:span 145}
.n-146{grid-column:span 146}
.n-147{grid-column:span 147}
.n-148{grid-column:span 148}
.n-149{grid-column:span 149}
.n-150{grid-column:span 150}
.n-151{grid-column:span 151}
.n-152{grid-column:span 152}
.n-153{grid-column:span 153}
.n-154{grid-column:span 154}
.n-155{grid-column:span 155}
.n-156{grid-column:span 156}
.n-157{grid-column:span 157}
.n-158{grid-column:span 158}
.n-159{grid-column:span 159}
.n-160{grid-column:span 160}
.n-161{grid-column:span 161}
.n-162{grid-column:span 162}
.n-163{grid-column:span 163}
.n-164{grid-column:span 164}
.n-165{grid-column:span 165}
.n-166{grid-column:span 166}
.n-167{grid-column:span 167}
.n-168{grid-column:span 168}
.n-169{grid-column:span 169}
.n-170{grid-column:span 170}
.n-171{grid-column:span 171}
.n-172{grid-column:span 172}
.n-173{grid-column:span 173}
.n-174{grid-column:span 174}
.n-175{grid-column:span 175}
.n-176{grid-column:span 176}
.n-177{grid-column:span 177}
.n-178{grid-column:span 178}
.n-179{grid-column:span 179}
.n-180{grid-column:span 180}
.n-181{grid-column:span 181}
.n-182{grid-column:span 182}
.n-183{grid-column:span 183}
.n-184{grid-column:span 184}
.n-185{grid-column:span 185}
.n-186{grid-column:span 186}
.n-187{grid-column:span 187}
.n-188{grid-column:span 188}
.n-189{grid-column:span 189}
.n-190{grid-column:span 190}
.n-191{grid-column:span 191}
.n-192{grid-column:span 192}
.n-193{grid-column:span 193}
.n-194{grid-column:span 194}
.n-195{grid-column:span 195}
.n-196{grid-column:span 196}
.n-197{grid-column:span 197}
.n-198{grid-column:span 198}
.n-199{grid-column:span 199}
.n-200{grid-column:span 200}
.n-201{grid-column:span 201}
.n-202{grid-column:span 202}
.n-203{grid-column:span 203}
.n-204{grid-column:span 204}
.n-205{grid-column:span 205}
.n-206{grid-column:span 206}
.n-207{grid-column:span 207}
.n-208{grid-column:span 208}
.n-209{grid-column:span 209}
.n-210{grid-column:span 210}
.n-211{grid-column:span 211}
.n-212{grid-column:span 212}
.n-213{grid-column:span 213}
.n-214{grid-column:span 214}
.n-215{grid-column:span 215}
.n-216{grid-column:span 216}
.n-217{grid-column:span 217}
.n-218{grid-column:span 218}
.n-219{grid-column:span 219}
.n-220{grid-column:span 220}
.n-221{grid-column:span 221}
.n-222{grid-column:span 222}
.n-223{grid-column:span 223}
.n-224{grid-column:span 224}
.n-225{grid-column:span 225}
.n-226{grid-column:span 226}
.n-227{grid-column:span 227}
.n-228{grid-column:span 228}
.n-229{grid-column:span 229}
.n-230{grid-column:span 230}
.n-231{grid-column:span 231}
.n-232{grid-column:span 232}
.n-233{grid-column:span 233}
.n-234{grid-column:span 234}
.n-235{grid-column:span 235}
.n-236{grid-column:span 236}
.n-237{grid-column:span 237}
.n-238{grid-column:span 238}
.n-239{grid-column:span 239}
.n-240{grid-column:span 240}
.n-241{grid-column:span 241}
.n-242{grid-column:span 242}
.n-243{grid-column:span 243}
.n-244{grid-column:span 244}
.n-245{grid-column:span 245}
.n-246{grid-column:span 246}
.n-247{grid-column:span 247}
.n-248{grid-column:span 248}
.n-249{grid-column:span 249}
.n-250{grid-column:span 250}
.n-251{grid-column:span 251}
.n-252{grid-column:span 252}
.n-253{grid-column:span 253}
.n-254{grid-column:span 254}
.n-255{grid-column:span 255}
.n-256{grid-column:span 256}
.n-257{grid-column:span 257}
.n-258{grid-column:span 258}
.n-259{grid-column:span 259}
.n-260{grid-column:span 260}
.n-261{grid-column:span 261}
.n-262{grid-column:span 262}
.n-263{grid-column:span 263}
.n-264{grid-column:span 264}
.n-265{grid-column:span 265}
.n-266{grid-column:span 266}
.n-267{grid-column:span 267}
.n-268{grid-column:span 268}
.n-269{grid-column:span 269}
.n-270{grid-column:span 270}
.n-271{grid-column:span 271}
.n-272{grid-column:span 272}
.n-273{grid-column:span 273}
.n-274{grid-column:span 274}
.n-275{grid-column:span 275}
.n-276{grid-column:span 276}
.n-277{grid-column:span 277}
.n-278{grid-column:span 278}
.n-279{grid-column:span 279}
.n-280{grid-column:span 280}
.n-281{grid-column:span 281}
.n-282{grid-column:span 282}
.n-283{grid-column:span 283}
.n-284{grid-column:span 284}
.n-285{grid-column:span 285}
.n-286{grid-column:span 286}
.n-287{grid-column:span 287}
.n-288{grid-column:span 288}