/* Tab status — styles. The variables are tab.bot's own (its :root), reused as-is; dark values are the same scale inverted. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-6.woff2) format("woff2"); unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-5.woff2) format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* tab.bot variables */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --type-display: 56px; --line-display: 64px; --type-display-small: 40px; --line-display-small: 48px;
  --type-heading: 28px; --line-heading: 32px; --type-body: 15px; --line-body: 22px; --type-meta: 13px; --line-meta: 18px;
  --type-label: 12px; --line-label: 16px; --tracking-label: .08em; --tracking-display: -.03em;
  --weight-normal: 400; --weight-strong: 600;
  --radius-card: 12px; --radius-glyph: 8px; --radius-round: 50%; --border-width: 1px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #111112; --paper: #fdfdfc; --muted: #626a78; --border-color: #d8dbe1; --surface-tint: #f0f3f9;
  --cream: #f4f3f0; --action: #151516;
  /* state colors: tab.bot's status-badge palette */
  --ok: #237143; --ok-bg: #e6f7eb;
  --slow: #825b08; --slow-bg: #fff3d8;
  --bad: #8e3232; --bad-bg: #fbe8e8;
  --major: #9b2929; --major-bg: #fbe8e8;
  --check: #596274; --check-bg: #eef0f5;
  --mark: url(tab-icon-128.png);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f4f3f0; --paper: #151516; --muted: #a3a8b3; --border-color: #2c2d31; --surface-tint: #1c1d20; --cream: #f4f3f0;
    --ok: #5fcf85; --ok-bg: #13301d; --slow: #e3b25a; --slow-bg: #332812; --bad: #e8807f; --bad-bg: #3a1a1a;
    --major: #ff8a8a; --major-bg: #3f1717; --check: #a3a8b3; --check-bg: #24262b;
  }
}
:root[data-theme="dark"] {
  --ink: #f4f3f0; --paper: #151516; --muted: #a3a8b3; --border-color: #2c2d31; --surface-tint: #1c1d20; --cream: #f4f3f0;
  --ok: #5fcf85; --ok-bg: #13301d; --slow: #e3b25a; --slow-bg: #332812; --bad: #e8807f; --bad-bg: #3a1a1a;
  --major: #ff8a8a; --major-bg: #3f1717; --check: #a3a8b3; --check-bg: #24262b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: var(--weight-normal) var(--type-body)/var(--line-body) var(--sans);
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-3); border-radius: var(--radius-glyph); }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 10; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 720px; margin: 0 auto; padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-4) 0; width: 100%;
}
.brand { font: var(--weight-normal) 30px/1 var(--serif); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.mark { width: 32px; height: 32px; flex: none; display: inline-block; background: var(--mark) 50% / 116% no-repeat; border-radius: var(--radius-glyph); }
.top-label { font: var(--weight-strong) var(--type-label)/var(--line-label) var(--sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }

.page { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); width: 100%; flex: 1; }
.eyebrow { margin: 0 0 var(--space-3); font: var(--weight-strong) var(--type-label)/var(--line-label) var(--sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.headline {
  margin: 0; font: var(--weight-normal) var(--type-display-small)/var(--line-display-small) var(--serif);
  letter-spacing: var(--tracking-display); text-wrap: balance; display: flex; align-items: baseline; gap: var(--space-3);
}
@media (min-width: 600px) { .headline { font-size: var(--type-display); line-height: var(--line-display); } }
.updated { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--type-meta); line-height: var(--line-meta); }
.updated time { color: var(--ink); }
#updated-ago:not(:empty)::before { content: " · "; }
.updated.stale #updated-ago { color: var(--slow); }

.dot { width: 10px; height: 10px; border-radius: var(--radius-round); display: inline-block; flex: none; background: var(--check); }
.dot-big { width: 14px; height: 14px; transform: translateY(-2px); }
.dot-operational { background: var(--ok); }
.dot-slower { background: var(--slow); }
.dot-degraded { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.dot-major { background: var(--major); box-shadow: 0 0 0 3px var(--major-bg); }
.dot-checking { background: transparent; border: 2px solid var(--check); }

.card { margin-top: var(--space-6); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-card); background: var(--paper); overflow: hidden; }
.rows, .sub, .incident-list { list-style: none; margin: 0; padding: 0; }
.row { border-top: var(--border-width) solid var(--border-color); }
.rows > .row:first-child { border-top: 0; }
.row-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); }
.row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-name { font-weight: var(--weight-strong); }
.row-note { color: var(--muted); font-size: var(--type-meta); line-height: var(--line-meta); }
.state { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; font-size: var(--type-meta); line-height: var(--line-meta); white-space: nowrap; }
.state-operational { color: var(--ok); }
.state-slower { color: var(--slow); }
.state-degraded { color: var(--bad); }
.state-major { color: var(--major); font-weight: var(--weight-strong); }
.state-checking { color: var(--check); }
.sub { background: var(--surface-tint); }
.sub-row .row-main { padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--space-5)); }
.sub-row .row-name { font-weight: var(--weight-normal); }
.row[data-state="major"] .row-main { background: var(--major-bg); }

.incidents { margin-top: var(--space-7); }
.section-title { margin: 0 0 var(--space-4); font: var(--weight-normal) var(--type-heading)/var(--line-heading) var(--serif); letter-spacing: -.02em; }
.incident { padding: var(--space-4) 0; border-top: var(--border-width) solid var(--border-color); }
.incident-head { display: flex; gap: var(--space-3); color: var(--muted); font-size: var(--type-meta); line-height: var(--line-meta); }
.incident-open .incident-status { color: var(--bad); font-weight: var(--weight-strong); }
.incident-title { margin: var(--space-1) 0 var(--space-1); font-size: var(--type-body); line-height: var(--line-body); font-weight: var(--weight-strong); }
.incident-body { margin: 0; color: var(--muted); }
.incident-none { border-top: 0; padding-top: 0; }

.foot { max-width: 720px; margin: 0 auto; padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); width: 100%; color: var(--muted); font-size: var(--type-meta); line-height: var(--line-meta); border-top: var(--border-width) solid var(--border-color); }
.foot p { margin: 0; }
.foot a { color: inherit; text-decoration: none; }

@media (max-width: 420px) {
  .row-main { gap: var(--space-3); }
}
@media (prefers-reduced-motion: no-preference) { .dot-big { transition: background .3s; } }