:root {
  color-scheme: dark;
  --bg: #040704; --panel: #060b07; --panel-2: #0a130c; --border: #1f4a2b; --border-hi: #2f7a45;
  --text: #b8f7c8; --muted: #6fa982; --faint: #3f6b4c;
  --accent: #39ff88; --accent-2: #ffb000;
  --ok: #39ff88; --warn: #ffb000; --bad: #ff5555; --live: #39ff88;
  --mono: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --glow: 0 0 6px rgba(57, 255, 136, .35); --glow-color: rgba(57, 255, 136, .6);
  --glow-2: 0 0 6px rgba(255, 176, 0, .55); --glow-2-soft: 0 0 6px rgba(255, 176, 0, .35);
  --scan: rgba(0, 0, 0, .18); --row-border: #12301b; --new-bg: rgba(255, 176, 0, .05);
  --c-pq: #5cc8ff; --c-pq-border: #24506a; --c-ss: #ff9ad5; --c-ss-border: #6a2f52;
  --attitude-x: #ff6b6b; --attitude-y: #ffb000; --attitude-z: #5cc8ff;
}
/* light theme: same phosphor-terminal layout on paper. Follows the visitor's system
   setting; data-theme="light"/"dark" on <html> (set by the header button) overrides it. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3f6f1; --panel: #fbfdfa; --panel-2: #e6ede5; --border: #b4c7b6; --border-hi: #6c9a78;
    --text: #15301f; --muted: #4a6b55; --faint: #8da394;
    --accent: #0b7a3b; --accent-2: #a56200;
    --ok: #0b7a3b; --warn: #a56200; --bad: #c0392b; --live: #0b7a3b;
    --glow: none; --glow-color: transparent; --glow-2: none; --glow-2-soft: none;
    --scan: rgba(0, 0, 0, 0); --row-border: #d6e1d6; --new-bg: rgba(165, 98, 0, .07);
    --c-pq: #0a6aa1; --c-pq-border: #8dbfdf; --c-ss: #a92c78; --c-ss-border: #dfa3c6;
    --attitude-x: #c0392b; --attitude-y: #a56200; --attitude-z: #0a6aa1;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6f1; --panel: #fbfdfa; --panel-2: #e6ede5; --border: #b4c7b6; --border-hi: #6c9a78;
  --text: #15301f; --muted: #4a6b55; --faint: #8da394;
  --accent: #0b7a3b; --accent-2: #a56200;
  --ok: #0b7a3b; --warn: #a56200; --bad: #c0392b; --live: #0b7a3b;
  --glow: none; --glow-color: transparent; --glow-2: none; --glow-2-soft: none;
  --scan: rgba(0, 0, 0, 0); --row-border: #d6e1d6; --new-bg: rgba(165, 98, 0, .07);
  --c-pq: #0a6aa1; --c-pq-border: #8dbfdf; --c-ss: #a92c78; --c-ss-border: #dfa3c6;
  --attitude-x: #c0392b; --attitude-y: #a56200; --attitude-z: #0a6aa1;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 13px/1.5 var(--mono); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
body::after { /* faint scanlines */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, var(--scan) 2px 3px);
}
::selection { background: var(--accent); color: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-shadow: var(--glow); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 16px; }
header.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 2px 0 14px; border-bottom: 1px dashed var(--border); margin-bottom: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand svg { display: none; }
.brand h1 { font-size: 16px; margin: 0; color: var(--accent); text-shadow: var(--glow); font-weight: 700; letter-spacing: .06em; }
.brand h1::before { content: "▌"; color: var(--accent-2); margin-right: 6px; }
.brand .sub { color: var(--muted); font-size: 12px; }
.brand .sub::before { content: "$ "; color: var(--accent); }
.brand .sub::after { content: "█"; color: var(--accent); margin-left: 4px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.top .spacer { flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
  font-size: 12px; font-weight: 700; text-transform: uppercase; white-space: nowrap;
  border: 0; background: none; color: var(--text);
}
.pill::before { content: "["; color: var(--faint); }
.pill::after { content: "]"; color: var(--faint); }
.dot { width: 7px; height: 7px; border-radius: 0; background: var(--faint); flex: none; }
.dot.ok { background: var(--ok); box-shadow: var(--glow); } .dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); } .dot.live { background: var(--live); animation: blink 1s steps(1) infinite; }
.toplinks { display: flex; gap: 14px; font-size: 12px; flex-wrap: wrap; }
.grid { display: grid; gap: 22px 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.card {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  min-width: 0; display: flex; flex-direction: column;
}
.card > h2 {
  position: absolute; top: -9px; left: 10px; right: 10px; margin: 0; padding: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 16px;
  color: var(--accent); display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.card > h2 > span:first-child, .card > h2 { text-shadow: var(--glow); }
.card > h2 > * { pointer-events: auto; }
.card > h2 > span:first-child::before { content: "─[ "; color: var(--border-hi); }
.card > h2 > span:first-child::after { content: " ]─"; color: var(--border-hi); }
.card > h2 > span:first-child, .card > h2 .right { background: var(--bg); padding: 0 4px; }
.card > h2 .right { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); text-shadow: none; }
.card .body { padding: 18px 14px 14px; min-width: 0; }
.span-8 { grid-column: span 8; } .span-4 { grid-column: span 4; } .span-12 { grid-column: span 12; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; }
@media (max-width: 980px) {
  .span-8, .span-4, .span-6, .span-7, .span-5 { grid-column: span 12; }
}
/* pass */
.pass { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: start; }
@media (max-width: 560px) { .pass { grid-template-columns: 1fr; } .polar-wrap { justify-self: center; } }
.sat { font-size: 24px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; color: var(--accent); text-shadow: var(--glow); text-transform: uppercase; }
.satmeta { color: var(--muted); margin-top: 4px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin-top: 14px; }
.kv dt { color: var(--muted); text-transform: uppercase; font-size: 11px; line-height: 20px; }
.kv dt::after { content: ":"; }
.kv dd { margin: 0; min-width: 0; }
.progress { height: 12px; background: var(--panel-2); border: 1px solid var(--border); margin-top: 14px; overflow: hidden; }
.progress > div {
  height: 100%; width: 0; transition: width .8s;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 8px);
  box-shadow: var(--glow);
}
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.stat { border: 1px solid var(--border); padding: 8px 10px; min-width: 0; }
.stat .l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.stat .v { font-size: 20px; font-weight: 700; color: var(--accent); text-shadow: var(--glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
canvas { display: block; max-width: 100%; }
#spark { width: 100%; height: 44px; margin-top: 10px; }
.polar-wrap { width: 220px; }
#polar { width: 220px; height: 220px; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
/* waterfall */
.wf-box { position: relative; background: #000; border: 1px solid var(--border); overflow: hidden; }
#wf { width: 100%; height: 280px; image-rendering: pixelated; }
.wf-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.wf-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 12px; text-align: center; padding: 16px; }
.wf-empty::before { content: "// "; }
/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; padding: 0 10px 6px 0; border-bottom: 1px dashed var(--border); }
.tbl td { padding: 5px 10px 5px 0; white-space: nowrap; }
.tbl tr + tr td { border-top: 1px dotted var(--row-border); }
.tbl td.sat-c { white-space: normal; overflow-wrap: anywhere; text-transform: uppercase; }
.tbl .num { text-align: right; }
.scroll-x { overflow-x: auto; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.badge::before { content: "["; color: var(--faint); } .badge::after { content: "]"; color: var(--faint); }
.badge.good { color: var(--ok); } .badge.bad, .badge.failed { color: var(--bad); }
.badge.unknown { color: var(--warn); } .badge.running { color: var(--live); }
tr.running td { color: var(--accent); font-weight: 700; text-shadow: var(--glow); }
tr.running td:first-child::before { content: "▶ "; }
/* frames */
.frames { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow: auto; }
.frame { border-left: 2px solid var(--border-hi); padding: 2px 0 2px 10px; min-width: 0; }
.frame .h { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.frame .h b { color: var(--accent); }
.frame .ax { color: var(--accent-2); }
.frame pre { margin: 4px 0 0; font: 12px/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.frame.cw { border-left-color: var(--accent-2); }
.frame.cw pre { font-size: 14px; letter-spacing: .08em; color: var(--accent); }
.empty { color: var(--faint); padding: 18px 0; text-align: center; }
.empty::before { content: "// "; }
/* health */
.health { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--border); padding: 7px 10px; min-width: 0; }
.tile .l { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.tile .v { font-size: 15px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; text-transform: uppercase; }
.tile .s { font-size: 11px; color: var(--muted); }
/* events */
.events { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.events li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 3px 0; font-size: 12px; }
.events time { color: var(--faint); }
.events time::before { content: "["; } .events time::after { content: "]"; }
.events .error { color: var(--bad); } .events .warning { color: var(--warn); }
.events .pass_start, .events .pass_end { color: var(--accent); }
.events span { overflow-wrap: anywhere; }
footer { color: var(--faint); font-size: 11px; margin: 22px 0 8px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.theme-btn {
  font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer;
  background: none; border: 0; color: var(--muted); padding: 0; white-space: nowrap;
}
.theme-btn::before { content: "["; color: var(--faint); } .theme-btn::after { content: "]"; color: var(--faint); }
.theme-btn:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .brand .sub::after, .dot.live { animation: none; } }
/* sstv */
.sstv-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sstv-item { display: block; border: 1px solid var(--border); background: #000; color: var(--text); text-decoration: none; }
.sstv-item:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--glow); }
.sstv-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #000; image-rendering: auto; }
.sstv-item .cap { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); }
.sstv-item .cap b { color: var(--accent); font-weight: 700; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sstv-new { animation: flash 2s ease-out 1; }
@keyframes flash { from { box-shadow: 0 0 0 2px var(--accent-2); } to { box-shadow: none; } }

/* links on satellite names and observation ids */
a.satlink { color: inherit; text-decoration: underline dotted var(--border-hi); text-underline-offset: 3px; }
a.satlink:hover { color: var(--accent); text-decoration-color: var(--accent); }
a.obslink { color: var(--muted); }
a.obslink:hover { color: var(--accent); }
.sat a.satlink { text-decoration-thickness: 2px; }
/* satellite age; new satellites stand out */
.age { color: var(--faint); font-size: 11px; margin-left: 6px; text-transform: none; }
.badge.new { color: var(--accent-2); margin-left: 6px; text-shadow: var(--glow-2); }
.badge.new.big { font-size: 13px; vertical-align: middle; }
tr:has(.badge.new) td { background: var(--new-bg); }

/* satellite telemetry */
.tlm-list { display: grid; gap: 22px; }
.tlm-sat { border-left: 2px solid var(--border-hi); padding: 2px 0 2px 12px; min-width: 0; }
.tlm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.tlm-head .sat { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.tlm-head .meta { color: var(--muted); font-size: 12px; }
.tlm-head .sp { flex: 1; }
.tlm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; }
.tlm-groups, .tlm-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.tlm-group .gt { font-size: 11px; color: var(--accent-2); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.tlm-group .gt::before { content: "> "; color: var(--faint); }
.tlm-group .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tlm-group .tile .v.good { color: var(--ok); } .tlm-group .tile .v.warn { color: var(--warn); } .tlm-group .tile .v.bad { color: var(--bad); }
.tlm-group .tile .v { text-transform: none; }
.tlm-text { margin: 0; font: 12px/1.4 var(--mono); white-space: pre-wrap; color: var(--text); }
canvas.att { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 6 / 5; border: 1px solid var(--border); background: var(--panel); }
.att-cap { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.trend { border: 1px solid var(--border); padding: 6px 8px; min-width: 0; }
.trend .l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.trend .v { font-weight: 700; font-size: 13px; }
.trend .s { font-size: 10px; color: var(--faint); }
svg.spark { display: block; width: 100%; height: 34px; }
svg.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
svg.spark circle { fill: var(--accent-2); }
@media (max-width: 860px) { .tlm-grid { grid-template-columns: minmax(0, 1fr); } }

/* live SSTV */
.live-body { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 18px; align-items: start; }
.live-img { position: relative; border: 1px solid var(--border-hi); background: #000; line-height: 0; }
.live-img img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.live-scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--glow-color); transition: top 1.8s linear; }
.live-sat { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.live-sat .sat { font-size: 16px; font-weight: 700; text-transform: uppercase; }
.live-bar { height: 10px; border: 1px solid var(--border-hi); margin-top: 14px; }
.live-bar span { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: var(--glow); transition: width 1.8s linear; }
.live-note { font-size: 11px; margin-top: 10px; }
.live-dot { color: var(--bad); font-weight: 700; animation: blink 1.1s steps(1) infinite; }
.live-sstv.is-live { border-color: var(--accent); }
@media (max-width: 760px) { .live-body { grid-template-columns: minmax(0, 1fr); } }
.card[hidden] { display: none; }

/* satellite type art */
#p-type { margin-top: 14px; display: flex; justify-content: center; }
.sat-type { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sat-art { margin: 0; font: 11px/1.12 var(--mono); letter-spacing: 0; white-space: pre; color: var(--accent); text-shadow: var(--glow); }
.sat-art .a-p { color: var(--accent-2); text-shadow: var(--glow-2-soft); }
.sat-art .a-x { color: var(--muted); text-shadow: none; }
.sat-art .a-b { color: var(--accent); }
.sat-type figcaption { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; color: var(--muted); }
.sat-type figcaption b { color: var(--text); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.ttag { display: inline-block; min-width: 3.4em; margin-right: 6px; font-size: 10px; font-weight: 700; text-align: center;
  color: var(--muted); border: 1px solid var(--border); padding: 0 3px; line-height: 15px; vertical-align: 1px; }
.ttag.t-station { color: var(--accent-2); border-color: var(--accent-2); }
.ttag.t-cubesat { color: var(--accent); border-color: var(--border-hi); }
.ttag.t-pocketqube { color: var(--c-pq); border-color: var(--c-pq-border); }
.ttag.t-smallsat { color: var(--c-ss); border-color: var(--c-ss-border); }
.ttag.t-unknown, .ttag.t-other { color: var(--faint); }
@media (max-width: 560px) { .sat-art { font-size: 9px; } }
#p-type .sat-art { font-size: 10px; }

/* APRS via satellite */
.aprs-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.aprs-map-wrap { border: 1px solid var(--border); background: var(--panel-2); min-width: 0; }
#aprs-map { width: 100%; height: auto; aspect-ratio: 2 / 1; display: block; }
.aprs-legend { font-size: 11px; color: var(--muted); padding: 4px 8px; border-top: 1px solid var(--border); }
.aprs-note { font-size: 12px; margin-bottom: 10px; }
.aprs-text { white-space: normal !important; overflow-wrap: anywhere; min-width: 160px; }
.events .aprs { color: var(--accent-2); }
@media (max-width: 980px) { .aprs-body { grid-template-columns: minmax(0, 1fr); } }
.passmap-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
#pass-map { width: 100%; height: auto; aspect-ratio: 2 / 1; display: block; }
@media (max-width: 980px) { .passmap-body { grid-template-columns: minmax(0, 1fr); } }
/* hover overlay (mode descriptions) */
.hint { position: relative; cursor: help; text-decoration: underline dotted var(--border-hi); text-underline-offset: 3px; }
.hint:hover, .hint:focus { color: var(--accent); outline: none; }
.hint::after {
  content: attr(data-hint); position: absolute; left: 0; top: 100%; z-index: 20; margin-top: 6px;
  width: max-content; max-width: min(360px, 80vw); padding: 8px 10px; white-space: normal; text-transform: none;
  font: 12px/1.45 var(--mono); letter-spacing: 0; font-weight: 400; text-align: left; text-shadow: none;
  color: var(--text); background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--glow);
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
}
.hint:hover::after, .hint:focus::after { opacity: 1; visibility: visible; }
td .hint::after { left: auto; right: 0; }