/* Defib status and console. The site's neon look: near-black ground, glow on marks only, 6px corners. */
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/big-shoulders-display-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: Inter; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #070503; --panel: #120e08; --panel-2: #1a140b; --line: #3a3018; --line-strong: #8f8246;
  --text: #fff8ec; --mute: #d6caa8; --bolt: #eeff41; --ink: #1a0a00;
  --up: #4ade80; --degraded: #fbbf24; --down: #f01440; --unknown: #8f8246; --info: #7cc4ff; --maintenance: #b49cff;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: Inter, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 6px; --gutter: clamp(1rem, 4vw, 2rem);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--bolt); }
:focus-visible { outline: 3px solid var(--bolt); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: 60rem; margin-inline: auto; padding-inline: var(--gutter); }
.wide { max-width: 80rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mute { color: var(--mute); }
.small { font-size: 0.875rem; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h2 { font: 900 1.6rem/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; margin: 2.2rem 0 0.8rem; }
p { margin: 0 0 0.8em; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand svg { width: 22px; height: 26px; filter: drop-shadow(0 0 2px rgb(238 255 65 / 0.9)) drop-shadow(0 0 10px rgb(238 255 65 / 0.45)); }
.brand path { fill: none; stroke: var(--bolt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand b { font: 900 1.7rem/1 var(--display); letter-spacing: 0.04em; }
.brand span { font: 600 0.8rem/1 var(--body); color: var(--mute); text-transform: uppercase; letter-spacing: 0.14em; border-left: 1px solid var(--line-strong); padding-left: 0.6rem; }
.top nav { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; }

/* the big line */
.banner { margin: 1.6rem 0 0.4rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-left: 6px solid var(--unknown); border-radius: var(--r); background: var(--panel); display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner h1 { font: 900 clamp(1.7rem, 5vw, 2.4rem)/1.05 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.banner[data-state="up"] { border-left-color: var(--up); }
.banner[data-state="degraded"] { border-left-color: var(--degraded); }
.banner[data-state="down"] { border-left-color: var(--down); }

/* state dots and pills */
.dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--unknown); flex: none; }
[data-state="up"] > .dot, .dot[data-state="up"] { background: var(--up); box-shadow: 0 0 8px rgb(74 222 128 / 0.6); }
[data-state="degraded"] > .dot, .dot[data-state="degraded"] { background: var(--degraded); box-shadow: 0 0 8px rgb(251 191 36 / 0.6); }
[data-state="down"] > .dot, .dot[data-state="down"] { background: var(--down); box-shadow: 0 0 8px rgb(240 20 64 / 0.7); }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.pill[data-state="up"] { color: var(--up); }
.pill[data-state="degraded"] { color: var(--degraded); }
.pill[data-state="down"] { color: #ff5a78; }
.pill[data-state="unknown"] { color: var(--mute); }

/* groups */
.group { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); margin-bottom: 1rem; }
.group > header { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.group > header h3 { font-size: 1.05rem; }
.item { padding: 0.8rem 1.1rem; border-top: 1px solid var(--line); }
.item:first-of-type { border-top: 0; }
.item .row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 26px; margin-top: 0.55rem; }
.bars i { display: block; border-radius: 1px; background: #2a2416; }
.bars i[data-v="good"] { background: var(--up); opacity: 0.85; }
.bars i[data-v="some"] { background: var(--degraded); }
.bars i[data-v="bad"] { background: var(--down); }
.bars-foot { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--mute); margin-top: 0.25rem; }
@media (max-width: 560px) { .bars { grid-template-columns: repeat(30, 1fr); } .bars i:nth-child(-n+60) { display: none; } .bars-foot .long { display: none; } }
@media (min-width: 561px) { .bars-foot .short { display: none; } }

/* notices */
.notice { border: 1px solid var(--line); border-left: 6px solid var(--info); border-radius: var(--r); padding: 0.9rem 1.1rem; margin: 0.8rem 0; background: var(--panel); }
.notice[data-level="degraded"] { border-left-color: var(--degraded); }
.notice[data-level="down"] { border-left-color: var(--down); }
.notice[data-level="maintenance"] { border-left-color: var(--maintenance); }
.notice[data-resolved] { opacity: 0.7; border-left-color: var(--up); }
.notice h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.notice p { white-space: pre-wrap; margin: 0.3rem 0; }

footer.foot { border-top: 1px solid var(--line); margin-top: 3rem; padding-block: 1.4rem 2.4rem; font-size: 0.875rem; color: var(--mute); }

/* ---------- console ---------- */
.cnav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 1.2rem 0 0; position: sticky; top: 0; background: var(--bg); padding: 0.6rem 0; z-index: 2; border-bottom: 1px solid var(--line); }
.cnav a { text-decoration: none; padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.875rem; }
.cnav a:hover { border-color: var(--bolt); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.tile { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 0.9rem 1rem; }
.tile b { display: block; font: 900 2rem/1.05 var(--display); letter-spacing: 0.02em; margin-top: 0.2rem; }
.tile[data-state="down"] b { color: #ff5a78; }
.tile[data-state="degraded"] b { color: var(--degraded); }
.tile[data-state="up"] b { color: var(--up); }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tbl th, .tbl td { text-align: left; padding: 0.55rem 0.6rem; border-top: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); font-weight: 600; border-top: 0; }
.tbl td.num { font-family: var(--mono); font-size: 0.85rem; white-space: nowrap; }
.tbl .grp td { background: var(--panel-2); font-weight: 700; }
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.tag { display: inline-block; font-size: 0.7rem; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 0.35rem; color: var(--mute); margin-left: 0.35rem; vertical-align: 1px; }
button, .btn { font: 600 0.9rem/1 var(--body); color: var(--ink); background: var(--bolt); border: 1px solid var(--bolt); border-radius: var(--r); padding: 0.6rem 0.95rem; cursor: pointer; text-decoration: none; display: inline-block; }
button.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
button.danger { background: transparent; color: #ff5a78; border-color: #ff5a78; }
button:disabled { opacity: 0.5; cursor: wait; }
.bar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
form.post { display: grid; gap: 0.7rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 1rem; }
label { display: grid; gap: 0.3rem; font-size: 0.875rem; font-weight: 600; }
input, textarea, select { font: 400 1rem/1.4 var(--body); color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0.55rem 0.7rem; width: 100%; }
textarea { min-height: 5rem; resize: vertical; }
.msg { min-height: 1.4em; font-size: 0.9rem; }
.msg[data-bad] { color: #ff5a78; }
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; }
.links a { display: block; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 0.75rem 0.9rem; text-decoration: none; }
.links a:hover { border-color: var(--bolt); }
.links a span { display: block; font-size: 0.8rem; color: var(--mute); }
.locked { max-width: 34rem; margin: 18vh auto 0; padding-inline: var(--gutter); }
.locked h1 { font: 900 2.4rem/1 var(--display); text-transform: uppercase; margin-bottom: 0.8rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }