/* ---- Theme 1: Night — dark bench instrument, green trace ---- */
[data-theme="night"] {
  --page: oklch(0.13 0.006 250); --ink: oklch(0.96 0 0); --muted: oklch(0.68 0 0); --rule: oklch(1 0 0 / 10%);
  --screen: oklch(0.19 0.02 200); --screen-edge: oklch(1 0 0 / 12%); --screen-ink: oklch(0.96 0 0); --screen-muted: oklch(0.7 0.03 200);
  --grid: oklch(0.36 0.03 200); --grid-major: oklch(0.42 0.03 200);
  --trace: oklch(0.86 0.16 150); --blip: oklch(0.85 0.15 85); --down: oklch(0.72 0.19 25);
  --lcd: oklch(0.9 0.12 150); --ok: oklch(0.72 0.15 150); --pill-bg: oklch(0.72 0.15 150 / 16%); --pill-ink: oklch(0.82 0.13 150);
  --screen-shadow: inset 0 1px 0 oklch(1 0 0 / 6%), 0 1px 2px oklch(0 0 0 / 30%);
  --title-font: ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* ---- Theme 2: Chart paper — the printout, light ---- */
[data-theme="paper"] {
  --page: oklch(0.975 0.008 85); --ink: oklch(0.22 0.01 260); --muted: oklch(0.5 0.01 260); --rule: oklch(0.86 0.012 85);
  --screen: oklch(0.99 0.012 90); --screen-edge: oklch(0.84 0.015 85); --screen-ink: oklch(0.22 0.01 260); --screen-muted: oklch(0.5 0.01 260);
  --grid: oklch(0.86 0.04 240); --grid-major: oklch(0.72 0.07 240);
  --trace: oklch(0.3 0.09 262); --blip: oklch(0.62 0.15 70); --down: oklch(0.55 0.21 27);
  --lcd: oklch(0.3 0.09 262); --ok: oklch(0.5 0.13 155); --pill-bg: oklch(0.5 0.13 155 / 12%); --pill-ink: oklch(0.42 0.12 155);
  --screen-shadow: 0 1px 0 oklch(0.84 0.015 85), 0 10px 24px -18px oklch(0.3 0.03 80 / 45%);
  --title-font: ui-serif, "New York", Georgia, serif;
}
/* ---- Theme 3: Backlit — blue LCD, dark segments ---- */
[data-theme="backlit"] {
  --page: oklch(0.94 0.012 240); --ink: oklch(0.2 0.03 255); --muted: oklch(0.48 0.03 250); --rule: oklch(0.84 0.02 240);
  --screen: oklch(0.72 0.1 232); --screen-edge: oklch(0.32 0.03 250); --screen-ink: oklch(0.16 0.05 260); --screen-muted: oklch(0.3 0.06 250);
  --grid: oklch(0.64 0.09 232); --grid-major: oklch(0.56 0.09 236);
  --trace: oklch(0.2 0.07 262); --blip: oklch(0.42 0.15 60); --down: oklch(0.42 0.2 27);
  --lcd: oklch(0.16 0.05 260); --ok: oklch(0.5 0.14 232); --pill-bg: oklch(0.5 0.14 232 / 14%); --pill-ink: oklch(0.38 0.12 240);
  --screen-shadow: inset 0 0 0 5px oklch(0.24 0.02 250), inset 0 0 18px 5px oklch(0.4 0.08 240 / 55%), 0 8px 20px -14px oklch(0.2 0.04 250 / 70%);
  --title-font: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif; transition: background .2s; }
main { max-width: 780px; margin: 0 auto; padding: 28px 16px 56px; }


/* ---- Motion. CSS only, so it survives the real page's no-script CSP. ---- */
.tape .cover { fill: var(--screen); transform: translateX(900px); }
.tape .head { stroke: var(--lcd); stroke-width: 1.5; opacity: 0.55; transform: translateX(899px); }
/* The print, the print head's run and the readout settle play once per browser
   session: the function adds html.animate only when there is no "printed"
   cookie. Without it the trace is fully printed and the head rests at today.
   The 1 Hz tick and the status dot's pulse run always. */
@media (prefers-reduced-motion: no-preference) {
  .tape .head { animation: tick 1s steps(1, end) infinite; }
  html.animate .tape .cover { animation: print 1.8s cubic-bezier(.45,.05,.35,1) both; }
  html.animate .tape .head { animation: print-head 1.8s cubic-bezier(.45,.05,.35,1) both, tick 1s steps(1, end) 1.8s infinite; }
  html.animate .instrument:nth-child(2) .tape .cover { animation-delay: .25s; }
  html.animate .instrument:nth-child(2) .tape .head { animation-delay: .25s, 2.05s; }
  html.animate .instrument:nth-child(3) .tape .cover { animation-delay: .5s; }
  html.animate .instrument:nth-child(3) .tape .head { animation-delay: .5s, 2.3s; }
  @keyframes print { from { transform: translateX(0); } to { transform: translateX(900px); } }
  @keyframes print-head { from { transform: translateX(0); opacity: 1; } to { transform: translateX(899px); opacity: .55; } }
  @keyframes tick { 0% { opacity: .55; } 50% { opacity: .12; } }
  html.animate .readout b { animation: settle .6s ease-out both; animation-delay: 1.4s; }
  @keyframes settle { from { opacity: 0; transform: translateY(3px); } }
  /* The dot itself pulses: it swells and glows, then an echo ring spreads
     from it and fades, once every two seconds. Not when we cannot tell. */
  h1.up::before, h1.down::before { animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--pill-bg), 0 0 0 0 var(--ok); }
    35%  { transform: scale(1.35); box-shadow: 0 0 0 4px var(--pill-bg), 0 0 10px 1px var(--ok); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 12px transparent, 0 0 0 0 transparent; }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
  }
}
footer { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.switch { display: inline-flex; gap: 2px; opacity: 0.55; transition: opacity .2s; }
.switch:hover, .switch:focus-within { opacity: 1; }
.switch a { font: inherit; font-size: 0.75rem; padding: 2px 4px; color: var(--muted); text-decoration: none; }
.switch a + a::before { content: "·"; display: inline-block; margin-right: 6px; color: var(--muted); text-decoration: none; }
.switch a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.kicker { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 6px 0 0; font: 600 1.75rem/1.2 var(--title-font); letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; }
h1::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--pill-bg); flex: none; }
/* Overall down: the dot and the words take the down colour and keep pulsing.
   Unknown (monitoring unreachable, or still checking): a grey dot, no pulse. */
