/* missileer.watch -- the launch control console, lit.
 *
 * THE MOCKUP IS THE SPEC. Everything down to the ADDITIONS marker is the
 * stylesheet of docs/mockup/capsule.html, verbatim. Change the mockup and copy it
 * again rather than editing this half by hand.
 */
:root{
  --panel:#F1ECDE;        /* console putty */
  --panel-2:#E7E1D1;      /* recessed panel */
  --panel-edge:#C4BDAB;
  --rack:#4A4B48;         /* grey equipment rack */
  --rack-2:#5D5E5A;
  --ink:#2B2C28;
  --ink-2:#5B5C56;
  --screw:#8F8A7C;
  --instrument:#0C0D0C;   /* the dark instruments in the room */
  --led:#FF2D1C;
  --led-dim:#3A0E0B;
  --phosphor:#4CFF7A;
  --phosphor-dim:#1B6E37;
  --amber:#F2B233;
  --fluor:rgba(255,246,214,.55);
  color-scheme:light;
}
body{margin:0;background:var(--rack);color:var(--ink);font:16px/1.55 "IBM Plex Sans",system-ui,sans-serif;padding-inline:16px;padding-block:0 40px}
.console{max-width:1120px;margin:0 auto}
/* the lit room: a warm wash across the top */
.room{position:relative;background:
  radial-gradient(120% 60% at 50% -10%,var(--fluor),transparent 60%),
  linear-gradient(var(--rack-2),var(--rack));
  padding:28px 0 0}
