/* Status page. External file: the CSP allows style-src 'self' only. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1d1d1f;
  --muted: #6b6b70;
  --line: #d8d8dc;
  --tile: #f4f4f6;
  --ok: #1a7f37;
  --fail: #c62828;
  --warn: #b26a00;
  --off: #9a9aa0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161618;
    --fg: #ececef;
    --muted: #a0a0a8;
    --line: #34343a;
    --tile: #222226;
    --ok: #4cc26a;
    --fail: #ef6b6b;
    --warn: #e0a040;
    --off: #6c6c72;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 96rem;
  padding: 1rem;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
}
header { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
.meta { color: var(--muted); margin: 0.5rem 0; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
main > section + section { margin-top: 1.5rem; }
.actions { display: flex; gap: 0.5rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 1.15rem; height: 1.15rem; vertical-align: -0.2rem; flex: none; }
.ico.fill { fill: currentColor; stroke: none; }
.ico.ok { color: var(--ok); }
.ico.fail { color: var(--fail); }
.ico.warn { color: var(--warn); }
button { font-size: 1rem; cursor: pointer; }
button.icon { background: none; border: 1px solid var(--line); border-radius: 0.5rem; color: inherit; padding: 0.4rem; line-height: 0; }
button.icon svg { width: 1.4rem; height: 1.4rem; }
button.icon:hover, button.icon:focus-visible { border-color: var(--fg); }
button.icon.big { padding: 1rem; }
button.icon.big svg { width: 3rem; height: 3rem; }
#login-panel { display: flex; justify-content: center; padding: 4rem 0; }
#login-panel[hidden] { display: none; }
#error { color: var(--fail); min-height: 1.6rem; margin: 0.5rem 0; }
#error .ico { width: 1.6rem; height: 1.6rem; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.tile { background: var(--tile); border-radius: 0.5rem; padding: 0.75rem; display: flex; align-items: center; gap: 0.6rem; }
.tile .ico { width: 1.6rem; height: 1.6rem; }
.tile.wide { grid-column: span 2; justify-content: center; }
.tile .value { font-size: 1.6rem; font-weight: 600; }
progress { width: 100%; height: 1rem; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { background: var(--tile); border-radius: 1rem; padding: 0.25rem 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
.segs { display: inline-flex; gap: 2px; vertical-align: middle; }
.segs i { display: block; width: 0.55rem; height: 0.8rem; border-radius: 2px; background: var(--line); }
.segs i.on { background: var(--warn); }
.segs.done i.on { background: var(--ok); }
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.filters label { display: flex; gap: 0.4rem; align-items: center; }
.filters input, .filters select { font-size: 0.95rem; padding: 0.3rem; max-width: 100%; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { position: sticky; top: 0; background: var(--bg); white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.msg { max-width: 28rem; overflow-wrap: anywhere; }
.dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--off); }
.dot.on { background: var(--ok); }
.warn { color: var(--warn); font-weight: 600; }
@media (max-width: 40rem) {
  .tile.wide { grid-column: span 1; }
}