h1.down { color: var(--down); --ok: var(--down); --pill-bg: color-mix(in oklch, var(--down) 16%, transparent); }
h1.unknown::before { background: var(--muted); box-shadow: 0 0 0 4px var(--rule); }
p.lead { color: var(--muted); margin: 10px 0 28px; max-width: 60ch; }

.instrument { background: var(--screen); border: 1px solid var(--screen-edge); border-radius: 8px; padding: 14px 14px 12px; box-shadow: var(--screen-shadow); }
[data-theme="backlit"] .instrument { padding: 18px 18px 14px; border-radius: 10px; }
[data-theme="paper"] .instrument { border-radius: 3px; }
.instrument + .instrument { margin-top: 14px; }
.ihead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.iname { font: 600 1rem/1.3 var(--title-font); color: var(--screen-ink); }
.idesc { font-size: 0.8125rem; color: var(--screen-muted); }
.readout { display: flex; gap: 18px; flex-wrap: wrap; font: 500 0.8125rem/1.2 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.readout span { display: grid; }
.readout small { font: 0.625rem/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--screen-muted); }
.readout b { font-weight: 500; font-size: 1.0625rem; color: var(--lcd); }
svg.tape { display: block; width: 100%; height: 86px; margin-top: 10px; }
.tape .grid { stroke: var(--grid); stroke-width: 1; }
.tape .major { stroke: var(--grid-major); stroke-width: 1; }
.tape .mid { stroke: var(--grid-major); stroke-width: 1; stroke-dasharray: 2 3; }
.tape .up { fill: var(--trace); } .tape .blip { fill: var(--blip); } .tape .down { fill: var(--down); }
.axis { display: flex; justify-content: space-between; font: 0.6875rem/1 ui-monospace, Menlo, monospace; color: var(--screen-muted); margin-top: 4px; }

h2 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 40px 0 12px; font-weight: 600; }
.incident { border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; }
.incident .meta { font: 0.75rem/1 ui-monospace, Menlo, monospace; color: var(--muted); }
.incident + .incident { margin-top: 10px; }
p.muted { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.pill.down { background: color-mix(in oklch, var(--down) 16%, transparent); color: var(--down); }
.incident h3 { margin: 6px 0 4px; font: 600 1rem/1.3 var(--title-font); }
.incident p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.pill { font: 600 0.6875rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: var(--pill-bg); color: var(--pill-ink); margin-left: 8px; vertical-align: 2px; }
footer { margin-top: 44px; font-size: 0.75rem; color: var(--muted); }