/* Dark, warm and quiet, with Hrimfaxi's amber (bob/hrimfaxi) kept as the one
   accent. Prose is set in the system sans; addresses, commands and other data
   in the system monospace. */
:root {
  color-scheme: dark;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --bg: #120d07;
  --surface: #1b140b;
  --fg: #eee3d0;
  --dim: #a3937a;
  --rule: #33281a;
  --accent: #ffb000;
  --bright: #ffc94d;
  --hi: #fff1d6;
  --field: #1b140b;
  --hover: #2a1f11;
  --on-fg: #1a1004;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

main { max-width: 880px; margin: 0 auto; padding: 20px 16px 0; }
main.wide { max-width: 1100px; }
/* Inset like main's content, so its rule lines up with the top bar's. */
footer { width: calc(100% - 32px); max-width: 848px; }
footer.wide { max-width: 1068px; }

a { color: var(--bright); text-decoration: none; }
a:hover, a:focus-visible { color: var(--hi); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
code { font: .92em var(--mono); color: var(--hi); overflow-wrap: anywhere; }
p { margin: 0 0 12px; }

/* Top bar: the name on the left, the pages on the right. */
.bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.brand { font-weight: 700; font-size: 1.15em; letter-spacing: -.01em; color: var(--fg); }
.brand:hover { color: var(--hi); text-decoration: none; }
.brand span { color: var(--accent); }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.bar nav a { color: var(--dim); }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--fg); text-decoration: none; }
.bar nav a[aria-current] { box-shadow: inset 0 -2px var(--accent); }

h1 { font-size: 1.9em; line-height: 1.2; letter-spacing: -.02em; color: var(--hi); margin: 36px 0 0; }
h2 { font-size: 1.15em; color: var(--hi); margin: 40px 0 12px; }
.lede, .meta, .hint, .muted { color: var(--dim); }
.lede { margin: 10px 0 0; font-size: 1.05em; }
.hint { font-size: .92em; }

/* The front page's answer: a small label, the address, then the details. */
.hero { margin: 36px 0 0; }
.hero .label { font-size: .95em; font-weight: 500; letter-spacing: 0; color: var(--dim); margin: 0; }
.hero .ip {
  font: 600 clamp(2em, 6vw, 3.2em)/1.1 var(--mono); letter-spacing: -.02em;
  color: var(--accent); margin: 6px 0 12px; overflow-wrap: anywhere;
}
.facts-line { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.facts-line li {
  padding: 3px 10px; border: 1px solid var(--rule); border-radius: 14px;
  background: var(--surface); color: var(--fg); font-size: .9em;
}
.facts-line li span { color: var(--dim); }
.facts-line a { overflow-wrap: anywhere; }

/* Command table */
.cmds { display: grid; grid-template-columns: max-content 1fr; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.cmds div { display: contents; }
.cmds code, .cmds span { padding: 9px 14px; border-top: 1px solid var(--rule); }
.cmds div:first-child code, .cmds div:first-child span { border-top: 0; }
.cmds code { background: var(--surface); color: var(--hi); }
.cmds span { color: var(--dim); font-size: .92em; }
@media (max-width: 600px) {
  .cmds { grid-template-columns: 1fr; }
  .cmds span { border-top: 0; padding-top: 0; background: var(--surface); }
}

/* Check form */
.check-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.check-form label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.check-form input { flex: 1 1 240px; min-width: 0; }
.check-form input, .check-form select {
  font: 1em var(--mono); color: var(--hi); background: var(--field);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 0 12px; min-height: 44px;
}
.check-form input::placeholder { color: #6b5c45; }
.check-form input:hover, .check-form select:hover { border-color: #4a3a24; }
.check-form input:focus, .check-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 176, 0, .18); }
.check-form button {
  font: 600 1em var(--sans); color: var(--on-fg); background: var(--accent);
  border: 0; border-radius: var(--radius); padding: 0 20px; min-height: 44px; cursor: pointer;
}
.check-form button:hover { background: var(--bright); }
.check-form .button-alt {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: var(--radius); color: var(--fg); font-weight: 600;
}
.check-form .button-alt:hover { border-color: var(--accent); color: var(--hi); text-decoration: none; }
.check-form button.button-alt, .check-form button.button-alt:hover { background: none; }
.check-form .region-pick { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--dim); font-size: .92em; }
.check-form .region-pick label {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  display: inline-flex; align-items: center; gap: 6px; color: var(--fg); cursor: pointer; min-height: 32px;
}
.check-form .region-pick input { flex: none; width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--accent); }
.row.hop .fam { width: 2em; text-align: right; }
@media (max-width: 600px) {
  .check-form input { flex-basis: 100%; }
  .check-form button { flex: 1; }
}

/* Anything that went wrong: a soft amber badge. */
.error, .flag {
  color: var(--hi); background: rgba(255, 176, 0, .16); border: 1px solid rgba(255, 176, 0, .4);
  border-radius: 4px; padding: 0 6px;
}
.error { display: inline-block; margin: 8px 0 0; padding: 4px 10px; }
.error:empty { display: none; }

footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  margin: 56px auto 0; padding: 14px 0 32px;
  border-top: 1px solid var(--rule); color: var(--dim); font-size: .9em;
}
footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
footer nav a { color: var(--dim); }
footer nav a:hover { color: var(--fg); }

/* --- /heartbeat --- */
.hb-form { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; max-width: 640px; }
.hb-form label { display: flex; flex-direction: column; gap: 6px; color: var(--dim); font-size: .92em; }
.hb-form input:not([type="radio"]) {
  font: 1em var(--mono); color: var(--hi); background: var(--field);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 0 12px; min-height: 44px; min-width: 0;
}
.hb-form input:not([type="radio"]):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 176, 0, .18); }
.hb-form .hb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .hb-form .hb-pair { grid-template-columns: 1fr; } }
.hb-form fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px 14px; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.hb-form legend { color: var(--dim); font-size: .92em; padding: 0 6px; }
.hb-form .hb-choice { flex-direction: row; align-items: center; gap: 8px; color: var(--fg); font-size: 1em; }
.hb-form .hb-choice input { accent-color: var(--accent); }
.hb-form fieldset > input { flex: 1 1 100%; }
.hb-form .hint { margin: 0; }
.hb-form button, .hb-actions button {
  align-self: flex-start; font: 600 1em var(--sans); color: var(--on-fg); background: var(--accent);
  border: 0; border-radius: var(--radius); padding: 0 22px; min-height: 44px; cursor: pointer;
}
.hb-form button:hover { background: var(--bright); }
.hb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.hb-actions form { margin: 0; }
.hb-actions .button-quiet { color: var(--fg); background: transparent; border: 1px solid var(--rule); }
.hb-actions .button-quiet:hover { border-color: var(--accent); color: var(--hi); }
.hb-actions .danger:hover { border-color: var(--hi); }
.hb-url { font-size: 1.05em; }
.notice { display: inline-block; margin: 16px 0 0; padding: 6px 12px; border-radius: 4px; color: var(--hi); background: var(--hover); border: 1px solid var(--rule); }
.hb-pings td { font-size: .85em; }

/* --- /check page --- */
.status { color: var(--dim); margin: 20px 0 12px; min-height: 1.55em; }
.status.flag { display: inline-block; }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 12px; }
.region { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.region.failed { opacity: .75; }
.region header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin-bottom: 6px; }
.region h2 { margin: 0; font-size: 1.05em; }
.region .code { font: .85em var(--mono); color: var(--dim); }
.region .dns { margin-left: auto; font: .85em var(--mono); color: var(--dim); }
.region.pending .rows .muted::after { content: "…"; animation: blink 1.4s ease-in-out infinite; }
.region p { margin: 4px 0; }
.region p.flag { display: inline-block; }
.row { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; }
.row .fam { width: 3.2em; flex: none; color: var(--dim); font-size: .9em; padding-top: 1px; }
.row .detail { min-width: 0; }
.row .addr { color: var(--hi); }
.row.warn .addr::after, .row.bad .addr::after {
  margin-left: 8px; padding: 0 6px; border-radius: 4px; font: 600 .75em var(--sans); letter-spacing: .04em;
  color: var(--on-fg); background: var(--bright); vertical-align: 1px;
}
.row.warn .addr::after { content: "WARN"; }
.row.bad .addr::after { content: "FAIL"; background: var(--hi); }
.facts { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: .9em; color: var(--fg); }
.facts .loc { overflow-wrap: anywhere; color: var(--dim); }
.crumb { display: none; }
.hint { margin-top: 20px; }

