/* fiveb.ar's own fonts, from fivebar/home's public/font (SIL Open Font
   License, font/LICENSE.txt): IBM Plex Sans for words and Literata at 500
   for headings and figures. Greek and Cyrillic are fetched only by a page
   drawing them, which this one does not. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("font/IBMPlexSans-latin.woff2") format("woff2") }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("font/IBMPlexSans-greek-cyrillic.woff2") format("woff2");
  unicode-range: U+0370-03FF, U+0400-052F, U+1C80-1C8F, U+1F00-1FFF, U+2DE0-2DFF, U+A640-A69F }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("font/Literata-500.woff2") format("woff2") }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("font/Literata-500-greek-cyrillic.woff2") format("woff2");
  unicode-range: U+0370-03FF, U+0400-052F, U+1C80-1C8F, U+1F00-1FFF, U+2DE0-2DFF, U+A640-A69F }
:root {
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --paper: #ffffff; --ink: #141414; --ink-soft: #444444; --graphite: #6b6b6b;
  --rule: #eaeaea; --rule-faint: #f3f3f3; --biro: #1b3a8a;
  --good: #0e7a4a; --good-bg: #e2f3e9; --ni: #9a5b00; --ni-bg: #fcefd6; --ni-bar: #e0a43a;
  --poor: #bf3328; --poor-bg: #fbe4e1; --none: #e4e4e4;
  --b1: #d6efe0; --b2: #f1f4d2; --b3: #fbe6c8; --b4: #f8d3cd;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141414; --ink: #ebebeb; --ink-soft: #bbbbbb; --graphite: #949494;
    --rule: #2b2b2b; --rule-faint: #1f1f1f; --biro: #93aef5;
    --good: #4cc28a; --good-bg: #15301f; --ni: #e0a43a; --ni-bg: #33260f; --ni-bar: #e0a43a;
    --poor: #f07466; --poor-bg: #3a1a17; --none: #2b2b2b;
    --b1: #173322; --b2: #2e3216; --b3: #3b2c14; --b4: #43201c;
  }
}
* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.5 var(--sans) }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px }
a { color: var(--biro) }
h1, h2, h3 { font-family: var(--serif); font-weight: 500 }
/* The logo and name as on fiveb.ar's own top bar, then the page's name. */
.top { padding-bottom: .85rem; margin: 0 0 24px; border-bottom: 1px solid var(--rule) }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none;
  font-weight: 500; font-size: 1.05rem; letter-spacing: .02em }
.brand img { width: 30px; height: 21px }
.brand:hover span { text-decoration: underline }
h1 { font-size: 1.5rem; margin: 0 0 16px }
h2 { font-size: 1.05rem; margin: 40px 0 4px }
.lede { color: var(--graphite); font-size: .85rem; margin: 0 0 12px }
.banner { border-radius: 10px; padding: 16px 18px; font-weight: 600 }
.banner.up { background: var(--good-bg); color: var(--good) }
.banner.degraded { background: var(--ni-bg); color: var(--ni) }
.banner.down { background: var(--poor-bg); color: var(--poor) }
.checked { color: var(--graphite); font-size: .85rem; margin: 8px 0 0 }
.checked.stale { color: var(--poor) }
.rows { list-style: none; margin: 0; padding: 0 }
.rows li { border-top: 1px solid var(--rule); padding: 12px 0 }
.head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline }
.name { font-weight: 500 }
.about, .why { color: var(--graphite); font-size: .85rem; margin: 2px 0 0 }
.why { color: var(--ink-soft) }
.pill { font-size: .8rem; font-weight: 600; white-space: nowrap }
.pill.up { color: var(--good) } .pill.degraded { color: var(--ni) }
.pill.down { color: var(--poor) } .pill.unknown { color: var(--graphite) }
.bar { display: flex; gap: 1px; height: 22px; margin: 8px 0 4px }
.bar i { flex: 1; border-radius: 1px; background: var(--none) }
.bar i.up { background: var(--good) } .bar i.part { background: var(--ni-bar) }
.bar i.down { background: var(--poor) }
/* Forced colours (Windows' contrast themes) drop every background, so the days are drawn in the theme's own colours:
   a day up solid, one partly up hatched, one down an empty box, one not checked faint. */
@media (forced-colors: active) {
  .bar i { forced-color-adjust: none; background: GrayText }
  .bar i.up { background: CanvasText }
  .bar i.part { background: repeating-linear-gradient(135deg, CanvasText 0 1px, Canvas 1px 4px) }
  .bar i.down { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText }
}
.span { display: flex; justify-content: space-between; color: var(--graphite); font-size: .75rem }
.grid-wrap { overflow-x: auto }
table.grid { border-collapse: separate; border-spacing: 3px; font-size: .9rem;
  font-variant-numeric: tabular-nums; margin: 8px 0 0 }
.grid th { font-weight: 500; color: var(--ink-soft); padding: 2px 6px; white-space: nowrap }
/* Each heading turned to read upwards, centred over its column. */
.grid thead th { text-align: center; vertical-align: bottom; padding: 6px 2px }
.grid thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg) }
.grid tbody th { text-align: right }
.grid td { font-family: var(--serif); font-weight: 500; text-align: center; min-width: 48px; padding: 9px 5px; border-radius: 5px }
.b1 { background: var(--b1) } .b2 { background: var(--b2) }
.b3 { background: var(--b3) } .b4 { background: var(--b4) }
.lost { color: var(--poor); font-weight: 600 } .none { color: var(--graphite) }
.self { background: var(--rule-faint) }
.key { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--graphite); font-size: .75rem; margin: 10px 0 0 }
.key span::before { content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--k) }
@media (max-width: 600px) {
  table.grid { font-size: .75rem; border-spacing: 2px; margin-left: -4px }
  .grid th { padding: 2px 3px }
  .grid td { min-width: 0; padding: 7px 2px }
}
.incident { border-top: 1px solid var(--rule); padding: 12px 0 }
.incident h3 { font-size: 1rem; margin: 0 }
.incident time { color: var(--graphite); font-size: .8rem }
.incident p { margin: 6px 0 0; color: var(--ink-soft) }
footer { color: var(--graphite); font-size: .8rem; margin: 48px 0 0; border-top: 1px solid var(--rule); padding: 16px 0 0 }