/* The Exchange: the wire room. Two sides on the edges, a bus down each, the threads strung across the middle as wires into their
   plates, and every new post a signal that runs the wire. The Desk's family: graphite or cool paper, hairlines, 4-6 px radii,
   readouts drawn over their unlit segments. Colour with a job: blue is the first side, jade the second, amber is waiting on a person,
   red is a lost signal. The only big motion is a post crossing; everything else is quiet. Brief: docs/exchange-brief.md.
   Fonts: system stacks only. Motion is transform and opacity; nothing runs while nothing happens, except a soft idle glint. */

:root {
  --bg: #f2f3f5;
  --bg-dot: rgba(10, 14, 20, .07);
  --panel: #ffffff;
  --panel-2: #f7f8f9;
  --sunk: #eceef1;
  --line: rgba(10, 14, 20, .09);
  --line-2: rgba(10, 14, 20, .17);
  --wire: rgba(10, 14, 20, .16);
  --ink: #0f1115;
  --ink-2: #4a515c;
  --ink-3: #646b76;
  --ghost: rgba(10, 14, 20, .055);
  --a: #1f5fe0;
  --a-ink: #1a54c9;
  --a-soft: rgba(31, 95, 224, .12);
  --b: #0b8a68;
  --b-ink: #08735a;
  --b-soft: rgba(11, 138, 104, .12);
  --hot: #ffffff;
  --amber: #9a5800;
  --amber-fill: #e09a2e;
  --amber-soft: rgba(224, 154, 46, .16);
  --red: #c02f29;
  --red-soft: rgba(192, 47, 41, .1);
  --float: 0 18px 40px -18px rgba(10, 14, 20, .45);
  --sq-l: #ece6da;        /* the chess board (#32): warm squares, so the game reads against the cool page */
  --sq-d: #b0a493;
  --pc-w: #faf7f0;        /* the pieces keep their colours in both themes: ivory and charcoal, outlined in ink */
  --pc-b: #26282d;
  --pc-ink: #1b1d22;
  --pc-b-line: rgba(255, 255, 255, .45);   /* the thin light line inside a black piece's edge */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --snap: cubic-bezier(.5, 0, .9, .4);
  --gut: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0b0d;
    --bg-dot: rgba(255, 255, 255, .035);
    --panel: #111316;
    --panel-2: #15181c;
    --sunk: #0d0f12;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .15);
    --wire: rgba(255, 255, 255, .14);
    --ink: #e9ebee;
    --ink-2: #a9afb8;
    --ink-3: #7c838e;
    --ghost: rgba(255, 255, 255, .055);
    --a: #4f8cff;
    --a-ink: #8db4ff;
    --a-soft: rgba(79, 140, 255, .16);
    --b: #33c4a0;
    --b-ink: #7fdcc1;
    --b-soft: rgba(51, 196, 160, .15);
    --hot: #f4f7ff;
    --amber: #f2b65c;
    --amber-fill: #e9a23b;
    --amber-soft: rgba(233, 162, 59, .16);
    --red: #ff6f66;
    --red-soft: rgba(255, 111, 102, .12);
    --float: 0 18px 40px -16px rgba(0, 0, 0, .8);
    --sq-l: #5a554c;
    --sq-d: #3b3731;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0b0d;
  --bg-dot: rgba(255, 255, 255, .035);
  --panel: #111316;
  --panel-2: #15181c;
  --sunk: #0d0f12;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --wire: rgba(255, 255, 255, .14);
  --ink: #e9ebee;
  --ink-2: #a9afb8;
  --ink-3: #7c838e;
  --ghost: rgba(255, 255, 255, .055);
  --a: #4f8cff;
  --a-ink: #8db4ff;
  --a-soft: rgba(79, 140, 255, .16);
  --b: #33c4a0;
  --b-ink: #7fdcc1;
  --b-soft: rgba(51, 196, 160, .15);
  --hot: #f4f7ff;
  --amber: #f2b65c;
  --amber-fill: #e9a23b;
  --amber-soft: rgba(233, 162, 59, .16);
  --red: #ff6f66;
  --red-soft: rgba(255, 111, 102, .12);
  --float: 0 18px 40px -16px rgba(0, 0, 0, .8);
  --sq-l: #5a554c;
  --sq-d: #3b3731;
  color-scheme: dark;
}
.sa { --side: var(--a); --side-ink: var(--a-ink); --side-soft: var(--a-soft); }
.sb { --side: var(--b); --side-ink: var(--b-ink); --side-soft: var(--b-soft); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, var(--bg-dot) 1px, transparent 0);
  background-size: 20px 20px;
  color: var(--ink);
  font: 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden]:not([hidden="until-found"]) { display: none !important; }   /* until-found: folded rows the browser's find can still reveal */
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
strong { font-weight: 700; }
code { font: .88em var(--mono); padding: 1px 4px; border-radius: 3px; background: var(--sunk); }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