/* --- /health page --- */
.health-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0 0; }
.verdict {
  display: inline-block; margin: 0; padding: 4px 14px; border-radius: 999px;
  font-weight: 700; font-size: 1.2em; text-transform: lowercase;
  color: var(--on-fg); background: var(--accent);
}
.verdict::first-letter { text-transform: uppercase; }
.verdict.v-degraded { background: var(--bright); }
.verdict.v-disrupted { background: var(--hi); }
.verdict.v-unknown { color: var(--fg); background: var(--hover); }
.health-head .meta { margin: 0; font-size: .92em; }
.fields dd a { overflow-wrap: anywhere; }
.grid-wrap { overflow-x: auto; margin: 20px 0 0; border: 1px solid var(--rule); border-radius: var(--radius); }
.grid { border-collapse: collapse; width: 100%; font-size: .92em; }
.grid th, .grid td { padding: 8px 12px; text-align: left; font-weight: normal; white-space: nowrap; border-top: 1px solid var(--rule); }
.grid thead th { color: var(--dim); border-top: 0; background: var(--surface); font: .85em var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.grid tbody th { color: var(--fg); font-weight: 500; }
.grid td { font: .85em var(--mono); }
.grid .s-up { color: var(--dim); }
.grid .s-slow, .grid .s-partial { color: var(--bright); font-weight: 600; }
.grid .s-down { color: var(--hi); font-weight: 700; background: rgba(255, 176, 0, .16); }
.grid .s-unknown { color: #6b5c45; }

/* --- the map (map.js): every animation steps at --fps, on the same clock --- */
.health-map { position: relative; width: 100%; aspect-ratio: 360 / 128; min-height: 200px; margin: 20px 0 0; overflow: hidden; border-radius: var(--radius);
  font: 15px/1.35 var(--mono);
  background: radial-gradient(ellipse at 50% 42%, #1d1305 0%, var(--bg) 70%); border: 1px solid var(--rule); }
.netmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.netmap .places { position: absolute; inset: 0; }
.netmap .blip { position: absolute; }
.netmap .blip::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bright); box-shadow: 0 0 8px var(--accent), 0 0 18px rgba(255, 140, 0, .6); cursor: pointer;
}
.netmap .blip i {
  position: absolute; left: -15px; top: -15px; width: 28px; height: 28px;
  border: 1px solid var(--accent); border-radius: 50%; pointer-events: none;
  animation: map-ping 3s steps(calc(3 * var(--fps))) infinite;
}
.netmap .blip i + i { animation-delay: -1.4s; }
.netmap .blip.warn i { animation-duration: 2s; animation-timing-function: steps(calc(2 * var(--fps))); border-color: var(--bright); }
.netmap .blip.fault::before { background: var(--hi); animation: blink 1.05s steps(1) infinite; }
.netmap .blip.fault i { border-color: var(--hi); animation-duration: 1.2s; animation-timing-function: steps(calc(1.2 * var(--fps))); }
.netmap .blip.down::before, .netmap .blip.unknown::before, .netmap .blip.stale::before {
  background: none; border: 1px solid var(--dim); box-shadow: none;
}
.netmap .blip.down i, .netmap .blip.unknown i, .netmap .blip.stale i { display: none; }
.netmap .blip.small::before { left: -3px; top: -3px; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 6px rgba(255, 140, 0, .5); opacity: .8; }
.netmap .blip.small i { display: none; }
@keyframes map-ping { from { transform: scale(.25); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.netmap .tag {
  position: absolute; z-index: 1; padding: 2px 6px 1px; white-space: pre; font-size: .8em; line-height: 1.3;
  background: rgba(17, 10, 2, .8); border: 1px solid rgba(255, 176, 0, .25);
}
.netmap .tag .hi { color: var(--hi); }
.netmap .tag .dim { color: var(--dim); }
.netmap .tag.warn, .netmap .tag.fault { border-color: rgba(255, 210, 122, .7); }
.netmap .tag.down { opacity: .65; }
.netmap .tag.hidden { visibility: hidden; }
.netmap .tag.hidden.peek, .netmap .tag.hidden.pinned { visibility: visible; z-index: 2; }
.netmap.stale .tag { opacity: .4; }
.netmap.stale .blink { animation: none; }
.netmap .packet {
  position: absolute; left: 0; top: 0; width: 3px; height: 3px; pointer-events: none;
  background: rgb(var(--c, 255, 210, 122)); box-shadow: 0 0 6px rgba(var(--c, 255, 176, 0), .8);
  offset-rotate: 0deg; animation: map-travel 7s steps(calc(7 * var(--fps))) infinite;
}
@keyframes map-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.netmap .cut { position: absolute; transform: translate(-50%, -50%); padding: 0 2px; color: var(--hi);
  background: rgba(17, 10, 2, .8); animation: blink 1.05s steps(1) infinite; }
.netmap .shock {
  position: absolute; transform: translate(-50%, -50%); border: 1px solid var(--bright); border-radius: 50%;
  pointer-events: none; animation: map-shock 3s steps(calc(3 * var(--fps))) both;
}
@keyframes map-shock { from { width: 16px; height: 16px; opacity: 1; } to { width: 900px; height: 900px; opacity: 0; } }
.netmap .ticker {
  position: absolute; left: 10px; bottom: 6px; z-index: 3; font-size: .75em; line-height: 1.3; white-space: pre;
  text-transform: uppercase; pointer-events: none;
}
.netmap .ticker .hi { color: var(--hi); }
.netmap .ticker .dim { color: var(--dim); }
.netmap .ticker .typing { display: inline-block; vertical-align: bottom; overflow: hidden; width: calc(var(--n) * 1ch);
  animation: map-typing calc(var(--n) / var(--fps) * 1s) steps(var(--n)) both; }
@keyframes map-typing { from { width: 0; } }
.netmap .credit { position: absolute; right: 8px; bottom: 4px; z-index: 3; font-size: .6em; color: var(--rule); }
.netmap .credit:hover { color: var(--dim); }

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .region.pending .rows .muted::after { animation: none; }
  .netmap .blip i, .netmap .packet, .netmap .shock { display: none; }
  .netmap .blip.fault::before, .netmap .cut { animation: none; }
}
.map-note { font-size: .88em; margin: 8px 0 0; }