.label{font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
/* engraved panel */
.panel{position:relative;background:var(--panel);border:1px solid var(--panel-edge);border-radius:6px;box-shadow:inset 0 1px 0 #fff8,0 2px 0 #0004,0 10px 24px #0005}
.panel::before,.panel::after,.panel .s3,.panel .s4{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d9d4c6,var(--screw) 60%,#6c675b);box-shadow:inset 0 0 0 1px #0003}
.panel::before{top:8px;left:8px}.panel::after{top:8px;right:8px}
.panel .s3{bottom:8px;left:8px}.panel .s4{bottom:8px;right:8px}
.panel .s3,.panel .s4,.panel::before,.panel::after{background-image:linear-gradient(135deg,transparent 45%,#00000055 45%,#00000055 55%,transparent 55%),radial-gradient(circle at 40% 35%,#d9d4c6,var(--screw) 60%,#6c675b)}
.engr{font:700 22px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 0 #fff9}
/* shelf: the site name and the clock, like the console top */
.shelf{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px 28px}
.shelf .dymo{justify-self:start;background:#111;color:#f3efe4;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:8px 12px;border-radius:2px;box-shadow:0 1px 0 #fff6}
.shelf .right{justify-self:end;text-align:right}
.clockbox{background:var(--instrument);border-radius:6px;padding:10px 18px;box-shadow:inset 0 0 0 2px #262826,inset 0 0 18px #000,0 1px 0 #fff5}
.clockbox svg{display:block;height:64px;width:auto}
@media (max-width:720px){.shelf{grid-template-columns:1fr;justify-items:center;text-align:center}.shelf .dymo,.shelf .right{justify-self:center;text-align:center}.clockbox svg{height:52px}}
/* instrument bay: two dark screens set into the console */
.bay{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;padding:0 28px 28px}
@media (max-width:820px){.bay{grid-template-columns:1fr}}
.crt{background:var(--instrument);border-radius:8px;padding:22px 24px;color:var(--phosphor);font-family:"IBM Plex Mono",monospace;box-shadow:inset 0 0 0 3px #1d1f1d,inset 0 0 40px #000,0 1px 0 #fff5;position:relative;overflow:hidden}
.crt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,#0000001c 2px 3px);pointer-events:none}
.crt .hdr{display:flex;justify-content:space-between;align-items:baseline;color:var(--phosphor-dim);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.crt .hdr b{color:var(--phosphor);font-weight:500}
.eam .when{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.eam .when svg{height:34px;width:auto}
.eam .when span{font-size:13px;color:var(--phosphor-dim)}
.eam .pre{font-size:clamp(40px,7vw,64px);font-weight:600;letter-spacing:.14em;line-height:1.05;margin:6px 0 2px;color:var(--phosphor);text-shadow:0 0 12px #4cff7a55}
.eam .body{font-size:15px;letter-spacing:.12em;word-break:break-all;color:#a8ffbf;margin-bottom:12px}
.eam .meta{font-size:12px;color:var(--phosphor-dim);display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.play{display:flex;align-items:center;gap:12px}
.play button{background:none;border:1px solid var(--phosphor);color:var(--phosphor);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:9px 16px;border-radius:3px;cursor:pointer}
.play button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.play .bar{flex:1;height:2px;background:var(--phosphor-dim);position:relative}.play .bar i{position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--phosphor)}
.play small{font-size:12px;color:var(--phosphor-dim)}
.older{margin-top:16px;border-top:1px solid var(--phosphor-dim);padding-top:10px;display:grid;gap:6px;font-size:13px}
.older div{display:grid;grid-template-columns:76px 86px 1fr;gap:10px;align-items:baseline}
.older .t{color:var(--phosphor-dim)}.older .p{font-weight:600;letter-spacing:.1em}.older .b{color:#7fdc98;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.net table{width:100%;border-collapse:collapse;font-size:13px}
.net td{padding:7px 0;border-bottom:1px dashed var(--phosphor-dim);vertical-align:top}
.net td:last-child{text-align:right;color:var(--phosphor-dim)}
.net .ok{color:var(--phosphor)}.net .warn{color:var(--amber)}
/* NET STATUS at narrow widths (ruled 2026-09-28): the row's text ("last message 15 min ago")
   goes on its own line under the receiver name, same size, instead of wrapping beside it. */
@media (max-width:520px){.net tr{display:block;padding:7px 0;border-bottom:1px dashed var(--phosphor-dim)}.net td{display:block;padding:0;border-bottom:0}.net td:last-child{text-align:left;margin-top:2px}}
/* NET STATUS reception per receiver (ruled 2026-10-12; app.js renderStatus): a lamp before the
   name, the state word before "last message N ago". RECEIVING: the live lamp's green (#live
   .live-lamp: --phosphor, edged --phosphor-dim). NO AUDIO: --muted grey (#8E8A7E, the live
   offline line's). STATION OFFLINE: the lamp dark, a --muted ring, on every row. Amber means
   pending or unconfirmed on this site, so no reception state uses it.
   A receiver row is two lines at every width, the narrow layout above: "RECEIVING · last message
   10 min ago" no longer fits beside "KPH · Point Reyes, CA" in the bay's 1fr column at 1280 px,
   where both cells wrapped mid-phrase. The second line starts under the name, past the lamp
   (on a phone, under the lamp: the full width). */
.net tr[class^="rx-"]{display:block;padding:7px 0;border-bottom:1px dashed var(--phosphor-dim)}
.net tr[class^="rx-"] td{display:block;padding:0;border-bottom:0}
.net tr[class^="rx-"] td:last-child{text-align:left;margin-top:2px;padding-left:20px}
@media (max-width:520px){.net tr[class^="rx-"] td:last-child{padding-left:0}}
.net .lamp{display:inline-block;box-sizing:border-box;width:11px;height:11px;margin:0 9px 1px 0;border-radius:50%;vertical-align:middle;background:transparent;border:1px solid var(--muted)}
.net tr.rx-receiving .lamp{background:var(--phosphor);border-color:var(--phosphor-dim);box-shadow:0 0 0 2px #4cff7a40}
.net tr.rx-noaudio .lamp{background:var(--muted);border-color:#5B5C56}
.net tr.rx-receiving td:first-child,.net tr.rx-receiving .st{color:var(--phosphor)}
.net tr.rx-noaudio td:first-child,.net tr.rx-noaudio .st,.net tr.rx-offline td:first-child,.net tr.rx-offline .st{color:var(--muted)}
.net .lm{white-space:nowrap}   /* STATION OFFLINE wraps on a phone: after the state, never inside "last message 10 min ago" */
.net .big{margin-top:14px;display:flex;align-items:baseline;gap:10px}
.net .big svg{height:44px;width:auto}
.net .big span{font-size:12px;color:var(--phosphor-dim);letter-spacing:.14em;text-transform:uppercase}
/* binders shelf: the reading sections */
.reading{display:grid;gap:18px;padding:18px 0 0}
.card{padding:26px 30px 28px;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
.card.flip{grid-template-columns:.9fr 1.1fr}.card.flip .txt{order:2}
@media (max-width:820px){.card,.card.flip{grid-template-columns:1fr}.card.flip .txt{order:0}}
.card h2{margin:0 0 10px;text-wrap:balance}
.card p{margin:0 0 12px;max-width:62ch;color:var(--ink)}
.card p:last-child{margin-bottom:0}
.card .ref{font:500 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);margin-top:14px;border-top:1px solid var(--panel-edge);padding-top:10px}
.pic{background:var(--panel-2);border:1px solid var(--panel-edge);padding:8px;border-radius:4px;box-shadow:inset 0 1px 3px #0003}
.pic img{display:block;width:100%;height:auto;border-radius:2px}
.pic figcaption{font:500 11px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);padding:8px 2px 0}
.tab{display:inline-block;background:#B8443A;color:#fff;font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:5px 9px;border-radius:2px;margin-bottom:10px}
.foot{color:#cfcabb;font:500 12px/1.6 "IBM Plex Mono",monospace;text-align:center;padding:26px 0 0}
.foot a{color:#e8e2d0}
.note{margin:18px auto 0;max-width:1120px;background:#2b2c2a;color:#ded8c7;border-left:4px solid var(--amber);padding:12px 16px;font:500 13px/1.5 "IBM Plex Mono",monospace;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---- ADDITIONS (not in the mockup) --------------------------------------
 * Only what the live page needs and the static mockup did not: the mockup's
 * inline style="" attributes as classes (the CSP allows no inline styles), and
 * the states a live feed has -- waiting, unavailable, sample data, no clip.
 */
.label-ink{margin-top:6px;color:var(--ink)}
.note.off{display:none}
.note{position:relative;z-index:1}
.waiting{margin:6px 0;font-size:13px;letter-spacing:.2em;color:var(--phosphor-dim)}
.unavail{font-size:13px;color:var(--amber)}
.unavail p{margin:0 0 6px}
.unavail .why{color:var(--phosphor-dim);letter-spacing:.02em}
.unavail button,.play button{position:relative;z-index:1}
.unavail button{background:none;border:1px solid var(--amber);color:var(--amber);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:8px 14px;border-radius:3px;cursor:pointer;margin-top:6px}
.play .bar{cursor:pointer;z-index:1}
.play .bar i{transition:left .25s linear}
.play.noclip small{letter-spacing:.2em}
.play.err small{color:var(--amber)}
/* FROM START: small and quiet beside PLAY, which starts at the voice (voice_start_s). */
.play .zero{padding:9px 8px;font-size:10px;letter-spacing:.12em;border-color:var(--phosphor-dim);color:var(--phosphor-dim);white-space:nowrap}
.play .zero:hover{color:var(--phosphor);border-color:var(--phosphor)}
/* Narrow: FROM START would squeeze the scrub bar to nothing, so the bar takes its own
   full-width line under PLAY, the time and FROM START. Only a player that has FROM START. */
@media (max-width:520px){.play[data-voice]{flex-wrap:wrap;row-gap:12px}.play[data-voice] .bar{order:1;flex:1 0 100%}.play[data-voice] small{margin-left:auto}}
/* A SERVED MESSAGE IS NEVER TRUNCATED ANYWHERE ON THE SITE (ruled 2026-09-28). The copy
   string in a row (.older .b: the older rows under the headline, ALL MESSAGES, Hear one's EAM
   row) wraps at any character instead of ending in an ellipsis (it is monospace, so it stays
   readable), and "corrected by a listener" takes its own line under it (.cb). The mockup's
   nowrap/ellipsis on .older .b above is overridden here. */
.older .b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-all}
.older .b .cb{display:block;font-style:normal;font-size:11px;letter-spacing:.04em;word-break:normal;overflow-wrap:normal}
.older .pm{font-style:normal;color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:11px;margin-right:4px}
/* UNCONFIRMED (valar-eam-feed, 2026-09-25): a real EAM nobody has named yet. Listed
   with the station's vote (??DJAS) in the preamble column, amber like the other
   caveats; picked, the vote stands in the preamble line, dimmed and marked. */
.older .um{font-style:normal;color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:11px;margin-right:4px}
.older .row.unc .p{color:var(--amber)}
.eam .pre.unc{color:var(--phosphor-dim);text-shadow:none}
.eam .meta .unc{color:var(--amber)}
.eam .meta .corr{cursor:help;text-decoration:underline dotted var(--phosphor-dim)}
.net .stale{margin-top:10px;font-size:12px;color:var(--amber)}
.foot-2{padding-top:8px;color:#a9a497}
.foot-2 a{color:#cfcabb}
/* PHONE WIDTH: grid items default to min-width:auto, so an unbreakable line (the
   compact list's nowrap bodies, a long SOURCE line) widened the whole console past
   the viewport. Every grid child may shrink; the clock scales down with its box. */
.shelf>*,.bay>*,.card>*,.older div>*{min-width:0}
.older div{grid-template-columns:76px 86px minmax(0,1fr)}
.clockbox{max-width:100%;box-sizing:border-box}
.clockbox svg{max-width:100%}
.card .ref,.eam .meta span,.net td{overflow-wrap:anywhere}
/* NO LAYOUT SHIFT WHEN THE FEED ARRIVES. The binders (same origin) land before the
   feed (another origin); the instruments then grew from "WAITING FOR FEED" to full
   height and pushed everything below them down (Lighthouse CLS 0.618 at 400 px).
   So the instruments hold roughly their loaded height from the first paint.
   #eam-body's figures are the measured height of a 30-character message (one row
   of cells at 30 a row, three at 10 a row) with the live feed's meta line, per
   width band. A longer message grows it; app.js (holdHeight) never lets it shrink. */
#eam-body{min-height:368px}
#net-body{min-height:190px}
@media (min-width:821px) and (max-width:1060px){#eam-body{min-height:400px}}
@media (max-width:820px){#eam-body{min-height:360px}#net-body{min-height:210px}}
@media (max-width:720px){#eam-body{min-height:428px}}
@media (max-width:520px){#eam-body{min-height:484px}}
@media (max-width:380px){#eam-body{min-height:520px}}
.pic img{background:var(--panel-edge)}
@media (max-width:520px){.older div{grid-template-columns:52px 70px minmax(0,1fr)}.card{padding:22px 18px 24px}.bay{padding:0 14px 16px}.shelf{padding:22px 14px}}
/* CHARACTER CELLS: the message body as a grid, the character over its 1-based
   position. 30 to a row; 10 to a row at phone width (720px and below, the mockup's
   shelf breakpoint, where a 30-cell row would fall under ~19px a cell), so 11 and
   21 start rows. Cells 1-6 share one phosphor-dim underline: it marks positions
   1-6 and nothing else. The plain string is in .vh for screen readers. */
.eam .body{letter-spacing:0}
.cells{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));row-gap:6px;min-height:31px}
.cells .c{display:flex;flex-direction:column;align-items:stretch;text-align:center;min-width:0}
.cells b{font-weight:400;font-size:15px;line-height:20px}
.cells i{font-style:normal;font-size:9px;line-height:11px;color:var(--phosphor-dim);overflow:hidden}
.cells .pa b{box-shadow:inset 0 -1px 0 var(--phosphor-dim)}
@media (max-width:720px){.cells{grid-template-columns:repeat(10,minmax(0,1fr));min-height:105px}}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The player keeps one height with a clip, without one (NO CLIP) or failed. */
.play{min-height:32px}
/* SELECTABLE LIST: every row is a button (role=button, Enter/Space). The current
   one carries a phosphor bar in the screen's left margin and lit text. */
.older .row{position:relative;z-index:1;cursor:pointer;border-radius:2px}
.older .row::before{content:"";position:absolute;left:-14px;top:3px;bottom:3px;width:3px;background:transparent}
.older .row.cur::before{background:var(--phosphor)}
.older .row.cur .t{color:var(--phosphor)}
.older .row.cur .b{color:var(--phosphor)}
.older .row:hover .t{color:var(--phosphor)}
.older .row:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* Below ~430px the header's "1 of N" (it arrives with the feed) wraps the header
   onto a second line and pushed the whole instrument down 18px: the 0.02 of CLS
   the page had at 400px. The header holds two lines there from the first paint. */
@media (max-width:440px){#eam .hdr{min-height:calc(2 * 1.55em)}}
/* ALL MESSAGES: the control under the five rows, and the log it opens on the same
   screen. The list scrolls inside the screen (at most ~60% of the viewport) and gives
   its rows back the 14px left margin the current-row bar sits in. */
.log-tog{display:block;margin-top:12px;background:none;border:1px solid var(--phosphor-dim);color:var(--phosphor);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:9px 14px;border-radius:3px;cursor:pointer}
.log-tog:hover{border-color:var(--phosphor)}
.log-tog:focus-visible,.log-filter input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.log-pane.anim{animation:logopen .18s ease-out}
@keyframes logopen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.log-filter{color-scheme:dark;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font-size:12px;color:var(--phosphor-dim)}
.log-filter label[for]{letter-spacing:.18em;color:var(--phosphor)}
.log-filter label[for] span{letter-spacing:.04em;color:var(--phosphor-dim)}
.log-filter input[type=search]{flex:1 1 180px;min-width:0;background:#000;border:1px solid var(--phosphor-dim);border-radius:3px;color:var(--phosphor);font:16px/1.2 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;padding:7px 9px}
.log-cc{display:inline-flex;align-items:center;gap:6px;cursor:pointer;letter-spacing:.06em}
.log-cc input{accent-color:var(--phosphor);width:16px;height:16px;margin:0}
.log-count{margin:10px 0 0;font-size:12px;color:var(--phosphor-dim);letter-spacing:.06em}
.log-list{box-sizing:border-box;margin:8px -14px 0;padding:4px 14px 8px;max-height:60vh;max-height:60dvh;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--phosphor-dim);scrollbar-color:var(--phosphor-dim) transparent}
.older.log-list .row{grid-template-columns:62px 86px minmax(0,1fr) auto}
.log-list .n{color:var(--phosphor-dim);font-size:12px;white-space:nowrap;text-align:right}
.log-list .n b{color:var(--phosphor);font-weight:500}
.log-day{margin:10px 0 2px;font-size:11px;letter-spacing:.18em;color:var(--phosphor-dim)}
.log-day:first-child{margin-top:4px}
.log-none,.log-cap{margin:10px 0 2px;font-size:12px;color:var(--phosphor-dim)}
.log-cap a{color:var(--phosphor)}
.log-cap a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* A phone gives the copy its own line under the preamble, the full width of the screen. */
@media (max-width:520px){.older.log-list .row{grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"t p n" ". b b";gap:0 8px;padding:2px 0}
  .log-list .row .t{grid-area:t}.log-list .row .p{grid-area:p}.log-list .row .n{grid-area:n}.log-list .row .b{grid-area:b}}
/* BINDER MAPS (binders.json "map"): a full-width figure after the copy and photo,
   whichever side the photo is on. Inline SVG built by app.js; tokens only. Land is
   --panel-edge on the recessed --panel-2; no arcs, no range rings. Inside a .pt
   group labels are scaled by --u (map units per CSS px), so they keep one screen size
   while the map scales with the panel; dots by --d, which lets them shrink a little
   on a small map (app.js loadMap). */
.card>.map{grid-column:1/-1}
.map .mapsvg{display:block;width:100%;height:auto}
.map .land{fill:var(--panel-edge);stroke:var(--panel-2);stroke-width:.8;stroke-linejoin:round}
.map-net .land{stroke:none}
.map .field{fill:var(--rack-2);fill-opacity:.5;stroke:var(--ink-2);stroke-width:1;stroke-linejoin:round}
.map .pt>text{transform:scale(var(--u,1))}
.map .pt>circle,.map .pt>rect{transform:scale(var(--d,1))}
.map .pt circle,.map .pt rect{stroke-width:1.2}
.map .pt text{font:500 11px "IBM Plex Mono",monospace;fill:var(--ink);stroke:var(--panel-2);stroke-width:3px;stroke-linejoin:round;paint-order:stroke}
.map .tx circle{fill:var(--led);stroke:var(--led-dim)}
.map .rx circle{fill:var(--phosphor-dim);stroke:#0E3A1D}
.map .rx.lit circle{fill:var(--phosphor);stroke:var(--phosphor-dim)}
.map .rx.pending circle{fill:var(--panel-2);stroke:var(--amber);stroke-width:2.4}
.map .rx.noaudio circle{fill:var(--muted);stroke:var(--ink-2)}
.map .rx.offline circle{fill:var(--panel-2);stroke:var(--muted);stroke-width:2.4}
.map .base rect{fill:var(--led);stroke:var(--led-dim)}
.map-key{margin-bottom:6px;display:flex;flex-wrap:wrap;gap:2px 18px}
.map-key p{margin:0}
.map-key .names{display:none}
.map-key .sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:-1px;box-sizing:border-box}
.map-key .sw.tx{background:var(--led);border:1px solid var(--led-dim)}
.map-key .sw.rx{background:var(--phosphor-dim);border:1px solid #0E3A1D}
.map-key .sw.rx.lit{background:var(--phosphor);border:1px solid var(--phosphor-dim);box-shadow:0 0 0 2px #4cff7a55}
.map-key .sw.rx.pending{background:var(--panel-2);border:2px solid var(--amber)}
.map-key .sw.rx.noaudio{background:var(--muted);border:1px solid var(--ink-2)}
.map-key .sw.rx.offline{background:var(--panel-2);border:2px solid var(--muted)}
.map-key .sw.base{border-radius:0;background:var(--led);border:1px solid var(--led-dim)}
.map-key .sw.field{border-radius:0;width:12px;background:var(--rack-2);opacity:.6;border:1px solid var(--ink-2)}
/* Phone width: the key lists every name too (some labels are not drawn, below). */
@media (max-width:499px){.card>.map{margin-inline:0}.map-net .map-key{display:block}.map-net .map-key .names{display:inline}}
/* The net map's labels (app.js netLabels): a label that would overlap another label or
   dot is not drawn (lbl-off); its dot shows it on tap, focus or Enter, and the labels it
   would then cover step aside (lbl-hide). */
.map-net .pt.lbl-off>text,.map-net .pt.lbl-hide>text{display:none}
/* THE NET MAP, LIVE (app.js NET). A receiver heard in the last hour is lit, with a
   ring that pulses out from it (none under prefers-reduced-motion); otherwise dim.
   A transmit site is a button: a finger-sized hit circle behind the dot, a ring
   when it is open or focused, and its panel (.map-tip) over the dot. */
.map .rx circle.halo{display:none;fill:none;stroke:var(--phosphor);stroke-width:1.5}
.map .rx.lit circle.halo{display:inline;animation:rxpulse 2.4s ease-out infinite}
@keyframes rxpulse{from{transform:scale(var(--d,1));opacity:.8}to{transform:scale(calc(var(--d,1) * 2.8));opacity:0}}
@media (prefers-reduced-motion:reduce){.map .rx.lit circle.halo{display:none}}
.map-net{position:relative}
.map .tx,.map .rx[role=button]{cursor:pointer;outline:none}
.map .pt circle.hit{fill:transparent;stroke:none}
.map .rx.on circle:not(.hit):not(.halo),.map .rx:focus-visible circle:not(.hit):not(.halo){stroke:var(--ink);stroke-width:2.4}
.map .rx:focus-visible circle.hit{stroke:var(--amber);stroke-width:1.5}
.map .tx.on circle:not(.hit),.map .tx:focus-visible circle:not(.hit){stroke:var(--ink);stroke-width:2.4}
.map .tx:focus-visible circle.hit{stroke:var(--amber);stroke-width:1.5}
.map-tip{position:absolute;z-index:2;left:0;top:0;box-sizing:border-box;max-width:min(260px,calc(100% - 16px));background:var(--instrument);color:#7fdc98;font:500 12px/1.45 "IBM Plex Mono",monospace;padding:8px 11px;border-radius:4px;box-shadow:0 2px 10px #0007;pointer-events:none}
.map-tip[hidden]{display:none}
.map-tip b{display:block;color:var(--phosphor);font-weight:600}
.map-tip span{display:block}
.map-tip p{margin:4px 0 0;color:#e8e2d0}
/* The net map's chooser (app.js openChoose): a tap with two (or three) dots' centres within
   one tap radius of it, and of each other, lists them; each line is a button that acts as a tap
   on that dot. Anchored at the tap, inside the map. A short fade, none under reduced motion. */
.map-choose{position:absolute;z-index:3;left:0;top:0;display:flex;flex-direction:column;min-width:128px;max-width:calc(100% - 8px);box-sizing:border-box;padding:3px;background:var(--instrument);border:1px solid var(--panel-edge);border-radius:4px;box-shadow:0 2px 10px #0007;animation:choosein .12s ease-out}
.map-choose[hidden]{display:none}
.map-choose button{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 10px;background:none;border:0;border-radius:3px;color:#7fdc98;font:500 12px/1.2 "IBM Plex Mono",monospace;text-align:left;cursor:pointer}
.map-choose button+button{border-top:1px solid #ffffff14}
.map-choose button:hover{background:#ffffff0f;color:var(--phosphor)}
.map-choose button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;color:var(--phosphor)}
.map-choose .sw{flex:none;width:8px;height:8px;border-radius:50%;box-sizing:border-box}
.map-choose .sw.tx{background:var(--led);border:1px solid var(--led-dim)}
.map-choose .sw.rx{background:var(--phosphor-dim);border:1px solid #0E3A1D}
.map-choose .sw.rx.lit{background:var(--phosphor);border:1px solid var(--phosphor-dim)}
.map-choose .sw.rx.pending{background:var(--panel-2);border:2px solid var(--amber)}
.map-choose .sw.rx.noaudio{background:var(--muted);border:1px solid var(--ink-2)}
.map-choose .sw.rx.offline{background:transparent;border:2px solid var(--muted)}
/* A phone's map is short (about 120 px at 390): three lines still fit inside it. */
@media (max-width:499px){.map-choose{padding:2px}.map-choose button{min-height:28px;padding:0 8px;font-size:11px}}
@keyframes choosein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.map-choose{animation:none}}
/* WINGS MAP, INTERACTIVE (Binder 2, ruled 2026-09-25). Each wing is a button that zooms
   the SVG's viewBox to its field (app.js zoomTo); there each flight is a button: its
   outline (dashed), letter, MAF (square) and LFs (dots). Strokes don't scale with the
   zoom. "deactivated sites" adds grey dots. The panel is the net map's .map-tip. */
.map-wings{position:relative}
.map .land,.map .field,.map .fl-bound{vector-effect:non-scaling-stroke}
.map-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.map-btn{background:var(--panel-2);border:1px solid var(--ink-2);color:var(--ink);font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:3px;cursor:pointer;min-height:32px}
.map-btn[hidden]{display:none}
.map-btn:hover{border-color:var(--ink)}
.map-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.map-btn.toggle[aria-pressed="true"]{background:var(--ink-2);color:var(--panel);border-color:var(--ink)}
.map-btn.toggle::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:0;background:var(--screw);border:1px solid var(--ink-2)}
/* Footprints (all three wings only): Warren and Minot, the outer hull of the flights,
   lightly shaded; Malmstrom, the EIS county extent, dotted. Tap zooms; no hover state. */
.map .wing[role=button]{cursor:pointer;outline:none}
.map .foot{fill:var(--rack-2);fill-opacity:.28;stroke:var(--ink-2);stroke-width:.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map .extent{fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-dasharray:1.5 3;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:visible}
.map .wing:focus-visible .foot,.map .wing:focus-visible .extent{stroke:var(--amber);stroke-width:2.5}
.map-wings.zoomed .wing{cursor:default}
.map-wings.zoomed .wing .foot,.map-wings.zoomed .wing:not(.cur) .extent{display:none}
.map-wings.zoomed .wing .extent{pointer-events:none}
/* Bases: a button with its panel inside a zoom. The label keeps one screen size and moves
   to stay inside the map; with no room it hangs off a leader line (placeLabels). */
.map .pt>.lbl{transform:scale(var(--u,1))}
.map .base .leader{stroke:var(--ink-2);stroke-width:1;display:none}
.map .base.led .leader{display:inline}
.map .base.lbl-off .lbl{display:none}
.map .base circle.hit{fill:transparent;stroke:none}
.map-wings .base{cursor:pointer;outline:none}
.map .base.on rect,.map .base:focus-visible rect{stroke:var(--amber);stroke-width:2.4}
.map .flight{cursor:pointer;outline:none}
.map .fl-bound{fill:var(--rack-2);fill-opacity:.14;stroke:var(--ink-2);stroke-width:1.3;stroke-dasharray:5 3;stroke-linejoin:round}
.map .flight:hover .fl-bound{fill-opacity:.26}
.map .flight.on .fl-bound,.map .flight:focus-visible .fl-bound{fill-opacity:.3;stroke:var(--amber);stroke-width:2.6;stroke-dasharray:none}
.map .flight circle.hit{fill:transparent;stroke:none}
.map .flight:focus-visible .maf rect{stroke:var(--amber);stroke-width:2.4}
.map .lf circle{fill:var(--ink);stroke:var(--panel-2);stroke-width:.8}
.map .maf rect{fill:var(--led);stroke:var(--led-dim)}
/* Provenance on the map: solid = coordinates from a named source (siloworld.net); hollow =
   hand-digitized from HAER CO-84 sheet 1. */
.map .lf.hollow circle{fill:var(--panel-2);stroke:var(--ink);stroke-width:1.1}
.map .maf.hollow rect{fill:var(--panel-2);stroke:var(--led);stroke-width:1.6}
.map-wings .map-tip{pointer-events:auto;max-width:min(300px,calc(100% - 16px))}
.map-tip .ids{margin-top:4px;color:#cfe9d6;overflow-wrap:anywhere}
.map-tip a.to-capsule{display:block;margin-top:6px;color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.map-tip a.to-capsule:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.map-key .sw.maf.hollow{background:var(--panel-2);border:1.5px solid var(--led)}
.map-key .sw.lf.hollow{background:var(--panel-2);border:1px solid var(--ink)}
.map-key .sw.hull{border-radius:0;width:12px;background:var(--rack-2);opacity:.45;border:1px solid var(--ink-2)}
.map-key .sw.eisx{border-radius:0;width:12px;background:none;border:1.5px dotted var(--ink-2)}
.map-key .yrs{flex-basis:100%;font-size:11px}
.map-key .yrs span{color:var(--ink-2)}
.map .fl-label text{font:600 15px "Barlow Condensed","IBM Plex Mono",sans-serif;fill:var(--ink);stroke:var(--panel-2);stroke-width:3px;paint-order:stroke;stroke-linejoin:round;pointer-events:none}
.map .dz circle{fill:var(--screw);stroke:var(--ink-2);stroke-width:.6;fill-opacity:.9}
.map .deact{display:none;pointer-events:none}
.map-wings.deact-on .deact{display:inline}
.map-tip i{display:block;margin-top:4px;font-style:normal;color:#a9a393;font-size:11px}
.map-err{color:var(--led-dim);font-weight:600}
.map-key .sw.maf{border-radius:0;background:var(--led);border:1px solid var(--led-dim)}
.map-key .sw.lf{width:6px;height:6px;background:var(--ink)}
.map-key .sw.flight{border-radius:0;width:14px;background:var(--panel-2);border:1.5px dashed var(--ink-2)}
.map-key .sw.dz{width:7px;height:7px;background:var(--screw);border:1px solid var(--ink-2)}
/* SIX BINDERS (ruled 2026-09-25). The headline's character cells are buttons: a
   pick writes the legend line under them (The message binder's positions table).
   A stub binder is one "Draft pending" line and a SOURCES block. The crew's
   timeline is a rail of stops; the picked stop's note shows under it. */
.cells button.c{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;border-radius:2px;-webkit-tap-highlight-color:transparent}
.cells .c:hover b{color:#b9ffcb}
.cells .c:focus-visible{outline:1px solid var(--amber);outline-offset:1px}
.cells .c.on b{background:var(--phosphor-dim);color:#eaffef;box-shadow:none}
.cells .c.on i{color:var(--phosphor)}
/* READ TWO WAYS (valar-eam-feed position_notes): a cell with a note, '?' or filled, carries a
   small --amber corner tick; tapping it says what was heard. */
.cells .c.tw b{background-image:linear-gradient(225deg,var(--amber) 0 4px,transparent 4px)}
.eam .legend{margin:8px 0 0;letter-spacing:0;word-break:normal;overflow-wrap:anywhere;font:500 12px/1.45 "IBM Plex Mono",monospace;color:#7fdc98;min-height:1.45em;max-width:none}
.card.solo,.card.solo.flip{grid-template-columns:1fr}
/* No photo: the copy takes the card's width; nothing is held for an image. */
.card.solo p{max-width:none}
.card .draft{color:var(--ink-2);font:500 13px/1.5 "IBM Plex Mono",monospace;letter-spacing:.04em}
.card .sources{margin-top:14px;border-top:1px solid var(--panel-edge);padding-top:10px;font:500 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2)}
.card .sources b{display:block;font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;color:var(--ink);margin-bottom:6px}
.card .sources ul{margin:0;padding:0;list-style:none}
.card .sources li{margin:0 0 6px;overflow-wrap:anywhere}
.card .sources li:last-child{margin-bottom:0}
.card>.timeline{grid-column:1/-1}
/* THE DAY AS A RAIL (ruled 2026-09-29). The crew's day is one line, not a row of tabs: a
   2 px --phosphor-dim rail (5.34:1 on --panel) with five 10 px nodes, hollow, or filled
   when picked. The fill is the rail's own green, --phosphor-dim: this card is putty, and
   --tint-eam (the instruments' green) is 1.12:1 on it, so a picked node read as hollow.
   The picked label is also underlined in it, so the pick never rests on colour alone. The clock time above a node
   is --ink-2 (5.72:1 on --panel; --phosphor-dim-text is for the dark instruments and is
   2.97:1 here). Labels are the tabs' small caps.
   SPACING is by time. The source gives 24 h for the alert and about an hour for
   changeover; for the stretch from the 8 a.m. mass brief to the drive it gives no
   figure, and for the drive one to two hours (arrival "around noon"). So the three short
   stretches share one weight and the alert takes 24 (.tl-long, from span_h in
   binders.json).
   COMPROMISE: at 1180 a 1:24 share would leave a short stretch ~35 px, narrower than
   CHANGEOVER. Each stretch is therefore at least --tl-gap wide (12% of the rail, never
   under 94 px: CHANGEOVER is 81 px), so no label ever meets the next; the short three
   come out equal at that minimum and the alert keeps the rest, most of the rail (63% at
   1180, still over twice a short stretch at 601). At 600 px and below the rail runs down the left, nodes stacked, the
   note under the picked node (app.js placeNote); the alert's stretch is drawn longer. */
.timeline .tl-rail{--tl-gap:max(94px,12%);list-style:none;margin:0;padding:0;display:flex;position:relative}
.timeline .tl-rail::before{content:"";position:absolute;left:5px;right:5px;top:24px;height:2px;background:var(--phosphor-dim)}
.timeline .tl-rail li{flex:1 1 0;min-width:var(--tl-gap);position:relative;display:flex}
.timeline .tl-rail li.tl-long{flex-grow:24}
.timeline .tl-rail li:last-child{flex:0 0 auto;min-width:0;justify-content:flex-end}
.tl-step{display:flex;flex-direction:column;align-items:flex-start;gap:0;background:none;border:0;border-radius:3px;padding:0 4px 4px 0;margin:0;color:var(--ink);cursor:pointer;min-height:44px;text-align:left;font:inherit}
.timeline li:last-child .tl-step{align-items:flex-end;text-align:right;padding:0 0 4px 4px}
.tl-step i{display:block;height:16px;margin:0 0 4px;font:500 11px/16px "IBM Plex Mono",monospace;font-style:normal;color:var(--ink-2);white-space:nowrap}
.tl-dot{display:block;box-sizing:border-box;width:10px;height:10px;border-radius:50%;border:2px solid var(--phosphor-dim);background:var(--panel);position:relative;z-index:1}
.tl-step b{display:block;margin-top:6px;font:600 15px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent;padding-bottom:1px}
.tl-step:hover .tl-dot{border-color:var(--ink)}
.tl-step:hover b{border-bottom-color:var(--panel-edge)}
.tl-step:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tl-step.on .tl-dot{background:var(--phosphor-dim)}
.tl-step.on b{border-bottom-color:var(--phosphor-dim)}
.timeline .tl-note{margin:10px 0 0;min-height:3em;max-width:70ch}
.timeline .tl-src{margin:6px 0 0;max-width:none;font:500 11px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2)}
@media (max-width:600px){
  .timeline .tl-rail{flex-direction:column}
  .timeline .tl-rail::before{content:none}
  .timeline .tl-rail li,.timeline .tl-rail li:last-child{display:block;min-width:0;flex:none;padding:0 0 0 0}
  /* the rail, drawn per stop: into the node from above, out of it below (past the note) */
  .timeline .tl-rail li::before,.timeline .tl-rail li::after{content:"";position:absolute;left:4px;width:2px;background:var(--phosphor-dim)}
  .timeline .tl-rail li::before{top:0;height:17px}
  .timeline .tl-rail li::after{top:27px;bottom:0}
  .timeline .tl-rail li:first-child::before,.timeline .tl-rail li:last-child::after{content:none}
  .timeline .tl-rail li.tl-long{padding-bottom:40px}
  .tl-step,.timeline li:last-child .tl-step{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;align-content:center;justify-items:start;text-align:left;width:100%;padding:6px 0 6px 22px;min-height:44px;box-sizing:border-box}
  .tl-dot{position:absolute;left:0;top:17px}
  .tl-step b{grid-column:1;grid-row:1;margin:0}
  .tl-step i{grid-column:2;grid-row:1;margin:0;height:auto}
  .timeline li .tl-note{margin:2px 0 10px 22px;min-height:0}
}
/* Binder tabs (ruled 2026-09-25), tokens only; the text colour is whichever of
   --ink / --panel reads best on each (contrast in the PR). Red (.tab) is Who built this. */
.tab.t-phos{background:var(--phosphor);color:var(--ink)}
.tab.t-amber{background:var(--amber);color:var(--ink)}
.tab.t-rack{background:var(--rack);color:var(--panel)}
.tab.t-rack2{background:var(--rack-2);color:var(--panel)}
.tab.t-ink2{background:var(--ink-2);color:var(--panel)}
/* SOURCES (ruled 2026-09-25): one line, 'SOURCES · N ▸', in the label style; a native
   <details> opens it in place. ALL SOURCES, beside it and outside <details>, goes to this
   binder's section on /sources. The summary never wraps (480 px holds both). */
.card .sources{position:relative}
.sources summary{display:inline-block;list-style:none;cursor:pointer;white-space:nowrap;padding:8px 0;font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.sources summary::-webkit-details-marker{display:none}
.sources summary:hover{color:var(--ink)}
.sources .tri{font-style:normal;display:inline-block;margin-left:2px;transition:transform .15s}
.sources details[open] .tri{transform:rotate(90deg)}
.sources details ul{margin:4px 0 2px}
.sources .reviewed{margin:8px 0 2px;font:500 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2)}
.sources .src-all{position:absolute;top:10px;right:0;padding:8px 0;white-space:nowrap;font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;color:var(--ink-2);text-underline-offset:3px}
.sources a{color:var(--ink)}
.txt a.mail{color:var(--ink);text-underline-offset:3px}
.sources summary:focus-visible,.sources a:focus-visible,.srcpage a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* A photo's figcaption: caption, then its source line, then the credit, each its own line. */
.pic figcaption .cap-src,.pic figcaption .credit{display:block;margin-top:4px}
/* /sources (sources.html, assets/sources.js): every citation, grouped by binder. */
.srcpage .room{padding-top:28px}
.srcs{padding:26px 30px 30px}
.srcs .back{display:inline-block;padding:8px 0;font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.srcs h1{margin:10px 0 10px}
.srcs>p{margin:0 0 12px;max-width:70ch}
.srcs section{border-top:1px solid var(--panel-edge);padding:18px 0 4px;scroll-margin-top:12px}
.srcs section.hit{background:linear-gradient(var(--panel-2),transparent 70%)}
.srcs h2{margin:0 0 10px;font-size:18px}
.srcs h3{margin:12px 0 6px;font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.srcs ul{margin:0;padding:0;list-style:none;font:500 12px/1.55 "IBM Plex Mono",monospace;color:var(--ink-2)}
.srcs li{margin:0 0 8px;overflow-wrap:anywhere}
.srcs li a{color:var(--ink)}
.srcs .none{font:500 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);margin:0}
@media (max-width:520px){.srcs{padding:22px 18px 24px}}

/* ---- The capsule's drawing (HAER CO-84 sheet 4) ---------------------------------
   Full width after The capsule's copy and photo (the binder order, below). The labels are SVG buttons
   over the drawing, scaled with it; a picked one is boxed and its leader drawn in
   --amber over an --ink casing, and its line shows under the drawing (.dr-note, one
   line held open so nothing moves). 700 px and up only: under 700 px the figure is
   SHEETS ON PHONES (below), with no labels and no label list. */
.card>.drawing{grid-column:1/-1;margin:0}
.drawing{scroll-margin-top:12px}
.drawing:focus{outline:none}
.drawing:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.drawing .dr-stage{position:relative}
.drawing .dr-stage img{background:#fff}
.drawing .dr-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.drawing .dr-hit{fill:transparent;stroke:none;cursor:pointer;outline:none}
.drawing .dr-hit:hover{fill:#F2B23326}
.drawing .dr-hit:focus-visible{stroke:var(--ink);stroke-width:2px;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.drawing .dr-mark{pointer-events:none}
.drawing .dr-mark .case{fill:none;stroke:var(--ink);stroke-width:5px;vector-effect:non-scaling-stroke}
.drawing .dr-mark .amb{fill:none;stroke:var(--amber);stroke-width:3px;vector-effect:non-scaling-stroke}
.drawing .dr-mark .box{fill:#F2B2332E}
.drawing .dr-mark .end{fill:var(--amber);stroke:var(--ink);stroke-width:1.5px}
.drawing .dr-note{margin:8px 2px 0;min-height:1.5em;font:500 13px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
.drawing .dr-note.on{color:var(--ink);box-shadow:inset 3px 0 0 var(--amber);padding-left:9px}
.drawing .dr-src{display:block;margin-top:4px}
/* Malmstrom from Jim Kirk's list (ruled 2026-09-25): P-T (564th, deactivated) draw only with
   the deactivated layer, in its style: grey outline and grey markers. */
.map .dz-out{fill:var(--screw);fill-opacity:.12;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.map .flight.dead .fl-bound{fill:var(--screw);fill-opacity:.12;stroke:var(--ink-2);stroke-dasharray:2 3}
.map-key .sw.solid{border-radius:2px;background:var(--ink);border:1px solid var(--ink)}
.srcs li.retired{color:var(--ink-2)}
.srcs li.retired::before{content:"No longer used \2014  ";font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.map-key .yrs,.map-key p{overflow-wrap:anywhere;min-width:0;max-width:100%}

/* The missile sites: the NPS map of the Minuteman fields as an inset beside the wings map
   (under it at 820 px and below); the deactivated layer's hollow outlines traced from it. */
.card>.map-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
/* The inset comes first in the DOM (2026-10-06): beside the map on wide screens, above it at 820 px
   and below, so the map's caption is followed by the binder's SOURCES row, nothing between. */
.map-row>.map{margin:0;grid-column:1;grid-row:1}
.map-row>.map-inset{margin:0;grid-column:2;grid-row:1}
.map-inset img{background:#fff}
@media (max-width:820px){.card>.map-row{grid-template-columns:minmax(0,1fr)}.map-row>.map,.map-row>.map-inset{grid-column:1;grid-row:auto}.map-row>.map-inset{max-width:420px}}
@media (max-width:499px){.card>.map-row>.map{margin-inline:0}}
.map .nps-trace path{fill:none;stroke:var(--ink-2);stroke-width:calc(1.4px * var(--u,1));stroke-dasharray:calc(4px * var(--u,1)) calc(3px * var(--u,1))}
.map-key .sw.nps{width:10px;height:10px;background:none;border:1.5px dashed var(--ink-2)}

/* ---- The missile (ruled 2026-09-25) -----------------------------------------------
   The scale drawing is ink on the panel, tokens only: the missile's outline (the fact
   sheet's length by diameter, nothing inside), one picked reference beside it, scale
   bars in feet and metres. Its SVG scales with its column (no sideways scroll at any
   width); the reference buttons, the reference's line and the stages sit beside it on
   wide screens and under it at 820 px and below. The day counter is the mockup's
   seven-segment digits lit --phosphor. SOURCES and then the coda close the binder. */
.card>.mm-scale{grid-column:1/-1;margin:0;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:8px 26px;align-items:start}
.mm-scale .mm-stage{background:var(--panel);border:1px solid var(--panel-edge);border-radius:2px;padding:6px 4px}
.mm-svg{display:block;width:100%;height:auto}
.mm-svg .ink{stroke:var(--ink);stroke-width:2.5;fill:none;stroke-linecap:round}
.mm-svg .thin{stroke:var(--ink-2);stroke-width:1.5;fill:none}
.mm-svg .outline{fill:none;stroke:var(--ink);stroke-width:3}
.mm-svg .fill{fill:var(--ink)}
.mm-svg text{fill:var(--ink)}
.mm-svg .name{font:600 24px/1 "Barlow Condensed",sans-serif;letter-spacing:.14em}
.mm-svg .lbl{font:500 17px/1 "IBM Plex Mono",monospace;fill:var(--ink-2)}
.mm-side{padding-top:4px;min-width:0}
.mm-side .mm-h{margin:0 0 8px;font:600 12px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.mm-refs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mm-ref{background:var(--panel-2);border:1px solid var(--panel-edge);border-radius:3px;padding:8px 14px;min-height:44px;color:var(--ink);cursor:pointer;font:600 15px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.mm-ref:hover{border-color:var(--ink-2)}
.mm-ref:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mm-ref[aria-pressed="true"]{background:var(--ink-2);border-color:var(--ink);color:var(--panel)}
.mm-side .mm-note{margin:0 0 16px;min-height:4.5em;font:500 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink);box-shadow:inset 3px 0 0 var(--amber);padding-left:9px;max-width:none}
.mm-parts ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--panel-edge)}
.mm-parts li{border-bottom:1px solid var(--panel-edge);padding:7px 2px;font:500 12px/1.45 "IBM Plex Mono",monospace;color:var(--ink-2)}
.mm-parts li b{display:block;font:600 14px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.mm-scale figcaption{grid-column:1/-1}
@media (max-width:820px){.card>.mm-scale{grid-template-columns:minmax(0,1fr)}.mm-scale .mm-stage{max-width:440px}}
.card>.mm-count{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.mm-days{--led:var(--phosphor);--led-dim:color-mix(in srgb,var(--phosphor-dim) 22%,var(--instrument))}
.mm-days svg{height:56px}
.mm-count-txt{min-width:0;flex:1 1 220px}
.mm-count-txt .label{margin:0 0 6px}
.card .mm-under{margin:0 0 4px;font:500 13px/1.4 "IBM Plex Mono",monospace;color:var(--ink-2)}
.mm-under b{font:600 18px/1 "Barlow Condensed",sans-serif;letter-spacing:.06em;color:var(--ink)}
.card .mm-says{margin:0;font:500 11px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2)}
.card>.end{grid-column:1/-1}
.card>.end .sources{margin-top:0}
.card .coda{margin:14px 0 0;border-top:1px solid var(--panel-edge);padding-top:12px;font:500 13px/1.5 "IBM Plex Mono",monospace;color:var(--ink);max-width:none}
.card .fs{border-bottom:1px dotted var(--ink-2)}
.card .fs-missing{background:var(--amber);color:var(--ink);padding:0 3px;font-family:"IBM Plex Mono",monospace}
.map-tip a.to-missile{display:block;margin-top:6px;color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.card[id]{scroll-margin-top:12px}
.card[id]:focus{outline:none}
/* The missile's HAER drawing (SD-50-C sheet 1): the same tap-label figure as sheet 4, after
   the binder's other figures, with the sheet's site plan static beside it
   (.dr-row); the two stack at 720 px and below (under 700 px: SHEETS ON PHONES). */
.drawing .dr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:18px;align-items:start}
.drawing .dr-main{min-width:0}
.drawing .dr-beside img{display:block;width:100%;height:auto;background:#fff;border-radius:2px}
.drawing .dr-beside-cap{margin:6px 2px 0;font:500 11px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);max-width:none}
@media (max-width:720px){.drawing .dr-row{grid-template-columns:minmax(0,1fr)}.drawing .dr-beside{max-width:420px}}
/* THE DEVICE (sixth of the binders on the page, ruled 2026-09-25): tab --instrument; the live Zulu clock in the
   shelf clock's box and renderer (--led on, --led-dim off), a fixed height and the
   8-character viewBox from the first paint, so nothing moves as it ticks; the latency line. */
.tab.t-inst{background:var(--instrument);color:var(--phosphor)}
.card .device{margin:4px 0 0}
.card .dev-clock{display:inline-block}
.card .dev-clock svg{display:block;height:56px;width:auto;max-width:100%}
.card .dev-latency{margin:12px 0 0;font:500 13px/1.5 "IBM Plex Mono",monospace;color:var(--ink)}
.card .dev-latency[hidden]{display:none}
@media (max-width:520px){.card .dev-clock svg{height:44px}}
/* THE ANNOUNCED LENGTH (ruled 2026-09-26): "ANNOUNCED LENGTH 35" under the headline's
   cells, when the broadcast announced one. Amber, with
   "· copied 30", when the copy shown is not that long. Absent otherwise. */
.eam .ann{margin:8px 0 0;max-width:none;font:600 11px/1.3 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--phosphor-dim)}
.eam .ann b{color:var(--phosphor);font-weight:600;letter-spacing:.06em}
.eam .ann.mis,.eam .ann.mis b{color:var(--amber)}
.eam .ann .cp{letter-spacing:.06em}
/* RECEPTIONS (valar-eam-feed, ruled 2026-09-26): under the message's player, each
   reception on its own line (time Z, station, length, kind) with the same player,
   smaller: PLAY at that recording's voice start, the bar, FROM START. NO CLIP when a
   reception has no recording of its own. */
.rxs{margin-top:14px;border-top:1px dashed var(--phosphor-dim);padding-top:10px;font-size:12px}
.rxs .rxh{color:var(--phosphor-dim);letter-spacing:.2em;font-size:11px;margin-bottom:8px}
.rxs ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rxs li{display:grid;gap:4px;min-width:0}
.rxs .rxi{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--phosphor-dim);letter-spacing:.04em}
.rxs .rxi b{color:var(--phosphor);font-weight:600;letter-spacing:.08em}
.rxs .rxi span{overflow-wrap:anywhere}
.rxs .play{min-height:28px;gap:10px}
.rxs .play button{padding:6px 12px;font-size:11px}
.rxs .play .zero{padding:6px 8px;font-size:10px}
.rxs .play small{font-size:11px}

/* ---- ONE ORDER FOR EVERY BINDER (ruled 2026-09-26) ---------------------------------
   tab + title (.b-head) → copy (.txt) + photo (.photo) → interactive pieces → SOURCES
   (.end; The missile's coda after it, the binder's last line). The DOM is in that order
   and nothing here reorders it: on wide screens the photo spans the head and copy rows
   beside them (flip: on the left); every other child of a card is full width, in DOM
   order. At 820 px and below, one column: head, copy, photo (image_first_narrow: head,
   photo, copy). */
.card{grid-template-areas:"head photo" "txt photo";grid-template-rows:auto 1fr}
.card.flip{grid-template-areas:"photo head" "photo txt"}
.card.solo,.card.solo.flip{grid-template-areas:"head" "txt"}
.card>:where(:not(.s3,.s4)){grid-column:1/-1}
.card>.b-head{grid-area:head}
.card>.txt,.card.flip>.txt{grid-area:txt;order:0;margin-top:-26px}
.card>.photo{grid-area:photo}
@media (max-width:820px){
  .card,.card.flip{grid-template-areas:"head" "txt" "photo";grid-template-rows:none}
  .card.imgfirst{grid-template-areas:"head" "photo" "txt"}
  .card.imgfirst>.txt{margin-top:0}
  .card.imgfirst>.photo{margin:-16px 0 0}
}

/* ---- THE VIEWER (ruled 2026-09-26) -------------------------------------------------
   A photo is a button (zoom-in cursor, the ⤢ mark in its corner); a drawing has FULL SIZE
   at its top right (700 px and up; under 700 px, FULL DRAWING under it). The
   viewer is a <dialog> over an --instrument backdrop: the bar (count, zoom, prev/next,
   CLOSE), the picture, then the binder's own caption in the .pic style. A drawing sits on
   --instrument like an aerial (ruled 2026-10-01: the dark around it is backdrop, and a tap
   there closes it). While it is open the page keeps its scrollbar's room and does not
   scroll. No transitions but the double-tap zoom's. */
.lb-open{display:block;position:relative;width:100%;margin:0;padding:0;border:0;border-radius:2px;background:none;color:inherit;font:inherit;text-align:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.lb-open:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.lb-ico{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:3px;background:#0C0D0CB3;color:var(--panel);pointer-events:none}
.lb-svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dr-wrap{position:relative}
.dr-wrap>.lb-open{position:absolute;top:8px;right:8px;width:auto;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border-radius:3px;background:var(--instrument);color:var(--panel);font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 1px 4px #0006}
.dr-wrap>.lb-open:hover{color:#fff}
html.lb-open{overflow:hidden;scrollbar-gutter:stable}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}
.lb::backdrop{background:#0C0D0CF2}
.lb-box{box-sizing:border-box;height:100%;max-width:1400px;margin:0 auto;padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.lb-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.lb-count{margin-right:auto;color:var(--panel);font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em}
.lb-grp{display:inline-flex;gap:6px}
.lb-grp[hidden]{display:none}
.lb .map-btn{min-height:40px;min-width:40px;font-size:12px}
.lb .map-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.lb-fig{flex:1;min-height:0;margin:0;display:flex;flex-direction:column}
.lb-view{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--instrument);border-radius:2px}
.lb-view:focus{outline:none}
.lb-view:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.lb-photo .lb-stage{position:absolute;inset:0}
.lb .lb-photo .lb-stage img,.lb-photo .lb-stage img{width:100%;height:100%;object-fit:contain;background:none;border-radius:0}
.lb-draw .lb-view{background:var(--instrument);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.lb-draw .lb-view.drag{cursor:grabbing}
.lb-draw .lb-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.lb-draw .lb-stage img{width:100%;height:100%;max-width:none;background:#fff;border-radius:0;-webkit-user-drag:none}
.lb .lb-note{flex:none}
.lb .lb-note[hidden],.lb-photo .lb-note{display:none}
.lb figcaption{flex:none;max-height:30vh;overflow:auto}


/* ---- The missile, exploded (HD 2001 p.34; ruled 2026-09-26) ----------------------------
   A line trace in the site's style: ink outlines, each part filled with its contractor's
   panel tone (the page's own colour legend, redrawn muted), labels as printed in ink (the
   FIGURE A lines hidden; they are on the card). A picked part lifts a little, outlined and
   led in --amber. 700 px and up only: under 700 px the still copy (SHEETS ON PHONES, below). */
.mm-exp{margin:0}
.mm-exp:focus{outline:none}
.mm-exp .ex-stage{background:var(--panel);border:1px solid var(--panel-edge);border-radius:2px;padding:6px}
.mm-exp .ex-svg{display:block;width:100%;height:auto;overflow:visible}
.ex-svg text{fill:var(--ink);font:600 8.6px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.02em}
.ex-svg .ex-fig{display:none}
.ex-hdr line{stroke:var(--ink);stroke-width:1.6}
.ex-hdr text{font-weight:700}
.ex-sec{cursor:pointer;outline:none}
.ex-sec path{stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round;fill:var(--panel-2)}
.ex-sec .ex-lead{stroke:var(--ink-2);stroke-width:.8}
.ex-sec .ex-lift{transition:transform .2s ease}
.ex-sec:hover path{stroke-width:1.6}
.ex-sec:hover text{fill:var(--ink)}
.ex-sec:focus-visible .ex-lbl text{fill:var(--ink);text-decoration:underline}
.ex-sec:focus-visible path{stroke:var(--amber);stroke-width:2}
.ex-sec.on .ex-lift{transform:translateY(-6px)}
.ex-sec.on path{stroke:var(--amber);stroke-width:2.4}
.ex-sec.on .ex-lead{stroke:var(--amber);stroke-width:1.6}
.ex-sec.on .ex-lbl text{fill:var(--ink);font-weight:700}
.ex-sec.on .ex-fig{display:inline}
@media (prefers-reduced-motion:reduce){.ex-sec .ex-lift{transition:none}}
.c-aerojet path,.sw.c-aerojet{fill:color-mix(in srgb,var(--led) 16%,var(--panel));background:color-mix(in srgb,var(--led) 16%,var(--panel))}
.c-autonetics path,.sw.c-autonetics{fill:color-mix(in srgb,var(--led) 42%,var(--panel));background:color-mix(in srgb,var(--led) 42%,var(--panel))}
.c-boeing path,.sw.c-boeing{fill:color-mix(in srgb,var(--rack) 16%,var(--panel));background:color-mix(in srgb,var(--rack) 16%,var(--panel))}
.c-ge path,.sw.c-ge{fill:color-mix(in srgb,var(--amber) 26%,var(--panel));background:color-mix(in srgb,var(--amber) 26%,var(--panel))}
.c-thiokol path,.sw.c-thiokol{fill:color-mix(in srgb,var(--led-dim) 22%,var(--panel));background:color-mix(in srgb,var(--led-dim) 22%,var(--panel))}
.c-bell path,.sw.c-bell{fill:color-mix(in srgb,var(--ink-2) 34%,var(--panel));background:color-mix(in srgb,var(--ink-2) 34%,var(--panel))}
.c-utc path,.sw.c-utc{fill:color-mix(in srgb,var(--phosphor-dim) 26%,var(--panel));background:color-mix(in srgb,var(--phosphor-dim) 26%,var(--panel))}
.mm-exp .ex-note{margin:8px 2px 0;min-height:1.5em;font:500 13px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);max-width:none}
.ex-card{margin:6px 0 0;padding:8px 11px;background:var(--panel);border:1px solid var(--panel-edge);box-shadow:inset 3px 0 0 var(--amber);font:500 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2)}
.ex-card[hidden]{display:none}
.ex-card b{display:block;font:600 15px/1.25 "Barlow Condensed",sans-serif;letter-spacing:.06em;color:var(--ink)}
.ex-card span{display:block}
.ex-card .ex-maker{color:var(--ink)}
.ex-card q{display:block;margin-top:4px;color:var(--ink)}
.ex-card i{display:block;font-style:normal;margin-top:2px}
.ex-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;padding:0;list-style:none;font:600 11px/1.3 "Barlow Condensed",sans-serif;letter-spacing:.14em;color:var(--ink-2)}
.ex-legend .sw{display:inline-block;width:14px;height:10px;margin-right:5px;vertical-align:-1px;border:1px solid var(--ink-2)}
.mm-exp .dr-src{display:block;margin-top:4px}
/* ---- SHEETS ON PHONES (ruled 2026-10-01: HAER sheets and the exploded missile on phones) --
   Under 700 px every sheet figure (The capsule's sheet 4; The missile's Delta-09
   axonometric, its site plan beside it, and the exploded missile) is a still drawing fit
   to width (.dr-phone: the detail crop from public/drawings/, or the whole drawing) with
   one button under it, FULL DRAWING, which opens the drawing in the viewer. The tap-label
   pieces are not drawn there: the drawing with its label buttons and FULL SIZE (.dr-wrap),
   its note, the site plan's own button, and the exploded view's parts, note and card.
   .dr-narrow is the caption's sentence naming the parts and its detail line, drawn under
   700 px only (the detail line not in the viewer, which shows the whole drawing). At
   700 px and up nothing of this block is drawn. */
.dr-phone,.drawing .dr-narrow,.drawing .dr-src.dr-narrow{display:none}
.dr-phone .dr-still{display:block;width:100%;height:auto;background:#fff;border-radius:2px}
.dr-full{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:8px 0 0;padding:0 14px;border:0;border-radius:3px;background:var(--instrument);color:var(--panel);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;text-align:center;cursor:pointer;box-shadow:0 1px 4px #0006}
.dr-full:hover{color:#fff}
.ex-phone .ex-svg{pointer-events:none}
@media (max-width:699.98px){
  .card .drawing .dr-wrap,.card .drawing .dr-note,.card .drawing .dr-beside>.lb-open,
  .card .mm-exp .ex-scroll,.card .mm-exp .ex-note,.card .mm-exp .ex-card{display:none}
  .card .dr-phone{display:block}
  .drawing .dr-narrow{display:inline}
  .drawing .dr-src.dr-narrow{display:block}
  .lb .drawing .dr-src.dr-narrow{display:none}   /* the viewer shows the whole drawing, not the detail */
}
/* The viewer: the exploded missile's still SVG in place of the image (FULL DRAWING, data-art). */
.lb-stage img[hidden]{display:none}
.lb-draw .lb-stage .lb-art{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible;background:var(--panel)}
.lb-art .ex-sec{cursor:inherit}
/* HEAR ONE (ruled 2026-09-28; mockup scratch hearone/mock; titled WHAT ELSE YOU'LL HEAR and
   placed after Copy it yourself, 2026-09-29): The message binder's picker, a dark screen.
   Site tokens only. Listen-only: the EAM row's small "copy this one ↑" (.ho-cy) is its one
   link to Copy it yourself.
   TYPES (ruled 2026-09-28: hierarchy first, colour second). One tint per type, on exactly
   three things: the row's label, its 3 px left bar and its PLAY button (border, text; fill when
   selected). Body text, dates and copies stay green. The four are variables so the device can
   take the same values. WCAG contrast on --instrument (#0C0D0C), label 600 13px (normal text,
   AA 4.5:1; the bar and the button border are UI, 3:1): EAM #4CFF7A 14.74:1, radio check
   #F5B342 10.58:1, authentication #5FD7FF 11.73:1, two-way traffic #D8D8D0 13.59:1. A filled
   button's text is --instrument on its tint, the same ratio.
   ONE PLAYER: the page's own .play (scrubber and time), moved by app.js into the selected
   row's .ho-slot, under its date line. Rows with nothing picked yet (8888, Skyking) sit under
   one dim NOT HEARD YET rule, with no bar and no button.
   DIM TEXT (ruled 2026-09-28): --phosphor-dim-text #3F9A5B, 5.55:1 on --instrument, is for
   TEXT only (the NOT HEARD YET label, the not-heard rows' names, descriptions and counts line).
   --phosphor-dim #1B6E37 (3.09:1) stays for the rule line, borders and anything non-text. */
:root{--tint-eam:#4CFF7A;--tint-rc:#F5B342;--tint-auth:#5FD7FF;--tint-traffic:#D8D8D0;--phosphor-dim-text:#3F9A5B}
.card>.hearone{grid-column:1/-1;margin:0;min-width:0;background:none;border:0;padding:0;box-shadow:none}
.hearone *{min-width:0}
.ho-screen{background:var(--instrument);color:var(--phosphor);border-radius:6px;padding:14px 16px 10px;font-family:"IBM Plex Mono",monospace;box-shadow:inset 0 0 0 2px #1d1f1d,inset 0 0 28px #000}
.ho-hdr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--phosphor-dim);margin-bottom:6px}
.ho-hdr b{color:var(--phosphor);font-weight:500;white-space:nowrap}
.hearone .ho-hdr span{white-space:normal;text-align:right}
/* WHAT ELSE YOU'LL HEAR is longer than HEAR ONE was: the title keeps its width and the band
   line wraps under it on a phone instead of running into it. */
.hearone .ho-hdr{flex-wrap:wrap}
.hearone .ho-hdr b{min-width:auto}
.card .hearone p.ho-lede{margin:0 0 10px;font:500 12px/1.5 "IBM Plex Mono",monospace;color:#7fdc98;max-width:none}
.ho-list{list-style:none;margin:0;padding:0}
.ho-row{--tint:var(--tint-eam);position:relative;padding:12px 0;border-bottom:1px dashed #1d3a26}
.ho-row.t-rc{--tint:var(--tint-rc)}
.ho-row.t-auth{--tint:var(--tint-auth)}
.ho-row.t-traffic{--tint:var(--tint-traffic)}
.ho-row:last-child{border-bottom:0}
.ho-row::before{content:"";position:absolute;left:-16px;top:12px;bottom:12px;width:3px;background:var(--tint)}
.ho-row.none::before{display:none}
.ho-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.ho-name{font:600 13px/1.2 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--tint)}
.card .hearone p.ho-desc{grid-column:1/-1;margin:2px 0 0;font:500 12px/1.45 "IBM Plex Mono",monospace;color:#7fdc98;max-width:none}
.ho-play{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--tint);color:var(--tint);font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;padding:8px 12px;border-radius:3px;cursor:pointer;white-space:nowrap;min-height:34px}
.ho-play span{color:var(--phosphor-dim);letter-spacing:.06em;font-weight:500}
.ho-row.cur .ho-play{background:var(--tint);color:var(--instrument)}.ho-row.cur .ho-play span{color:var(--instrument)}
.ho-play:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.card .hearone p.ho-meta{margin:6px 0 0;font:500 11px/1.45 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--phosphor-dim);max-width:none}
.hearone .ho-slot:empty{display:none}
.hearone .ho-slot .play{margin-top:10px;min-height:24px;gap:12px;flex-wrap:nowrap}
.hearone .ho-slot .play .bar{order:0;flex:1 1 auto;min-width:40px}
.hearone .ho-slot .play .bar::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.hearone .ho-slot .play .bar:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
.hearone .ho-slot .play small{margin-left:0;white-space:nowrap;font-size:11px;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.hearone .play .bar i{transition:none}}
.hearone .older.log-list.ho-copy{max-height:none;overflow:visible;margin:6px 0 0;padding:0;border-top:0;gap:0}
.hearone .ho-copy .row{cursor:default}
.ho-row.none .ho-name,.card .hearone .ho-row.none p.ho-desc{color:var(--phosphor-dim-text)}
.card .hearone p.ho-none{margin:6px 0 0;font:500 12px/1.45 "IBM Plex Mono",monospace;color:var(--phosphor-dim-text);max-width:none}
.ho-nh[hidden]{display:none}
.card .hearone p.ho-rule{display:flex;align-items:center;gap:10px;margin:12px 0 0;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--phosphor-dim-text);max-width:none}
.card .hearone p.ho-rule::after{content:"";flex:1;height:1px;background:var(--phosphor-dim)}
.ho-nh .ho-row{padding:10px 0}
.card .hearone p.ho-cyl{margin:6px 0 0;max-width:none}
.ho-cy{display:inline-flex;align-items:center;min-height:24px;background:none;border:0;padding:0;font:500 11px/1.2 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--tint-eam);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ho-cy:hover{color:var(--phosphor-hi,#a8ffbf)}
.ho-cy:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* THE MAP AERIALS (ruled 2026-09-28): a site's, a base's or an HF site's image in its map
   panel, created on the tap that opens it (app.js mountAerials). The panel widens to hold it;
   width and height on the <img> keep its box while it loads. The scale bar's width is set
   from the chip's ground span in JS (no inline style: the CSP allows none). */
.map-tip.has-aer,.map-wings .map-tip.has-aer{width:min(320px,calc(100% - 16px));max-width:none}
.map-tip .aer{margin:6px 0 2px}
.map-tip.has-aer2{width:min(480px,calc(100% - 16px))}
.map-tip .aer-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.map-tip .aer-pair .aer{margin-bottom:0;min-width:0}
.map-tip .aer img{display:block;width:100%;height:auto;background:#1b1d1b;border:1px solid #2c302c}
.map-tip .aer.photo img{max-height:min(320px,45vh);object-fit:contain}
.map-tip .aer-scale{margin-top:5px;color:#cfe9d6;font-size:11px;line-height:1.2}
.map-tip .aer-scale .bar{height:5px;margin-bottom:2px;border:1.5px solid #e8e2d0;border-top:0;box-sizing:border-box}
.map-tip .aer figcaption{margin-top:5px;color:#a9a393;font-size:11px;line-height:1.4}
.map-tip .aer figcaption span+span{margin-top:2px}
.map-tip .aer-err{margin-top:6px;color:var(--amber)}
.map-tip .aer-list{margin-top:6px;color:#cfe9d6}
.map-tip .aer-pick{margin:4px 4px 0 0;padding:4px 7px;min-height:28px;background:#1b1d1b;border:1px solid #4a4f4a;border-radius:3px;color:#e8e2d0;font:500 11px/1 "IBM Plex Mono",monospace;cursor:pointer}
.map-tip .aer-pick:hover{border-color:var(--phosphor)}
.map-tip .aer-pick:focus-visible,.map-tip .aer-back:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.map-tip .aer-back{display:block;margin-top:8px;background:#1b1d1b;color:#e8e2d0;border-color:#4a4f4a}
.map .flights .pt.on rect,.map .flights .pt.on circle:not(.hit){stroke:var(--amber);stroke-width:2.2}
.map .flights .pt[data-aer]:focus{outline:none}
.map-key .sw.aer{border-radius:0;width:9px;height:9px;background:var(--instrument);border:1.5px solid var(--amber)}
.map-key .aer-note{color:var(--ink-2)}
/* TAP-TO-ENLARGE (ruled 2026-09-28): the aerial in a map panel is a button (zoom-in cursor,
   the viewer's ⤢ mark in its corner) that opens it in THE VIEWER above (app.js lbOpen,
   kind "aerial"). The net map's panel takes taps while it holds one. In the viewer: the
   image on the --instrument view, dragged and zoomed like a drawing; the scale bar under
   it (its width set in JS for the size shown); then the panel's lines in the .pic caption.
   A double-tap eases to native and back, and not at all under prefers-reduced-motion. */
.map-tip.has-aer{pointer-events:auto}
.map-tip .aer-open{display:block;position:relative;width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.map-tip .aer-open:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.map-tip .aer-open .lb-ico{display:flex;margin:0;top:6px;right:6px;width:26px;height:26px;font-size:0}
.lb-aer .lb-view{background:var(--instrument)}
.lb-aer .lb-stage img{background:#1b1d1b}
.lb-aer.lb-nozoom .lb-view{cursor:default}
.lb-draw .lb-stage.ease{transition:transform .22s ease-out}
@media (prefers-reduced-motion:reduce){.lb-draw .lb-stage.ease{transition:none}}
.lb-scale{flex:none;align-self:flex-start;display:block;margin:8px 2px 0;font:600 11px/1 "IBM Plex Mono",monospace;color:var(--ink)}
.lb-scale[hidden]{display:none}
.lb-scale .bar{display:block;height:6px;margin-bottom:3px;border:2px solid var(--ink);border-top:0;box-sizing:border-box}
.lb-aer figcaption b{display:block;color:var(--ink);font-weight:600}
.lb-aer figcaption span{display:block}
.lb-aer figcaption span+span{margin-top:2px}
/* COPY IT YOURSELF: NEVER TRUNCATED. The copy is one cell per character in a grid that wraps
   (30 across, 10 at 720 px and below), yours over ours when checked, so a message of any
   length shows every character; nothing in the piece clips or ellipsizes it.
   DIM TEXT: text at --phosphor-dim-text; --phosphor-dim only for rails, borders and fills.
   ACCENT: the voice's position (outlined cell, lit span, tick, playhead) is --tint-eam. */
/* COPY IT YOURSELF (queue item 5, rulings 2026-09-26): the first panel of The message
   binder, straight after its copy (ruled 2026-09-29). The spec is docs/mockup/copy-it-yourself.html; these are its
   rules, prefixed cy- so nothing collides with the page's own .play, .tab, .ref, .timeline.
   The lamp caps are amber when lit (red stays the shelf clock's alone); the elapsed time and
   the score are the page's seven-segment renderer lit --phosphor. The pad's cells are the
   page's cells (30 a row, 10 a row at 720 px and below). The keypad is 2 rows of 16 above
   720 px and 4 rows of 8 at 720 px and below. With reduced motion the caret does not blink
   and nothing fades. */
.card>.cy{grid-column:1/-1}
.cy[hidden]{display:none}
.cy{--phosphor-mid:#7fdc98;--phosphor-hi:#a8ffbf;
  --cap-off-1:#38332b;--cap-off-2:#221f1a;--cap-off-ink:#756b58;
  --cap-on-1:#fff4cf;--cap-on-2:#ffd36a;--cap-on-3:#e9a326;--cap-on-ink:#3b2a06;
  --bezel-1:#d7d0bf;--bezel-2:#9d9684;
  display:grid;gap:12px;border-top:1px solid var(--panel-edge);padding-top:20px;min-width:0}
.cy>*{min-width:0}
.cy button{font:inherit;color:inherit}
.cy button:focus-visible,.cy [tabindex]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cy .cy-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 18px}
.cy .cy-engr{font:700 20px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 0 #fff9;margin:0}
/* No qualifying row (ruled 2026-09-30): the section is one line, "No fully timed EAM yet —
   check back", and nothing else. Plain text, no strip and no box, as the one-line states
   were (ruled 2026-09-28): --ink-2 #5B5C56 on --panel #F1ECDE, 5.72:1 (AA; ruled 2026-09-29). */
.card .cy p.cy-none{margin:0;font:500 12px/1.45 "IBM Plex Mono",monospace;color:var(--ink-2);max-width:none}
.card .cy .cy-sub{font:400 14px/1.45 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink-2);margin:6px 0 0;max-width:60ch}
.cy .cy-pick{display:flex;align-items:center;gap:8px}
.cy .cy-when{font:600 12px/1.2 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-align:center;min-width:17ch}
.cy .cy-when small{display:block;font-weight:500;color:var(--ink-2);letter-spacing:.12em;font-size:10px;margin-top:3px}
.cy .cy-knob{width:34px;height:34px;border-radius:4px;border:1px solid #a9a18d;background:linear-gradient(#fbf8f0,#dcd5c3);box-shadow:0 2px 0 #8f8878,inset 0 1px 0 #fff;cursor:pointer;font:700 14px/1 "Barlow Condensed",sans-serif;color:var(--ink);padding:0}
.cy .cy-knob:active{transform:translateY(2px);box-shadow:0 0 0 #8f8878,inset 0 1px 0 #fff}
.cy .cy-knob[disabled]{opacity:.45;cursor:default;transform:none}
/* the control strip: a recessed sub-panel with the lamps and the speaker */
.cy .cy-strip{background:var(--panel-2);border:1px solid var(--panel-edge);border-radius:6px;box-shadow:inset 0 1px 4px #0003;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.cy .cy-lamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
/* Only the lamps a row has (ruled 2026-10-01): n<count> on .cy-lamps sets the columns. */
.cy .cy-lamps.n1{grid-template-columns:minmax(0,1fr)}
.cy .cy-lamps.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cy .cy-lamps.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cy .cy-lamps.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cy .cy-bezel{background:linear-gradient(var(--bezel-1),var(--bezel-2));padding:4px;border-radius:6px;box-shadow:0 1px 0 #fff9,0 2px 3px #0004}
.cy .cy-lamp{height:62px;border-radius:3px;display:grid;place-items:center;align-content:center;gap:5px;text-align:center;padding:6px 8px;
  background:linear-gradient(var(--cap-off-1),var(--cap-off-2));color:var(--cap-off-ink);
  box-shadow:inset 0 0 0 1px #0009,inset 0 3px 8px #000b;
  font:700 14px/1.02 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,box-shadow .25s}
.cy .cy-lamp.on{background:radial-gradient(120% 95% at 50% 38%,var(--cap-on-1),var(--cap-on-2) 55%,var(--cap-on-3));color:var(--cap-on-ink);box-shadow:inset 0 0 0 1px #0004,inset 0 -3px 6px #b3780f66}
.cy .cy-bezel.now{box-shadow:0 1px 0 #fff9,0 0 16px 2px #f2b233aa}
.cy .cy-pips{display:flex;gap:5px;justify-content:center}
.cy .cy-pips i{width:7px;height:7px;border-radius:50%;background:#4b4437;box-shadow:inset 0 1px 1px #0008}
.cy .cy-lamp.on .cy-pips i{background:#e6b04a;box-shadow:inset 0 1px 1px #0003}
.cy .cy-lamp.on .cy-pips i.on{background:var(--cap-on-ink)}
.cy .cy-ctl{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.cy .cy-spk{width:54px;height:54px;border-radius:50%;flex:none;
  background:radial-gradient(circle,#161615 1.5px,transparent 1.9px) 0 0/6px 6px,radial-gradient(circle at 40% 35%,#55564f,#2f302c);
  box-shadow:inset 0 0 0 2px #1e1f1c,inset 0 2px 6px #000c,0 1px 0 #fff9}
.cy .cy-spk.live{box-shadow:inset 0 0 0 2px #1e1f1c,inset 0 2px 6px #000c,0 1px 0 #fff9,0 0 0 3px #f2b23355}
.cy .cy-play{min-width:104px;height:46px;border-radius:4px;border:1px solid #a9a18d;background:linear-gradient(#fbf8f0,#dcd5c3);box-shadow:0 3px 0 #8f8878,inset 0 1px 0 #fff;
  font:700 16px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.cy .cy-play:active{transform:translateY(3px);box-shadow:0 0 0 #8f8878,inset 0 1px 0 #fff}
.cy .cy-play svg{width:12px;height:12px}
.cy .cy-seg{--led:var(--phosphor);--led-dim:#0f2a17;background:var(--instrument);border-radius:4px;padding:8px 10px;box-shadow:inset 0 0 0 2px #262826,inset 0 0 12px #000,0 1px 0 #fff9;line-height:0}
.cy .cy-seg svg{height:30px;width:auto;display:block}
/* the broadcast timeline: the whole recording, with its anchors */
.cy .cy-tl{background:var(--instrument);border-radius:6px;padding:10px 14px 8px;box-shadow:inset 0 0 0 2px #1d1f1d,inset 0 0 24px #000;font-family:"IBM Plex Mono",monospace;color:var(--phosphor-dim-text);user-select:none;-webkit-user-select:none}
.cy .cy-tlrow{position:relative;height:14px}
.cy .cy-tlrow span{position:absolute;top:0;font-size:9.5px;line-height:14px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%)}
.cy .cy-tlrow.cy-lo span{transform:none}
.cy .cy-tlrow.cy-lo span.end{transform:translateX(-100%)}
.cy .cy-tlrow span.lit{color:var(--phosphor)}
.cy .cy-tlrow b{font-weight:500}
.cy .cy-tlrow .short{display:none}
.cy .cy-track{position:relative;height:18px;cursor:pointer;touch-action:none}
.cy .cy-rail{position:absolute;left:0;right:0;top:8px;height:2px;background:var(--phosphor-dim)}
.cy .cy-span{position:absolute;top:6px;height:6px;background:#1b6e3766;border-left:1px solid var(--phosphor-dim);border-right:1px solid var(--phosphor-dim)}
.cy .cy-tick{position:absolute;top:3px;width:1px;height:12px;background:var(--phosphor-dim)}
.cy .cy-tick.lit{background:var(--tint-eam)}
.cy .cy-span.lit{background:#4cff7a33;border-color:var(--tint-eam)}
.cy .cy-ph{position:absolute;top:4px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--tint-eam);box-shadow:0 0 8px #4cff7a99}
.cy .cy-times{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;margin-top:2px}
/* the copy pad: a dark screen, the page's cells */
.cy .cy-pad{background:var(--instrument);color:var(--phosphor);border-radius:6px;padding:14px 16px;font-family:"IBM Plex Mono",monospace;box-shadow:inset 0 0 0 2px #1d1f1d,inset 0 0 28px #000;position:relative}
.cy .cy-pad p{max-width:none}
.cy .cy-padtop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cy .cy-t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--phosphor-dim-text)}
.cy .cy-t b{color:var(--phosphor);font-weight:500}
.cy .cy-tog{background:none;border:1px solid var(--phosphor-dim);color:var(--phosphor-dim-text);font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:3px;cursor:pointer;display:flex;gap:7px;align-items:center}
.cy .cy-tog i{width:8px;height:8px;border-radius:50%;background:#123d21}
.cy .cy-tog[aria-pressed="true"]{color:var(--phosphor);border-color:var(--phosphor)}
.cy .cy-tog[aria-pressed="true"] i{background:var(--phosphor);box-shadow:0 0 6px var(--phosphor)}
.cy .cy-brk{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));margin-bottom:3px}
.cy .cy-brk span{grid-column:1/7;display:flex;flex-direction:column;align-items:center;font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--phosphor);white-space:nowrap}
.cy .cy-brk span::after{content:"";align-self:stretch;height:5px;margin:3px 2px 0;border:1px solid var(--phosphor);border-bottom:0}
.cy .cy-cells{row-gap:8px;column-gap:2px;min-height:0}
.cy .cy-cells .c{padding:3px 0 0;position:relative}
.cy .cy-cells .c b{font-weight:400;font-size:17px;line-height:22px;color:var(--phosphor-hi);box-shadow:inset 0 -1px 0 #1d3a26;min-height:22px}
.cy .cy-cells .c.pa b{box-shadow:inset 0 -1px 0 var(--phosphor-dim)}
.cy .cy-cells .c b:empty::before{content:"\00b7";color:#1d3a26}
.cy .cy-cells .c em{display:none}
.cy .cy-cells .c i{font-size:9px;line-height:12px}
.cy .cy-cells .c:hover b{color:#d6ffe0}
.cy .cy-cells .c.q b{color:var(--amber);background:#F2B2331F}
/* where the next character goes */
.cy .cy-cells .c.cur b{box-shadow:inset 0 -2px 0 var(--amber)}
.cy .cy-pad.typing .cy-cells .c.cur b{animation:cy-caret 1.1s steps(1) infinite}
@keyframes cy-caret{50%{box-shadow:inset 0 -2px 0 transparent}}
/* the character the voice is reading right now */
.cy .cy-cells .c.at{outline:1px solid var(--tint-eam);outline-offset:0;background:#4cff7a14}
.cy .cy-cells .c.at i{color:var(--tint-eam)}
/* checked: yours over ours */
.cy .cy-pad.checked .cy-cells .c em{display:block;font-style:normal;font-size:12px;line-height:15px;color:var(--phosphor-dim-text)}
.cy .cy-pad.checked .cy-cells .c.ok b{color:var(--phosphor)}
.cy .cy-pad.checked .cy-cells .c.miss b{color:var(--instrument);background:var(--amber);box-shadow:none}
.cy .cy-pad.checked .cy-cells .c.miss em{color:var(--amber)}
.cy .cy-pad.checked .cy-cells .c.nq b{color:var(--amber);background:#F2B2331F}
.cy .cy-pad.checked .cy-cells .c.nq em{color:var(--phosphor-mid)}
.cy .cy-pad.checked .cy-cells .c.cur b{box-shadow:inset 0 -1px 0 #1d3a26;animation:none}
.cy .cy-ann{margin:10px 0 0;font:600 11px/1.45 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--phosphor-dim-text);text-transform:uppercase;min-height:2.9em}
.cy .cy-ann b{color:var(--phosphor);font-weight:600;letter-spacing:.06em}
.cy .cy-say{margin:6px 0 0;font:500 12px/1.45 "IBM Plex Mono",monospace;color:var(--phosphor-mid);min-height:1.45em}
.cy .cy-say.bad{color:var(--amber)}
.cy .cy-say b{color:var(--phosphor);font-weight:600;letter-spacing:.08em}
.cy .cy-result{display:none;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #1d3a26}
.cy .cy-pad.checked .cy-result{display:flex}
.cy .cy-result .cy-seg{box-shadow:inset 0 0 0 2px #1d1f1d;padding:6px 8px}
.cy .cy-result .cy-seg svg{height:34px}
.cy .cy-of{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--phosphor-dim-text);line-height:1.6}
.cy .cy-of b{color:var(--phosphor);font-weight:500}
.cy .cy-key{margin-left:auto;display:flex;gap:6px 14px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:var(--phosphor-dim-text);text-transform:uppercase}
.cy .cy-key span{display:inline-flex;gap:6px;align-items:center}
.cy .cy-key i{display:inline-block;width:10px;height:10px;border-radius:1px}
.cy .cy-key .k-ok{background:var(--phosphor)}
.cy .cy-key .k-miss{background:var(--amber)}
.cy .cy-key .k-nq{border:1px solid var(--amber)}
.cy .cy-keys{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px;margin-top:14px}
.cy .cy-keys button{height:38px;border-radius:3px;border:1px solid #1d3a26;background:#0f1510;color:var(--phosphor);font:500 16px/1 "IBM Plex Mono",monospace;cursor:pointer;padding:0;touch-action:manipulation}
.cy .cy-keys button:hover{border-color:var(--phosphor-dim)}
.cy .cy-keys button:active,.cy .cy-keys button.hit{background:var(--phosphor-dim);color:#eaffef}
.cy .cy-keys button.dig{color:var(--phosphor-mid)}
.cy .cy-row2{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
.cy .cy-row2 button{height:38px;border-radius:3px;border:1px solid var(--phosphor-dim);background:none;color:var(--phosphor);font:600 11.5px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;padding:0 12px;cursor:pointer;touch-action:manipulation}
.cy .cy-row2 .cy-qk{color:var(--amber);border-color:#7a5a17;font-size:16px;letter-spacing:0;min-width:48px}
.cy .cy-row2 .cy-go{margin-left:auto;background:var(--phosphor-dim);color:#eaffef;border-color:var(--phosphor);min-width:120px}
.cy .cy-row2 .cy-go:hover{background:#238a47}
.cy .cy-cap{margin:10px 0 0;font:500 11px/1.45 "IBM Plex Mono",monospace;color:var(--phosphor-dim-text);letter-spacing:.04em}
.cy .cy-ref{margin:0;font:500 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);border-top:1px solid var(--panel-edge);padding-top:10px;overflow-wrap:anywhere;max-width:none}
@media (max-width:720px){
  .cy .cy-strip{grid-template-columns:1fr}
  .cy .cy-ctl{justify-content:space-between}
  .cy .cy-brk{grid-template-columns:repeat(10,minmax(0,1fr))}
  .cy .cy-keys{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
  .cy .cy-keys button,.cy .cy-row2 button{height:44px}
}
@media (max-width:520px){
  .cy .cy-lamps,.cy .cy-lamps.n3,.cy .cy-lamps.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* two to a row; an odd last lamp (OUT of five, COMPLETES or I SAY AGAIN of three) takes the row */
  .cy .cy-lamps>.cy-bezel:last-child:nth-child(odd){grid-column:1/-1}
  .cy .cy-tlrow .full{display:none}
  .cy .cy-tlrow .short{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .cy .cy-pad.typing .cy-cells .c.cur b{animation:none}
  .cy .cy-lamp{transition:none}
}
/* FROM THE MESSAGE TO THE KEYS (The crew; ruled 2026-09-29): full width under the crew's
   photo row. The photo and its caption first, then the heading, then the six beats in
   monospace: two columns on wide screens, one at 820 px and below. Text is --ink; the
   caption and each beat's source line are --ink-2 (AA on --panel). Nothing is truncated. */
.card>.keys{grid-column:1/-1;border-top:1px solid var(--panel-edge);padding-top:22px}
.keys .photo{max-width:760px;margin:0 0 18px}
.keys .keys-h{font-size:19px;line-height:1.2;margin:0 0 14px;text-wrap:balance}
.keys .beats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
@media (max-width:820px){.keys .beats{grid-template-columns:minmax(0,1fr)}}
.keys .beats li{min-width:0}
.keys h4{margin:0 0 6px;font:600 16px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.keys .bn{display:inline-block;min-width:1.5em;margin-right:6px;padding:2px 0;border-radius:2px;background:var(--ink-2);color:var(--panel);text-align:center;font:600 12px/1.2 "IBM Plex Mono",monospace;letter-spacing:0}
.card .keys p{max-width:none;margin:0;font:400 13.5px/1.6 "IBM Plex Mono",monospace;color:var(--ink);overflow-wrap:anywhere}
.card .keys p.b-src{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--ink-2)}

/* THE FORMER LAYER (ruled 2026-09-29/30): on by default. A former site with a panel is a button (.fz);
   a MUSEUM site (.mz) is ringed in amber. Panels carry a FORMER badge (and MUSEUM), the
   private-property line, and their sources. One mark for a former site (ruled 2026-10-07): the
   legend's dot (.dz: --screw ringed --ink-2), never a square; the same mark, larger, for a button and
   in a zoom; hollow (.dz.hollow: --panel-2 ringed --ink) where the position is approximate
   (November-33); MUSEUM rings the dot in --amber. */
.map .former .pt{cursor:pointer;outline:none}
.map .former .pt circle.hit{fill:transparent;stroke:none}
.map .former .former-dots .pt{cursor:default;pointer-events:none}
.map .dz circle:not(.hit){fill:var(--screw);stroke:var(--ink-2);stroke-width:.6;fill-opacity:.9}
.map .dz.hollow circle:not(.hit){fill:var(--panel-2);stroke:var(--ink);stroke-width:1.1;fill-opacity:1}
.map .mz circle:not(.hit){stroke:var(--amber);stroke-width:2.2}
.map .former .pt:focus-visible circle:not(.hit),.map .former .pt.on circle:not(.hit){stroke:var(--amber);stroke-width:2.6}
.map .flight:focus-visible .maf.dz circle:not(.hit){stroke:var(--amber);stroke-width:2.4}
.map-key .sw.mz{width:8px;height:8px;background:var(--screw);border:2px solid var(--amber)}
.map-key p.priv{flex-basis:100%;font-size:11px;color:var(--ink)}
.map-tip .badge{display:inline-block;margin-right:6px;padding:1px 5px 0;border-radius:2px;font:700 10px/1.4 "Barlow Condensed",sans-serif;letter-spacing:.16em;vertical-align:1px}
.map-tip .badge.former{background:#a9a393;color:var(--instrument)}
.map-tip .badge.museum{background:var(--amber);color:var(--instrument)}
.map-tip p.priv{margin:6px 0 0;padding:4px 7px;border:1px solid var(--amber);border-radius:3px;color:var(--amber)}
.map-tip p.museum{margin:6px 0 0;color:#e8e2d0}
.map-tip p.museum a,.map-tip .src a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.map-tip .src{display:block;margin-top:6px;color:#a9a393;font-size:11px;overflow-wrap:anywhere}
.map-tip p.museum a:focus-visible,.map-tip .src a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* THE MISSILE SITES' CAPTION (ruled 2026-10-06; legend at 11 px and shortened, 2026-10-07). Under the map, three legend lines (.kl, and the
   private-property line), each symbol a swatch in the map's own tokens, styled like the mark it
   names: base (--led square), field outline (the footprint's --rack-2), deactivated field (the NPS
   outline's dashed --ink-2, no fill), former site (--screw, as the former dots), former site
   approximate (hollow), MUSEUM (--screw ringed --amber). An item that does not fit wraps under its
   own text. Then "How this map was drawn", a <details> closed by default: the Not drawn list, "Fields
   not drawn site by site" and the caption. The summary keeps one 16.5 px line; its ::before widens the target to 24 px. */
.map-key p.kl{flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 18px}
.map-key .ki{display:flex;align-items:baseline;min-width:0}
.map-key .ki .sw{flex:none}
.map-key .sw.dzh{width:7px;height:7px;background:var(--panel-2);border:1px solid var(--ink)}
.map-wings .map-key{margin-bottom:4px}
.map-how summary{position:relative;display:block;width:fit-content;max-width:100%;list-style:none;cursor:pointer;color:var(--ink);font-weight:600}
.map-how summary::before{content:"";position:absolute;inset:-4px -4px}
.map-how summary::-webkit-details-marker{display:none}
.map-how summary::after{content:"\25B8" / "";display:inline-block;margin-left:6px;transition:transform .15s}
.map-how[open] summary::after{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.map-how summary::after{transition:none}}
.map-how summary:hover{text-decoration:underline;text-underline-offset:2px}
.map-how summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card .map-how p{margin:6px 0 0;max-width:none;overflow-wrap:anywhere}
.map-how p.yrs{color:var(--ink)}
.map-how p.yrs span{color:var(--ink-2)}
.map-how p.how{color:var(--ink-2)}
.map-how .fns{margin-top:6px;color:var(--ink)}
.card .map-how .fns p.fns-h{margin:0;font-weight:600}
.map-how .fns ul{margin:2px 0 0;padding:0;list-style:none}
.map-how .fns li{overflow-wrap:anywhere}
.map-how .fns li span{color:var(--ink-2)}
/* Field years (ruled 2026-10-06) are in each field's popup: the Ellsworth and Grand Forks outlines
   are buttons for it (app.js drawTraced), hit over their whole area; Whiteman's has none. */
.map .nps-trace .nps-f{cursor:pointer;outline:none}
.map .nps-trace .nps-f path{pointer-events:visible}
.map .nps-trace .nps-f.on path,.map .nps-trace .nps-f:focus-visible path{stroke:var(--amber);stroke-width:calc(2.6px * var(--u,1));stroke-dasharray:none;fill:var(--amber);fill-opacity:.12}
.map-tip .fy{display:block;margin-top:6px;padding-top:5px;border-top:1px solid #ffffff1f}
.map-tip .fy:first-child{margin-top:0;padding-top:0;border-top:0}
.map-tip .fy .fy-n{color:#e8e2d0}
.map-tip .fy .fy-y{color:var(--phosphor)}
.map-tip .fy .src{margin-top:2px}

/* THE GRAND FORKS REGION (ruled 2026-10-07, option (a)). A former point with a "region" is drawn only in
   that region's zoom, "former · grand forks" (app.js regionMarks: November-33); on the national map
   Oscar-Zero's panel has a line, a button styled as the panel's links, that opens it. */
.map .former .pt.reg-off{display:none}
.map-tip p.to-region-p{margin:6px 0 0}
.map-tip button.to-region{padding:0;border:0;background:none;color:var(--amber);font:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.map-tip button.to-region:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* LISTEN LIVE, THE HERO (ruled 2026-10-10: the most prominent thing on the page). The first
   instrument in the bay, full width, LATEST EAM directly below; drawn by app.js only while
   config.js LIVE_ENABLED, the station's state.json and a fresh stream all say so. Every rule is
   scoped to #live (or #live-off): Copy it yourself's speaker already uses the
   class "live" (.cy .cy-spk.live), and nothing here may touch it.
   - The lamp (hero review, 2026-10-10) is the net map's lit receiver, token for token
     (.map-key .sw.rx.lit: --phosphor, edged --phosphor-dim): solid whenever the hero shows (the
     switch on and the stream fresh, stopped or playing), with its glow only while playing.
     There is no dim lamp: offline, the hero is gone and only the line shows.
   - LISTEN LIVE, stopped, is the page's primary action (hero review): a solid --listen fill
     (#45E36A; not the map's --phosphor) with --instrument text, 11.5:1; hover lifts it to
     --phosphor. STOP is PLAY's style, larger: --instrument fill, --phosphor outline. Both
     52 px tall, full width at 720 px and below.
   - LIVE HERO V2 (ruled 2026-10-10; the mocks Live-Hero-v2, desktop 1280 and phone 390):
     the frequency readout top right (a full-width row on a phone): a #050605 box, a 2 px
     #1E221E inset, FREQUENCY in --muted (#8E8A7E, 5.9:1 on the box), "11175.0" in the shelf
     clock's seven-segment face (app.js liveFreqSvg) and "kHz USB", both the clock's --led.
     Review, 2026-10-10: the readout's unlit segments are --led at 6% (the clock's --led-dim is
     redefined here only), near-invisible, so "11175.0" never reads as "88875.0"; the clock and
     the NET STATUS count keep --led-dim. The lamp's label is "LIVE". THE WATERFALL (always on,
     ruled 2026-10-10; sideways, ruled 2026-10-11): a canvas 128 px high on every screen (two CSS
     px a bin, as in the mocks) on #020302, a 1 px --phosphor-dim frame drawn over it, beside
     LISTEN LIVE, the newest column at its left edge; the Hz scale (3k, 2k, 1k, 0, aria-hidden) in
     a gutter on its RIGHT edge, each label at its frequency's height (the mocks put it on the
     left; the ruling's text puts it on the right). No label of its own: before any rows it is the
     dark screen. Dimmed (.live-wf-dim, 35%) when app.js finds the stream stale; nothing about it
     changes when voice appears, and nothing in it transitions. The volume: the
     knurled knob (a repeating-conic-gradient, its --listen pointer, rotated by app.js from -135
     to +135 degrees) beside a native range input in --listen; at 720 px and below the input is
     the row's width and 44 px tall.
   - Copy: line 1 in --phosphor, line 2 and the credit in the rows' copy green (#7fdc98:
     --phosphor-dim is 3:1 on the instrument, too dim for reading).
   - Offline: one --muted line (#8E8A7E), #live-off, at the foot of NET STATUS; a note after a
     failed start is --muted too. Amber means pending or unconfirmed on this site, and no live
     state uses it (only the site-wide focus ring).
   - NET STATUS's old "LISTEN · coming" panel is gone, markup and rules (ruled 2026-10-10: the
     hero replaces it). */
:root{--listen:#45E36A;--muted:#8E8A7E}
#net .live-off{margin:18px 0 0;font-size:13px;color:var(--muted)}
.bay>#live{grid-column:1/-1}
#live .hdr{margin-bottom:16px;gap:12px;align-items:center}
#live .hdr b{letter-spacing:.16em;text-transform:none}   /* "LIVE" (review, 2026-10-10: the frequency is the readout's) */
#live .live-lamp{display:inline-block;box-sizing:border-box;width:11px;height:11px;margin:0 10px 1px 0;border-radius:50%;vertical-align:middle;background:var(--phosphor);border:1px solid var(--phosphor-dim)}
#live.live-live .live-lamp{box-shadow:0 0 0 2px #4cff7a55,0 0 10px var(--phosphor)}
#live .live-st{margin-left:auto;text-align:right;letter-spacing:.1em;text-transform:none;color:#7fdc98}
#live .live-freq{--led-dim:rgba(255,45,28,.06);flex:none;display:grid;grid-template-columns:auto auto;grid-template-areas:"l l" "v u";align-items:baseline;gap:2px 8px;padding:6px 14px;border-radius:4px;background:#050605;box-shadow:inset 0 0 0 2px #1E221E;letter-spacing:normal;text-transform:none}
#live .live-freq-l{grid-area:l;font-size:9px;line-height:1.2;letter-spacing:.2em;color:var(--muted)}
#live .live-freq svg{grid-area:v;display:block;height:28px;width:auto}
#live .live-freq-u{grid-area:u;font-size:11px;line-height:1;letter-spacing:.14em;color:var(--led)}
#live .live-st.bad{color:var(--muted)}
#live .live-ctl{display:flex;align-items:center;gap:20px;margin-bottom:18px}
#live .live-btn{flex:none;position:relative;z-index:1;min-width:250px;min-height:52px;padding:0 24px;background:none;border:2px solid var(--phosphor);border-radius:4px;color:var(--phosphor);font:600 16px/1 "IBM Plex Mono",monospace;letter-spacing:.22em;cursor:pointer;white-space:nowrap}
#live .live-btn:hover{background:#4cff7a14}
#live .live-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
#live.live-idle .live-btn{background:var(--listen);border-color:var(--listen);color:var(--instrument)}
#live.live-idle .live-btn:hover{background:var(--phosphor);border-color:var(--phosphor)}
#live.live-tuning .live-btn,#live.live-live .live-btn{background:#4cff7a1f}
#live .live-wf{flex:1 1 420px;min-width:0;display:flex;align-items:stretch;gap:6px}
#live .live-wf.live-wf-dim{opacity:.35}
#live .live-wf-screen{position:relative;flex:1 1 auto;min-width:0;height:128px;border-radius:3px;overflow:hidden;background:#020302}
#live .live-wf-screen::after{content:"";position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 0 0 1px var(--phosphor-dim);pointer-events:none}
#live .live-wf canvas{display:block;width:100%;height:100%}
#live .live-wf-hz{position:relative;flex:none;width:2em;height:128px;font-size:9px;line-height:1;letter-spacing:.06em;color:var(--phosphor-dim-text);white-space:nowrap}
#live .live-wf-hz span{position:absolute;left:0}
#live .live-wf-hz span:nth-child(1){top:0}
#live .live-wf-hz span:nth-child(2){top:33.333%;transform:translateY(-50%)}
#live .live-wf-hz span:nth-child(3){top:66.667%;transform:translateY(-50%)}
#live .live-wf-hz span:nth-child(4){bottom:0}
#live .live-vol{flex:none;margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:6px}
#live .live-knob{display:block;flex:none;position:relative;width:64px;height:64px;border-radius:50%;background:repeating-conic-gradient(#2A2E2A 0deg 6deg,#151815 6deg 12deg);box-shadow:0 0 0 3px var(--instrument),0 0 0 4px var(--phosphor-dim),inset 0 0 10px #000;transform:rotate(81deg);pointer-events:none}
#live .live-knob::before{content:"";position:absolute;left:30px;top:6px;width:4px;height:16px;border-radius:2px;background:var(--listen)}
#live .live-knob::after{content:"";position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;background:#1C1F1C;box-shadow:inset 0 1px 2px #3A3F3A}
#live .live-vol-l{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;letter-spacing:.2em;color:var(--phosphor-dim-text)}
#live .live-vol input{width:72px;height:24px;margin:0;accent-color:var(--listen);cursor:pointer}
#live .live-vol input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#live p{margin:0}
#live p[hidden]{display:none}
#live .live-l1{font-size:17px;line-height:1.45;color:var(--phosphor)}
#live .live-l2{margin-top:6px;font-size:13px;color:#7fdc98}
#live .live-credit{margin-top:10px;font-size:12px;color:#7fdc98}
#live .live-credit a{color:var(--phosphor);text-underline-offset:2px}
#live .live-credit a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:720px){
  #live .live-ctl{flex-direction:column;align-items:stretch;gap:14px}
  #live .live-btn{width:100%;min-width:0}
  #live .live-l1{font-size:16px}
  #live .hdr{flex-wrap:wrap}
  #live .live-freq{flex:1 1 100%;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 12px}
  #live .live-freq-l{font-size:8px;letter-spacing:.18em}
  #live .live-freq svg{height:24px}
  #live .live-freq-u{font-size:10px;letter-spacing:.12em}
  #live .live-wf{flex:none}
  #live .live-vol{margin-left:0;flex-direction:row;gap:14px}
  #live .live-knob{width:52px;height:52px;box-shadow:0 0 0 3px var(--instrument),0 0 0 4px var(--phosphor-dim),inset 0 0 8px #000}
  #live .live-knob::before{left:24px;top:5px;height:13px}
  #live .live-knob::after{left:12px;top:12px;width:28px;height:28px;box-shadow:none}
  #live .live-vol-l{flex:1 1 auto;align-items:stretch;gap:4px}
  #live .live-vol input{width:100%;height:44px}
}
@media (max-width:520px){#live{padding:18px 16px}}

/* OUR RECEIVERS' MAP PANEL (ruled 2026-10-10). stations.js `card` (KPH): its lines in the net map's
   panel when the dot is tapped (The network's "Where we listen" card, which repeated them, was
   removed 2026-10-13). That panel takes pointers (its link), as an aerial's does (.has-aer); a
   transmit site's stays pointer-events:none. */
.map-tip .rx-about a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.map-tip.has-link{pointer-events:auto}
.map-tip .rx-about a{color:var(--phosphor);text-underline-offset:2px}

/* LATEST EAM'S HEADER ON A PHONE (hero review, 2026-10-10): below 480 px it never wraps. " · copied
   off air" leaves the line (visually hidden, still read out) and "1 of N" keeps to one line, so
   the two lines the 440 px rule above held for a wrapping "1 of N" (its CLS fix) are one now:
   "1 of N" arriving with the feed lands on the line that is already there. At 480 px and up
   nothing here applies. */
@media (max-width:479px){
  #eam .hdr{min-height:0}
  #eam .hdr-sub{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  #eam #eam-of{white-space:nowrap}
}

/* COMMUNITY, PHASE 1 (ruled 2026-10-12; assets/community.js). Nothing here matches anything while
   config.js COMMUNITY_ENABLED is false: every element and class below is made by community.js,
   which is not loaded then (the pages /signin, /account and /privacy use only .cm-page, .cm-off
   and .cm-draft, theirs alone). On the dark instruments: the phosphor palette, focus in --amber.
   On the putty (the sheet, The device, the pages): --ink on --panel, focus in --ink. The opt-in's
   words are body text (16px IBM Plex Sans), right under the email field, never small print. */
/* LISTEN LIVE's header: "● LIVE · 4 LISTENING" */
#live .cm-listen{margin-left:.7em;color:var(--phosphor);letter-spacing:.16em;white-space:nowrap}
#live .cm-listen[hidden]{display:none}
/* "I HEARD IT TOO": on the headline, under its player */
.cm-heard{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:14px 0 2px;font-size:12px;letter-spacing:.12em;color:var(--phosphor-dim-text)}
.cm-heard[hidden]{display:none}
.cm-hbtn{background:none;border:1px solid var(--phosphor);color:var(--phosphor);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:9px 14px;border-radius:3px;cursor:pointer;min-height:36px}
.cm-hbtn:hover{background:#4cff7a14}
.cm-hbtn:focus-visible,.cm-hmine:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cm-hbtn:disabled{opacity:.6;cursor:default}
.cm-hmine{color:var(--phosphor);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;padding:9px 0}
.cm-hn{white-space:nowrap}
/* ...and on each row of the lists: a second column beside the row (never inside it: a row is a button) */
.older.cm-cols{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.older.cm-cols>.row{grid-column:1}
.older.cm-cols>.cm-hcell{grid-column:2}
.older.cm-cols>:not(.row):not(.cm-hcell){grid-column:1/-1}
.cm-hcell{align-self:baseline;justify-self:end;font-size:11px;letter-spacing:.12em;color:var(--phosphor-dim-text);white-space:nowrap}
.cm-hcell .cm-hbtn{min-height:0;padding:5px 8px;font-size:11px;letter-spacing:.12em}
.cm-hcell .cm-hmine{padding:5px 0;font-size:11px;letter-spacing:.12em}
/* A phone: no second column (it would narrow every row's copy); the control goes on its own line
   under its row, at the copy's left edge, and an empty one takes no line. */
@media (max-width:520px){
  .older.cm-cols{grid-template-columns:minmax(0,1fr)}
  .older.cm-cols>.cm-hcell{grid-column:1;justify-self:start;margin:-2px 0 4px 142px}
  .older.log-list.cm-cols>.cm-hcell{margin-left:60px}
  .older.cm-cols>.cm-hcell:empty{display:none}
}
/* The forms (the sheet, The device, /signin, /account): putty */
.cm-form{margin:0}
.cm-lbl{display:block;margin:0 0 6px;font:600 12px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.cm-email{display:block;width:100%;max-width:420px;box-sizing:border-box;margin:0;padding:10px 12px;font:16px/1.4 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);background:#fffdf7;border:1px solid var(--panel-edge);border-radius:3px;box-shadow:inset 0 1px 2px #0002}
.cm-email:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.cm-opt{display:flex;align-items:flex-start;gap:10px;max-width:460px;margin:12px 0 16px;font:16px/1.5 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);cursor:pointer}
.cm-opt input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);cursor:pointer}
.cm-opt input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cm-go{min-height:44px;padding:0 18px;background:var(--ink);color:var(--panel);border:0;border-radius:3px;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;cursor:pointer}
.cm-go:hover{background:#000}
.cm-go:focus-visible,.cm-again:focus-visible,.cm-x:focus-visible,.cm-del:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cm-go:disabled{opacity:.55;cursor:default}
.cm-err{margin:12px 0 0;color:#8f1d12;font-weight:600}
.cm-ok{margin:12px 0 0;color:var(--ink)}
.cm-err[hidden],.cm-ok[hidden],.cm-sent[hidden],.cm-form[hidden],.cm-confirm[hidden]{display:none}
.cm-fine{margin:12px 0 0;max-width:60ch;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cm-fine a,.cm-sent a{color:var(--ink);text-underline-offset:3px}
.cm-sent p{margin:0 0 10px}
.cm-sent-h{font:700 20px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.cm-sent-h:focus{outline:none}
.cm-again{padding:8px 0;background:none;border:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* The sign-in code (ruled 2026-10-15): "Enter the 6-digit code" in "Check your email". The email
   field's own paper and edge, the digits large and spaced like the email's "482 913"; SIGN IN beside
   it, under it on a narrow phone. No new colour. */
.cm-code-form{margin:4px 0 14px}
.cm-code-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.cm-code{flex:0 1 220px;min-width:0;width:220px;box-sizing:border-box;margin:0;padding:8px 12px;font:600 28px/1.2 "IBM Plex Mono",monospace;letter-spacing:.24em;color:var(--ink);background:#fffdf7;border:1px solid var(--panel-edge);border-radius:3px;box-shadow:inset 0 1px 2px #0002}
.cm-code:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.cm-code:disabled{opacity:.55}
.cm-sent.cm-app .cm-code{flex-basis:260px;width:260px;font-size:32px}
.cm-code-form .cm-err{margin:10px 0 0}
/* The sign-in sheet */
body.cm-modal{overflow:hidden}
.cm-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:#000b;box-sizing:border-box;overflow-y:auto}
.cm-sheet[hidden]{display:none}
.cm-sheet .cm-card{width:100%;max-width:460px;box-sizing:border-box;margin:auto;padding:30px 28px 26px}
.cm-sheet h2{margin:0 0 10px}
.cm-why{margin:0 0 16px;color:var(--ink)}
.cm-x{position:absolute;top:14px;right:22px;padding:8px 0;background:none;border:0;font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;color:var(--ink-2);cursor:pointer}
@media (max-width:520px){.cm-sheet{align-items:flex-start;padding:12px}.cm-sheet .cm-card{padding:28px 18px 22px}}
/* "Get launch updates" in the page foot (ruled 2026-10-12; Binder 7 stays hidden): a putty panel
   above the footer lines, as narrow as the form, centred. */
.cm-foot-signup{max-width:560px;box-sizing:border-box;margin:26px auto 0;padding:26px 30px 28px}
.cm-foot-signup .cm-h{margin:0 0 10px;font-size:20px}
.cm-foot-signup p{margin:0 0 12px;color:var(--ink)}
.cm-foot-signup a{color:var(--ink)}
@media (max-width:520px){.cm-foot-signup{padding:22px 18px 24px}}
/* /signin, /account, /privacy: the sources page's frame (putty, light) */
.cm-page .cm-off{color:var(--ink-2)}
.cm-page #cm-root>p{max-width:70ch}
.cm-sec{border-top:1px solid var(--panel-edge);padding:18px 0 8px;margin-top:14px}
.cm-sec h2{margin:0 0 12px;font-size:18px}
.cm-sec p{margin:0 0 10px}
.cm-del{min-height:44px;padding:0 18px;background:none;color:#8f1d12;border:1px solid #8f1d12;border-radius:3px;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;cursor:pointer}
.cm-del-yes{background:#8f1d12;color:#fff}
.cm-draft{margin:0 0 16px;padding:10px 14px;background:var(--amber);color:var(--ink);font:600 13px/1.4 "IBM Plex Mono",monospace;letter-spacing:.04em;border-radius:3px}
.cm-page h2{margin:22px 0 8px;font-size:18px}
.cm-page ul{margin:0 0 12px;padding-left:20px;max-width:70ch;list-style:disc;font:16px/1.55 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink)}
.cm-page li{margin:0 0 6px}
.cm-page address{font-style:normal;margin:0 0 12px}
.cm-page a{color:var(--ink);text-underline-offset:3px}
/* THE FOUNDING LISTENER (phase 1, 2026-10-16): the badge under the listener name, in the label type
   (.label .label-ink), with room before what follows; no colour of its own. */
.cm-page .cm-founder{margin:12px 0 18px}

/* EMAIL AIRCRAFT ALERTS (launch plan A6(a), ruled 2026-10-14/15; the turn-on, ruled 2026-10-15): the boxes
   on /account and the home page's line (assets/community.js); on /aircraft, THE DOOMSDAY PLANE and the
   E-4B's GET ALERTS lines (assets/aircraft-alerts.js). Nothing here matches anything while config.js
   AIRCRAFT_EMAIL_ALERTS_ENABLED is false: every element below is made by those scripts only then. On the
   putty: --ink on --panel, focus in --ink; in the scope (the tap card): its phosphor, focus in --amber. */
.aa-head{margin:0 0 10px;max-width:52ch;font:700 20px/1.25 "Barlow Condensed",sans-serif;letter-spacing:.03em;color:var(--ink);text-wrap:balance}
.aa-nw{white-space:nowrap}
/* The home page's line: under the masthead, above the LIVE panel, in the masthead's type (.label .label-ink),
   one line. Narrower than the whole line fits, it keeps its name and GET THEM (the middle clause goes). */
.aa-line{margin:-6px 28px 18px;font:600 12px/1.4 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden}
.aa-line .aa-get{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.aa-line .aa-get:focus-visible,.aa-line .aa-line-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.aa-line .aa-line-x{font:inherit;letter-spacing:0;color:var(--ink-2);background:none;border:0;cursor:pointer;min-width:28px;min-height:24px;padding:6px 0;margin:-6px -10px -6px 4px}
@media (max-width:780px){.aa-line .aa-line-why{display:none}}
@media (max-width:520px){.aa-line{margin:-6px 14px 14px}}
/* THE DOOMSDAY PLANE on /aircraft: the page's own heading (.ab-h) and paragraphs (.card p), between rules. */
.aa-dp{margin:0;padding:16px 0 14px;border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge)}
.aa-dp a{color:var(--ink);text-underline-offset:3px}
/* The E-4B's GET ALERTS line: the section's and the museum card's on the putty, the tap card's in the scope. */
.aa-get-line[hidden]{display:none}
.aa-get-line .aa-get{font-weight:600;letter-spacing:.06em;text-underline-offset:3px}
.aa-dp .aa-get-line,.ab-card .aa-get-line{margin:12px 0 0;color:var(--ink)}
.ab-card .aa-get-line{font:500 15px/1.45 "IBM Plex Sans",system-ui,sans-serif}
.aa-dp .aa-get-line a,.ab-card .aa-get-line a{color:var(--ink)}
.map-air .ab-tap .aa-get-line{margin:10px 0 0;color:var(--phosphor)}
.map-air .ab-tap .aa-get-line a{color:var(--phosphor);text-underline-offset:3px}
.map-air .ab-tap .aa-get-line a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.aa-pitch{margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--panel-edge)}
.aa-pitch p{margin:0 0 8px}
.aa-types{min-width:0;margin:0;padding:0;border:0}
.aa-types .cm-opt{margin:8px 0}
.aa-types+.cm-go{margin-top:8px}
.aa-stop p{margin:0 0 12px}
.aa-pre{margin:6px 0 12px;color:var(--ink)}
/* The nudge (ruled 2026-10-15): one dismissible line under LATEST EAM's notifications line, in its own
   type and colours (.nt-bar's dim phosphor, .nt-link's buttons); no colour of its own. */
.aa-nudge{margin:-4px 0 14px;font:500 13px/1.4 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.02em;color:var(--phosphor-dim-text)}
.aa-nudge .nt-link{margin-left:6px;vertical-align:baseline}
.aa-nudge .aa-nudge-x{min-width:32px;margin-left:2px;font-size:16px;text-decoration:none}
@media (max-width:520px){.aa-nudge{margin:-6px 0 12px}}

/* THE TOP NAV (ruled 2026-10-14: "Top nav on every page: Messages · Aircraft · Listen · About.
   Mobile: a compact bar, no hamburger if it fits."). One row of engraved labels on the rack, above the
   lit room, the console's width; the current page's label lit (--panel) and underlined. At 390 px the
   four fit on one row (no hamburger). The Aircraft tab is added by assets/nav.js, only with config.js
   AIRBORNE_ENABLED true, with its count, "AIRCRAFT · N", while aircraft are up (no time, ever). Every
   label is a 36 px tap target. */
.topnav{display:flex;flex-wrap:wrap;gap:0 24px;padding:8px 2px 0;font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.topnav a{display:inline-block;min-height:36px;line-height:34px;box-sizing:border-box;padding:2px 0 0;border-bottom:2px solid transparent;color:#cfcabb;text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--panel)}
.topnav a[aria-current="page"]{color:var(--panel);border-bottom-color:var(--panel)}
.topnav a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:420px){.topnav{gap:0 16px;letter-spacing:.14em}}
.topnav .nav-n{letter-spacing:.12em}
/* SIGN IN / ACCOUNT (ruled 2026-10-15: "into the top nav, right-aligned, on every page ... At 390 it stays
   on the nav row"): the nav's last item, pushed right, in the nav's own type. Drawn by assets/community.js
   once the session is known (/privacy, which runs no script, has a plain SIGN IN in its markup). */
.topnav .nav-acct{margin-left:auto}
/* The one state too long for the row at 390, a stale feed's "AIRCRAFT · N (delayed)" (the airborne-stale
   contract): there only, the row's gaps and spacing close up, so it still holds every item on one row. */
@media (max-width:420px){.topnav:has([data-delayed]){gap:0 10px;letter-spacing:.08em}.topnav [data-delayed] .nav-n{letter-spacing:.06em}}
@media (max-width:375px){.topnav{gap:0 12px}.topnav:has([data-delayed]){gap:0 8px}}
/* THE AIRCRAFT TAB'S GLYPH (aircraft findability, Daniel, 2026-10-23; assets/nav.js): a plain jet from above,
   before the word, in the tab's own colour (currentColor) in every state, a little taller than the capitals
   and centred on them. */
.topnav .nav-glyph{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-3px;fill:currentColor}
/* Narrower than 390 (Daniel: "At 390 the compact bar must still fit without wrapping; if it can't, the glyph and
   count without the word, with the aria-label carrying the word"): measured at 390, every page, signed in and out,
   "AIRCRAFT · 12 (DELAYED)" included, the row holds the word with 8 px to spare; below 390 a tab with a count
   (data-n) drops the word and the separator dot (Daniel, 2026-10-23: the glyph, a small gap, then "3" or
   "12 (DELAYED)"; the gap is the glyph's own margin), and its aria-label ("Aircraft, 3 visible now",
   assets/nav.js) carries the word. With none up the tab has no count and keeps the word. */
@media (max-width:389px){.topnav [data-n] .nav-w,.topnav [data-n] .nav-sep{display:none}}
/* THE MASTHEAD LINE (ruled 2026-10-14, v5; assets/nav.js): a status line like the shelf's others
   (.label .label-ink: the same font, size and letter-spacing), the whole line a link to /aircraft. */
.shelf .ab-mast{display:block;text-decoration:none}
.shelf .ab-mast[hidden]{display:none}
.shelf .ab-mast:hover{text-decoration:underline;text-underline-offset:3px}
.shelf .ab-mast:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* NOTIFICATIONS (2026-10-12; assets/notify.js): LATEST EAM's line under its header, drawn only with
   config.js NOTIFY_ENABLED and where push works (or, on iOS Safari in a tab, the Home Screen hint).
   On the dark instrument: the phosphor palette, focus in --amber, the heard button's shape. */
.nt-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:-4px 0 16px;font-size:12px;letter-spacing:.12em;color:var(--phosphor-dim-text)}
.nt-btn{background:none;border:1px solid var(--phosphor);color:var(--phosphor);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:9px 14px;border-radius:3px;cursor:pointer;min-height:36px}
.nt-btn:hover{background:#4cff7a14}
.nt-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.nt-btn:disabled{opacity:.6;cursor:default}
/* On (ruled 2026-10-14): ONE compact line, "✓ NOTIFICATIONS ON · Turn off · Settings", no full-width
   button. Its two actions are text buttons, each a 32 px tap target on a 12 px line. */
.nt-bar-on{margin:-8px 0 10px}
.nt-line{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;margin:0;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--phosphor)}
.nt-on{color:var(--phosphor);white-space:nowrap}
.nt-dot{color:var(--phosphor-dim-text)}
.nt-link{min-height:32px;padding:0 2px;background:none;border:0;font:500 13px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;color:var(--phosphor);text-decoration:underline;text-decoration-color:var(--phosphor-dim-text);text-underline-offset:4px;cursor:pointer}
.nt-link:hover{text-decoration-color:var(--phosphor)}
.nt-link:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.nt-sub{letter-spacing:.06em}
.nt-hint{margin:0;color:var(--phosphor);letter-spacing:.08em;line-height:1.5}
.nt-hint b{font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.nt-hint .nt-sub{display:block;color:var(--phosphor-dim-text)}
.nt-note{flex-basis:100%;margin:0;color:var(--amber);letter-spacing:.06em;line-height:1.5}
@media (max-width:520px){.nt-bar{margin:-6px 0 14px}.nt-bar-on{margin:-10px 0 8px}.nt-btn{flex:1 1 auto}}
/* A phone (390 px): the line still one row in LATEST EAM's 280 px, tighter. */
@media (max-width:420px){.nt-line{gap:0 6px;letter-spacing:.06em;font-size:11px}.nt-link{font-size:12px}}
/* The Settings sheet (ruled 2026-10-14): the sign-in sheet's frame (.cm-sheet, the putty card), smaller.
   One row per toggle (assets/notify.js NT_TOGGLES): its name, a line under it, a switch. */
body.nt-modal{overflow:hidden}
.nt-sheet .cm-card{max-width:400px}
.nt-sheet h2{margin:0 0 6px}
.nt-sheet h2:focus{outline:none}
.nt-why{margin:0 0 4px;color:var(--ink-2)}
.nt-x{position:absolute;top:14px;right:22px;padding:8px 0;background:none;border:0;font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;color:var(--ink-2);cursor:pointer}
.nt-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nt-tgs{list-style:none;margin:12px 0 0;padding:0}
.nt-tgs li{border-top:1px solid var(--panel-edge)}
.nt-tgs li:last-child{border-bottom:1px solid var(--panel-edge)}
.nt-tg{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:12px 0;cursor:pointer}
.nt-tg-t{display:block;font:600 16px/1.3 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink)}
.nt-tg-s{display:block;margin-top:2px;font:14px/1.4 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink-2)}
.nt-sw{appearance:none;-webkit-appearance:none;flex:none;position:relative;box-sizing:border-box;width:46px;height:28px;margin:0;border-radius:14px;background:#B9B3A2;border:1px solid #9E9786;cursor:pointer;transition:background-color .15s}
.nt-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fffdf7;box-shadow:0 1px 2px #0005;transition:transform .15s}
.nt-sw:checked{background:var(--ink);border-color:var(--ink)}
.nt-sw:checked::after{transform:translateX(18px)}
.nt-sw:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nt-sw:disabled{opacity:.5;cursor:default}
.nt-err{margin:12px 0 0;color:#8f1d12;font-weight:600}
.nt-err[hidden]{display:none}
.nt-fine{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.nt-fine b{font-weight:600;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.nt-sw,.nt-sw::after{transition:none}}
/* CORRECTIONS ON MISSILEER.WATCH, SIGNED IN ONLY (launch plan A3; assets/corrections.js, only with
   config.js CORRECTIONS_ENABLED and COMMUNITY_ENABLED true). On the instrument: "corrected by N
   listeners", the machine copy one tap away (app.js .mtog) and CORRECT THIS COPY (.cx-bar). The editor
   is a dark instrument over the page (the copy is phosphor everywhere it is shown); TOP LISTENERS and
   the account's sections are putty, like the rest of the foot and /account. */
.eam .meta .cxn{color:#a6e9b8}
.eam .meta .mtog{background:none;border:0;padding:4px 0;margin:0;font:inherit;color:var(--phosphor);text-decoration:underline;text-underline-offset:3px;cursor:pointer;letter-spacing:inherit}
.eam .meta .mtog:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.eam .meta .mcl{color:var(--amber);letter-spacing:.16em}
.eam .pre.mc{color:var(--phosphor-dim);text-shadow:none}
.cx-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:-4px 0 14px}
.cx-open{background:none;border:1px solid var(--phosphor);color:var(--phosphor);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:9px 14px;border-radius:3px;cursor:pointer;min-height:36px}
.cx-open:hover{background:#4cff7a14}
.cx-open:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cx-said{font-size:12px;letter-spacing:.08em;color:var(--phosphor)}
/* the editor */
.cx-sheet .cx-card{width:100%;max-width:880px;box-sizing:border-box;margin:auto;padding:26px 26px 22px;position:relative}
.cx-card .cx-x{position:absolute;top:14px;right:20px;z-index:2;padding:8px 0;background:none;border:0;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;color:var(--phosphor-dim);cursor:pointer}
.cx-card .cx-x:hover{color:var(--phosphor)}
.cx-h{margin:0 0 4px;font:600 15px/1.2 "IBM Plex Mono",monospace;letter-spacing:.22em;color:var(--phosphor)}
.cx-ctx{margin:0 0 14px;font-size:13px;letter-spacing:.12em;color:var(--phosphor-dim)}
.cx-how{margin:0 0 12px;font-size:13px;color:#a6e9b8}
.cx-how b{color:var(--phosphor)}
.cx-warn{margin:0 0 12px;padding:8px 10px;border:1px solid var(--amber);border-radius:3px;color:var(--amber);font-size:13px;overflow-wrap:anywhere}
.cx-play{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.cx-pp{background:none;border:1px solid var(--phosphor);color:var(--phosphor);font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:9px 16px;border-radius:3px;cursor:pointer;min-width:84px}
.cx-t{font-size:13px;color:var(--phosphor-dim);min-width:52px}
.cx-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:start;margin:0 0 10px}
.cx-lbl{font-size:11px;letter-spacing:.2em;color:var(--phosphor-dim);padding-top:9px}
.cx-cells{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:6px 3px}
.cx-c{display:flex;flex-direction:column;align-items:stretch;min-width:0;position:relative}
.cx-in{width:100%;min-width:0;box-sizing:border-box;height:34px;padding:0;margin:0;text-align:center;background:#071009;color:var(--phosphor);border:1px solid #1d3a25;border-radius:2px;font:500 16px/1 "IBM Plex Mono",monospace;text-transform:uppercase;caret-color:var(--amber)}
.cx-in:focus{outline:2px solid var(--amber);outline-offset:0;border-color:var(--amber)}
.cx-c i{font-style:normal;font-size:9px;line-height:12px;text-align:center;color:var(--phosphor-dim)}
.cx-pre .cx-in{border-bottom:2px solid var(--phosphor-dim)}
.cx-c.cx-mod .cx-in{color:var(--amber);border-color:#6b5114;background:#140f04}
.cx-c.cx-sel i{color:var(--phosphor)}
.cx-c.cx-tw::after{content:"";position:absolute;top:2px;right:2px;width:0;height:0;border-top:6px solid var(--amber);border-left:6px solid transparent}
.cx-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 10px}
.cx-pos{font-size:12px;letter-spacing:.16em;color:var(--phosphor);min-width:110px}
.cx-tool,.cx-sm{background:none;border:1px solid var(--phosphor-dim);color:var(--phosphor);font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;padding:8px 10px;border-radius:3px;cursor:pointer;min-height:34px}
.cx-tool:hover,.cx-sm:hover{border-color:var(--phosphor)}
.cx-tool:focus-visible,.cx-sm:focus-visible,.cx-pp:focus-visible,.cx-save:focus-visible,.cx-cancel:focus-visible,.cx-card .cx-x:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cx-tool[aria-expanded="true"]{border-color:var(--amber);color:var(--amber)}
.cx-two{margin:0 0 12px;padding:10px 12px;border:1px dashed var(--phosphor-dim);border-radius:3px;font-size:13px;color:#a6e9b8}
.cx-two p{margin:0 0 8px}
.cx-two b{color:var(--phosphor)}
.cx-r{width:34px;height:30px;text-align:center;background:#071009;color:var(--phosphor);border:1px solid #1d3a25;border-radius:2px;font:500 15px/1 "IBM Plex Mono",monospace;text-transform:uppercase}
.cx-two-f label{margin-right:10px;white-space:nowrap}
.cx-two input[type=radio]{accent-color:var(--phosphor)}
.cx-diff{margin:0 0 14px;font-size:12px;letter-spacing:.06em;color:var(--amber)}
.cx-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin:0 0 16px;padding-top:12px;border-top:1px solid #1d3a25}
.cx-f{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.16em;color:var(--phosphor-dim)}
.cx-f em{font-style:normal;letter-spacing:.06em;color:#5f8f6c}
.cx-f input{height:36px;box-sizing:border-box;padding:0 10px;background:#071009;color:var(--phosphor);border:1px solid #1d3a25;border-radius:2px;font:500 15px/1 "IBM Plex Mono",monospace;letter-spacing:.04em}
.cx-f input:focus{outline:2px solid var(--amber);outline-offset:0}
.cx-f small{font-size:11px;letter-spacing:.02em;line-height:1.4;color:#5f8f6c}
.cx-go{display:flex;gap:12px;flex-wrap:wrap}
.cx-save{min-height:44px;padding:0 20px;background:var(--phosphor);color:#06140a;border:0;border-radius:3px;font:700 13px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;cursor:pointer}
.cx-save:disabled{opacity:.55;cursor:default}
.cx-cancel{min-height:44px;padding:0 18px;background:none;color:var(--phosphor);border:1px solid var(--phosphor-dim);border-radius:3px;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;cursor:pointer}
.cx-err{margin:12px 0 0;color:var(--amber);font-size:13px}
.cx-err[hidden]{display:none}
.cx-fine{margin:14px 0 0;font-size:12px;line-height:1.5;color:#5f8f6c}
.cx-fine b{color:var(--phosphor-dim)}
@media (max-width:720px){.cx-cells{grid-template-columns:repeat(10,minmax(0,1fr))}.cx-row{grid-template-columns:1fr;gap:4px}.cx-lbl{padding-top:0}.cx-more{grid-template-columns:1fr}}
@media (max-width:520px){.cx-sheet .cx-card{padding:24px 14px 18px}.cx-in{height:36px;font-size:16px}.cx-pos{min-width:0;flex-basis:100%}}
/* TOP LISTENERS: a putty panel above "Get launch updates" */
.cx-board{max-width:560px;box-sizing:border-box;margin:26px auto 0;padding:26px 30px 24px}
.cx-board[hidden]{display:none}
.cx-board .cm-h{margin:0 0 10px;font-size:20px}
.cx-board p{margin:0 0 12px;color:var(--ink)}
.cx-board a{color:var(--ink)}
.cx-lead{font-size:15px}
.cx-ranks{list-style:none;margin:0 0 12px;padding:0;border-top:1px solid var(--panel-edge)}
.cx-ranks li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--panel-edge);font:500 15px/1.3 "IBM Plex Mono",monospace;color:var(--ink)}
.cx-rk{color:var(--ink-2)}
.cx-nm{overflow-wrap:anywhere}
.cx-ct{font-weight:700}
.cx-none{color:var(--ink-2)}
.cx-board .cx-fine{color:var(--ink-2);font-size:13px;margin-top:-4px}
.cx-signin{min-height:44px;padding:0 18px;background:var(--ink);color:var(--panel);border:0;border-radius:3px;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;cursor:pointer}
.cx-signin:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:520px){.cx-board{padding:22px 18px 20px}}
/* /account: your corrections, and the admin view */
.cx-acct form{margin:4px 0 10px}
.cx-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:0 0 14px}
.cx-filter label{display:flex;flex-direction:column;gap:4px;font:600 12px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.cx-filter input,.cx-filter select{height:38px;box-sizing:border-box;padding:0 10px;font:15px/1 "IBM Plex Mono",monospace;color:var(--ink);background:#fffdf7;border:1px solid var(--panel-edge);border-radius:3px;width:12em;max-width:100%}
.cx-filter .cx-fa{width:7em}
.cx-sm-go{min-height:38px}
.cx-revs{list-style:none;margin:0;padding:0}
.cx-rev{padding:12px 0;border-top:1px solid var(--panel-edge);font-size:14px}
.cx-rev>div{margin:0 0 5px}
.cx-rev-h{font:500 13px/1.4 "IBM Plex Mono",monospace;color:var(--ink)}
.cx-rev-m{font:500 13px/1.4 "IBM Plex Mono",monospace;color:var(--ink-2);overflow-wrap:anywhere}
.cx-rev-v{font:500 14px/1.5 "IBM Plex Mono",monospace;overflow-wrap:anywhere;color:var(--ink)}
.cx-rev-v s{color:var(--ink-2)}
.cx-rev-v mark{background:#f2b23366;color:inherit}
.cx-rev-n{font-style:italic;color:var(--ink-2)}
.cx-rev-s{font:600 12px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.16em;color:var(--ink-2)}
.cx-rev.cx-live .cx-rev-s{color:#1b6e37}
.cx-rev.cx-rolled_back .cx-rev-v,.cx-rev.cx-blocked .cx-rev-v{opacity:.6}
.cx-rev.cx-blocked .cx-rev-s{color:#8f1d12}
.cx-rev-a{display:flex;flex-wrap:wrap;gap:8px}
.cx-adm{min-height:36px;padding:0 12px;background:none;color:var(--ink);border:1px solid var(--ink-2);border-radius:3px;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;cursor:pointer}
.cx-adm:hover{background:#0000000d}
.cx-adm:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cx-adm.cx-danger{color:#8f1d12;border-color:#8f1d12}
.cx-conf{margin-top:8px;padding:10px 12px;background:#8f1d1210;border:1px solid #8f1d12;border-radius:3px}
/* Ruled 2026-10-14: a COMMUNITY correction (not an admin's) is on missileer.watch only; a cell the row's
   alphabet does not take (an EAM has no 0, 1, 8 or 9); the admin list's SERVED / COMMUNITY tag. */
.eam .meta .cxk{color:var(--amber);letter-spacing:.16em;cursor:help;text-decoration:underline dotted #6b5114;text-underline-offset:3px}
.cx-c.cx-bad .cx-in{color:#ff8a7a;border-color:#8f1d12;background:#1a0705}
.cx-tag{display:inline-block;padding:2px 6px;border:1px solid var(--ink-2);border-radius:2px;color:var(--ink-2)}
.cx-tag.cx-srv{border-color:#1b6e37;color:#1b6e37}

/* ---- START HERE (2026-10-15; assets/guide.js) -----------------------------------------------
   The masthead link, "New here? Start here →", is one more status line (.label .label-ink, its
   font, size and spacing), after the AIRBORNE line and before SIGN IN; its × is a quiet button
   whose 24 px target leaves the line's box as the others'. The guide, "What you can do here", is
   the About binder's first part: its own grid row above the binder's head, full width, then a
   rule. Its blocks and questions are rows, the title beside the text from 700 px and above it
   under 700 px. Tokens only, no new colour. */
.shelf .sh-new{display:block}
.shelf .sh-new[hidden]{display:none}
.shelf .sh-go{color:var(--ink);text-decoration:none}
.shelf .sh-go:hover{text-decoration:underline;text-underline-offset:3px}
.shelf .sh-go:focus-visible,.shelf .sh-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shelf .sh-x{font:inherit;letter-spacing:0;color:var(--ink-2);background:none;border:0;cursor:pointer;min-width:28px;min-height:24px;padding:6px 0;margin:-6px -10px -6px 0}
.card.has-guide{grid-template-areas:"guide guide" "head photo" "txt photo";grid-template-rows:auto auto 1fr}
.card.flip.has-guide{grid-template-areas:"guide guide" "photo head" "photo txt"}
.card.solo.has-guide,.card.solo.flip.has-guide{grid-template-areas:"guide" "head" "txt"}
.card>.guide{grid-area:guide;padding-bottom:22px;border-bottom:1px solid var(--panel-edge)}
@media (max-width:820px){
  .card.has-guide,.card.flip.has-guide{grid-template-areas:"guide" "head" "txt" "photo";grid-template-rows:none}
  .card.imgfirst.has-guide{grid-template-areas:"guide" "head" "photo" "txt"}
}
.guide:focus{outline:none}
.card .guide h2{margin:0 0 4px}
.g-list{list-style:none;margin:0;padding:0}
.g-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:2px 26px;padding:12px 0;border-top:1px solid var(--panel-edge)}
.g-row:first-child{border-top:0}
.g-t{margin:0;font:600 15px/1.4 "Barlow Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.g-b{margin:0}
.card .g-b p{margin:0}
.g-b b{font-weight:600}
.g-nw{white-space:nowrap}
.g-b p a{color:var(--ink);text-underline-offset:3px}
.g-b p a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.g-go{display:inline-block;margin-top:4px;padding:4px 0;font:600 13px/1.3 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-underline-offset:3px}
.g-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.g-faq-h{margin:20px 0 2px;font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.g-faq .g-t{font-size:16px;letter-spacing:.04em;text-transform:none}
@media (max-width:699px){.g-row{grid-template-columns:minmax(0,1fr)}}

/* ---- FRESH-EYES FIXES (Daniel's audit rulings, 2026-10-15) -----------------------------------
   1: the shelf's partly-heard line is a link, in the status lines' own look (as the AIRCRAFT line);
      "? = a character we couldn't make out." over the five latest, in the instrument's dim text.
   8: a picked message's "← LATEST", in its header's own type.
   9: on a phone, a row's PARTLY HEARD / PARTIAL tag takes its own line over the copy. */
.shelf #unconf .unc-go{color:inherit;text-decoration:none}
.shelf #unconf .unc-go:hover{text-decoration:underline;text-underline-offset:3px}
.shelf #unconf .unc-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.eam .qkey{margin:16px 0 -8px;font-size:12px;letter-spacing:.06em;color:var(--phosphor-dim-text)}
.crt .hdr .eam-latest{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--phosphor);background:none;border:0;padding:4px 0;margin:-4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.crt .hdr .eam-latest:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:520px){.older .um,.older .pm{display:block;width:max-content;margin:0 0 2px}}
/* A copy full of "?" breaks anywhere (a "?" may not start a line by default, so "56FPTU???" broke as "56FPT / U???"). */
.older .b{line-break:anywhere}
.older .b .cb,.older .b .um,.older .b .pm{line-break:auto}
/* 6 (Daniel, 2026-10-16): "NEWEST OF 135 THIS WEEK" keeps LATEST EAM's header on one line on a phone. */
@media (max-width:479px){#eam #eam-of{font-size:11px;letter-spacing:.06em}}
@media (max-width:340px){#eam #eam-of{font-size:10px;letter-spacing:.02em}}
/* FEEDBACK (2026-10-16; assets/community.js): the sheet (the sign-in sheet's frame), the footer's link, and
   FEEDBACK on /account for an admin account. The three kinds are buttons that stay pressed. */
.fb-link[hidden]{display:none}
.fb-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.fb-kind{min-height:44px;padding:0 16px;background:none;color:var(--ink);border:1px solid var(--ink-2);border-radius:3px;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;cursor:pointer}
.fb-kind:hover{background:#0000000d}
.fb-kind[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.fb-kind:focus-visible,.fb-text:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fb-text{display:block;width:100%;box-sizing:border-box;min-height:132px;margin:0;padding:10px 12px;resize:vertical;font:16px/1.45 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);background:#fffdf7;border:1px solid var(--panel-edge);border-radius:3px;box-shadow:inset 0 1px 2px #0002}
.fb-count{margin:6px 0 14px;text-align:right;font:500 12px/1.2 "IBM Plex Mono",monospace;color:var(--ink-2)}
.fb-count.fb-over{color:#8f1d12;font-weight:700}
.fb-form .cm-fine{margin:14px 0 0}
.fb-done .cm-sent-h{margin:4px 0 16px}
.fb-list{list-style:none;margin:0;padding:0}
.fb-item{padding:12px 0;border-top:1px solid var(--panel-edge);font-size:14px}
.fb-h{margin:0 0 6px;font:500 13px/1.4 "IBM Plex Mono",monospace;color:var(--ink);overflow-wrap:anywhere}
.fb-h code{font:inherit;color:var(--ink-2)}
.fb-k{display:inline-block;padding:1px 6px;border:1px solid var(--ink-2);border-radius:2px;font-weight:600;letter-spacing:.08em}
.fb-k-broken{color:#8f1d12;border-color:#8f1d12}
.fb-t{margin:0 0 8px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.fb-is-read .fb-t,.fb-is-read .fb-h{opacity:.62}
.fb-unread .fb-h b::after{content:" NEW";color:#1b6e37;font-weight:700;letter-spacing:.08em}
.fb-r{font:600 12px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.16em;color:var(--ink-2)}
.cm-why a,.g-fb a{color:var(--ink);text-underline-offset:3px}
.guide .g-fb{margin:16px 0 0}