/* The bridge theme: the one look for every page Starfleet serves.
   Source: the owner's Helm design project (claude.ai/design, "Personal
   Goals Portal", 2026-07-28), an original starship-bridge console, not
   LCARS. Tokens first, then the few components every page is built
   from. Pages use these classes and variables only; no colour, font or
   radius is written anywhere else (tests/test_ui_theme.py). */

:root {
  --bg: #050810;
  --bg-glow: #0b1830;
  --panel: rgba(13, 30, 52, .30);
  --panel-line: #1b3a5c;
  --field: #0c1626;
  --ink: #cfe8f5;
  --ink-soft: #8fb0c8;
  --ink-on-accent: #041018;

  /* accents: one per meaning, never decorative */
  --ops: #6cd9ff;       /* hails, calls, the live line          (Helm FIN)  */
  --mission: #c9a2f5;   /* missions, plans, proposals           (Helm OSS)  */
  --warn: #ffb85c;      /* review, waiting on a person          (Helm PRO)  */
  --ok: #57e6a8;        /* done, nominal                                     */
  --alert: #ff5468;     /* failed, overdue, immediate attention              */

  --ops-line: #1b4a5c; --mission-line: #3d2f5c; --warn-line: #5c4320;
  --ok-line: #1d4a3f; --alert-line: #5c2030;

  --font-title: 'Michroma', sans-serif;      /* headers, tabs, labels; letter-spaced */
  --font-display: 'Antonio', sans-serif;     /* big numerals, countdowns */
  --font-body: 'IBM Plex Sans', sans-serif;  /* everything read */

  --radius-panel: 16px;
  --radius-band: 18px;
  --radius-tab: 0 0 12px 0;
  --radius-pill: 999px;
  --gap: 16px;
  --glow-ops: 0 0 22px rgba(108, 217, 255, .35);
}

html { background: var(--bg); }
body.bridge {
  margin: 0; min-height: 100vh; color: var(--ink);
  background: radial-gradient(ellipse at 50% -10%, var(--bg-glow) 0%, var(--bg) 55%);
  font: 14px/1.45 var(--font-body);
}
.bridge a { color: var(--ops); text-decoration: none; }
.bridge a:hover { text-decoration: underline; }
.bridge .wrap { max-width: 1620px; margin: 0 auto; padding: 0 24px 24px; }

/* the header: a solid title tab, then pills */
.bridge .header { display: flex; align-items: stretch; gap: 10px; padding: 20px 0 16px; }
.bridge .title-tab {
  background: var(--ops); color: var(--ink-on-accent); font-family: var(--font-title);
  font-size: 15px; letter-spacing: 3px; padding: 14px 26px; text-transform: uppercase;
  border-radius: 24px 8px 8px 24px; box-shadow: var(--glow-ops);
}
.bridge .stardate { margin-left: auto; text-align: right; font-family: var(--font-display); font-size: 26px; color: var(--ops); }
.bridge .stardate small { display: block; font-family: var(--font-title); font-size: 9px; letter-spacing: 2px; color: var(--ink-soft); }

