/* status.tomwoods.com — public status page. Canonical doc: docs/status-page.md.
   Bars wear the fixed status palette (good / warning / serious / critical) and are never colour-alone: every bar has a
   text alternative + tooltip, every card a text uptime and a "Days with downtime" table. Text wears text tokens
   (AAA: >= 7:1 body, >= 4.5:1 large) in both schemes. No web fonts, no remote resources (CSP default-src 'none'). */
:root {
  color-scheme: light dark;
  --plane: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --line: #e1e0d9; --rule: #c3c2b7;
  --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --critical: #d03b3b;
  --t-ok: #14631a; --t-partial: #7a3e00; --t-major: #8f1f1f;
  --banner-ok: #1b6b1f; --banner-partial: #fab219; --banner-major: #b02a2a;
  --on-banner-ok: #ffffff; --on-banner-partial: #0b0b0b; --on-banner-major: #ffffff;
  --button: #0b0b0b; --on-button: #ffffff;
  /* logo (official tomwoods.com header SVG, designed for a dark header): light = navy ink + white stars */
  --logo-ink: #000f25; --logo-knock: #ffffff;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --plane: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --line: #2c2c2a; --rule: #383835;
    --t-ok: #7fdc7f; --t-partial: #ffc85a; --t-major: #ff9a8a;
    --button: #f2f2ee; --on-button: #0b0b0b;
    --logo-ink: #ffffff; --logo-knock: #000f25;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--plane); color: var(--ink); font: 400 1rem/1.5 var(--sans); }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 0.5rem; top: -3rem; padding: 0.5rem 0.75rem; background: var(--button); color: var(--on-button); z-index: 3; }
.skip:focus { top: 0.5rem; }

.masthead, main { width: min(100% - 2rem, 54rem); margin-inline: auto; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.75rem 0 2.5rem; }
.brand { display: flex; align-items: center; gap: 0.85rem; }
.wordmark { display: block; line-height: 0; color: var(--logo-ink); }
.logo { display: block; width: 121px; height: 40px; }
.logo .ink { fill: var(--logo-ink); }
.logo .knock { fill: var(--logo-knock); }
.brand__status { padding-left: 0.85rem; border-left: 1px solid var(--rule); color: var(--ink-2); text-decoration: none;
  font-family: var(--serif); font-size: 1.6rem; letter-spacing: -0.01em; line-height: 40px; }
.subscribe {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 4px;
  background: var(--button); color: var(--on-button); text-decoration: none;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}

.banner { border-radius: 4px; padding: 1.4rem 1.5rem; margin-bottom: 3.5rem; }
.banner h1 { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.005em; }
.banner--ok { background: var(--banner-ok); color: var(--on-banner-ok); }
.banner--partial { background: var(--banner-partial); color: var(--on-banner-partial); }
.banner--major { background: var(--banner-major); color: var(--on-banner-major); }

.caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 0.6rem; color: var(--ink-2); font-size: 0.875rem; }
.caption p { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--c); }

.sites { margin: 0 0 1.5rem; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.site { padding: 1.25rem 1.25rem 1rem; }
.site + .site { border-top: 1px solid var(--line); }
.site__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.6rem; }
.site__name { margin: 0; font-size: 1rem; font-weight: 500; }
.site__host { color: var(--ink-2); font-weight: 400; font-size: 0.875rem; white-space: nowrap; }
.state { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; }
.state::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c); }
.state--ok { color: var(--t-ok); --c: var(--good); }
.state--partial { color: var(--t-partial); --c: var(--serious); }
.state--major { color: var(--t-major); --c: var(--critical); }

/* Bars: the button is the whole slot (hit target incl. the 2px gap); the paint is inset by 1px per side. */
.bars { display: flex; height: 2.125rem; }
.bar { position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.bar::before { content: ""; position: absolute; inset: 0 1px; border-radius: 2px; background: var(--c); }
.bar:hover::before, .bar:focus-visible::before { inset: -2px 0; }
.bar:focus-visible { z-index: 1; outline-offset: 3px; }
.lv-ok { --c: var(--good); }
.lv-minor { --c: var(--warn); }
.lv-partial { --c: var(--serious); }
.lv-major { --c: var(--critical); }

.site__foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.55rem; color: var(--ink-2); font-size: 0.8125rem; white-space: nowrap; }
.site__foot .rule { flex: 1 1 auto; height: 1px; background: var(--rule); }
.w30 { display: none; }

.days { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--ink-2); }
.days summary { cursor: pointer; width: fit-content; }
.days table { width: 100%; margin-top: 0.5rem; border-collapse: collapse; table-layout: fixed; color: var(--ink); overflow-wrap: anywhere; }
.days th, .days td { padding: 0.3rem 0.5rem 0.3rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.days th { font-weight: 500; color: var(--ink-2); }
.days th:nth-child(-n+3) { width: 22%; }

.updated { margin: 0 0 3rem; color: var(--ink-2); font-size: 0.8125rem; }

.tip {
  position: fixed; z-index: 2; max-width: min(20rem, 100vw - 1rem); padding: 0.55rem 0.7rem; border-radius: 6px;
  background: var(--button); color: var(--on-button); font-size: 0.8125rem; line-height: 1.4; pointer-events: none;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
}
.tip strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.tip span { display: block; }

/* Narrow screens: the last 30 days (no horizontal scroll at 360 px; bars stay tappable). */
@media (max-width: 40rem) {
  .bar:nth-child(-n+60) { display: none; }
  .w90 { display: none; }
  .w30 { display: inline; }
  .site { padding-inline: 1rem; }
  .banner { margin-bottom: 2.25rem; }
}

@media (forced-colors: active) {
  .bar::before, .swatch, .state::before { forced-color-adjust: none; border: 1px solid CanvasText; }
}
@media print {
  .subscribe, .skip, .tip { display: none; }
  .days[open] summary ~ * { display: table; }
}