:root {
  color-scheme: light dark;
  --bg: #f4f4f8;
  --panel: #ffffff;
  --surface: #ebebf1;
  --border: color-mix(in srgb, var(--bg) 80%, black);
  --ink: rgba(0, 0, 0, 0.88);
  --ink-dim: rgba(0, 0, 0, 0.62);
  --accent: #4f46e5;
  --accent-text: #4338ca;
  --ok: #047857;
  --ok-wash: color-mix(in srgb, #00a848 14%, transparent);
  --warn: #9a3412;
  --warn-wash: color-mix(in srgb, #f97316 16%, transparent);
  --bad: #b91c1c;
  --bad-wash: color-mix(in srgb, #ef4444 13%, transparent);
  --radius: 10px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181c;
    --panel: #1e1f24;
    --surface: #2b2c31;
    --border: #3b3c42;
    --ink: #e6e7e8;
    --ink-dim: #a4a5af;
    --accent-text: #8b93f8;
    --ok: #4ade80;
    --warn: #fb923c;
    --bad: #f87171;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.top, main, .foot { max-width: 1560px; margin: 0 auto; padding: 0 20px; }
[hidden] { display: none !important; }
.top { display: flex; gap: 16px; align-items: flex-start; padding-top: 28px; padding-bottom: 8px; }
.brand-icon { border-radius: 10px; flex: none; margin-top: 4px; }
h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
.lede { margin: 0; max-width: 820px; color: var(--ink-dim); }

main { padding-bottom: 24px; }
section { margin-top: 18px; }

.banner { border-radius: var(--radius); padding: 14px 18px; border: 1px solid var(--border); background: var(--panel); }
.banner strong { font-size: 18px; }
.banner ul { margin: 8px 0 0; padding-left: 20px; }
.banner-ok { background: var(--ok-wash); border-color: var(--ok); }
.banner-ok strong { color: var(--ok); }
.banner-warn { background: var(--warn-wash); border-color: var(--warn); }
.banner-warn strong { color: var(--warn); }
.banner-bad { background: var(--bad-wash); border-color: var(--bad); }
.banner-bad strong { color: var(--bad); }

.summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; justify-content: space-between; }
.tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 18px; min-width: 150px; }
.tile-number { font-size: 26px; font-weight: 650; line-height: 1.2; }
.tile-ok .tile-number { color: var(--ok); }
.tile-title { color: var(--ink-dim); font-size: 13px; }
.clock-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.clock { margin: 0; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 8px; border: 0;
  background: var(--accent); color: #fff;
}
button:disabled { opacity: 0.55; cursor: progress; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

table.board { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
caption { text-align: left; font-size: 18px; font-weight: 650; padding: 4px 2px 8px; }
.board thead th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-dim); background: var(--surface); padding: 8px 10px; }
.board tbody.site { border-top: 1px solid var(--border); }
.board td, .board tbody th { padding: 10px; vertical-align: top; text-align: left; font-weight: 400; }
.board .data-row .name-cell { font-weight: 650; white-space: nowrap; }
.board .request-row > td { padding: 0 10px 8px; }

.mono { font-family: var(--mono); font-size: 12.5px; }
.key { word-break: break-all; display: inline-block; max-width: 34ch; font-size: 12px; user-select: all; }
ul.plain { list-style: none; margin: 0; padding: 0; }
.note { display: block; color: var(--ink-dim); font-size: 12.5px; }
li > .note { display: inline; margin-left: 6px; }
.good { color: var(--ok); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.mark { font-weight: 700; }
.mark-ok { color: var(--ok); }
.mark-pending { color: var(--ink-dim); }
.mark-elsewhere, .mark-noresolver, .mark-nocontenthash { color: var(--bad); }
.mark-unreachable { color: var(--warn); }

.badge { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 650; font-size: 13px; margin-right: 6px; }
.badge-works { background: var(--ok-wash); color: var(--ok); }
.badge-slow, .badge-unsure { background: var(--warn-wash); color: var(--warn); }
.badge-broken { background: var(--bad-wash); color: var(--bad); }
.badge-pending { background: var(--surface); color: var(--ink-dim); }
.badge-skipped { display: none; }
.verdict-text { display: block; margin-top: 4px; font-size: 13.5px; }

details.requests summary { cursor: pointer; color: var(--ink-dim); font-size: 12.5px; }
table.request-list { margin-top: 6px; border-collapse: collapse; font-size: 12.5px; font-family: var(--mono); }
.request-list th, .request-list td { padding: 2px 12px 2px 0; text-align: left; font-weight: 400; }
.request-list thead th { color: var(--ink-dim); background: none; text-transform: none; letter-spacing: 0; font-size: inherit; padding: 2px 12px 2px 0; }
.request-list td.num { text-align: right; }

.foot { color: var(--ink-dim); font-size: 13px; padding-bottom: 40px; }

@media (max-width: 720px) {
  .top { padding-top: 18px; }
  h1 { font-size: 22px; }
  .tile { flex: 1 1 100px; min-width: 0; padding: 8px 12px; }
  table.board, .board thead, .board tbody, .board tr, .board td, .board tbody th, .board caption { display: block; }
  .board thead { position: absolute; left: -9999px; }
  table.board { border: 0; background: none; }
  .board tbody.site { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; padding: 4px 0; }
  .board td, .board tbody th { display: block; padding: 5px 12px; }
  .board td::before, .board tbody th::before { content: attr(data-label); display: block; color: var(--ink-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
  .board .data-row .name-cell { font-size: 17px; }
  .board .request-row > td { display: block; padding: 0 12px 6px; }
  .board .request-row > td::before { content: none; }
  .key { max-width: none; }
  table.request-list { display: table; font-size: 11.5px; }
  .request-list thead { position: static; display: table-header-group; }
  .request-list tbody { display: table-row-group; border: 0; margin: 0; padding: 0; background: none; }
  .request-list tr { display: table-row; }
  .request-list td, .request-list th { display: table-cell; padding: 2px 8px 2px 0; }
  .request-list td::before { content: none; display: none; }
}