/* pills: buttons, filters, tags */
.bridge .pill {
  display: inline-block; border: 1.5px solid var(--panel-line); border-radius: var(--radius-pill);
  padding: 7px 14px; font-family: var(--font-title); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink); background: var(--field);
}
.bridge .pill.ops { border-color: var(--ops); color: var(--ops); }
.bridge .pill.mission { border-color: var(--mission); color: var(--mission); }
.bridge .pill.warn { border-color: var(--warn); color: var(--warn); }
.bridge .pill.ok { border-color: var(--ok); color: var(--ok); }
.bridge .pill.go {   /* the one thing to press: signing in */
  background: var(--ops); border-color: var(--ops); color: var(--ink-on-accent);
  font-size: 12px; padding: 12px 22px; box-shadow: var(--glow-ops);
}
.bridge .pill.alert { background: var(--alert); border-color: var(--alert); color: #1a0508; }
.bridge .tag {
  display: inline-block; border-radius: var(--radius-pill); padding: 2px 10px;
  font-family: var(--font-title); font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase;
}
.bridge .tag.ops { background: var(--ops); color: var(--ink-on-accent); }
.bridge .tag.mission { background: var(--mission); color: #1a1030; }
.bridge .tag.warn { background: var(--warn); color: #2a1a00; }
.bridge .tag.ok { background: var(--ok); color: #04140d; }
.bridge .tag.alert { background: var(--alert); color: #1a0508; }
.bridge .tag.idle { border: 1.5px solid var(--panel-line); color: var(--ink-soft); }
.bridge button.pill { cursor: pointer; }
.bridge form.inline { display: inline; }
.bridge form.stack { display: grid; gap: 8px; max-width: 420px; }
.bridge .panel h3 { font-family: var(--font-title); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ops); margin: 18px 0 6px; }

/* tiles: one thing a deputy may use, connected or not (connections, 2026-10-02) */
.bridge .tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.bridge .tile { display: grid; gap: 8px; align-content: start; padding: 16px; border: 2px solid var(--panel-line);
  border-radius: var(--radius-panel); background: var(--panel); }
.bridge .tile.on { border-color: var(--ok-line); }
.bridge .tile .top { display: flex; align-items: center; gap: 10px; }
.bridge .tile .name { font-weight: 600; font-size: 15px; }
.bridge .badge { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
  font-family: var(--font-title); font-size: 10px; letter-spacing: 1px; background: var(--field);
  border: 1.5px solid var(--panel-line); color: var(--ink); }

/* panels: a coloured hairline, a solid head tab, a translucent body */
.bridge .panel { border: 2px solid var(--panel-line); border-radius: var(--radius-panel); overflow: hidden; background: var(--panel); }
.bridge .panel > .head {
  display: inline-block; font-family: var(--font-title); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; padding: 7px 16px; border-radius: var(--radius-tab);
  background: var(--ops); color: var(--ink-on-accent);
}
.bridge .panel.ops { border-color: var(--ops-line); }
.bridge .panel.mission { border-color: var(--mission-line); } .bridge .panel.mission > .head { background: var(--mission); color: #1a1030; }
.bridge .panel.warn { border-color: var(--warn-line); } .bridge .panel.warn > .head { background: var(--warn); color: #2a1a00; }
.bridge .panel.ok { border-color: var(--ok-line); } .bridge .panel.ok > .head { background: var(--ok); color: #04140d; }
.bridge .panel.alert { border-color: var(--alert); } .bridge .panel.alert > .head { background: var(--alert); color: #1a0508; }
.bridge .panel > .body { padding: 14px 18px; overflow-x: auto; }
.bridge .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.bridge .grid > * { min-width: 0; }

/* the band: immediate attention across the top */
.bridge .band { border: 2px solid var(--ok-line); border-radius: var(--radius-band); overflow: hidden; background: rgba(87, 230, 168, .04); margin-bottom: var(--gap); }
.bridge .band.alert { border-color: var(--alert); background: rgba(255, 84, 104, .06); box-shadow: 0 0 18px rgba(255, 84, 104, .25); }
.bridge .band > .head { display: inline-block; font-family: var(--font-title); font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; padding: 9px 20px; border-radius: 0 0 14px 0; background: var(--ok); color: #04140d; }
.bridge .band.alert > .head { background: var(--alert); color: #1a0508; }
.bridge .band.warn { border-color: var(--warn); background: rgba(255, 184, 92, .05); }
.bridge .band.warn > .head { background: var(--warn); color: #2a1a00; }
.bridge .band > .body { padding: 12px 20px 14px; }
.bridge .system { display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--panel-line); }
.bridge .system:last-child { border-bottom: 0; }
.bridge .system .what { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink-soft); }
.bridge .system .ms { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* rows and tables */
.bridge table { border-collapse: collapse; width: 100%; }
/* The diary: one table a day, its columns lined up down the page. */
.bridge table.diary { table-layout: fixed; }
.bridge table.diary td:nth-child(1) { width: 15%; white-space: nowrap; }
.bridge table.diary td:nth-child(2) { width: 35%; }
.bridge table.diary td:nth-child(3) { width: 22%; }
.bridge th { font-family: var(--font-title); font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--panel-line); }
.bridge td { padding: 9px 12px; border-bottom: 1px solid var(--panel-line); font-size: 13.5px; vertical-align: top; }
.bridge tr:last-child td { border-bottom: 0; }
.bridge .count { font-family: var(--font-display); font-size: 18px; letter-spacing: 1px; }
.bridge .count.alert { color: var(--alert); } .bridge .count.ok { color: var(--ok); } .bridge .count.warn { color: var(--warn); }
.bridge .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bridge .note { color: var(--ink-soft); font-size: 12.5px; }

/* the header's sweep: a hairline under the title with a light running along it */
.bridge .scanline { position: relative; height: 2px; margin: -4px 0 20px; background: var(--panel-line); overflow: hidden; border-radius: var(--radius-pill); }
.bridge .scanline::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--ops), transparent); animation: sweep 5s linear infinite; }
@keyframes sweep { to { left: 100%; } }

/* readouts: a label, a large numeral, a line under it; the side bar takes the accent */
.bridge .readouts { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--gap); }
.bridge .readout { position: relative; padding: 12px 16px 12px 22px; border: 2px solid var(--panel-line); border-radius: var(--radius-panel); background: var(--panel); }
.bridge .readout::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 6px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--ink-soft); }
.bridge .readout .label { font-family: var(--font-title); font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); }
.bridge .readout .value { font-family: var(--font-display); font-size: 34px; line-height: 1.15; letter-spacing: 1px; margin-top: 4px; color: var(--ink); }
.bridge .readout .sub { font-size: 12px; color: var(--ink-soft); }
.bridge .readout.ops::before { background: var(--ops); box-shadow: var(--glow-ops); } .bridge .readout.ops .value { color: var(--ops); }
.bridge .readout.mission::before { background: var(--mission); } .bridge .readout.mission .value { color: var(--mission); }
.bridge .readout.warn::before { background: var(--warn); } .bridge .readout.warn .value { color: var(--warn); }
.bridge .readout.ok::before { background: var(--ok); } .bridge .readout.ok .value { color: var(--ok); }
.bridge .readout.alert { border-color: var(--alert-line); } .bridge .readout.alert::before { background: var(--alert); } .bridge .readout.alert .value { color: var(--alert); }

/* the meter's colours: spend by what it buys (owner, 2026-09-25). A kind
   sets --k once; the ring, the columns, the bars, the swatches and the
   readouts all read it. Totals stay in ink, so a colour is always a kind. */
.bridge .k-voice { --k: var(--ops); }
.bridge .k-thinking { --k: var(--mission); }
.bridge .k-messages { --k: var(--warn); }
.bridge .k-tools { --k: var(--ok); }
.bridge .k-other { --k: var(--ink-soft); }
.bridge .readout.kind::before { background: var(--k); box-shadow: 0 0 14px var(--k); }
.bridge .readout.kind .value { color: var(--k); }
.bridge .kindbar { display: flex; gap: 2px; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--field); }
.bridge .kindbar > span { background: var(--k); min-width: 3px; box-shadow: 0 0 10px var(--k); }
.bridge .kindbar.thin { height: 7px; margin: 6px 0 4px; }
.bridge .kinds { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.bridge .kinds b { color: var(--ink); font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }
.bridge td.kind { white-space: nowrap; }
.bridge .dot { display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; border-radius: 3px; background: var(--k); box-shadow: 0 0 8px var(--k); }

/* the ring: shares of a whole around a dark track, each share in its kind's colour */
.bridge .gauge { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.bridge .ring { width: 180px; height: 180px; flex: none; }
.bridge .ring circle { fill: none; stroke-width: 15; }
.bridge .ring .track { stroke: var(--field); }
.bridge .ring .tick { stroke: var(--panel-line); stroke-width: 1; }
.bridge .ring .seg { stroke: var(--k, var(--ops)); filter: drop-shadow(0 0 5px var(--k, var(--ops))); }
.bridge .ring text { text-anchor: middle; dominant-baseline: middle; }
.bridge .ring .ring-value { font-family: var(--font-display); font-size: 21px; fill: var(--ink); }
.bridge .ring .ring-caption { font-family: var(--font-title); font-size: 6px; letter-spacing: 1.5px; fill: var(--ink-soft); }
.bridge .legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 210px; }
.bridge .legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--panel-line); }
.bridge .legend .services { flex-basis: 100%; padding-left: 22px; font-size: 12px; color: var(--ink-soft); }
.bridge .legend li:last-child { border-bottom: 0; }
.bridge .legend .swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--k, var(--ops)); box-shadow: 0 0 8px var(--k, transparent); flex: none; }
.bridge .legend b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.bridge .legend i { font-style: normal; color: var(--ink-soft); width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

/* columns: a day's spend stacked by kind against dashed rules; today burns brighter */
.bridge .cols { width: 100%; height: auto; display: block; }
.bridge .cols .seg { fill: var(--k, var(--ops)); opacity: .72; }
.bridge .cols .day.now .seg { opacity: 1; }
.bridge .cols .day.now { filter: drop-shadow(0 0 6px var(--ink)); }
.bridge .cols .rule { stroke: var(--panel-line); stroke-dasharray: 3 5; }
.bridge .cols .base { stroke: var(--ops-line); stroke-width: 2; }
.bridge .cols .axis { font-family: var(--font-title); font-size: 8px; letter-spacing: 1px; fill: var(--ink-soft); text-anchor: middle; }
.bridge .cols .axis.y { text-anchor: end; dominant-baseline: middle; }

/* the sparkline: a fortnight of total spend in one line, in ink; the latest day a lit point */
.bridge .spark { width: 100%; height: 48px; display: block; margin: 10px 0 6px; overflow: visible; }
.bridge .spark .line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.bridge .spark .area { fill: var(--ink); opacity: .08; }
.bridge .spark .point { fill: var(--ink); filter: drop-shadow(0 0 4px var(--ink)); }

/* lamps: a light that says whether a ship spent anything today */
.bridge .lamp { display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 1px; border-radius: var(--radius-pill); background: var(--panel-line); }
.bridge .lamp.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.bridge .lamp.alert { background: var(--alert); box-shadow: 0 0 8px var(--alert); }
.bridge .lamp.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }

/* ships on the register: a card per profile */
.bridge .ship .label { font-family: var(--font-title); font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); }
.bridge .ship .figure { font-family: var(--font-display); font-size: 42px; line-height: 1.05; letter-spacing: 1px; color: var(--ink); }
.bridge .ship .sub { color: var(--ink-soft); font-size: 12.5px; margin-top: 4px; }
.bridge .ship .mini { display: flex; gap: 18px; font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 12px; }
.bridge .ship .mini b { font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--ink); margin-right: 4px; }
.bridge .ship.quiet { opacity: .55; }
.bridge .ship.quiet .figure { color: var(--ink-soft); }

/* the command chart: nodes with an accent tab and a glow, connectors with
   light flowing in the direction of command (still under reduced motion) */
.bridge .chart-wrap { overflow-x: auto; }
.bridge .chart { width: 100%; min-width: 880px; height: auto; display: block; }
.bridge .chart .c-ops { --c: var(--ops); }
.bridge .chart .c-mission { --c: var(--mission); }
.bridge .chart .c-warn { --c: var(--warn); }
.bridge .chart .c-ok { --c: var(--ok); }
.bridge .chart .c-ink { --c: var(--ink-soft); }
/* the chart's legend: one colour, one meaning (owner, 2026-09-28) */
.bridge .key-people { --k: var(--warn); }
.bridge .key-crew { --k: var(--mission); }
.bridge .key-places { --k: var(--ops); }
.bridge .key-tools { --k: var(--ok); }
.bridge .key-records { --k: var(--ink-soft); }
.bridge .dot.planned { background: none; box-shadow: none; border: 1.5px dashed var(--ink-soft); }
/* a person's step in a drawing (graph.py `person`): amber, as people are on the chart */
.bridge .mermaid .node.person rect, .bridge .mermaid .node.person polygon,
.bridge .mermaid .node.person path { stroke: var(--warn) !important; }
.bridge .mermaid .node.person .nodeLabel, .bridge .mermaid .node.person text { color: var(--warn) !important; fill: var(--warn) !important; }
.bridge .chart .node .box { fill: var(--field); stroke: var(--c); stroke-width: 1.6; filter: drop-shadow(0 0 7px var(--c)); }
.bridge .chart .node.planned .box { stroke-dasharray: 6 5; filter: none; opacity: .85; }
.bridge .chart .node .tab { fill: var(--c); }
.bridge .chart .title { font-family: var(--font-title); font-size: 10.5px; letter-spacing: 2px; fill: var(--c); }
.bridge .chart .sub { font-family: var(--font-body); font-size: 11.5px; fill: var(--ink-soft); }
.bridge .chart .num { font-family: var(--font-display); font-size: 30px; fill: var(--ink); }
.bridge .chart .link { fill: none; stroke: var(--c); stroke-width: 1.6; opacity: .45; }
.bridge .chart .link.planned { stroke-dasharray: 5 6; opacity: .7; }
.bridge .chart .link.flow { stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 13; opacity: 1; filter: drop-shadow(0 0 4px var(--c)); animation: flow 1.2s linear infinite; }
.bridge .chart .label { font-family: var(--font-title); font-size: 8.5px; letter-spacing: 1.5px; fill: var(--ink-soft); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.bridge .chart .shiplamp { fill: var(--panel-line); }
.bridge .chart .shiplamp.ok { fill: var(--ok); filter: drop-shadow(0 0 3px var(--ok)); }
.bridge .chart .shiplamp.warn { fill: var(--warn); }
.bridge .chart .shiplamp.alert { fill: var(--alert); filter: drop-shadow(0 0 3px var(--alert)); }
@keyframes flow { to { stroke-dashoffset: -28; } }

/* the chain of command: a ship that opens to its people and its bridge */
.bridge details.ship-crew { border: 2px solid var(--panel-line); border-radius: var(--radius-panel); background: var(--panel); margin-bottom: 12px; }
.bridge details.ship-crew[open] { border-color: var(--ops-line); }
.bridge details.ship-crew > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 18px; }
.bridge details.ship-crew > summary::-webkit-details-marker { display: none; }
.bridge details.ship-crew > summary::after { content: "+"; margin-left: auto; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--ops); }
.bridge details.ship-crew[open] > summary::after { content: "\2212"; }
.bridge .ship-name { font-family: var(--font-title); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.bridge .aboard { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); padding: 0 18px 16px; }
.bridge .aboard h3 { font-family: var(--font-title); font-size: 9px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 6px; }
.bridge .station { padding: 9px 0; border-bottom: 1px solid var(--panel-line); }
.bridge .station:last-child { border-bottom: 0; }
.bridge .station .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.bridge .station .what { margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); }
.bridge .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bridge .chip { border: 1px solid var(--panel-line); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 11.5px; color: var(--ink-soft); background: var(--field); }
.bridge .chip.off { opacity: .5; text-decoration: line-through; }
.bridge .chip.here { border-color: var(--ok); color: var(--ok); }
.bridge .chip.write { border-color: var(--warn-line); }