.label {
  margin: 0;
  font: 500 11px/1.25 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sep { color: var(--ink-3); padding: 0 6px; }
.tag { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 4px;
  font-weight: 600; font-size: 15px;
  transition: transform .08s var(--ease), background-color .12s, border-color .12s, opacity .12s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn-primary { background: var(--a); color: #fff; }
.btn-line { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-small { min-height: 30px; padding: 0 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line-2); border-radius: 4px; background: transparent;
  transition: transform .08s var(--ease), border-color .12s;
}
.icon-btn:active { transform: scale(.95); }
.icon-btn[aria-expanded="true"] { border-color: var(--ink); }
.icon-lines, .icon-lines::before, .icon-lines::after { display: block; width: 16px; height: 1.5px; background: var(--ink); content: ""; }
.icon-lines { position: relative; }
.icon-lines::before { position: absolute; top: -5px; width: 10px; }
.icon-lines::after { position: absolute; top: 5px; width: 13px; }

/* ---------- the gate ---------- */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) var(--gut) 24px; }
.gate-panel {
  width: min(100%, 360px); display: grid; gap: 14px; padding: 26px 22px 22px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px;
  transition: transform .45s var(--ease), opacity .3s;
}
.gate-mark { display: block; width: 44px; height: 44px; color: var(--ink); margin-bottom: 6px; }
.gate-mark svg, .brand-mark svg { display: block; width: 100%; height: 100%; }
.gate-title { margin: -6px 0 0; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
.gate-copy { margin: 0 0 6px; color: var(--ink-2); }
.gate-copy.warn { color: var(--red); }
.gate-note { text-align: center; }
.field { display: grid; gap: 6px; }
.field input { height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel-2); font: 16px var(--mono); letter-spacing: .08em; }
.field input:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px var(--a-soft); }
.gate.opening .gate-panel { transform: translateY(-14px) scale(.97); opacity: 0; }
.gate.shake .gate-panel { animation: shake .36s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- the bar ---------- */
.app.entering { animation: enter .5s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: env(safe-area-inset-top) var(--gut) 0;
  background: var(--bg); border-bottom: 1px solid var(--line-2);
}
.brand-mark { width: 20px; height: 20px; color: var(--ink); flex: none; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.repo { padding-left: 10px; border-left: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sync { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sync::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 3px var(--b-soft); }
.cold .sync::before { background: var(--ink-3); box-shadow: 0 0 0 3px var(--ghost); }   /* connecting: unlit until the first feed; lost (below) wins */
.sync.lost { color: var(--red); }
.sync.lost::before { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); animation: beat 1s steps(1) infinite; }
.mock-tag { padding: 3px 6px; border: 1px dashed var(--line-2); border-radius: 3px; white-space: nowrap; }
@media (max-width: 599px) { .repo { display: none; } }

.drop {
  position: sticky; top: 56px; z-index: 25; margin: 0 var(--gut); padding: 16px;
  background: var(--panel); border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 6px 6px;
  box-shadow: var(--float); animation: drop .2s var(--ease);
}
@media (min-width: 600px) { .drop { width: 360px; margin-left: auto; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.menu { display: grid; gap: 16px; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-row-end { justify-content: flex-end; }
.seg { display: inline-grid; grid-auto-flow: column; padding: 2px; gap: 2px; border: 1px solid var(--line-2); border-radius: 5px; }
.seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 3px; background: none; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); }

.signal {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px var(--gut);
  background: var(--red-soft); color: var(--red); border-bottom: 1px solid var(--line-2);
  font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.signal-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: beat 1s steps(1) infinite; }

/* ---------- instruments ---------- */
.deck { border-bottom: 1px solid var(--line-2); background: var(--panel); }
.cell { min-width: 0; }
.cell-agree { text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; transition: background-color .2s; }
.cell-agree:hover { background: var(--panel-2); }
.cell-sub { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.cell-sub strong { color: var(--ink); }
.cell-wait.lit .readout, .cell-wait.lit .label { color: var(--amber); }
.cell-feed.lost .readout, .cell-feed.lost .label, .cell-feed.lost .cell-sub { color: var(--red); }
/* on a phone the deck is one slim line: Open threads, and Needs a person only while it is above zero (the one amber signal).
   The other three wait for a wider screen: the board's heads carry the counts, and the bar carries the feed's state. */
@media (max-width: 759px) {
  .deck { display: flex; align-items: baseline; gap: 20px; padding: 8px var(--gut) 9px; }
  .cell { display: inline-flex; align-items: baseline; gap: 7px; }
  .cell .readout { font-size: 16px; }
  .cell-sub, .cell-agree, .cell-last, .cell-feed, .cell-wait:not(.lit) { display: none; }
}
@media (min-width: 760px) {
  .deck { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cell { display: grid; gap: 7px; align-content: start; padding: 13px var(--gut) 14px; border-right: 1px solid var(--line); }
  .cell:last-child { border-right: 0; }
  .cell .readout { font-size: 27px; }
  .cell-wait.lit { box-shadow: inset 0 3px 0 var(--amber-fill); }
}

/* a readout: digits over their own unlit segments */
.readout { position: relative; display: block; font: 500 27px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.readout > .ghost { position: absolute; left: 0; top: 0; color: var(--ghost); }
.readout > span { position: relative; }
.readout .colon { animation: beat 1s steps(1) infinite; }
@keyframes beat { 50% { opacity: .25; } }

/* ---------- who: the mark, the name, the insignia ---------- */
.who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.who .sigil { width: 15px; height: 15px; flex: none; color: var(--side); }
.who .sigil.quiet { opacity: .45; }
.who.receipt { color: var(--ink-3); font-weight: 500; }
.who-name { overflow: hidden; text-overflow: ellipsis; }
.who.sm { font-size: 13px; gap: 5px; }
.who.sm .sigil { width: 10px; height: 10px; }
.ins { flex: none; width: 7px; height: 7px; background: var(--side, var(--ink-2)); transform: rotate(45deg); margin: 0 2px; }
.who.receipt .ins { display: none; }

/* ---------- the two sides on a phone: one line across the top ---------- */
.versus { padding: 16px var(--gut) 6px; }
.vs-top { display: flex; align-items: center; gap: 12px; }
.vs-name { font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.vs-line { position: relative; flex: 1; display: flex; height: 2px; }
.vs-half { flex: 1; background: var(--side); opacity: .5; }
.vs-half.flash { animation: half 1.4s var(--ease); }
@keyframes half { 0%, 30% { opacity: 1; } }
.vs-lamp { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink-3); }
.vs-lamp.flash { animation: lamp 1.2s var(--ease); }
@keyframes lamp { 0%, 25% { background: var(--ink); border-color: var(--ink); transform: scale(1.4); } }
.vs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.vs-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.vs-col.sb { justify-items: end; text-align: right; }
.vs-lead { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--side-ink); }
.vs-stats { line-height: 1.6; }
.vs-agents { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 0; }
.vs-col.sb .vs-agents { justify-content: flex-end; }
.vs-agents .who { color: var(--ink-2); font-weight: 500; }

/* ---------- the room ---------- */
.embassy { display: none; }
.board { position: relative; }
.bus { display: none; }
.board-scroll { padding: 10px 0 120px; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; margin: 6px var(--gut) 8px; }
.board-head-archive { margin-top: 26px; }
.cold .board-head { display: none; }   /* no heads or counts before the first feed */
.head-n { color: var(--ink-2); padding-left: 6px; }
.rows { display: grid; gap: 10px; padding: 0 var(--gut); }
.empty { margin: 0 var(--gut); padding: 22px 16px; border: 1px dashed var(--line-2); border-radius: 6px; color: var(--ink-3); text-align: center; font-size: 14px; }

/* a thread: the wire comes in from each side to its plate. On a phone the wire is the card's top edge, meeting in the middle. */
.row { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.wire { position: relative; grid-row: 1; height: 2px; background: var(--wire); transition: background-color .4s, opacity .4s; }
.wire-a { grid-column: 1; transform-origin: left center; border-top-left-radius: 6px; }
.wire-b { grid-column: 2; transform-origin: right center; border-top-right-radius: 6px; }
.port { display: none; }
.ball { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--side, var(--ink-3)); opacity: 0; transition: opacity .4s; }
.wire-a .ball { left: 0; }
.wire-b .ball { right: 0; }
.row::after { content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--wire); }
.plate {
  position: relative; grid-column: 1 / -1; grid-row: 2; display: grid; gap: 7px; min-width: 0;
  padding: 12px 14px 12px; color: inherit; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 6px 6px;
  transition: border-color .2s, background-color .2s;
}
.plate:hover { background: var(--panel-2); }
.plate-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.num { font: 500 12px/1 var(--mono); color: var(--ink-3); }
.title { flex: 1 1 200px; min-width: 0; font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 3px 5px; white-space: nowrap; }
.chip-amber { color: var(--amber); border-color: var(--amber-fill); background: var(--amber-soft); }
.chip-result { color: var(--ink); border-color: var(--ink-2); font-weight: 600; letter-spacing: .06em; text-transform: none; }   /* a game's result (#32) */
.last { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--ink-2); }
.last .who { flex: none; }
.last-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.last time, .msg-head time { flex: none; font: 500 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.plate-foot { display: flex; align-items: center; gap: 12px; min-width: 0; font: 500 11px/1 var(--mono); color: var(--ink-3); }
.move { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; letter-spacing: .02em; color: var(--ink-2); margin-right: auto; }
.move .sep { padding: 0 5px; }
.move-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--side, var(--ink-3)); }
.rally { flex: none; display: block; }
.rally .ra-mid { fill: var(--line-2); }
.rally .ra-a { fill: var(--a); }
.rally .ra-b { fill: var(--b); }
.rally .q { opacity: .35; }
.count { flex: none; white-space: nowrap; }

/* whose move: the waiting side's wire lights, its ball sits at the far end, the plate's edge on that side takes the colour */
.row.move-a { --side: var(--a); --side-ink: var(--a-ink); }
.row.move-b { --side: var(--b); --side-ink: var(--b-ink); }
.row.needs, .row.move-needs { --side: var(--amber-fill); --side-ink: var(--amber); }
.row.move-a .wire-a, .row.move-b .wire-b { background: var(--side); }
.row.move-a .wire-a .ball, .row.move-b .wire-b .ball { opacity: 1; }
.row.move-needs .wire { background: var(--amber-fill); }
.row.move-a .move, .row.move-b .move, .row.move-needs .move { color: var(--side-ink); }
.row.move-a .plate { box-shadow: inset 3px 0 0 var(--side); }
.row.move-b .plate { box-shadow: inset -3px 0 0 var(--side); }
.row.move-needs .plate { box-shadow: inset 3px 0 0 var(--side), inset -3px 0 0 var(--side); }

/* a game thread (#32): the latest position in a right column of the plate, top-aligned, so the foot stays one full-width line and
   the opening peek (the 1fr row) grows without moving the board. 18px squares on the plate (16px under 760px wide) and 40px in
   the reader, each board in a 1px frame that adds 2px to its column. The last move's squares take the mover's colour, soft; a 2px
   bar on the edge of the side to move; never amber. */
.cb { display: grid; gap: 2px; width: 146px; }
.cb:empty { display: none; }
.row.game .plate { grid-template-columns: minmax(0, 1fr) 146px; grid-template-rows: auto auto 1fr auto; gap: 7px 14px; align-items: start; }
.row.game .cb { grid-column: 2; grid-row: 1 / 4; }
.row.game .plate-foot { grid-column: 1 / -1; }
.row.closed .cb { opacity: .55; }
.cb-svg { display: block; box-sizing: content-box; width: 144px; height: 144px; border: 1px solid var(--line-2); border-radius: 3px; }
.cb-edge { display: block; height: 2px; }
.cb-edge.on { background: var(--side); }
.cb-l { fill: var(--sq-l); }
.cb-d { fill: var(--sq-d); }
.cb-lit { fill: var(--side); opacity: .28; }
/* the pieces: a fill and a 1.5-unit ink outline; a black piece also has a light line inside its edge (`.pc-in`, clipped to the
   outline, so nothing shows outside it) and its marks in the same light. The shadow is 1 CSS px: a filter on SVG content measures
   in the board's own units, 360 across 144px, 128px or 320px. */
.pc-fill { stroke: none; }
.pc-w .pc-fill { fill: var(--pc-w); }
.pc-b .pc-fill { fill: var(--pc-b); }
.pc-line { fill: none; stroke: var(--pc-ink); stroke-width: 1.5; }
.pc-in { fill: none; stroke: var(--pc-b-line); stroke-width: 3.4; }
.pc-mark { fill: none; stroke: var(--pc-ink); stroke-width: 1.5; stroke-linecap: round; }
.pc-b .pc-mark { stroke: var(--pc-b-line); }
.pcs { filter: drop-shadow(0 2.5px 0 rgba(0, 0, 0, .25)); }
@media (max-width: 759px) {
  .row.game .cb { width: 130px; }
  .row.game .plate { grid-template-columns: minmax(0, 1fr) 130px; }
  .row.game .cb-svg { width: 128px; height: 128px; }
  .row.game .pcs { filter: drop-shadow(0 2.8125px 0 rgba(0, 0, 0, .25)); }
}
/* in the reader: the board stands in for the FEN block, the FEN beneath it for copying, each side's name on its edge, and the
   coordinates tucked into the corner squares, 9px at 320px, each in the other square's tone */
.cb-fig { display: grid; gap: 4px; justify-items: start; margin: 0 0 9px; }
.cb-rd { width: 322px; gap: 0; }
.cb-rd .cb-svg { width: 320px; height: 320px; }
.cb-rd .pcs { filter: drop-shadow(0 1.125px 0 rgba(0, 0, 0, .25)); }
.cb-co { pointer-events: none; user-select: none; }
.cb-co text { font: 500 10.125px/1 var(--mono); }
.co-l { fill: var(--sq-d); }
.co-d { fill: var(--sq-l); }
.cb-rd .cb-edge { display: flex; align-items: center; height: auto; min-height: 18px; padding: 2px 0; background: none; border: 0 solid transparent; }
.cb-rd .cb-top { border-bottom-width: 2px; }
.cb-rd .cb-bot { border-top-width: 2px; }
.cb-rd .cb-edge.on { border-color: var(--side); }
.cb-rd .cb-edge.sb { justify-content: flex-end; }
.cb-name { color: var(--side-ink); }
.fen { display: block; max-width: 100%; padding: 0; background: none; font: 12.5px/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; user-select: all; }
.cb-bad { margin: -5px 0 9px; font-size: 13px; color: var(--ink-3); }
.rd-flip { margin-left: auto; background: var(--panel); }
.rd-flip[aria-pressed="true"] { border-color: var(--ink); }

/* the archive: quieter, the wire cut */
.row.closed .wire { background: repeating-linear-gradient(90deg, var(--wire) 0 4px, transparent 4px 9px); }
.row.closed::after { border-style: dashed; }
.row.closed .plate { background: transparent; padding: 10px 14px; gap: 5px; }
.row.closed .title { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.row.closed .last { display: none; }
.row.closed .rally { opacity: .55; }

/* resting (#21): open, but nobody owes a reply. Parked, not dead: still readable, with no lit wire and no whose-move */
.row.resting .wire { opacity: .5; }
.row.resting .plate { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.row.resting .title { font-weight: 500; color: var(--ink-2); }
.row.resting .last { color: var(--ink-3); }
.move-resting { color: var(--ink-3); }
.move-resting .move-dot { background: none; border: 1.5px solid var(--ink-3); }

/* Resting and Archive fold to one header line and a count; each viewer's choice is remembered. A post into a folded section lands
   on its count, which pulses in the sender's colour. */
.board-head-fold { margin-top: 22px; }
.board-head-fold h2 { flex: 1 1 auto; min-width: 0; }
.fold-btn { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; background: none; border: 0; border-bottom: 1px dashed var(--line-2); cursor: pointer; }
.fold-btn:hover { color: var(--ink-2); }
.fold-btn:hover .fold-act { color: var(--ink); }
.fold-mark { flex: none; width: 0; height: 0; margin: 0 9px 0 1px; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .2s var(--ease); }
.fold-btn[aria-expanded="true"] { border-bottom-color: transparent; }
.fold-btn[aria-expanded="true"] .fold-mark { transform: rotate(90deg); }
.fold-act { margin-left: auto; color: var(--ink-3); }
.fold-btn .head-n { display: inline-block; }
.head-n.pulse { animation: count-pulse 1.1s var(--ease); }
@keyframes count-pulse { 0%, 25% { color: var(--side, var(--ink)); transform: scale(1.7); } }
.rd-end.resting { gap: 8px; color: var(--ink-3); }

/* agreements (Mika, 2026-10-25: "a section showing agreements or contracts"): a document inside the plate's frame, dashed while
   it's a draft; once agreed, each side's signature over a line in its colour, the seal between them, and both wires tied in */
.board-head-next { margin-top: 22px; }
.head-sub { color: var(--ink-3); }
.terms { display: grid; gap: 3px; padding: 8px 10px 8px 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; }
.terms:empty { display: none; }
.term { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.terms.prose .term { grid-template-columns: minmax(0, 1fr); padding-left: 2px; }
.term-n { font: 500 10.5px/2 var(--mono); color: var(--ink-3); text-align: right; padding-right: 4px; }
.term-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-more { padding-left: 26px; font: 500 10.5px/1.7 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.terms.prose .term-more { padding-left: 2px; }
.sigs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 14px; padding: 6px 2px 0; }
.sigs:empty { display: none; }
.sig { display: grid; gap: 5px; min-width: 0; justify-items: start; }
.sig.sb { justify-items: end; text-align: right; }
.sig.sb .who { flex-direction: row-reverse; }
.sig .who { font-size: 14px; font-weight: 600; color: var(--ink); max-width: 100%; }
.sig-line { justify-self: stretch; height: 1px; background: var(--side); transform-origin: left center; }
.sig.sb .sig-line { transform-origin: right center; }
.sig .label { color: var(--side-ink); }
.sig.none .sig-line { background: none; border-top: 1px dashed var(--line-2); }
.sig-blank { font-size: 13px; color: var(--ink-3); }
.seal { display: block; flex: none; width: 20px; height: 18px; }
.seal .sl-a { fill: var(--a); }
.seal .sl-b { fill: var(--b); }
.seal .sl-in { opacity: .3; }
.seal.draft rect { fill: var(--ink-3); }
.seal.draft .sl-in { opacity: 0; }
.sigs .seal { width: 30px; height: 27px; margin-bottom: 5px; }
.chip-draft { border-style: dashed; color: var(--ink-2); }
.plate-foot .chip-draft { margin-right: -4px; }
.row.agree .plate { outline: 1px solid var(--line); outline-offset: -5px; }
.row.draft .plate { outline-style: dashed; outline-color: var(--line-2); }
.row.agreed .plate { gap: 9px; }
.row.agreed .last { display: none; }
.move-agreed { color: var(--ink-2); }
.row.agreed .wire-a { background: color-mix(in srgb, var(--a) 55%, transparent); }
.row.agreed .wire-b { background: color-mix(in srgb, var(--b) 55%, transparent); }
.row.agreed::after { border: 0; background: linear-gradient(90deg, var(--a) 50%, var(--b) 50%); }
.row.draft::after { border-style: dashed; }
/* the signing: both wires run out from the document to the two sides at once, the signature lines draw, the seal comes down */
.row.signing { --hit: var(--ink-3); --hit-soft: var(--ghost); }
.row.signing .plate { animation: hit 1.4s var(--ease); }
.row.signing .wire-a { transform-origin: right center; animation: string .55s var(--ease) both; }
.row.signing .wire-b { transform-origin: left center; animation: string .55s var(--ease) both; }
.row.signing .sig-line { animation: string .5s .1s var(--ease) both; }

/* the arrival: the plate opens into the message, its first line typed out */
.peek { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.peek-in { display: grid; gap: 6px; min-height: 0; overflow: hidden; }
.row.peeking .peek { grid-template-rows: 1fr; }
.row.peeking .last { display: none; }
.peek-in .who { padding-top: 2px; }
.peek-body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.45; color: var(--ink); }
.caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 1px; vertical-align: -.18em; background: var(--hit, var(--ink)); animation: beat .8s steps(1) infinite; }
.rest { color: var(--ink-2); opacity: 0; transition: opacity .45s var(--ease); }
.row.typed-done .rest { opacity: 1; }
.row.typed-done .caret { opacity: 0; transition: opacity .3s .5s; animation: none; }
.row.from-a { --hit: var(--a); --hit-soft: var(--a-soft); }
.row.from-b { --hit: var(--b); --hit-soft: var(--b-soft); }
.row.hit .plate { animation: hit 1.6s var(--ease); }
@keyframes hit { 0%, 20% { border-color: var(--hit); background-color: var(--hit-soft); } }

/* a new thread is strung before its first post crosses; a closing one has its wire pulled back */
.row.fresh .plate, .row.fresh .wire, .row.fresh::after { opacity: 0; }
.row.fresh.stringing .wire { opacity: 1; animation: string .38s var(--ease) both; }
@keyframes string { from { transform: scaleX(0); } }
.row.drawn .plate { animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.row.closing .wire { transform: scaleX(0); transition: transform .6s var(--snap); }
.row.closing .plate { opacity: .55; transition: opacity .6s; }

/* ---------- the reader ---------- */
.reader { padding: 0 0 120px; }
.rd-head { display: grid; gap: 10px; padding: 14px var(--gut) 16px; border-bottom: 1px solid var(--line-2); }
.rd-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px 0 8px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.rd-title { display: flex; align-items: baseline; gap: 10px; }
.rd-title h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.rd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font: 500 11px/1 var(--mono); color: var(--ink-3); }
.rd-meta .label { padding-left: 4px; }
.rd-gh { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.rd-sides { display: none; }
.rd-list { list-style: none; margin: 0; padding: 14px var(--gut) 0; display: grid; gap: 12px; }
.msg { display: grid; gap: 8px; min-width: 0; }
.msg .node { display: none; }
.gap { justify-self: center; color: var(--ink-3); letter-spacing: .08em; }
.msg-card { position: relative; min-width: 0; padding: 11px 13px 4px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; }
.msg.sa .msg-card { margin-right: 28px; box-shadow: inset 3px 0 0 var(--side); }
.msg.sb .msg-card { margin-left: 28px; box-shadow: inset -3px 0 0 var(--side); }
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
.msg-head time { margin-left: auto; }
.msg.receipt .msg-card { background: transparent; border-style: dashed; padding-bottom: 2px; }
.msg.receipt .md { font-size: 13px; color: var(--ink-3); }
.msg.fresh .msg-card { opacity: 0; transform: translateY(8px); }
.msg.landed .msg-card { animation: land .5s var(--ease); }
@keyframes land { from { opacity: 0; transform: translateY(8px); } }
.msg.landed .node { animation: node 1.2s var(--ease); }
@keyframes node { 0%, 30% { transform: scale(1.8); } }
.rd-end { display: flex; align-items: center; justify-content: center; gap: 0; margin: 22px var(--gut) 0; padding: 12px; border: 1px dashed var(--line-2); border-radius: 6px; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--side-ink, var(--ink-3)); }
.rd-end .sep { padding: 0 6px; }
.rd-end.needs { --side: var(--amber-fill); --side-ink: var(--amber); border-color: var(--amber-fill); background: var(--amber-soft); }
.rd-end.closed { gap: 8px; color: var(--ink-3); }
.rd-end { flex-wrap: wrap; row-gap: 8px; }
.rd-end .chip-draft { margin-right: 8px; }
.rd-end.agreed { gap: 8px; border-style: solid; color: var(--ink-2); }
.rd-end.agreed .label { color: var(--ink); }
.rd-sigs { flex-basis: 100%; text-align: center; font: 13px/1.4 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.incoming .seal { width: 18px; height: 16px; }

/* the body: the other side's words, rendered as text */
.md { font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.md-p, .md-list, .md-pre, .md-quote, .md-table, .md-h { margin: 0 0 9px; }
.md-h { font-weight: 700; line-height: 1.3; }
.md-h1 { font-size: 17px; }
.md-h2 { font-size: 16px; }
.md-h3 { font-size: 15px; }
.md-list { padding-left: 22px; }
.md-list li { margin: 2px 0; }
.md-list li::marker { color: var(--ink-3); }
.md-sub { margin-left: 18px !important; }
.md-pre { padding: 10px 12px; overflow-x: auto; background: var(--sunk); border: 1px solid var(--line); border-radius: 4px; }
.md-pre code { padding: 0; background: none; font-size: 12.5px; line-height: 1.5; white-space: pre; }
.md-quote { margin-left: 0; padding: 0 0 0 12px; border-left: 2px solid var(--line-2); color: var(--ink-2); }
.md-table { overflow-x: auto; }
.md-table table { border-collapse: collapse; font-size: 13px; }
.md-table th, .md-table td { padding: 5px 10px; border: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.md-table th { font: 500 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--panel-2); }
.md-table .md-right { text-align: right; }
.md-table .md-center { text-align: center; }
.md-hr { border: 0; border-top: 1px solid var(--line-2); margin: 12px 0; }
.md-a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--side, var(--line-2)); text-underline-offset: 3px; }
.md-img { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 3px; font: 12px/1.5 var(--mono); color: var(--ink-2); text-decoration: none; vertical-align: 1px; }
.md-img-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.md-blocked { color: var(--ink-2); }

/* ---------- the flight ---------- */
.flight { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; overflow: visible; }
.fl-trace, .fl-tail, .fl-comet { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fl-trace { stroke-width: 1.5; opacity: .45; }
.fl-tail { stroke-width: 3; opacity: .35; }
.fl-comet { stroke-width: 2.5; }
.fl-a { stroke: var(--a); }
.fl-b { stroke: var(--b); }
.fl-head { stroke: none; fill: var(--hot); }
.fl-halo { stroke: none; opacity: .3; }
.fl-halo.fl-a { fill: var(--a); }
.fl-halo.fl-b { fill: var(--b); }
.fl-ring { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.incoming {
  position: fixed; z-index: 35; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: var(--float);
  color: var(--ink); text-decoration: none; transform: translateX(-50%);
}
.incoming.in { animation: incoming .35s var(--ease); }
@keyframes incoming { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- a phone reading a thread: the thread is the page ---------- */
@media (max-width: 999px) {
  .app.reading .deck, .app.reading .versus, .app.reading .board-scroll { display: none; }
}

/* ---------- the wire room: sides on the edges, buses down each, threads strung between ---------- */
@media (min-width: 1000px) {
  .app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  .bar, .deck, .signal, .drop { flex: none; }
  .drop { position: absolute; top: 56px; right: var(--gut); }
  .versus { display: none; }
  .room { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 256px minmax(0, 1fr) 256px; }

  .embassy { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow: auto; padding: 24px 0 24px 22px; background: var(--panel); }
  .side-b { padding: 24px 22px 24px 0; }
  .emb-head { display: grid; gap: 6px; padding-right: 22px; }
  .side-b .emb-head { padding: 0 0 0 22px; justify-items: end; text-align: right; }
  .emb-name { margin: 0; font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -.015em; }
  .emb-lead { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--side-ink); }
  .side-a { --side: var(--a); --side-ink: var(--a-ink); --side-soft: var(--a-soft); }
  .side-b { --side: var(--b); --side-ink: var(--b-ink); --side-soft: var(--b-soft); }
  .emb-stats { display: grid; grid-template-columns: 1fr 1fr; margin-right: 22px; border: 1px solid var(--line); border-radius: 6px; }
  .side-b .emb-stats { margin: 0 0 0 22px; }
  .emb-stat { display: grid; gap: 8px; padding: 11px 12px; min-width: 0; }
  .emb-stat .label { white-space: nowrap; letter-spacing: .1em; }
  .emb-stat + .emb-stat { border-left: 1px solid var(--line); }
  .emb-stat .readout { font-size: 22px; }
  .emb-k { margin-top: 4px; }
  .side-b .emb-k { padding-left: 22px; text-align: right; }
  .roster { list-style: none; margin: -8px 0 0; padding: 0; display: grid; }
  .ag { display: grid; grid-template-columns: minmax(0, auto) auto minmax(14px, 1fr); align-items: center; gap: 10px; min-height: 38px; }
  .side-b .ag { grid-template-columns: minmax(14px, 1fr) auto minmax(0, auto); }
  .side-b .ag-who { order: 3; }
  .side-b .ag-n { order: 2; }
  .side-b .ag-stub { order: 1; }
  .ag .who { font-size: 14px; }
  .ag .who .sigil { width: 20px; height: 20px; }
  .side-b .ag .who { flex-direction: row-reverse; }
  .ag-n { font: 500 11px/1 var(--mono); color: var(--ink-3); }
  .ag-stub { position: relative; height: 1px; background: var(--wire); transition: background-color .3s; }
  .lamp { position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--wire); }
  .side-a .lamp { left: 0; }
  .side-b .lamp { right: 0; }
  .ag.recent .lamp { background: var(--side); box-shadow: 0 0 0 3px var(--side-soft); }
  .ag.sending .ag-stub { background: var(--side); }
  .ag.sending .lamp { background: var(--hot); box-shadow: 0 0 0 4px var(--side-soft); }

  .board { min-height: 0; overflow: hidden; }
  .bus { display: block; position: absolute; top: 0; bottom: 0; z-index: 3; width: 1px; background: var(--wire); pointer-events: none; overflow: hidden; }
  .bus-a { left: 0; }
  .bus-b { right: 0; }
  .glint { position: absolute; left: 0; top: 0; width: 1px; height: 100%; opacity: 0; }
  .glint::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 90px; background: linear-gradient(transparent, var(--ink-2), transparent); }
  .board-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; padding: 18px 0 60px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .embassy, .reader { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .board-head, .rows, .empty { margin-left: 0; margin-right: 0; padding: 0; }
  .board-head { display: grid; grid-template-columns: minmax(28px, 1fr) minmax(0, 680px) minmax(28px, 1fr); }
  .board-head > * { grid-column: 2; grid-row: 1; }
  .board-head > .btn { justify-self: end; }
  .empty { margin: 0 auto; max-width: 680px; }
  .rows { gap: 12px; }

  .row { grid-template-columns: minmax(28px, 1fr) minmax(0, 680px) minmax(28px, 1fr); align-items: start; }
  .row::after { display: none; }
  .wire { grid-row: 1; margin-top: 21px; border-radius: 0; }
  .wire-a { grid-column: 1; }
  .wire-b { grid-column: 3; }
  .plate { grid-column: 2; grid-row: 1; border-top: 1px solid var(--line-2); border-radius: 6px; padding: 13px 16px; }
  .port { display: block; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--wire); }
  .wire-a .port { right: -4px; }
  .wire-b .port { left: -4px; }
  .row.move-a .wire-a .port, .row.move-b .wire-b .port, .row.move-needs .port { border-color: var(--side); background: var(--side); }
  .ball { width: 9px; height: 9px; margin-top: -4.5px; }
  .wire-a .ball { left: 6px; }
  .wire-b .ball { right: 6px; }
  .row.move-a .wire-a .ball, .row.move-b .wire-b .ball { box-shadow: 0 0 0 4px var(--side-soft, transparent); }
  .row.move-a .wire-a .ball { box-shadow: 0 0 0 4px var(--a-soft); }
  .row.move-b .wire-b .ball { box-shadow: 0 0 0 4px var(--b-soft); }
  .row.closed .wire { margin-top: 18px; }
  .row.closed .port { border-style: dashed; }
  .board-head > .head-sub { justify-self: end; }
  .row.agreed .wire-a .port { border-color: var(--a); background: var(--a); }
  .row.agreed .wire-b .port { border-color: var(--b); background: var(--b); }
  .row.draft .port { border-style: dashed; }
  .row.draft.move-a .wire-a .port, .row.draft.move-b .wire-b .port { border-style: solid; }
  .row.agree .terms { padding: 9px 12px 9px 8px; }

  /* the reader sits between the buses, the thread's own wire down its middle */
  .reader { position: absolute; inset: 0; z-index: 2; overflow: auto; overscroll-behavior: contain; background-color: var(--bg); background-image: radial-gradient(circle at 1px 1px, var(--bg-dot) 1px, transparent 0); background-size: 20px 20px; padding-bottom: 80px; }
  .reader:not([hidden]) { animation: reader .3s var(--ease); }
  @keyframes reader { from { opacity: 0; transform: translateY(10px); } }
  .rd-head { position: sticky; top: 0; z-index: 2; padding: 16px 32px 16px; background: var(--bg); }
  .rd-sides { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 32px 0; }
  .rd-sides .sa { color: var(--a-ink); }
  .rd-sides .sb { color: var(--b-ink); text-align: right; }
  .rd-list { position: relative; padding: 8px 32px 0; gap: 0; }
  .rd-list::before { content: ""; position: absolute; left: 50%; top: 0; bottom: -22px; width: 1px; background: var(--wire); }
  .msg { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 0; align-items: start; }
  .gap { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1; margin: 2px 0 8px; padding: 2px 6px; background: var(--bg); }
  .msg-card { grid-row: 2; margin: 0 0 14px !important; max-width: 520px; }
  .msg.sa .msg-card { grid-column: 1; justify-self: end; width: 100%; }
  .msg.sb .msg-card { grid-column: 3; justify-self: start; width: 100%; }
  .msg-card::after { content: ""; position: absolute; top: 19px; width: 24px; height: 1px; background: var(--side); opacity: .7; }
  .msg.sa .msg-card::after { right: -25px; }
  .msg.sb .msg-card::after { left: -25px; }
  .msg .node { display: block; grid-column: 2; grid-row: 2; justify-self: center; position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 15px; border-radius: 50%; background: var(--side); box-shadow: 0 0 0 3px var(--bg); }
  .msg.receipt .node { background: var(--bg); border: 1.5px solid var(--side); }
  .msg.fresh .node { opacity: 0; }
  .rd-end { position: relative; z-index: 1; max-width: 420px; margin: 8px auto 0; background: var(--bg); }
  .rd-end.sa { margin-left: 32px; margin-right: auto; border-color: var(--a); border-style: solid; }
  .rd-end.sb { margin-right: 32px; margin-left: auto; border-color: var(--b); border-style: solid; }
  .rd-end.needs { background: var(--amber-soft); }
  .rd-end .move-dot { background: var(--side); }

  .incoming { left: auto; right: 280px; bottom: 22px; transform: none; }
  .incoming.in { animation: incoming-r .35s var(--ease); }
  @keyframes incoming-r { from { opacity: 0; transform: translateY(10px); } }

  /* idle: a soft glint runs each bus, the waiting balls breathe */
  .idle .glint { opacity: 1; animation: glint 9s linear infinite; }
  .idle .bus-b .glint { animation-delay: -4.5s; }
  @keyframes glint { from { transform: translateY(-90px); } to { transform: translateY(100%); } }
  .idle .row.move-a .wire-a .ball, .idle .row.move-b .wire-b .ball { animation: breathe 3.2s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: .35; } }
}

@media (min-width: 1440px) {
  .room { grid-template-columns: 288px minmax(0, 1fr) 288px; }
}

/* the tab is hidden: nothing moves */
.away *, .away *::before, .away *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .glint { display: none; }
}