/* the meter: a bar per row, its width the row's share of the largest */
.bridge td.bar { width: 55%; vertical-align: middle; }
.bridge .meter { height: 8px; min-width: 2px; border-radius: var(--radius-pill); background: var(--ops); box-shadow: var(--glow-ops); }
.bridge pre { background: var(--field); border: 1px solid var(--panel-line); border-radius: 12px; padding: 12px 14px; overflow: auto; color: var(--ink); font-size: 12.5px; }
.bridge h1, .bridge h2 { font-family: var(--font-title); letter-spacing: 2px; text-transform: uppercase; font-weight: 400; }
.bridge h1 { font-size: 15px; } .bridge h2 { font-size: 10px; color: var(--ink-soft); margin: 22px 0 8px; }
.bridge input, .bridge select { background: var(--field); border: 1.5px solid var(--panel-line); border-radius: var(--radius-pill); padding: 8px 16px; color: var(--ink); font: 12.5px var(--font-body); outline: none; }

/* prose: a document read on the bridge (the design under review, 2026-10-01) */
.bridge .prose { font-size: 14.5px; line-height: 1.62; }
.bridge .prose p, .bridge .prose li { max-width: 82ch; }
.bridge .prose p { margin: 0 0 12px; }
/* Temporary (2026-10-01): the opening line of Mosero's pitch (core/pitch.py). */
.bridge .prose p.lead { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 64ch; }
.bridge .prose ul, .bridge .prose ol { margin: 0 0 14px; padding-left: 22px; }
.bridge .prose li { margin: 5px 0; }
.bridge .prose li::marker { color: var(--ops); }
.bridge .prose b { color: var(--ink); font-weight: 600; }
.bridge .prose code { background: var(--field); border: 1px solid var(--panel-line); border-radius: 6px; padding: 1px 6px; font-size: 12.5px; }
.bridge .prose pre code { background: none; border: 0; padding: 0; }
.bridge .prose table { margin: 4px 0 14px; }
.bridge .prose .mermaid { background: none; border: 0; text-align: center; margin: 4px 0 8px; }
.bridge .panel.prose > .head a { color: inherit; }
.bridge .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--gap); }
.bridge .tabs .pill { font-size: 9px; padding: 6px 12px; }
.bridge .stack-gap > * + * { margin-top: var(--gap); }

/* screens: previews of pages to come, each framed with its caption */
.bridge .screens { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); align-items: start; margin: 6px 0 14px; }
.bridge .screen { margin: 0; border: 2px solid var(--panel-line); border-radius: var(--radius-panel); overflow: hidden; background: var(--panel); }
.bridge .screen img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; background: var(--bg); border-bottom: 1px solid var(--panel-line); }
.bridge .screen figcaption { padding: 10px 14px 12px; font-size: 13px; color: var(--ink-soft); }
.bridge .screen figcaption b { color: var(--ops); font-weight: 500; }

@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 84, 104, .25), inset 0 0 30px rgba(255, 84, 104, .05); }
  50% { box-shadow: 0 0 32px rgba(255, 84, 104, .6), inset 0 0 30px rgba(255, 84, 104, .12); }
}
.bridge .band.alert.pulse { animation: alertPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bridge .band.alert.pulse { animation: none; }
  .bridge .scanline::after { animation: none; left: 35%; }
  .bridge .chart .link.flow { animation: none; }
}