/* The board (board.priors.trade, docs/BOARD-SPEC.md 3 and 5; v1.5's look, docs/BOARD-SPEC-V15.md 4): priors.trade's own
   colours, the light paper and the warm brown of its dark mode, following the visitor's theme (theme.js, unchanged). Night
   is only inside the tree pictures (the tiles, the sheet's tree), as the site frames its grove panels.
   Type roles (4.2): EB Garamond for names, titles and the figures of the masthead and the sheet; IBM Plex Mono 500 for
   engraved labels (capitals, tracked, brass) and tickers, Plex Mono 400 for ids, ages and every figure of the list;
   Schibsted Grotesk for interface sentences. No tier hue (4.4): the plant mark, the tier word and the tree carry the
   tier. Coral is a mark, a 6 px square beside an ink word, never type. Corners 0; hover and focus get four brass corner
   ticks (4.3). Every class here is .bd-, every token --bd-, so nothing of it reaches another page. */

:root {
  --bd-bg: #f1ece1;
  --bd-panel: #fbf8f1;
  --bd-panel-2: #f5f0e5;
  --bd-rule: #cbc2af;
  --bd-rule-2: #ddd5c4;
  --bd-ink: #1b1a16;
  --bd-ink-2: #3a372f;
  /* muted and coral a shade under the site's (#6d675a, #a9432c), so their words keep 4.5:1 on an open row's wash */
  --bd-muted: #635d50;
  --bd-mint: #2f6b4f;
  --bd-coral: #a03e29;
  --bd-brass: #765c2b;
  --bd-field: #faf7f0;
  --bd-field-edge: #a69c86;
  --bd-top: rgba(241, 236, 225, .94);
  --bd-wash: rgba(47, 107, 79, .05);
  --bd-wash-2: rgba(47, 107, 79, .11);
  --bd-flash: rgba(47, 107, 79, .22);
  --bd-shade: rgba(27, 26, 22, .10);
  --bd-skel: rgba(27, 26, 22, .07);
  /* the night inside a specimen case (docs/DESIGN-KIT.md 0 and 3: --case-0, --case-1), the same in both themes: a
     card's plate, a tile, the sheet's bench. The only night on the page, never its chrome. In it: a glyph or a tree lit
     (case mint) or unlit (case dim), the lamp's light falling from the top, the brass hairline edge */
  --bd-case: #0c100d;
  --bd-case-2: #17251d;
  --bd-case-mint: #9fe0bd;
  --bd-case-dim: #62736a;
  --bd-case-lamp: rgba(240, 205, 124, .2);
  --bd-case-edge: rgba(209, 174, 104, .5);
  --bd-tile: radial-gradient(70% 70% at 50% 45%, var(--bd-case-2), var(--bd-case));
  --bd-tile-lit: radial-gradient(90% 60% at 50% 0%, var(--bd-case-lamp), transparent 70%), var(--bd-tile);
  /* behind the sheet and the phone's filters: a warm shade over the page */
  --bd-scrim: rgba(52, 38, 20, .3);
  /* brass hardware: the bright brass of node dots, the brass-line frame of a hovered card or row */
  --bd-brass-hi: #a8843f;
  --bd-line: rgba(118, 92, 43, .55);
  --bd-off: rgba(27, 26, 22, .2);
  /* no light on type (docs/DESIGN-KIT.md 6, item 12): the figures are ink, in both themes */
  --bd-glow: none;
  /* the design kit's few additions (docs/DESIGN-KIT.md 0), mapped onto the board's tokens: hardware brass for the
     marks' pot and the lantern's frame, the live leaves lit for a moment, a lit lantern's flame and glass, an unlit
     lantern's frame and wick, a control's hover, and the paper's grain on cards, panels and the sheet */
  --bd-pm-brass: #94763a;
  --bd-leaf-lit: #57a07a;
  --bd-lamp: #c4561f;
  --bd-lamp-glass: #ecbb48;
  --bd-faint: #71695b;
  --bd-hover: rgba(27, 26, 22, .03);
  /* the kit's pixel glyphs (docs/DESIGN-KIT.md 4) where a control draws one in CSS: as masks, in the control's colour */
  --bd-g-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v1h-2zM1 1h2v1h-2zM4 1h2v1h-2zM7 1h2v1h-2zM1 2h8v1h-8zM2 3h2v1h-2zM6 3h2v1h-2zM0 4h4v1h-4zM6 4h4v1h-4zM0 5h4v1h-4zM6 5h4v1h-4zM2 6h2v1h-2zM6 6h2v1h-2zM1 7h8v1h-8zM1 8h2v1h-2zM4 8h2v1h-2zM7 8h2v1h-2zM4 9h2v1h-2z'/%3E%3C/svg%3E");
  --bd-g-x7: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM3 3h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM1 5h1v1h-1zM5 5h1v1h-1z'/%3E%3C/svg%3E");
  --bd-g-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v1h-2zM3 1h4v1h-4zM2 2h6v1h-6zM1 3h2v1h-2zM4 3h2v1h-2zM7 3h2v1h-2zM4 4h2v1h-2zM4 5h2v1h-2zM4 6h2v1h-2zM4 7h2v1h-2zM4 8h2v1h-2z'/%3E%3C/svg%3E");
  --bd-g-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v1h-2zM4 1h2v1h-2zM4 2h2v1h-2zM4 3h2v1h-2zM4 4h2v1h-2zM1 5h2v1h-2zM4 5h2v1h-2zM7 5h2v1h-2zM2 6h6v1h-6zM3 7h4v1h-4zM4 8h2v1h-2z'/%3E%3C/svg%3E");
  --bd-g-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M8 1h2v1h-2zM7 2h2v1h-2zM6 3h2v1h-2zM0 4h2v1h-2zM5 4h2v1h-2zM1 5h2v1h-2zM4 5h2v1h-2zM2 6h3v1h-3zM3 7h1v1h-1z'/%3E%3C/svg%3E");
  --bd-g-pinned: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h8v1h-8zM1 1h8v1h-8zM1 2h8v1h-8zM1 3h8v1h-8zM1 4h8v1h-8zM1 5h8v1h-8zM1 6h3v1h-3zM6 6h3v1h-3zM1 7h2v1h-2zM7 7h2v1h-2zM1 8h1v1h-1zM8 8h1v1h-1z'/%3E%3C/svg%3E");
  --bd-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%233a372f' d='M0 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1z'/%3E%3C/svg%3E");
  /* a link's arrow (docs/DESIGN-KIT.md 2 and 4: never a text glyph): the 7 x 7 arrow for a link that stays on the board
     (.bd-more), the same grid's up-right one for a link that leaves it (.bd-out), drawn at 14 px in the link's colour */
  --bd-g-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M4 1h1v1h-1zM5 2h1v1h-1zM0 3h7v1h-7zM5 4h1v1h-1zM4 5h1v1h-1z'/%3E%3C/svg%3E");
  --bd-g-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h4v1h-4zM5 2h2v1h-2zM4 3h1v1h-1zM6 3h1v1h-1zM3 4h1v1h-1zM6 4h1v1h-1zM2 5h1v1h-1zM1 6h1v1h-1z'/%3E%3C/svg%3E");
  --bd-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .30  0 0 0 0 .20  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --bd-serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --bd-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --bd-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bd-ease: cubic-bezier(.22, .61, .21, 1);
  --bd-top-h: 56px;
  --bd-tools-h: 54px;
  --bd-head-h: 36px;
  /* the stock strip's height, and what is held at the top above the toolbar: the top bar alone (the strip scrolls away
     with the masthead at every width; a phone holds its tabs row instead), and the live ribbon from 720 to 1,439 px; the
     status bar's height at the bottom, from 1,180 px */
  --bd-ss-h: 48px;
  --bd-rib-h: 0px;
  --bd-stick: calc(var(--bd-top-h) + var(--bd-rib-h));
  --bd-status-h: 28px;
  /* ETH, BTC and SOL's figures (docs/BOARD-SPEC-V15.md 6.14, the owner's ask of 2026-10-18): each coin's own colour,
     the one place a figure is not ink. Bitcoin's orange, Ethereum's blue-violet and Solana's purple, each a shade deeper
     on the paper so it keeps 4.5:1 on the status bar and on the page (scripts/test-board-site.mjs measures it); never
     red or green, never changing with the figure, so none reads as a move (rule 16) */
  --bd-coin-btc: #a35200;
  --bd-coin-eth: #3d58c9;
  --bd-coin-sol: #7b3fe4;
  color-scheme: light;
}
/* dark: the site's own after-hours ledger (styles.css :root[data-theme="dark"]), warm ink-brown, never black; the
   owner's call of 2026-10-16. Only the tree panels below stay night, as the grove panels do on priors.trade. */
:root[data-theme="dark"] {
  --bd-bg: #15140f;
  --bd-panel: #1d1c16;
  --bd-panel-2: #27251e;
  --bd-rule: #3b382f;
  --bd-rule-2: #2a2821;
  --bd-ink: #ece6d6;
  --bd-ink-2: #cdc6b5;
  --bd-muted: #9d9686;
  --bd-mint: #7fbf98;
  --bd-coral: #e0876d;
  --bd-brass: #d1ae68;
  --bd-field: #1b1a14;
  --bd-field-edge: #5f5a4c;
  --bd-top: rgba(21, 20, 15, .92);
  --bd-wash: rgba(127, 191, 152, .05);
  --bd-wash-2: rgba(127, 191, 152, .11);
  --bd-flash: rgba(127, 191, 152, .2);
  --bd-shade: rgba(21, 20, 15, .6);
  --bd-skel: rgba(236, 230, 214, .07);
  --bd-brass-hi: #ead39c;
  --bd-line: rgba(209, 174, 104, .5);
  --bd-off: rgba(236, 230, 214, .2);
  /* warm and light enough that the page behind still reads as the warm brown (never black chrome round the sheet) */
  --bd-scrim: rgba(40, 30, 16, .42);
  --bd-pm-brass: #d1ae68;
  --bd-leaf-lit: #c4f0d7;
  --bd-lamp: #fff1c4;
  --bd-lamp-glass: #d9a23f;
  --bd-faint: #8e877a;
  --bd-hover: rgba(236, 230, 214, .04);
  /* the coins' colours on the warm brown: Bitcoin's own orange, the other two lifted to keep 4.5:1 */
  --bd-coin-btc: #f7931a;
  --bd-coin-eth: #8fa2f7;
  --bd-coin-sol: #b07cff;
  --bd-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23cdc6b5' d='M0 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1z'/%3E%3C/svg%3E");
  --bd-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93  0 0 0 0 .90  0 0 0 0 .84  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* night: the case's own tokens (a card's plate, the sheet's bench), the kit's case night in both themes; only ever
   inside a case, never the page's chrome */
.bd-night {
  --bd-bg: var(--bd-case);
  --bd-panel: #111813;
  --bd-panel-2: var(--bd-case-2);
  --bd-rule: #2c3a31;
  --bd-rule-2: #1f2b23;
  --bd-ink: #ece6d6;
  --bd-ink-2: #cdc6b5;
  --bd-muted: #a39b88;
  --bd-mint: #8fe8c2;
  --bd-coral: #e0785a;
  --bd-brass: #d1ae68;
  --bd-field: #111813;
  --bd-field-edge: #3b4a40;
  --bd-top: rgba(12, 16, 13, .93);
  --bd-wash: rgba(143, 232, 194, .05);
  --bd-wash-2: rgba(143, 232, 194, .11);
  --bd-flash: rgba(143, 232, 194, .2);
  --bd-shade: rgba(21, 20, 15, .6);
  --bd-skel: rgba(236, 230, 214, .07);
  --bd-brass-hi: #ead39c;
  --bd-line: rgba(209, 174, 104, .5);
  --bd-off: rgba(236, 230, 214, .2);
  /* a lantern on the night: its brass, its flame and glass when lit, its cold frame when not (the kit's plate) */
  --bd-pm-brass: #d1ae68;
  --bd-leaf-lit: #c4f0d7;
  --bd-lamp: #fff1c4;
  --bd-lamp-glass: #d9a23f;
  --bd-faint: var(--bd-case-dim);
}
:root[data-theme="dark"] { color-scheme: dark; }
/* the four corner ticks (10 px L's, 1.25 px, brass), set where the brass is (a night panel has its own); a control's
   are 8 px (the kit's --ticks), standing 5 px off it on hover */
:root, .bd-night {
  --bd-ticks:
    linear-gradient(var(--bd-brass) 0 0) left top / 10px 1.25px no-repeat, linear-gradient(var(--bd-brass) 0 0) left top / 1.25px 10px no-repeat,
    linear-gradient(var(--bd-brass) 0 0) right top / 10px 1.25px no-repeat, linear-gradient(var(--bd-brass) 0 0) right top / 1.25px 10px no-repeat,
    linear-gradient(var(--bd-brass) 0 0) left bottom / 10px 1.25px no-repeat, linear-gradient(var(--bd-brass) 0 0) left bottom / 1.25px 10px no-repeat,
    linear-gradient(var(--bd-brass) 0 0) right bottom / 10px 1.25px no-repeat, linear-gradient(var(--bd-brass) 0 0) right bottom / 1.25px 10px no-repeat;
  --bd-ticks-8:
    linear-gradient(var(--bd-pm-brass) 0 0) left top / 8px 1.25px no-repeat, linear-gradient(var(--bd-pm-brass) 0 0) left top / 1.25px 8px no-repeat,
    linear-gradient(var(--bd-pm-brass) 0 0) right top / 8px 1.25px no-repeat, linear-gradient(var(--bd-pm-brass) 0 0) right top / 1.25px 8px no-repeat,
    linear-gradient(var(--bd-pm-brass) 0 0) left bottom / 8px 1.25px no-repeat, linear-gradient(var(--bd-pm-brass) 0 0) left bottom / 1.25px 8px no-repeat,
    linear-gradient(var(--bd-pm-brass) 0 0) right bottom / 8px 1.25px no-repeat, linear-gradient(var(--bd-pm-brass) 0 0) right bottom / 1.25px 8px no-repeat;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* a line that keeps its room while it has nothing to say (the since line, "Closest to Proven"): nothing moves when it fills */
.bd-off { visibility: hidden; }
/* the sticky top bar, toolbar and header row: a link or a row the keyboard reaches is scrolled clear of them */
html { background: var(--bd-bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bd-stick) + var(--bd-tools-h) + var(--bd-head-h) + 8px); }
body.bd { margin: 0; padding-bottom: var(--bd-status-h); background: var(--bd-bg); color: var(--bd-ink); font: 400 15px/1.5 var(--bd-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
html.bd-lock, html.bd-lock body { overflow: hidden; }
/* the resets carry no weight (:where), so every .bd- rule below sets its own margins and colours */
:where(.bd) a { color: inherit; text-decoration: none; }
:where(.bd) p { margin: 0; }
:where(.bd) h1, :where(.bd) h2, :where(.bd) h3 { margin: 0; font-weight: 400; }
:where(.bd) button { font: inherit; color: inherit; }
.bd :focus-visible { outline: 2px solid var(--bd-mint); outline-offset: 2px; }
/* a heading or region the page moves the focus to (tabindex -1) is read out, not ringed: only what Tab reaches is */
.bd [tabindex="-1"]:focus-visible { outline: none; }
.bd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bd-mono { font-family: var(--bd-mono); }
.bd-num, .bd-figs dd { font-variant-numeric: lining-nums tabular-nums; }
/* the list's figures are right-aligned: proportional digits, since Schibsted's tabular "." and "," are a digit wide ("$8 . 53") */
.bd-tbody, .bd-plist { font-variant-numeric: lining-nums; }
.bd-skip { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--bd-ink); color: var(--bd-bg); }
.bd-skip:focus { top: 8px; }
.bd-link { color: var(--bd-mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-link:hover { color: var(--bd-ink); }
/* a link's arrow after its words (docs/DESIGN-KIT.md 2 and 4, never a "›" or "↗" in the text): the 7 x 7 arrow for one
   that stays on the board, its up-right twin for one that leaves it (the explorer, priors.trade), 14 px, in its colour */
.bd-more::after, .bd-out::after, .bd-aarr { content: ""; display: inline-block; flex: none; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; background: currentColor;
  -webkit-mask: var(--bd-g-arrow) center / 14px 14px no-repeat; mask: var(--bd-g-arrow) center / 14px 14px no-repeat; }
.bd-out::after, .bd-aarr { -webkit-mask-image: var(--bd-g-out); mask-image: var(--bd-g-out); }
/* the engraved label (4.2): Plex Mono 500, capitals, tracked +20%, brass; 1 to 4 words, never a sentence */
.bd-eng, .bd-figs dt, .bd-count, .bd-sh-sec h3, .bd-label, .bd-facts dt, .bd-sh-kicker, .bd-key-k {
  font: 500 11px/1.3 var(--bd-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bd-brass);
}
/* a mark (4.5): a 6 px square before an ink word; coral only ever as this */
.bd-st.bd-s-frozen::before, .bd-cell-sub.bd-coral::before, .bd-since-coral::before,
.bd-statuspill.bd-coral::before, .bd-sh-tierword.bd-def::before, .bd-rdef .bd-rname::before, .bd-facts dd.bd-coral::before,
.bd-jr .bd-asub.bd-def::before {
  content: ""; display: inline-block; flex: none; width: 6px; height: 6px; margin-right: 6px; vertical-align: .12em; background: var(--bd-coral);
}
/* the corner ticks and the brass-line frame on a hovered or focused row (a pseudo-element: no text sits on them) */
.bd-tbody .bd-tr, .bd-prow { position: relative; }
.bd-tbody .bd-tr:not(.bd-skel)::after, .bd-prow::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--bd-ticks); box-shadow: inset 0 0 0 1px var(--bd-line); opacity: 0; }
.bd-tbody .bd-tr:not(.bd-skel):hover::after, .bd-tbody .bd-tr:focus-within::after, .bd-prow:hover::after, .bd-prow:focus-visible::after { opacity: 1; }
/* a framed panel's ticks, always there */
.bd-mast-f, .bd-plate, .bd-key, .bd-stones { position: relative; }
.bd-mast-f::after, .bd-plate::after, .bd-stones::after { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: var(--bd-ticks); }
/* no word left alone on a short paragraph's last line */
.bd-rrule, .bd-closest, .bd-since, .bd-sh-small, .bd-sh-next, .bd-part p, .bd-how p, .bd-facts .bd-help, .bd-empty p, .bd-note { text-wrap: pretty; }

/* ---- the top bar (theme.js mounts its display button first in .nav .right) ---- */
.bd-top { position: sticky; top: 0; z-index: 40; height: var(--bd-top-h); background: var(--bd-top); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--bd-rule); }
.bd-top-in { max-width: 1680px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 36px; }
.bd-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.bd-mark { width: 24px; height: 24px; shape-rendering: crispEdges; }
.bd-mk-leaf { fill: var(--bd-g-3, var(--bd-mint)); } .bd-mk-bark { fill: var(--bd-g-1, var(--bd-coral)); } .bd-mk-pot { fill: var(--bd-g-1, var(--bd-ink)); }
.bd-word { font: 500 23px/1 var(--bd-serif); letter-spacing: -.01em; text-transform: lowercase; position: relative; top: -1px; }
.bd-word-b { display: inline-flex; align-items: center; height: 18px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--bd-brass); font: 500 10.5px/1 var(--bd-mono); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--bd-brass); }
/* the tabs never give up their room (their words and counts whole); the block status beside them gives way first */
.bd-tabs { display: flex; flex: none; align-items: stretch; align-self: stretch; gap: 28px; }
/* a tab: engraved, its count muted beside it once there is one; the open one in ink, a 2 px mint rule under its word
   alone (never under an empty count's room), drawn out from the middle when it is chosen */
.bd-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--bd-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bd-ink-2); white-space: nowrap; }
.bd-tab:hover { color: var(--bd-ink); }
.bd-tab[aria-current="page"] { color: var(--bd-ink); }
.bd-tab-w { position: relative; align-self: stretch; display: inline-flex; align-items: center; }
.bd-tab[aria-current="page"] .bd-tab-w::after { content: ""; position: absolute; left: 0; right: .16em; bottom: -1px; height: 2px; background: var(--bd-mint); animation: bd-under .2s var(--bd-ease); }
@keyframes bd-under { from { transform: scaleX(0); } to { transform: none; } }
.bd-tab-n { font-weight: 400; letter-spacing: .04em; color: var(--bd-muted); }
.bd-tab-n:empty { display: none; }
/* while loading, a quiet bar keeps a count's room (three digits, two for the tokens), so the tabs never move when it comes */
:root[data-bd-state="loading"] .bd-tab-n:empty { display: inline-block; width: calc(3ch + .12em); height: 1px; background: var(--bd-rule); }
:root[data-bd-state="loading"] .bd-tab-n[data-n="stocks"]:empty { width: calc(2ch + .08em); }
.bd-tab-n:not(:empty) { animation: bd-fade .2s var(--bd-ease); }
@keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }
.bd-block { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; text-align: right; font: 500 12px/1 var(--bd-mono); color: var(--bd-muted); white-space: nowrap; }
.bd-block.bd-stale { color: var(--bd-brass); }
/* ---- the status marks (docs/DESIGN-KIT.md 1, its rows cell for cell, as scripts/test-board-site.mjs reads them back):
   one plant at three ages says live, next and later; the plant gone brass is an older read and bare is a default; the
   lantern lit says a loan is open now and means nothing else, unlit says no loan is. The tier is the same plant at its
   five stages (seed, sprout, sapling, tree, full tree; bare after a default), as the Tier rail's trees grow. 7 x 8 cells
   of --u (2 px beside text, 3 or 4 on a plate), each run of cells one background layer in the tokens' colours, so a
   mark is crisp in both themes and on the night, and costs the scripts nothing. Never a round dot, never a capsule: the
   mark, then its word ---- */
@property --bd-pm-l { syntax: "<color>"; inherits: false; initial-value: transparent; }
.bd-livedot,
.bd-block.bd-on::before,
.bd-status-lead.bd-on::before,
.bd-growdot,
:root[data-bd-state="loading"] .bd-block::before,
:root[data-bd-state="loading"] .bd-status-t::before,
:root[data-bd-state="loading"] #bd-count::before,
:root:is([data-bd-state="off"], [data-bd-state="starting"], [data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) :is(.bd-block, .bd-status-t)::before,
.bd-st.bd-s-borrowing::before,
.bd-st.bd-s-settled::before,
.bd-st.bd-s-none::before,
.bd-key-lamp::before,
[data-status="borrowing"] .bd-rmark,
.bd-lampdot,
.bd-ring::before,
.bd-rrow.bd-next .bd-rn::before,
.bd-tmark,
.bd-akind::before,
.bd-emark,
.bd-key-tree::before,
.bd-st.bd-s-defaulted::before {
  --u: 2px; --bd-pm-l: var(--bd-mint); --bd-pm-t: var(--bd-coral); --bd-pm-p: var(--bd-pm-brass); --bd-pm-s: var(--bd-ink-2); --bd-pm-f: var(--bd-lamp-glass);
  --bd-pm-fr: var(--bd-pm-brass); --bd-pm-li: var(--bd-lamp-glass); --bd-pm-fl: var(--bd-lamp); --bd-pm-wk: transparent;
  flex: none; display: inline-block; width: calc(var(--u) * 7); height: calc(var(--u) * 8); vertical-align: -3px; border-radius: 0;
}
.bd-block.bd-on::before,
.bd-status-lead.bd-on::before,
:root[data-bd-state="loading"] .bd-block::before,
:root[data-bd-state="loading"] .bd-status-t::before,
:root[data-bd-state="loading"] #bd-count::before,
:root:is([data-bd-state="off"], [data-bd-state="starting"], [data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) :is(.bd-block, .bd-status-t)::before,
.bd-st.bd-s-borrowing::before,
.bd-st.bd-s-settled::before,
.bd-st.bd-s-none::before,
.bd-key-lamp::before,
.bd-ring::before,
.bd-rrow.bd-next .bd-rn::before,
.bd-akind::before,
.bd-key-tree::before,
.bd-st.bd-s-defaulted::before { content: ""; }
/* beside its word: 8 px, the kit's gap */
.bd-livedot, .bd-block::before, .bd-status-lead::before, .bd-status-t::before, #bd-count::before { margin-right: 8px; }
/* live: the sapling (the masthead's own), in the status bar, the top bar and over Activity; the Proven tier; a
   repayment in Activity */
.bd-livedot,
.bd-block.bd-on::before,
.bd-status-lead.bd-on::before,
.bd-tmark[data-s="2"],
.bd-key-tree::before,
[data-k="repaid"] .bd-akind::before,
:root:is([data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) :is(.bd-block, .bd-status-t)::before {
  background:
    linear-gradient(var(--bd-pm-l) 0 0) calc(var(--u) * 2) 0 / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) var(--u) var(--u) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) 0 calc(var(--u) * 2) / calc(var(--u) * 7) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) var(--u) calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) calc(var(--u) * 4) calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 4) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / calc(var(--u) * 3) var(--u) no-repeat;
}
/* an older read (5 minutes or more), a refresh that couldn't read, or no answer while it waits, fails or is offline: the
   same plant, its leaves brass, trunk and pot quiet */
.bd-stale .bd-livedot, :root[data-bd-state="refresh-failed"] .bd-livedot, .bd-block.bd-stale::before, :root[data-bd-state="refresh-failed"] .bd-block.bd-on::before,
.bd-status.bd-stale .bd-status-lead::before, :root[data-bd-state="refresh-failed"] .bd-status-lead.bd-on::before,
:root:is([data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) :is(.bd-block, .bd-status-t)::before {
  --bd-pm-l: var(--bd-pm-brass); --bd-pm-t: var(--bd-field-edge); --bd-pm-p: var(--bd-field-edge);
}
/* loading: the sapling grows a canopy row at a time (2.4 s), only while loading; reduced motion shows the whole tree, still */
.bd-growdot,
:root[data-bd-state="loading"] .bd-block::before,
:root[data-bd-state="loading"] .bd-status-t::before,
:root[data-bd-state="loading"] #bd-count::before {
  --bd-pm-r0: var(--bd-mint); --bd-pm-r1: var(--bd-mint); --bd-pm-r2: var(--bd-mint); --bd-pm-r3: var(--bd-mint);
  background:
    linear-gradient(var(--bd-pm-r0) 0 0) calc(var(--u) * 2) 0 / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-r1) 0 0) var(--u) var(--u) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-r2) 0 0) 0 calc(var(--u) * 2) / calc(var(--u) * 7) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-r3) 0 0) var(--u) calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-r3) 0 0) calc(var(--u) * 4) calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 4) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / calc(var(--u) * 3) var(--u) no-repeat;
  animation: bd-growing 2.4s linear infinite;
}
@keyframes bd-growing {
  0%, 24.9% { --bd-pm-r0: transparent; --bd-pm-r1: transparent; --bd-pm-r2: transparent; }
  25%, 49.9% { --bd-pm-r0: transparent; --bd-pm-r1: transparent; --bd-pm-r2: var(--bd-mint); }
  50%, 74.9% { --bd-pm-r0: transparent; --bd-pm-r1: var(--bd-mint); --bd-pm-r2: var(--bd-mint); }
  75%, 100% { --bd-pm-r0: var(--bd-mint); --bd-pm-r1: var(--bd-mint); --bd-pm-r2: var(--bd-mint); }
}
/* a new read lights the live leaves once (1.6 s): board.js turns .bd-read over on <html> with each new block, and the
   two names restart the light; never on a timer, never while stale */
@keyframes bd-glow-a { 0% { --bd-pm-l: var(--bd-mint); } 35% { --bd-pm-l: var(--bd-leaf-lit); } 100% { --bd-pm-l: var(--bd-mint); } }
@keyframes bd-glow-b { 0% { --bd-pm-l: var(--bd-mint); } 35% { --bd-pm-l: var(--bd-leaf-lit); } 100% { --bd-pm-l: var(--bd-mint); } }
:root[data-bd-state="live"].bd-read .bd-livedot, :root[data-bd-state="live"].bd-read .bd-block.bd-on::before, :root[data-bd-state="live"].bd-read .bd-status-lead.bd-on::before { animation: bd-glow-a 1.6s var(--bd-ease) 1; }
:root[data-bd-state="live"]:not(.bd-read) .bd-livedot, :root[data-bd-state="live"]:not(.bd-read) .bd-block.bd-on::before, :root[data-bd-state="live"]:not(.bd-read) .bd-status-lead.bd-on::before { animation: bd-glow-b 1.6s var(--bd-ease) 1; }
/* nothing live is drawn before there is an answer, or without one */
:root:not([data-bd-state="live"]):not([data-bd-state="stale"]):not([data-bd-state="refresh-failed"]) .bd-livedot { display: none; }
/* the lantern: its glass and flame over its frame (lit), or its cold frame and wick (unlit) */
.bd-st.bd-s-borrowing::before,
.bd-st.bd-s-settled::before,
.bd-st.bd-s-none::before,
.bd-key-lamp::before,
[data-status="borrowing"] .bd-rmark,
.bd-lampdot,
[data-k="borrowed"] .bd-akind::before,
:root[data-bd-state="offline"] .bd-emark {
  background:
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 2) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fl) 0 0) calc(var(--u) * 3) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 4) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 2) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fl) 0 0) calc(var(--u) * 3) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 4) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 2) calc(var(--u) * 5) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 3) 0 / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 2) var(--u) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 2) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 5) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 5) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-wk) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 5) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 4) calc(var(--u) * 7) / var(--u) var(--u) no-repeat;
}
.bd-st.bd-s-settled::before, .bd-st.bd-s-none::before {
  --bd-pm-fr: var(--bd-faint); --bd-pm-wk: var(--bd-faint); --bd-pm-li: transparent; --bd-pm-fl: transparent;
}
/* the error row's mark when offline: the lantern unlit (no read can come), at 2 px a cell */
:root[data-bd-state="offline"] .bd-emark { --bd-pm-fr: var(--bd-faint); --bd-pm-wk: var(--bd-faint); --bd-pm-li: transparent; --bd-pm-fl: transparent; }
/* next: the sprout (a kind of line built and not lending yet, the rail's NEXT, the board being built); the Started tier;
   an agent joining in Activity */
.bd-ring::before,
.bd-rrow.bd-next .bd-rn::before,
.bd-tmark[data-s="1"],
[data-k="joined"] .bd-akind::before,
:root[data-bd-state="starting"] :is(.bd-block, .bd-status-t)::before {
  background:
    linear-gradient(var(--bd-pm-l) 0 0) 0 calc(var(--u) * 2) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) calc(var(--u) * 5) calc(var(--u) * 2) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) var(--u) calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) calc(var(--u) * 4) calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / calc(var(--u) * 3) var(--u) no-repeat;
}
/* later: the seed in its pot; the Unproven tier, and the data not switched on yet (its pot quiet, as the kit's later) */
.bd-tmark[data-s="0"],
:root[data-bd-state="off"] :is(.bd-block, .bd-status-t)::before {
  background:
    linear-gradient(var(--bd-pm-s) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / calc(var(--u) * 3) var(--u) no-repeat;
}
:root[data-bd-state="off"] :is(.bd-block, .bd-status-t)::before { --bd-pm-p: var(--bd-field-edge); }
/* the Earned tier: the tree; Income-backed: the full tree with its fruit */
.bd-tmark[data-s="3"] {
  background:
    linear-gradient(var(--bd-pm-l) 0 0) var(--u) 0 / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) 0 var(--u) / calc(var(--u) * 7) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) 0 calc(var(--u) * 2) / calc(var(--u) * 7) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) var(--u) calc(var(--u) * 3) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 2) calc(var(--u) * 4) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / calc(var(--u) * 3) var(--u) no-repeat;
}
.bd-tmark[data-s="4"] {
  background:
    linear-gradient(var(--bd-pm-l) 0 0) var(--u) 0 / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) 0 var(--u) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-f) 0 0) calc(var(--u) * 2) var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) calc(var(--u) * 3) var(--u) / calc(var(--u) * 4) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) 0 calc(var(--u) * 2) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-f) 0 0) calc(var(--u) * 5) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) calc(var(--u) * 6) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-f) 0 0) 0 calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) var(--u) calc(var(--u) * 3) / calc(var(--u) * 6) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) var(--u) calc(var(--u) * 4) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-l) 0 0) calc(var(--u) * 4) calc(var(--u) * 4) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / calc(var(--u) * 3) var(--u) no-repeat;
}
/* bare: a default, the tree with no leaf (the Defaulted tier, a default in Activity) */
.bd-st.bd-s-defaulted::before,
.bd-tmark[data-s="d"],
[data-k="defaulted"] .bd-akind::before {
  background:
    linear-gradient(var(--bd-pm-t) 0 0) 0 var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 6) var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) var(--u) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 5) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 2) calc(var(--u) * 3) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-t) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-p) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / calc(var(--u) * 3) var(--u) no-repeat;
}
/* from 1,180 px the status bar has the block */
@media (min-width: 1180px) { .bd-block { display: none; } .bd-top .right { margin-left: auto; } }
.bd-top .right { display: flex; align-items: center; gap: 12px; }

/* ---- the controls (docs/DESIGN-KIT.md 2): square, a 1 px edge, Schibsted 500. Hover brings the four brass corner ticks,
   5 px off the control; focus is the 2 px mint ring. The primary, one in a view, is ink with a brass hairline engraved
   along its foot (mint on hover); a quiet one (Try again, How to read it) has a rule-coloured edge. A button's arrow is
   the kit's 7 x 7 pixel arrow. No pill, no tint, no glow, no lift ---- */
.bd-btn, .bd-gobtn, .bd-lead, .bd-filterbtn, .bd-howlink {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 13px;
  background: transparent; border: 1px solid var(--bd-ink); border-radius: 0; color: var(--bd-ink); font: 500 14px/1 var(--bd-sans);
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.bd-btn::after, .bd-gobtn::after, .bd-lead::after, .bd-filterbtn::after, .bd-howlink::after, .bd-iconbtn::after, .bd-me-btn::after, .bd .prefs-btn::after {
  content: ""; position: absolute; inset: -5px; pointer-events: none; background: var(--bd-ticks-8); opacity: 0; transition: opacity .15s;
}
:is(.bd-btn, .bd-gobtn, .bd-lead, .bd-filterbtn, .bd-howlink, .bd-iconbtn, .bd-me-btn, .bd .prefs-btn):hover::after { opacity: 1; }
.bd-btn:hover, .bd-gobtn:hover, .bd-filterbtn:hover { background: var(--bd-hover); }
.bd-btn-q, .bd-howlink { border-color: var(--bd-rule); color: var(--bd-ink-2); }
.bd-btn-q:hover, .bd-howlink:hover, .bd-howlink[aria-current="page"] { border-color: var(--bd-ink); color: var(--bd-ink); background: transparent; }
.bd-btn-mint, .bd-lead { background: var(--bd-ink); border-color: var(--bd-ink); color: var(--bd-bg); box-shadow: inset 0 -4px 0 var(--bd-ink), inset 0 -5px 0 var(--bd-pm-brass); }
.bd-btn-mint:hover, .bd-lead:hover { background: var(--bd-mint); border-color: var(--bd-mint); color: var(--bd-bg); box-shadow: inset 0 -4px 0 var(--bd-mint), inset 0 -5px 0 var(--bd-pm-brass); }
/* the sheet's and a phone's main action: 48 px */
.bd-lead { width: 100%; height: 48px; padding: 0 24px; gap: 10px; font-size: 16px; }
.bd-lead svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--bd-ease); }
.bd-lead:hover svg { transform: translateX(3px); }
/* an icon button: a square with a 20 px pixel glyph, always named */
.bd-iconbtn { position: relative; width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; background: transparent; border: 1px solid var(--bd-rule); border-radius: 0; color: var(--bd-ink-2); cursor: pointer; flex: none; }
.bd-iconbtn:hover { border-color: var(--bd-ink); color: var(--bd-ink); }
.bd-iconbtn svg { width: 20px; height: 20px; }
/* "How to read it": the kit's help glyph, its words beside it */
.bd-how-q { flex: none; width: 20px; height: 20px; color: var(--bd-brass); }
.bd-howlink:hover .bd-how-q, .bd-howlink[aria-current="page"] .bd-how-q { color: var(--bd-ink); }
.bd-go-short { display: none; }
/* Go mode's account (board-profile.js, 6.2), standing in for "Open in Go mode" once Go mode's bridge says who is signed in:
   Go mode's own pixel tree and name, square like the board's other controls; its menu as the display menu's. The bridge's
   frame is never shown. */
.bd-me-frame { display: none; }
.bd-me { position: relative; display: flex; }
.bd-me-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 34px; max-width: 220px; padding: 0 11px 0 3px; border: 1px solid var(--bd-rule); background: transparent; color: var(--bd-ink); font: 500 14px/1 var(--bd-sans); cursor: pointer; }
.bd-me-btn:hover, .bd-me-btn[aria-expanded="true"] { border-color: var(--bd-ink); }
.bd-me .me-tree { flex: none; display: block; image-rendering: pixelated; }
.bd-me .me-plate { fill: var(--bd-panel-2); }
.bd-me-btn .me-tree { width: 26px; height: 26px; }
.bd-me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-me-btn > svg:last-child { flex: none; width: 14px; height: 14px; color: var(--bd-muted); }
.bd-me-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; min-width: 240px; max-width: calc(100vw - 32px); background: var(--bd-panel); border: 1px solid var(--bd-ink); box-shadow: 0 24px 48px -24px var(--bd-shade); padding: 6px 0; }
.bd-me-menu[hidden] { display: none; }
.bd-me-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 14px 12px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-me-head .me-tree { width: 40px; height: 40px; }
.bd-me-who { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bd-me-who b { font: 500 17px/1.15 var(--bd-serif); overflow-wrap: anywhere; }
.bd-me-who code { font: 400 12px/1 var(--bd-mono); color: var(--bd-muted); }
.bd-me-link { display: flex; align-items: center; padding: 10px 14px; font: 500 14px/1.2 var(--bd-sans); color: var(--bd-ink); }
.bd-me-link:hover { background: var(--bd-wash-2); }
/* theme.js's display button and its menu, in the board's tokens */
.bd .prefs { position: relative; display: flex; }
.bd .prefs-btn { position: relative; width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 1px solid var(--bd-rule); color: var(--bd-ink-2); cursor: pointer; padding: 0; }
.bd .prefs-btn:hover, .bd .prefs-btn[aria-expanded="true"] { border-color: var(--bd-ink); color: var(--bd-ink); }
.bd .prefs-btn svg { width: 20px; height: 20px; fill: none; stroke: none; background: currentColor; -webkit-mask: var(--bd-g-gear) center / 20px 20px no-repeat; mask: var(--bd-g-gear) center / 20px 20px no-repeat; }
.bd .prefs-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; min-width: 210px; background: var(--bd-panel); border: 1px solid var(--bd-ink); box-shadow: 0 24px 48px -24px var(--bd-shade); padding: 6px 0; }
.bd .prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; font: 500 14px var(--bd-sans); color: var(--bd-ink); cursor: pointer; }
.bd .switch { position: relative; width: 38px; height: 22px; border-radius: 0; border: 1px solid var(--bd-field-edge); background: var(--bd-panel-2); padding: 0; cursor: pointer; flex: none; }
.bd .switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 0; background: var(--bd-ink-2); transition: transform .2s var(--bd-ease); }
.bd .switch[aria-checked="true"] { background: var(--bd-mint); border-color: var(--bd-mint); }
.bd .switch[aria-checked="true"] i { transform: translateX(16px); background: var(--bd-bg); }

/* ---- the stock strip (docs/BOARD-SPEC-V15.md 6.2): on every tab, under the top bar; it scrolls away with the masthead
   (only the top bar is held, so the toolbar and the list keep the room). The tokens A to Z in whole slots that turn
   like a departures board (.bd-ss-fl, below); under reduced motion a row that scrolls sideways (snapped, its edges
   fading where more are), never by itself; PT's entry stands apart at the right end when the answer lists it ---- */
.bd-ss { position: relative; z-index: 38; height: var(--bd-ss-h); background: var(--bd-bg); border-bottom: 1px solid var(--bd-rule); }
.bd-ss-in { max-width: 1680px; height: 100%; margin: 0 auto; padding: 0 0 0 32px; display: flex; align-items: stretch; }
.bd-ss-lead { flex: none; width: 284px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-right: 16px; border-right: 1px solid var(--bd-rule-2); }
.bd-ss-sub { font: 400 11px/1.2 var(--bd-mono); color: var(--bd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-ss-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.bd-ss-scroll::-webkit-scrollbar { display: none; }
.bd-ss-scroll:focus-visible { outline-offset: -2px; }
.bd-ss-scroll.bd-drag { cursor: grabbing; scroll-snap-type: none; }
.bd-ss-scroll.bd-more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.bd-ss-scroll.bd-more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.bd-ss-scroll.bd-more-l.bd-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.bd-ss-list { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.bd-ss-list > li { flex: none; scroll-snap-align: start; }
.bd-ss-none { display: flex; align-items: center; padding: 0 18px; font-size: 13px; color: var(--bd-muted); }
/* a token: logo, ticker, its figure, the stone lit to its share, "backs 50%", the figure's age */
.bd-ssi, .bd-ssc { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 18px; border-right: 1px solid var(--bd-rule-2); white-space: nowrap; font: 400 12.5px/1 var(--bd-mono); color: var(--bd-ink); -webkit-user-drag: none; user-select: none; }
.bd-ssi:hover { background: var(--bd-wash); }
.bd-ssi:focus-visible { outline-offset: -2px; }
.bd-ssi-s { font-weight: 500; letter-spacing: .12em; }
.bd-ssi-b { display: inline-flex; align-items: center; gap: 8px; color: var(--bd-mint); }
.bd-ssi-a { color: var(--bd-muted); font-size: 11px; }
/* a figure over an hour old: said in brass, never hidden */
.bd-ssi-a.bd-old { color: var(--bd-brass); }
.bd-ssi-a::before { content: "· "; }
/* a list of its own (its item was an li with no list, whose default bullet showed left of the pin: 2026-10-26) */
.bd-ss-pin { flex: none; display: flex; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--bd-rule); background: var(--bd-panel); }
.bd-ss-pin .bd-ssi { border-right: 0; padding-right: 32px; }
/* the departures (the owner's ask of 2026-10-18): whole slots side by side, as many as the width holds, each one token;
   board-stocks.js sets their width, side room and the room between a token's parts (--bd-ss-slot, --bd-ss-pad,
   --bd-ss-gap: 18 and 8 px as above when the width allows, never under 8 (16 on a phone) and 6; no slot where one
   cannot hold the widest token whole) and every 6 s turns them to the next tokens, slot by slot from the left. A slot
   turns as a roll (the owner's note of 2026-10-26: the split flaps read as a glitch in a 48 px strip): the token it
   showed rolls up and out as the next one rolls in under it (.bd-ssr, 460 ms, easing out), each slot 80 ms after the
   one before it (--bd-d), the leaving one fading. The slots end at a whole slot: the window is clipped to n slots, so no
   sliver of the next token shows at its right end (--bd-ss-n), and the last slot's own rule is left out (the pin's,
   or the strip's end, closes the row: no double rule). Square, flat, no shade: the roll is the strip's own
   ground. None under reduced motion (the rule at the end of this file; the strip is then the row above, and
   board-stocks.js never turns it) */
.bd-ss-fl .bd-ss-scroll { display: flex; clip-path: inset(0 calc(100% - var(--bd-ss-slot) * var(--bd-ss-n, 1) + 1px) 0 0); }
.bd-ss-fl .bd-ss-list { flex: none; }
.bd-ss-fl .bd-ss-scroll:not(.bd-drag) { scroll-snap-type: x mandatory; }
.bd-ss-fl .bd-ss-list > li { position: relative; width: var(--bd-ss-slot); overflow: hidden; }
.bd-ss-fl .bd-ss-scroll :is(.bd-ssi, .bd-ssc) { width: 100%; padding: 0 var(--bd-ss-pad); gap: var(--bd-ss-gap); }
.bd-ssr { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; background: var(--bd-bg); }
.bd-ssr-in { position: absolute; left: 0; right: 0; top: 0; height: 200%; display: flex; flex-direction: column; animation: bd-ssr-up .46s cubic-bezier(.22, .8, .24, 1) var(--bd-d) both; }
.bd-ssr-in > .bd-ssc { flex: none; height: 50%; }
.bd-ssr-was { animation: bd-ssr-out .46s ease-in var(--bd-d) both; }
@keyframes bd-ssr-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes bd-ssr-out { to { opacity: 0; } }
/* a token's logo on a 20 px paper disc with a hairline, in both themes (a dark or transparent logo stays legible); the
   ticker's first letter under it, shown when the logo fails */
.bd-logo { position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 0; overflow: hidden; background: #fbf8f1; box-shadow: inset 0 0 0 1px #cbc2af; }
.bd-logo b { font: 500 10px/1 var(--bd-mono); color: #3a372f; }
.bd-logo img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: contain; border-radius: 0; }
.bd-logo .bd-glyph { width: 13px; height: 13px; }
/* a logo drawn in white (board-stocks.js DARK) */
.bd-logo.bd-logo-dk { background: #1b1a16; box-shadow: inset 0 0 0 1px #3a372f; }
.bd-logo-dk b { color: #f3efe4; }
/* on hold for new credit: a dashed frame and its word, the reason in its title */
.bd-hold { display: inline-flex; align-items: center; padding: 3px 6px; border: 1px dashed var(--bd-ink-2); font: 500 10.5px/1 var(--bd-mono); letter-spacing: .12em; color: var(--bd-ink-2); }
/* NEXT: the sprout and the word, in ink-2 (green is live) */
.bd-ring { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--bd-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bd-ink-2); }

/* ---- the page ---- */
.bd-main { max-width: 1680px; margin: 0 auto; padding: 0 32px 24px; outline: none; }
/* ---- the masthead (6.3): the title on the page's own ground, the plate in its frame beside it; then the six figures
   and the last hour's repayments, a framed panel. Kept short, so the first screen ends on a full row of planters
   (1,440 x 900: the cards' first row whole above the status bar), as the mockups do ---- */
.bd-mast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "t p" "f f"; gap: 14px 32px; align-items: center; padding: 16px 0 14px; }
.bd-mast-t { grid-area: t; min-width: 0; }
.bd-kick { margin-bottom: 9px; }
.bd-mast h1 { font: 400 40px/1.04 var(--bd-serif); letter-spacing: -.015em; }
.bd-mast h1 em { font-style: italic; color: var(--bd-ink); }
.bd-sub { margin-top: 8px; font: 400 16.5px/1.42 var(--bd-serif); color: var(--bd-ink-2); max-width: 36em; }
.bd-plate { grid-area: p; margin: 0; height: 136px; border: 1px solid var(--bd-rule); background: var(--bd-tile); }
/* the bench of lanterns, its planters standing on the bench: anchored at the bench, so a frame wider than the picture
   gives up the roof first, never the bench (docs/ART.md, the head plate) */
.bd-plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* the Stocks tab's view has one picture, its stones beside its words: the masthead's plate gives way there */
:root[data-tab="stocks"] .bd-plate { display: none; }
:root[data-tab="stocks"] .bd-mast { grid-template-areas: "t t" "f f"; }
.bd-mast-f { grid-area: f; display: grid; grid-template-columns: auto minmax(0, 1fr); border: 1px solid var(--bd-rule); background: var(--bd-grain), var(--bd-panel); }
/* each figure keeps its least width (its engraved label in one line), so "—" while loading, the figures and a late font
   take the same room */
.bd-figs { display: grid; grid-template-columns: minmax(160px, auto) minmax(150px, auto) minmax(196px, auto) minmax(172px, auto) minmax(168px, auto) minmax(136px, auto); margin: 0; }
.bd-fig { padding: 11px 18px 10px; border-left: 1px solid var(--bd-rule-2); min-width: 0; }
.bd-fig:first-child { border-left: 0; }
.bd-figs dt { white-space: nowrap; }
.bd-figs dd { margin: 0; }
.bd-fv { margin-top: 5px !important; font: 500 27px/1.05 var(--bd-serif); letter-spacing: -.035em; color: var(--bd-mint); text-shadow: var(--bd-glow); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.bd-fn { min-height: 16px; margin-top: 3px !important; font-size: 12px; line-height: 16px; color: var(--bd-muted); white-space: nowrap; }
/* a refresh's changed figure: its digits roll in, then a mint wash (none under reduced motion) */
.bd-fv.bd-roll { animation: bd-roll .6s var(--bd-ease), bd-flash 1.2s .6s var(--bd-ease); }
@keyframes bd-roll { from { transform: translateY(.3em); opacity: .35; } to { transform: none; opacity: 1; } }
/* the pulse: 60 one-minute bars in mint, each that minute's USDG repaid on a square-root scale; an empty minute a 1 px rule */
/* its head takes what room is left (the number under its label where they don't fit side by side), so the bars and
   their axis stay at the foot whatever the number's length, loading or not */
.bd-pulse { display: flex; flex-direction: column; min-width: 0; padding: 11px 20px 9px; border-left: 1px solid var(--bd-rule-2); }
.bd-pulse-h { flex: 1 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; gap: 4px 12px; }
.bd-pulse-h .bd-eng { white-space: nowrap; }
.bd-pulse-h b { font: 500 17px/1 var(--bd-mono); color: var(--bd-mint); }
.bd-pulse-ticks { display: block; width: 100%; height: 26px; margin-top: 8px; overflow: visible; }
.bd-pulse-bar { fill: var(--bd-mint); }
.bd-pulse-none { fill: var(--bd-rule); }
.bd-pulse-bar.bd-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: bd-grow .4s var(--bd-ease); }
@keyframes bd-grow { from { transform: scaleY(0); } to { transform: none; } }
.bd-pulse-ax { display: flex; justify-content: space-between; margin-top: 5px; font: 400 10.5px/1 var(--bd-mono); color: var(--bd-muted); }

/* its room is kept from the first paint for a browser that has been here before (board.js marks it .bd-back before the
   first paint; one line, two on a phone), so it never moves the page; a first visit has nothing to say here, so the
   page gives it no room and the cards come up to the first screen */
.bd-since { min-height: 21px; margin: 0 0 12px; font-size: 13.5px; line-height: 21px; color: var(--bd-ink-2); }
:root:not(.bd-back) .bd-since.bd-off { display: none; }
/* "Hide" runs on at the end of the line, so the line keeps to its room */
.bd-since .bd-textbtn { margin-left: 10px; padding: 0; line-height: 21px; }
.bd-since-coral { color: var(--bd-ink); }
.bd-textbtn { background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--bd-mint); font-size: 13.5px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bd-textbtn:hover { color: var(--bd-ink); }

/* "Closest to Proven": beside the list from 1,180 px, the rail's last note (its coming in moves nothing); where the rail
   is not (a tablet, the rail folded), in the meta row (one line's room on a wide screen, two on a tablet); on a phone,
   in the Sort and filter sheet under the tier filter, so the phone's first screen reaches the cards */
.bd-closest { min-height: 21px; margin: 0 0 10px; font-size: 13.5px; line-height: 21px; color: var(--bd-ink-2); }
.bd-rclosest { display: none; min-height: 0; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--bd-rule-2); font-size: 12.5px; line-height: 1.45; }
.bd-rclosest.bd-off, .bd-fclosest.bd-off { display: none; }
.bd-fclosest { min-height: 0; margin: 8px 0 4px; font-size: 13.5px; line-height: 1.45; }
@media (min-width: 1180px) {
  .bd-body:not(.bd-folded) .bd-rclosest:not(.bd-off) { display: block; }
  .bd-body:not(.bd-folded) .bd-col > .bd-closest { display: none; }
  .bd-fclosest { display: none; }
}
@media (max-width: 719px) { .bd-col > .bd-closest { display: none; } }
.bd-closest a { color: var(--bd-mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-closest b { font-weight: 500; color: var(--bd-ink); }

/* ---- the key strip (docs/BOARD-SPEC-V15.md 6.5): one line over the cards, each mark beside its words ---- */
.bd-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 9px 14px; border: 1px solid var(--bd-rule-2); background: var(--bd-grain), var(--bd-panel); font-size: 12.5px; line-height: 1.4; color: var(--bd-ink-2); }
.bd-key-i { display: inline-flex; align-items: center; gap: 8px; }
.bd-key-i::before { content: ""; flex: none; }
.bd-key-dot { color: var(--bd-rule); }
/* the lamp lit; the layered chip ($line | source); the 7 days' cells, two of them green; the tree's stage mark */
.bd-key-chip::before { width: 20px; height: 11px; border: 1px solid var(--bd-brass); background: linear-gradient(var(--bd-brass) 0 0) 8px 0 / 1px 100% no-repeat; }
.bd-key-bars::before { width: 40px; height: 4px; background: linear-gradient(var(--bd-mint) 0 0) 6px 0 / 4px 4px no-repeat, linear-gradient(var(--bd-mint) 0 0) 24px 0 / 4px 4px no-repeat,
  linear-gradient(90deg, transparent 1px, var(--bd-panel) 1px, var(--bd-panel) 3px, transparent 3px) 0 1px / 6px 2px repeat-x, linear-gradient(90deg, var(--bd-rule) 4px, transparent 4px) 0 0 / 6px 4px repeat-x; }
/* (the tree: the sapling, the tier marks' middle stage, in the status marks above) */
.bd-key .bd-textbtn { margin-left: auto; font-size: 12.5px; }

/* ---- a phone's tabs (5.3): the first row of its sticky stack ---- */
.bd-ptabs { display: none; }

/* ---- the Agents tab: the rail and the list's column (6.4, 6.5) ---- */
.bd-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.bd-body.bd-folded { grid-template-columns: 48px minmax(0, 1fr); gap: 0 20px; }
.bd-col { min-width: 0; container: bd-list / inline-size; }
/* the rail: held under the top bar, scrolling on its own when it is taller than the window */
.bd-rail { position: sticky; top: var(--bd-stick); max-height: calc(100vh - var(--bd-stick) - var(--bd-status-h)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-right: 1px solid var(--bd-rule-2); }
.bd-rail-in { padding: 14px 8px 18px 0; }
.bd-rg + .bd-rg { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bd-rule-2); }
/* more below: the rail's last 18 px fade, so a rail taller than the window says it scrolls */
.bd-rail { -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
/* no answer yet: the rows keep their room, at half ink, and filter nothing */
.bd-rrow[aria-disabled="true"] { opacity: .5; cursor: default; }
.bd-rrow[aria-disabled="true"]:hover { background: transparent; }
.bd-rg-h { margin: 0 0 6px; }
/* a row: a toggle (one at a time per group), its mark, its name, its count from the answer */
/* (each name whole at 232 px: "Repaid in the last 24 h", "Pinned in this browser"; a count takes only its own room) */
.bd-rrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 0 8px; width: 100%; min-height: 30px; padding: 2px 6px 2px 4px; background: transparent; border: 1px solid transparent; text-align: left; cursor: pointer; color: var(--bd-ink); }
.bd-rrow:hover { background: var(--bd-wash); }
.bd-rrow[aria-pressed="true"] { background: var(--bd-wash-2); border-color: var(--bd-mint); }
.bd-rrow:focus-visible { outline-offset: -2px; }
.bd-rname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.bd-rn { min-width: 3ch; text-align: right; font: 400 12px/1 var(--bd-mono); color: var(--bd-muted); }
.bd-rn:empty { min-width: 0; }
.bd-rrow .bd-glyph { justify-self: center; width: 14px; height: 14px; }
.bd-glyph-mark { shape-rendering: crispEdges; }
/* the tiers' stage trees (seed 1, as v1's ladder) in their specimen cases: 20 px in a 34 px case of night, the lamp's
   light at its top, a brass edge (docs/DESIGN-KIT.md 3), the tree graded to the case mint (board-tree.js grade); a tier
   with no agent yet drawn faint */
.bd-rtree { display: grid; place-items: center; width: 34px; height: 34px; background: var(--bd-tile-lit); box-shadow: inset 0 0 0 1px var(--bd-case-edge); overflow: hidden; }
.bd-rtree canvas { display: block; width: 20px; height: 20px; }
.bd-rrow.bd-rempty .bd-rtree canvas { opacity: .35; }
.bd-rdef { margin-top: 6px; position: relative; }
.bd-rdef::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; border-top: 1px dashed var(--bd-rule); }
/* the tier's rule (v1 6.5): its title, and under it while the keyboard is on it */
.bd-rnear { grid-column: 2 / -1; padding: 0 0 3px; font-size: 12px; line-height: 1.35; color: var(--bd-mint); }
.bd-rnear[hidden] { display: none; }
.bd-rrule { display: none; grid-column: 2 / -1; padding: 2px 0 4px; font-size: 12px; line-height: 1.4; color: var(--bd-muted); white-space: normal; }
.bd-rtier:focus-visible .bd-rrule { display: block; }
/* PT's row before the vault lends on it: the sprout and NEXT in ink-2 where its count goes (next, as .bd-ring says it;
   green is live only) */
.bd-rrow.bd-next .bd-rn { display: inline-flex; align-items: center; gap: 6px; }
.bd-rrow.bd-next .bd-rn::after { content: "NEXT"; font: 500 10px/1 var(--bd-mono); letter-spacing: .16em; color: var(--bd-ink-2); }
/* the status rows' marks: the lamp, the bars, a sprout, a clean ring, a coral mark, the pin's notch */
.bd-rmark { justify-self: center; display: block; width: 12px; height: 12px; position: relative; }
[data-status="borrowing"] .bd-rmark { display: block; }
.bd-rmark::before { content: ""; position: absolute; }
[data-status="today"] .bd-rmark::before { inset: 1px 0; background: linear-gradient(var(--bd-mint) 0 0) 0 100% / 3px 4px no-repeat, linear-gradient(var(--bd-mint) 0 0) 4.5px 100% / 3px 10px no-repeat, linear-gradient(var(--bd-mint) 0 0) 9px 100% / 3px 6px no-repeat; }
[data-status="new"] .bd-rmark::before { inset: 3px; background: var(--bd-mint); }
[data-status="clean"] .bd-rmark::before { inset: 1px; background: var(--bd-ink-2); -webkit-mask: var(--bd-g-check) center / 10px 10px no-repeat; mask: var(--bd-g-check) center / 10px 10px no-repeat; }
[data-status="late"] .bd-rmark::before { inset: 3px; background: var(--bd-coral); }
[data-status="pinned"] .bd-rmark::before { inset: 1px; background: var(--bd-brass); -webkit-mask: var(--bd-g-pinned) center / 10px 10px no-repeat; mask: var(--bd-g-pinned) center / 10px 10px no-repeat; }
.bd-rail-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bd-rule-2); font-size: 12px; line-height: 1.45; color: var(--bd-muted); text-wrap: pretty; }
/* folded: the marks alone (48 px), each still a toggle with its name read out */
.bd-folded .bd-rail-in { padding: 12px 0; }
.bd-folded .bd-rg-h { height: 1px; overflow: hidden; margin: 0 0 4px; color: transparent; }
.bd-folded .bd-rrow { grid-template-columns: 34px; justify-content: center; padding: 3px 0; }
.bd-folded .bd-rname, .bd-folded .bd-rn, .bd-folded .bd-rnear, .bd-folded .bd-rrule, .bd-folded .bd-rail-foot { display: none; }
.bd-folded .bd-rg + .bd-rg { margin-top: 8px; padding-top: 8px; }
.bd-railbtn svg { transition: transform .24s var(--bd-ease); }
.bd-folded .bd-railbtn svg { transform: scaleX(-1); }

/* rule 15: the new order waits here, held under the toolbar, until the reader asks for it */
.bd-order { position: sticky; top: calc(var(--bd-stick) + var(--bd-tools-h) + 8px); z-index: 25; display: flex; align-items: center; gap: 12px; width: fit-content; margin: 0 auto 12px; padding: 5px 8px 5px 14px; background: var(--bd-panel); border: 1px solid var(--bd-ink); font-size: 13.5px; color: var(--bd-ink); }
.bd-order-t::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: .12em; background: var(--bd-mint); }
.bd-order .bd-textbtn { min-height: 28px; }

/* ---- the status bar (6.14), from 1,180 px, fixed at the bottom ---- */
.bd-status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 39; height: var(--bd-status-h); background: var(--bd-panel); border-top: 1px solid var(--bd-rule); font: 400 11px/1 var(--bd-mono); color: var(--bd-muted); }
.bd-status-in { max-width: 1680px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 0; white-space: nowrap; overflow: hidden; }
.bd-status-lead { min-width: 64px; font-weight: 500; letter-spacing: .16em; color: var(--bd-mint); }
.bd-status-lead:empty { min-width: 0; }
.bd-status.bd-stale .bd-status-lead { letter-spacing: 0; color: var(--bd-brass); }
.bd-status.bd-stale .bd-status-lead:not(:empty)::after { content: "·"; margin: 0 10px; color: var(--bd-rule); }
.bd-status-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bd-status-t span + span::before { content: "·"; margin: 0 10px; color: var(--bd-rule); }
.bd-status-pt { color: var(--bd-mint); }

/* ---- the toolbar (held under the top bar, and the strip from 1,180 px) ---- */
.bd-tools { position: sticky; top: var(--bd-stick); z-index: 30; display: flex; align-items: center; gap: 10px 14px; min-height: 54px; padding: 8px 0; background: var(--bd-bg); border-bottom: 1px solid var(--bd-rule-2); }
.bd-search { position: relative; flex: 0 1 340px; min-width: 0; }
/* a desk keeps the search field whole (its placeholder in full); the selects wrap beside it instead */
@media (min-width: 720px) { .bd-search { min-width: 250px; } }
.bd-search input { width: 100%; height: 38px; padding: 0 34px 0 12px; background: var(--bd-field); color: var(--bd-ink); border: 1px solid var(--bd-field-edge); border-radius: 0; font: 400 14.5px var(--bd-sans); -webkit-appearance: none; appearance: none; }
.bd-search input::placeholder { color: var(--bd-muted); opacity: 1; }
/* the field's own clear button, in the board's ink rather than the browser's blue */
.bd-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin: 0 -2px 0 8px; cursor: pointer; background: var(--bd-muted);
  -webkit-mask: var(--bd-g-x7) center / 14px no-repeat; mask: var(--bd-g-x7) center / 14px no-repeat; }
.bd-search input::-webkit-search-cancel-button:hover { background: var(--bd-ink); }
.bd-search input:focus { outline: 2px solid var(--bd-mint); outline-offset: -1px; }
.bd-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); min-width: 18px; height: 20px; display: grid; place-items: center; font: 500 11px/1 var(--bd-mono); color: var(--bd-muted); border: 1px solid var(--bd-rule); pointer-events: none; }
.bd-search input:focus + .bd-kbd, .bd-search input:not(:placeholder-shown) + .bd-kbd { display: none; }
.bd-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.bd-sel select { width: 150px; }
#bd-sort { width: 140px; }
.bd-sel { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--bd-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bd-muted); }
.bd-sel select, .bd-fsel select { height: 34px; max-width: 220px; padding: 0 28px 0 9px; background: var(--bd-field); color: var(--bd-ink); border: 1px solid var(--bd-field-edge); border-radius: 0; font: 400 14px var(--bd-sans); -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: var(--bd-caret); background-position: right 8px center; background-size: 14px 14px; background-repeat: no-repeat; }
#bd-dir { margin-left: -8px; }
#bd-dir[aria-pressed="true"] { border-color: var(--bd-mint); color: var(--bd-mint); }
/* "Sort and filter" (the rail's place under 1,180 px): its words, and its count of filters on */
.bd-filterbtn { display: none; }
.bd-filterbtn svg { width: 20px; height: 20px; flex: none; display: none; }

/* ---- the meta row ---- */
.bd-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 10px 0 9px; }
.bd-sortline { margin-left: auto !important; }
.bd-keybtn { flex: none; margin-left: -8px; font-size: 13px; }
.bd-meta-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.bd-count { font-size: 11px; }
.bd-chips { display: contents; }
.bd-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 6px 0 10px; border: 1px solid var(--bd-ink); border-radius: 0; background: var(--bd-panel); font: 500 13px/1 var(--bd-sans); color: var(--bd-ink); cursor: pointer; }
.bd-chip::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--bd-mint); }
.bd-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-chip svg { width: 14px; height: 14px; flex: none; color: var(--bd-muted); }
.bd-chip:hover svg { color: var(--bd-ink); }
.bd-sortline { font-size: 13px; color: var(--bd-muted); }
.bd-alert { margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--bd-brass); font-size: 13.5px; }
/* Score v2 not readable (v1): one line over the list */
.bd-strip { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--bd-brass); color: var(--bd-ink); font-size: 13.5px; }
.bd-note { margin: 0 0 12px; padding: 12px 14px; background: var(--bd-panel); border: 1px solid var(--bd-rule-2); font-size: 14px; color: var(--bd-ink-2); }

/* ---- the table: a grid per row (one column template for the header and every row), so the page lays out only the
   rows in view (content-visibility); the header stays under the toolbar. Its columns follow the list's own width
   (docs/BOARD-SPEC-V15.md 6.7; a container query on .bd-col), measured where it stands: from 1,180 px beside the rail
   (856 to 1,076 px; 836 beside the Activity column too), so the v1.5 columns show there: Last repaid as v1 had it from
   1,180 px, 7 days from 940 px (in Last repaid's place beside the Activity column, which carries the times), In use
   from 1,070, Total repaid from 1,170, Traits and x402 income from 1,340 (every column). A tablet keeps v1's: Total
   repaid, x402 income, Last repaid, In use and 7 days to the sheet. Whatever a list leaves out is in the sheet ---- */
.bd-table { --c-tree: 58px; --c-tier: 108px; --c-loans: 96px; --c-ontime: 80px;
  --bd-cols: 34px var(--c-tree) minmax(170px, 1fr) var(--c-tier) 74px 72px 140px var(--c-loans) 60px var(--c-ontime) 150px 100px 92px 100px; font-variant-numeric: tabular-nums; }
/* Compact's columns: a 20 px tree in its 34 px case, the tier as its mark alone (the word read out and in its title, the
   column the mark's width and its header's), Loans repaid and On time with their second figure on the same line */
.bd-table.bd-compact { --c-tree: 46px; --c-tier: 52px; --c-loans: 116px; --c-ontime: 124px; }
.bd-tr { display: grid; grid-template-columns: var(--bd-cols); align-items: center; }
.bd-tr > div { min-width: 0; padding: 8px 10px; white-space: nowrap; }
.bd-thead { position: sticky; top: calc(var(--bd-stick) + var(--bd-tools-h)); z-index: 20; background: var(--bd-bg); border-bottom: 1px solid var(--bd-rule); }
.bd-thead .bd-tr > div { padding-top: 10px; padding-bottom: 9px; font: 500 10.5px/1.2 var(--bd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bd-muted); }
.bd-thead button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.bd-thead button:hover { color: var(--bd-ink); }
.bd-thead [aria-sort="descending"], .bd-thead [aria-sort="ascending"] { color: var(--bd-ink) !important; }
.bd-thead [aria-sort="descending"] button::after, .bd-thead [aria-sort="ascending"] button::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: -1px; background: var(--bd-mint); -webkit-mask: var(--bd-g-down) center / 10px 10px no-repeat; mask: var(--bd-g-down) center / 10px 10px no-repeat; }
.bd-thead [aria-sort="ascending"] button::after { -webkit-mask-image: var(--bd-g-up); mask-image: var(--bd-g-up); }
.bd-tbody .bd-tr { min-height: 62px; border-bottom: 1px solid var(--bd-rule-2); cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 62px; }
.bd-tr > .bd-r { text-align: right; }
.bd-tbody .bd-tr:hover { background: var(--bd-wash); }
/* the open sheet's row: a 1 px mint frame */
.bd-tbody .bd-tr.bd-open { background: var(--bd-wash-2); box-shadow: inset 0 0 0 1px var(--bd-mint); }
.bd-tr > .bd-c-pin { padding: 0 0 0 4px; }
.bd-tr > .bd-c-tree { padding: 0 6px 0 4px; }
.bd-pin { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--bd-muted); cursor: pointer; }
.bd-pin svg { width: 10px; height: 10px; }
.bd-pin:hover, .bd-pin.bd-on { color: var(--bd-mint); }
/* a row's tree in its specimen case (docs/DESIGN-KIT.md 3): night, the lamp's light at its top, a brass hairline edge;
   the tree 30 px in the 44 px case (20 px in 34 elsewhere: Compact, Activity), graded to the case mint */
.bd-tile { display: grid; place-items: center; width: 44px; height: 44px; background: var(--bd-tile-lit); box-shadow: inset 0 0 0 1px var(--bd-case-edge); flex: none; overflow: hidden; }
.bd-tile canvas, .bd-tile img { display: block; width: 30px; height: 30px; }
.bd-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 100%; }
.bd-nm { font: 500 17px/1.25 var(--bd-serif); color: var(--bd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bd-name:hover .bd-nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-id { font: 400 12px/1 var(--bd-mono); color: var(--bd-muted); flex: none; }
/* the status: a mark (mint while borrowing, coral after a default or a freeze) and a Garamond italic word in ink */
.bd-st { margin-top: 4px; display: flex; align-items: center; gap: 8px; font: 500 12px/1.25 var(--bd-mono); color: var(--bd-ink-2); white-space: nowrap; }
.bd-st::before { vertical-align: 0; }
.bd-st.bd-s-settled, .bd-st.bd-s-none { color: var(--bd-muted); }
.bd-st.bd-s-defaulted { color: var(--bd-coral); }
.bd-st.bd-s-frozen::before { margin-right: 0; vertical-align: 0; }
/* the tier: its stage plant (the status marks' .bd-tmark: seed, sprout, sapling, tree, full tree; the bare tree in coral
   after a default) and the tier's word engraved beside it (Plex Mono capitals, ink) */
.bd-tierc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font: 500 10.5px/1.3 var(--bd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bd-ink); white-space: normal; }
.bd-tierc.bd-def { color: var(--bd-ink); }
.bd-score { font: 500 15px/1 var(--bd-mono); color: var(--bd-mint); }
.bd-traits { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; vertical-align: middle; }
.bd-bar { position: relative; display: block; width: 6px; height: 18px; }
.bd-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bd-rule); }
.bd-bar.on::after { background: var(--bd-mint); }
.bd-bar i { position: absolute; left: 0; right: 0; bottom: 0; display: block; background: var(--bd-mint); }
/* a list figure: Plex Mono, tabular; the line's word under it engraved like the chip's (6.6) */
.bd-cell { display: block; font: 400 13px/1.25 var(--bd-mono); color: var(--bd-ink); }
.bd-cell-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--bd-muted); }
.bd-cell-sub.bd-mint { font: 400 11px/1.3 var(--bd-mono); color: var(--bd-mint); } .bd-cell-sub.bd-coral { color: var(--bd-ink-2); }
.bd-quiet { color: var(--bd-muted); }
.bd-flash { animation: bd-flash 1.2s var(--bd-ease); }
@keyframes bd-flash { from { background-color: var(--bd-flash); } to { background-color: transparent; } }
.bd-tbody .bd-tr.bd-skel { cursor: default; }
.bd-skel i { display: block; height: 1px; background: var(--bd-rule); }
.bd-skel .bd-tile { background: none; box-shadow: none; border: 1px dashed var(--bd-line); }
.bd-skel .bd-skel-name { width: 60%; }

/* the table in a narrower list (after the rules above, which they change): the chip a little tighter ("OWNER'S
   $PRIORS" whole in its cell) */
.bd-c-line .bd-bchip { height: auto; min-height: 22px; font-size: 9px; letter-spacing: .04em; }
.bd-c-line .bd-bchip-w { white-space: normal; line-height: 1.2; padding: 3px 0; }
.bd-c-line .bd-bchip-amt { padding: 0 4px; font-size: 11px; }
.bd-c-line .bd-bchip-src { gap: 4px; padding: 0 4px; }
.bd-c-line .bd-bchip-src:first-child { padding-left: 5px; }
/* On time's second line wraps rather than run out of its cell ("33 not checked"; a row's content-visibility clips what
   runs past it); Compact leaves that line to the sheet */
.bd-c-ontime .bd-cell-sub { white-space: normal; }
@media (min-width: 1180px) {
  /* beside the rail: the list's own width decides (each template lists only the columns shown, in their order) */
  @container bd-list (max-width: 1339px) {
    .bd-table .bd-c-traits, .bd-table .bd-c-income { display: none !important; }
    .bd-table { --bd-cols: 34px var(--c-tree) minmax(170px, 1fr) var(--c-tier) 74px 140px var(--c-loans) 60px var(--c-ontime) 150px 100px 100px; }
  }
  @container bd-list (max-width: 1169px) {
    .bd-table .bd-c-usdg { display: none !important; }
    .bd-table { --bd-cols: 34px var(--c-tree) minmax(170px, 1fr) var(--c-tier) 74px 140px var(--c-loans) 60px var(--c-ontime) 150px 100px; }
  }
  @container bd-list (max-width: 1069px) {
    .bd-table .bd-c-inuse { display: none !important; }
    .bd-table { --bd-cols: 34px var(--c-tree) minmax(170px, 1fr) var(--c-tier) 74px 140px var(--c-loans) 60px var(--c-ontime) 100px; }
  }
  @container bd-list (max-width: 939px) {
    .bd-table .bd-c-r7 { display: none !important; }
    .bd-table { --bd-cols: 34px var(--c-tree) minmax(150px, 1fr) var(--c-tier) 74px 140px var(--c-loans) var(--c-ontime) 100px; }
  }
}
@media (min-width: 1440px) {
  /* beside the Activity column (it carries the times): 7 days in Last repaid's place */
  @container bd-list (max-width: 939px) {
    :root:not([data-tab="activity"]) .bd-table .bd-c-recent { display: none !important; }
    :root:not([data-tab="activity"]) .bd-table .bd-c-r7 { display: block !important; }
    :root:not([data-tab="activity"]) .bd-table { --bd-cols: 34px var(--c-tree) minmax(150px, 1fr) var(--c-tier) 74px 140px var(--c-loans) 60px var(--c-ontime); }
  }
}
/* a tablet (720 to 1,179 px): v1's columns; the wide ones in the sheet */
@media (max-width: 1179px) {
  .bd-xwide, .bd-wide { display: none !important; }
  .bd-table { --bd-cols: 34px var(--c-tree) minmax(0, 1fr) var(--c-tier) 74px 70px 132px var(--c-loans) var(--c-ontime); }
  @container bd-list (max-width: 835px) {
    .bd-table { --bd-cols: 30px 54px minmax(0, 1fr) 100px 58px 68px 76px 86px 72px; }
    .bd-table.bd-compact { --bd-cols: 30px 40px minmax(0, 1fr) 46px 58px 68px 76px 106px 114px; }
    .bd-tr > div { padding-left: 7px; padding-right: 7px; }
    /* a header longer than its column breaks between its words ("Score" / "v2") */
    .bd-thead .bd-tr > div, .bd-thead button { white-space: normal; }
    /* the chip stacked in its narrow column: the line's amount over its word */
    .bd-c-line .bd-bchip { flex-direction: column; align-items: flex-start; height: auto; gap: 3px; }
    .bd-c-line .bd-bchip-amt, .bd-c-line .bd-bchip-src { border: 0; padding: 0; margin: 0; background: none; }
    .bd-c-line .bd-bchip-src::after { display: none; }
    .bd-c-line .bd-bchip-w { white-space: normal; letter-spacing: .04em; font-size: 9px; }
  }
}
/* ---- the phone list ---- */
.bd-plist { list-style: none; margin: 0; padding: 0; }
.bd-plist > li { content-visibility: auto; contain-intrinsic-size: auto 65px; }
.bd-prow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: 64px; padding: 10px 2px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-prow .bd-tile { grid-row: 1 / span 2; }
.bd-p1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bd-p1 .bd-nm { flex: 0 1 auto; }
.bd-pfig { margin-left: auto; flex: none; text-align: right; font: 400 14.5px/1 var(--bd-mono); color: var(--bd-ink); white-space: nowrap; }
.bd-pfig small { display: inline; margin-left: 5px; font: 400 11.5px var(--bd-sans); color: var(--bd-muted); }
/* On time's "{n} not checked" (loans repaid older than the loan history), under the figure as in the table's cell */
.bd-pfig small.bd-pnote { display: block; margin: 4px 0 0; }
.bd-p2 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--bd-muted); white-space: nowrap; overflow: hidden; }
.bd-p2 .bd-tierc { font-size: 10px; flex-wrap: nowrap; white-space: nowrap; }
.bd-p2 .bd-dot { color: var(--bd-rule); }
/* the chip in line 2 (no plate behind it here): it shrinks before it runs out of its row (its word cut, the whole one
   in its title) */
.bd-p2 .bd-pline { display: inline-flex; min-width: 0; overflow: hidden; }
.bd-p2 .bd-bchip { height: 20px; }
.bd-p2 .bd-bchip-src::after { display: none; }
.bd-plist li.bd-open .bd-prow { background: var(--bd-wash-2); box-shadow: inset 0 0 0 1px var(--bd-mint); }
/* the row's focus ring inside it: each li has content-visibility: auto, whose paint containment clips anything drawn
   outside the li, and the link fills the li */
.bd-plist .bd-prow:focus-visible { outline-offset: -2px; }

/* ---- the view toggle (docs/BOARD-SPEC-V15.md 6.5): three radios, each an icon and a word; the arrow keys move between
   them. The radio itself is kept (it takes the focus), drawn as the label ---- */
.bd-views { display: inline-flex; flex: none; margin-left: auto; border: 1px solid var(--bd-rule); background: var(--bd-panel); }
.bd-view { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; cursor: pointer; font: 500 10.5px/1 var(--bd-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bd-ink-2); white-space: nowrap; }
.bd-view + .bd-view { border-left: 1px solid var(--bd-rule); }
.bd-view input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bd-view svg { width: 10px; height: 10px; flex: none; }
.bd-view:hover { color: var(--bd-ink); background: var(--bd-hover); }
.bd-view:has(input:checked) { color: var(--bd-ink); background: var(--bd-bg); box-shadow: inset 0 0 0 1px var(--bd-ink); }
.bd-view:has(input:focus-visible) { outline: 2px solid var(--bd-mint); outline-offset: 2px; z-index: 1; }

/* ---- the layered chip (6.6): the line's amount, a brass hairline, the glyph and the word; NO LINE dashed ---- */
.bd-bchip { position: relative; display: inline-flex; align-items: stretch; max-width: 100%; height: 22px; font: 500 10.5px/1 var(--bd-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--bd-brass); vertical-align: middle; }
.bd-bchip-amt { position: relative; z-index: 1; display: inline-flex; align-items: center; flex: none; padding: 0 7px; font: 500 12px/1 var(--bd-mono); letter-spacing: 0; text-transform: none; color: var(--bd-ink); background: var(--bd-panel-2); border: 1px solid var(--bd-line); }
.bd-bchip-src { position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 0 7px; margin-left: -1px; border: 1px solid var(--bd-brass); background: var(--bd-panel); }
/* the plate behind it: what backs the line, as a thing that stands behind the chip */
.bd-bchip-src::after { content: ""; position: absolute; inset: -3px -3px 3px 3px; z-index: -1; border: 1px solid var(--bd-rule-2); border-left: 0; border-bottom: 0; pointer-events: none; }
.bd-bchip-w { overflow: hidden; text-overflow: ellipsis; }
.bd-bchip.bd-none .bd-bchip-src { border-style: dashed; border-color: var(--bd-field-edge); color: var(--bd-ink-2); margin-left: 0; }
/* a chip with no figure (the owner's $PRIORS: rule 12): its word alone in the frame */
.bd-bchip-src:first-child { margin-left: 0; }
.bd-bchip.bd-none .bd-bchip-src::after { display: none; }
.bd-glyph { width: 11px; height: 11px; flex: none; color: var(--bd-muted); }
/* a glyph's parts: brass hardware, its half-tone, and mint; one colour (the case's) inside a specimen case, where
   --bd-g-1 and --bd-g-3 are currentColor */
.bd-g1 { fill: var(--bd-g-1, var(--bd-brass)); } .bd-g2 { fill: var(--bd-g-1, var(--bd-brass)); opacity: .5; } .bd-g3 { fill: var(--bd-g-3, var(--bd-mint)); }
.bd-stone { position: relative; display: inline-block; flex: none; width: 7px; height: 11px; border: 1px solid var(--bd-brass); }
.bd-stone-lvl, .bd-stone > i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bd-mint); }

/* ---- the 7 days (6.6): seven 4 px pixel cells, one per UTC day, green on a day with a repayment, a rule outline
   otherwise (the counts in the title); no chart ---- */
.bd-r7 { display: inline-flex; align-items: center; gap: 2px; height: 4px; vertical-align: middle; }
.bd-r7 i { display: block; width: 4px; height: 4px; box-shadow: inset 0 0 0 1px var(--bd-rule); }
.bd-r7 i.on { background: var(--bd-mint); box-shadow: none; }
.bd-c-r7 .bd-r7 { margin-top: 2px; }
/* a row's lamp: the 2 px lantern lit beside its name while a loan is open, where the status word is not shown (Compact's
   narrow cell, a phone's row); the status word carries it everywhere else */
.bd-tile { position: relative; }
.bd-c-agent .bd-lampdot { display: none; }
.bd-p1 .bd-lampdot { align-self: center; }

/* ---- Compact (6.8): the table's rows at 36 px, 20 px trees in 34 px cases, the agent on one line, every figure in Plex
   Mono. Nothing wraps: the agent's name shortens (its whole name in its title), its status shows after it only where the
   cell has the room for it whole (else the lit lamp beside the name), its #id goes before the name gets too short; the
   tier is its plant mark ---- */
.bd-compact .bd-tbody .bd-tr { min-height: 36px; contain-intrinsic-size: auto 37px; }
.bd-compact .bd-tbody .bd-tr > div { padding-top: 3px; padding-bottom: 3px; white-space: nowrap; }
.bd-compact .bd-tbody .bd-tr > .bd-c-tree, .bd-compact .bd-tbody .bd-tr > .bd-c-pin { padding-top: 0; padding-bottom: 0; }
.bd-compact .bd-tr > .bd-c-tree { padding: 0 6px 0 4px; }
.bd-compact .bd-tile { width: 34px; height: 34px; }
/* the List's 30 px drawing, shown at 20 px: a switch between the two draws nothing */
.bd-compact .bd-tile img { width: 20px !important; height: 20px !important; }
.bd-compact .bd-c-agent { display: flex; align-items: baseline; gap: 0; overflow: hidden; container: bd-agent / inline-size; }
/* the name first: at least 22 characters of it before anything else gives way; the #id goes first (it stays in the
   name's title and its sheet) */
.bd-compact .bd-c-agent .bd-name { flex: 0 1 auto; min-width: min(22ch, 100%); }
.bd-compact .bd-nm { font-size: 15px; }
.bd-compact .bd-c-agent .bd-name::after { content: "·"; flex: none; margin: 0 7px; color: var(--bd-muted); }
.bd-compact .bd-st { flex: none; margin-top: 0; white-space: nowrap; }
@container bd-agent (max-width: 229px) {
  .bd-compact .bd-c-agent .bd-st, .bd-compact .bd-c-agent .bd-name::after { display: none; }
  /* the status word gone: the lamp beside the name, while a loan is open */
  .bd-compact .bd-c-agent .bd-lampdot { display: inline-block; flex: none; align-self: center; margin-left: 7px; }
  .bd-compact .bd-c-agent .bd-name:has(+ .bd-lampdot) { min-width: min(22ch, calc(100% - 21px)); }
}
@container bd-agent (max-width: 239px) {
  .bd-compact .bd-c-agent .bd-id { display: none; }
}
/* the tier as its mark alone (the word read out, and in its title) */
.bd-compact .bd-tr > .bd-c-tier { padding-left: 4px; padding-right: 4px; }
.bd-compact .bd-c-tier .bd-tierc { flex-wrap: nowrap; gap: 0; }
.bd-compact .bd-c-tier .bd-tierc > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bd-compact .bd-thead .bd-c-tier button { letter-spacing: .04em; }
.bd-compact .bd-c-line .bd-bchip-w { white-space: nowrap; padding: 0; }
.bd-compact .bd-cell, .bd-compact .bd-cell-sub { display: inline; }
.bd-compact .bd-cell-sub { margin: 0 0 0 6px; font-size: 11px; white-space: nowrap; }
.bd-compact .bd-c-ontime .bd-cell-sub[title] { display: none; }
.bd-compact .bd-bchip { height: 20px; }
.bd-compact .bd-score { font-size: 13.5px; }

/* ---- Cards (6.6): the planter. The case is the kit's case night in both themes (docs/DESIGN-KIT.md 3), the tag is the
   theme's own panel. Its light never follows a figure: the lamp is lit while a loan is open, the motes come from the id ---- */
.bd-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.bd-ci { content-visibility: auto; contain-intrinsic-size: auto 392px; }
.bd-plant { position: relative; display: flex; flex-direction: column; height: 392px; background: var(--bd-grain), var(--bd-panel); border: 1px solid var(--bd-rule); color: var(--bd-ink); }
.bd-plant:focus-visible { outline: 2px solid var(--bd-mint); outline-offset: -2px; }
/* hover and focus: the four brass corner ticks and a brass-line frame; the open sheet's card: a 1 px mint frame */
.bd-plant::after { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; background: var(--bd-ticks); box-shadow: inset 0 0 0 1px var(--bd-line); opacity: 0; }
.bd-plant:hover::after, .bd-plant:focus-visible::after { opacity: 1; }
.bd-ci.bd-open .bd-plant { border-color: var(--bd-mint); box-shadow: inset 0 0 0 1px var(--bd-mint); }
/* the case: night (--bd-case, --bd-case-2), its brass hairline edge; a few 2 px motes of dust in the glass, placed from
   the id alone (board-core motesOf, --bd-motes), in the case's dim; lit, the lamp's light falls from its top */
.bd-case { --bd-mote: var(--bd-case-dim); position: relative; display: block; flex: none; height: 176px; overflow: hidden;
  background: var(--bd-motes, none), radial-gradient(80% 80% at 50% 45%, var(--bd-case-2), var(--bd-case)); box-shadow: inset 0 0 0 1px var(--bd-case-edge); }
.bd-case.bd-lit { background: var(--bd-motes, none), radial-gradient(90% 60% at 50% 0%, var(--bd-case-lamp), transparent 70%), radial-gradient(80% 80% at 50% 45%, var(--bd-case-2), var(--bd-case)); }
/* the glass: a brass hairline standing on the bench, a faint diagonal sheen */
.bd-case::before { content: ""; position: absolute; inset: 28px 14px 16px; border: 1px solid rgba(209, 174, 104, .26); border-top-color: var(--bd-case-edge); border-bottom: 0; background: linear-gradient(105deg, rgba(236, 230, 214, .045), transparent 32%); pointer-events: none; }
/* the bench: the night with a brass hairline on top; warmed under a lit lamp */
.bd-case::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(180deg, rgba(209, 174, 104, .1), transparent 80%); border-top: 1px solid var(--bd-case-edge); }
.bd-case.bd-lit::after { background: radial-gradient(40% 120% at 50% 0%, rgba(240, 205, 124, .24), transparent 75%), linear-gradient(180deg, rgba(209, 174, 104, .1), transparent 80%); }
.bd-ctree { position: absolute; left: 50%; z-index: 1; display: block; transform: translateX(-50%); }
/* the plate's lantern (docs/DESIGN-KIT.md 3, the board card): hung on its brass rod from the roof, 4 px a cell (3 on a
   phone); its frame and wick drawn by .bd-lamp::before, its glass and flame by the bulb over it, which rises once (1.2 s)
   with the first answer and whenever a refresh opens a loan (the class toggled, never redrawn) */
.bd-lamp::before, .bd-hlampo::after {
  --u: 4px; --bd-pm-fr: var(--bd-pm-brass); --bd-pm-wk: transparent;
  content: ""; position: absolute; left: 0; bottom: 0; width: calc(var(--u) * 7); height: calc(var(--u) * 8);
  background:
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 3) 0 / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 2) var(--u) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 2) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 5) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 5) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-wk) 0 0) calc(var(--u) * 3) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 5) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) var(--u) calc(var(--u) * 6) / calc(var(--u) * 5) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fr) 0 0) calc(var(--u) * 4) calc(var(--u) * 7) / var(--u) var(--u) no-repeat;
}
.bd-lamp .bd-bulb, .bd-hlampo .bd-bulb {
  --u: 4px; --bd-pm-li: var(--bd-lamp-glass); --bd-pm-fl: var(--bd-lamp);
  position: absolute; left: 0; bottom: 0; width: calc(var(--u) * 7); height: calc(var(--u) * 8); opacity: 0; transition: opacity 1.2s var(--bd-ease);
  background:
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 2) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fl) 0 0) calc(var(--u) * 3) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 4) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 2) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-fl) 0 0) calc(var(--u) * 3) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 4) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-pm-li) 0 0) calc(var(--u) * 2) calc(var(--u) * 5) / calc(var(--u) * 3) var(--u) no-repeat;
}
.bd-lamp { position: absolute; top: 28px; left: 50%; z-index: 2; width: 28px; height: 40px; margin-left: -14px; background: linear-gradient(#8a6f3c 0 0) center top / 1px 8px no-repeat; }
.bd-case:not(.bd-lit) .bd-lamp::before, .bd-hero:not(.bd-lit) .bd-hlampo::after { --bd-pm-fr: var(--bd-faint); --bd-pm-wk: var(--bd-faint); }
.bd-lit .bd-bulb { opacity: 1; }
/* lit: the lantern's warm pool round it and on the tree under it, behind the tree */
.bd-cone { position: absolute; inset: 28px 0 16px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--bd-ease);
  background: radial-gradient(42% 40% at 50% 16%, rgba(240, 205, 124, .22), transparent 72%), radial-gradient(44% 14% at 50% 100%, rgba(240, 205, 124, .14), transparent 72%); }
.bd-lit .bd-cone { opacity: 1; }
/* the light rises once with the first answer (1.2 s), in the first 24 cards (the ones the reveal raises, the ones in
   view): the glass and flame alone, the pool already there, so few layers move; a refresh that opens a loan raises it by
   the class alone */
@keyframes bd-lamp-rise { from { opacity: .15; } to { opacity: 1; } }
.bd-reveal .bd-cards > .bd-ci:nth-child(-n+24) .bd-case.bd-lit .bd-bulb, .bd-sheet:not([hidden]) .bd-hero.bd-lit .bd-bulb { animation: bd-lamp-rise 1.2s var(--bd-ease) both; }
/* pinned in this browser: the kit's pinned glyph in brass under the roof, at the right */
.bd-notch { position: absolute; top: 34px; right: 16px; z-index: 2; width: 10px; height: 10px; background: #d1ae68; -webkit-mask: var(--bd-g-pinned) center / 10px 10px no-repeat; mask: var(--bd-g-pinned) center / 10px 10px no-repeat; }
.bd-sprout .bd-ctree { animation: bd-sprout .9s cubic-bezier(.2, .8, .2, 1.1) both; transform-origin: 50% 85%; }
@keyframes bd-sprout { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
/* the specimen tag under the bench (no leader, no pin: the rod over the case is the lantern's alone) */
.bd-tag { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; min-width: 0; padding: 16px 10px 10px; text-align: center; }
/* the tier and the #id: on a desk, the case's top band (night, opaque: over the glass's roof); on a phone, the tag's
   first line */
.bd-tag-hd { position: absolute; top: -176px; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; padding: 0 10px; background: var(--bd-case); color: #ece6d6; }
.bd-tag-hd .bd-tierc { min-width: 0; flex-wrap: nowrap; gap: 6px; font-size: 10.5px; letter-spacing: .1em; color: #ece6d6; white-space: nowrap; }
.bd-tag-hd .bd-tierc > span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* its mark on the night: the case's mint, the night coral, brass */
.bd-tag-hd .bd-tmark { --bd-pm-l: var(--bd-case-mint); --bd-pm-t: #e0785a; --bd-pm-p: #d1ae68; --bd-pm-s: #cdc6b5; --bd-pm-f: #d9a23f; }
.bd-cid { flex: none; font: 400 11px/1 var(--bd-mono); color: #a39b88; }
.bd-tag-nm { max-width: 100%; font: 500 19px/1.2 var(--bd-serif); letter-spacing: -.01em; color: var(--bd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-tag-st { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 6px; min-height: 18px; margin-top: 2px; max-width: 100%; }
.bd-tag-st { align-items: center; gap: 4px 10px; min-height: 20px; margin-top: 4px; }
.bd-tag-st .bd-st { margin: 0; }
.bd-late { font: 500 12px/1.25 var(--bd-mono); color: var(--bd-ink-2); }
.bd-late::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: .12em; background: var(--bd-coral); }
.bd-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 10px; padding: 8px 0 7px; border-top: 1px solid var(--bd-rule-2); border-bottom: 1px solid var(--bd-rule-2); }
.bd-tf { min-width: 0; }
.bd-tf + .bd-tf { border-left: 1px solid var(--bd-rule-2); }
.bd-tf .bd-eng { display: block; margin-bottom: 6px; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; }
.bd-tf b { display: block; font: 500 22px/1 var(--bd-serif); letter-spacing: -.03em; color: var(--bd-mint); text-shadow: var(--bd-glow); font-variant-numeric: lining-nums tabular-nums; }
.bd-tf b.bd-quiet { color: var(--bd-muted); text-shadow: none; }
.bd-tag-chip { display: flex; justify-content: center; max-width: 100%; margin-top: 12px; }
/* the foot: "LAST 7 DAYS" engraved over its seven cells, then "Repaid 18 days ago" on its own line; a week with no
   repayment shows that line alone (no row of empty cells) */
.bd-cfoot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--bd-rule-2); font: 400 11px/1.2 var(--bd-mono); color: var(--bd-muted); text-align: left; }
.bd-r7w { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.bd-r7w:not(:has(i.on)) { display: none; }
.bd-r7w .bd-eng { font-size: 9.5px; letter-spacing: .14em; }
.bd-ago { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the loading cards */
.bd-ci.bd-skel .bd-tag i { display: block; width: 64%; height: 1px; margin-top: 22px; background: var(--bd-rule); }
.bd-ci.bd-skel .bd-tag i.bd-skel-name { width: 48%; margin-top: 14px; }
.bd-ci.bd-skel .bd-case { background: none; }
.bd-ci.bd-skel .bd-case::before { inset: 12px; border: 1px dashed var(--bd-line); background: none; }
.bd-ci.bd-skel .bd-case { box-shadow: none; }
.bd-ci.bd-skel .bd-case::after { display: none; }
.bd-ci.bd-skel .bd-tag-hd { background: none; }

/* ---- the Activity tab (6.10): the answer's last events, newest first; nothing moves between answers but the times.
   From 720 px a table, a row per event (the time, the kind, the tree, the agent, its loan or the kind of line, the
   amount, the transaction); from 1,024 px who joined this week and the defaults beside it ---- */
.bd-actpane { padding-top: 6px; }
.bd-act-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 14px 0 12px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-act-h { display: inline-flex; align-items: center; }
.bd-act-sub { min-height: 1.3em; font: 400 12px/1.3 var(--bd-mono); color: var(--bd-muted); }
.bd-act-f { display: flex; width: fit-content; max-width: 100%; margin: 12px 0; border: 1px solid var(--bd-rule); background: var(--bd-panel); }
.bd-actf { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; padding: 0 12px; border: 0; font: 500 11px/1 var(--bd-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bd-ink-2); cursor: pointer; }
.bd-actf input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bd-actf + .bd-actf { border-left: 1px solid var(--bd-rule); }
.bd-actf:hover { color: var(--bd-ink); background: var(--bd-hover); }
.bd-actf:has(input:checked) { color: var(--bd-ink); background: var(--bd-bg); box-shadow: inset 0 0 0 1px var(--bd-ink); }
.bd-actf:has(input:focus-visible) { outline: 2px solid var(--bd-mint); outline-offset: 2px; }
.bd-act-list { list-style: none; margin: 0; padding: 0; }
/* the tab's rows from 720 px: one line each, a cell per column (board-activity.js wideEl), the heads over them: one
   grid for the heads and every row (subgrids), so each column is as wide as its widest cell, the time first and the
   transaction last, and what room is left stays after the last column, never as a gap between two cells */
.bd-ahead { display: none; }
@media (min-width: 720px) {
  .bd-actpane .bd-act-live { display: grid; grid-template-columns: [time] 7ch [kind] max-content [tree] 34px [who] fit-content(240px) [sub] fit-content(230px) [amt] max-content [tx] max-content [end] minmax(0, 1fr); column-gap: 18px; align-content: start; container: bd-act / inline-size; }
  .bd-actpane .bd-act-live > *, .bd-actpane .bd-act-list > * { grid-column: 1 / -1; }
  .bd-actpane .bd-ahead, .bd-actpane .bd-act-list, .bd-actpane .bd-act-list > .bd-ar { display: grid; grid-template-columns: subgrid; align-items: center; }
  .bd-actpane .bd-ahead { padding: 10px 4px 9px; border-bottom: 1px solid var(--bd-rule); font: 500 10px/1.2 var(--bd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bd-muted); }
  .bd-ahead span:nth-child(6) { text-align: right; }
  .bd-actpane .bd-arw { min-height: 52px; padding: 4px 4px; }
  .bd-actpane .bd-arw .bd-atime { font: 400 12px/1.2 var(--bd-mono); color: var(--bd-muted); white-space: nowrap; }
  .bd-actpane .bd-arw .bd-awho { min-height: 44px; display: flex; align-items: center; overflow: hidden; }
  .bd-actpane .bd-arw .bd-aname { min-width: 0; }
  .bd-actpane .bd-arw .bd-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bd-actpane .bd-arw .bd-asub { font-size: 12.5px; }
  .bd-actpane .bd-arw .bd-aamt { text-align: right; font: 400 13.5px/1.2 var(--bd-mono); white-space: nowrap; }
  .bd-actpane .bd-arw .bd-atx { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; font: 400 12px/1.2 var(--bd-mono); color: var(--bd-ink-2); white-space: nowrap; }
  .bd-actpane .bd-arw .bd-ahash { display: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .bd-actpane .bd-arw .bd-aarr { color: var(--bd-muted); }
  .bd-arw a.bd-atx:hover, .bd-arw a.bd-atx:hover .bd-aarr { color: var(--bd-ink); }
  /* the loading rows: a bar in the kind, agent and amount columns */
  .bd-actpane .bd-act-list > .bd-ar.bd-skel > i:first-child { grid-column: kind; width: 72px; }
  .bd-actpane .bd-act-list > .bd-ar.bd-skel > .bd-tile { grid-column: tree; }
  .bd-actpane .bd-act-list > .bd-ar.bd-skel > i:nth-child(3) { grid-column: who; width: 150px; }
  .bd-actpane .bd-act-list > .bd-ar.bd-skel > i:last-child { grid-column: amt; width: 44px; }
  /* room for the transaction's short hash */
  @container bd-act (min-width: 600px) {
    .bd-actpane .bd-arw .bd-atx { justify-content: flex-start; }
    .bd-actpane .bd-arw .bd-ahash { display: inline; }
  }
}
/* from 1,024 px who joined this week and the defaults stand beside the feed, held under the bars with their own
   scroll, as the live Activity column does beside the Agents tab: the feed at a reading width, the two lists the rest
   (in two or three columns of their own as the room allows) */
@media (min-width: 1024px) {
  .bd-actpane { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 40px; align-items: start; }
  .bd-actpane > :not(.bd-act-side) { grid-column: 1; }
  .bd-act-side { grid-column: 2; grid-row: 1 / -1; position: sticky; top: calc(var(--bd-stick) + 12px); max-height: calc(100vh - var(--bd-stick) - var(--bd-status-h) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-top: 14px; padding: 0 0 12px 28px; border-left: 1px solid var(--bd-rule-2); }
  .bd-act-side .bd-act-more:first-child { margin-top: 0; }
  .bd-act-side .bd-jlist { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.bd-ar { display: grid; grid-template-columns: 112px 34px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid var(--bd-rule-2); }
/* a row's tree: 20 px in its 34 px specimen case */
.bd-ar .bd-tile, .bd-jr .bd-tile { width: 34px; height: 34px; }
.bd-ar .bd-tile img, .bd-jr .bd-tile img { width: 20px; height: 20px; }
/* the kind: its mark, then its word engraved (docs/DESIGN-KIT.md 1, .pk-status.eng), no box, no border: the lantern lit
   for a borrow, the sapling for a repayment (its word green), the sprout for an agent joining, a brass square for a new
   line, the bare tree for a default (its word coral) */
.bd-akind { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--bd-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bd-ink-2); white-space: nowrap; }
.bd-akind::before { vertical-align: 0; }
[data-k="repaid"] .bd-akind { color: var(--bd-mint); }
[data-k="borrowed"] .bd-akind { color: var(--bd-ink); }
[data-k="line"] .bd-akind { color: var(--bd-brass); }
[data-k="line"] .bd-akind::before { background: linear-gradient(var(--bd-pm-brass) 0 0) 4px 5px / 6px 6px no-repeat; }
[data-k="defaulted"] .bd-akind { color: var(--bd-coral); }
.bd-awho { min-width: 0; min-height: 44px; display: grid; align-content: center; gap: 2px; }
.bd-aname { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.bd-awho:hover .bd-nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-asub { font: 400 12px/1.2 var(--bd-mono); color: var(--bd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-aright { display: grid; justify-items: end; align-content: center; gap: 3px; min-height: 44px; min-width: 44px; font: 400 13px/1.2 var(--bd-mono); color: var(--bd-ink); }
.bd-aamt { font-weight: 400; color: var(--bd-ink); }
.bd-atime { font-size: 11.5px; color: var(--bd-muted); }
a.bd-aright .bd-atime { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.bd-aright:hover .bd-atime { color: var(--bd-ink); }
.bd-act-empty { padding: 18px 0; font-size: 14px; color: var(--bd-muted); }
.bd-act-foot { padding: 14px 0 8px; font-size: 12.5px; color: var(--bd-muted); }
/* a list held still (the pointer over it, or the focus in it): the new events wait behind "Paused · {n} new" */
.bd-act-live { position: relative; }
.bd-act-list:focus { outline: none; }
.bd-paused { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; width: fit-content; margin: 8px auto; padding: 4px 8px 4px 12px; background: var(--bd-panel); border: 1px solid var(--bd-ink); font-size: 13px; color: var(--bd-ink); white-space: nowrap; }
.bd-paused > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: .12em; background: var(--bd-mint); }
.bd-paused .bd-textbtn { min-height: 28px; font-size: 13px; }
/* a new event lands: 400 ms down and in (none under reduced motion); a repayment lights its agent's tree once, 1.2 s,
   opacity alone, no ring, no scale (the class keeps its old name, .bd-ripple) */
.bd-land { animation: bd-land .4s var(--bd-ease) both; }
@keyframes bd-land { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.bd-ri.bd-land { animation-name: bd-land-x; }
@keyframes bd-land-x { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.bd-ripple > .bd-rip { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(46% 46% at 50% 56%, rgba(196, 240, 215, .42), transparent 72%); animation: bd-ripple 1.2s var(--bd-ease) forwards; }
@keyframes bd-ripple { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
/* the Activity tab's two lists: who joined this week, who defaulted; never ordered by a figure */
.bd-act-more { margin-top: 28px; }
.bd-act-more h3 { padding-bottom: 10px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-act-n { margin-left: 6px; font-weight: 400; letter-spacing: .04em; color: var(--bd-muted); }
.bd-jlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.bd-jr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; min-height: 52px; padding: 4px 4px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-jword { font: 500 10.5px/1.2 var(--bd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bd-brass); text-align: right; }
.bd-jr .bd-asub.bd-def { font-family: var(--bd-sans); color: var(--bd-ink); }

/* ---- the live Activity column (6.10), 1,440 px and up: beside the tabs' panes, held under the top bar, its own scroll ---- */
/* (a grid only where the column stands beside the panes: below 1,440 px the panes lay out as before) */
.bd-panes { min-width: 0; }
.bd-acol { display: none; position: sticky; top: var(--bd-stick); flex-direction: column; height: calc(100vh - var(--bd-stick) - var(--bd-status-h)); border-left: 1px solid var(--bd-rule); background: var(--bd-panel); }
.bd-acol .bd-act-head { flex-direction: column; align-items: flex-start; gap: 6px; padding: 13px 16px 10px; border-bottom: 0; }
.bd-acol .bd-act-sub { max-width: 100%; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-acol .bd-act-f { margin: 0 16px 10px; }
.bd-acol .bd-actf { min-width: 0; height: 28px; padding: 0 6px; font-size: 10px; letter-spacing: .04em; }
.bd-acol-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-top: 1px solid var(--bd-rule-2); }
.bd-acol .bd-ar { grid-template-columns: 76px 34px minmax(0, 1fr) auto; gap: 0 7px; padding: 7px 14px 7px 16px; } /* 76 px: the widest kind, its mark and DEFAULTED */
.bd-acol .bd-akind { gap: 5px; font-size: 9.5px; letter-spacing: .02em; }
.bd-acol .bd-nm { font-size: 15px; }
.bd-acol .bd-aright { min-width: 40px; font-size: 12px; }
.bd-acol .bd-act-empty { padding: 16px; font-size: 13px; }
.bd-acol .bd-act-foot { padding: 10px 16px 12px; border-top: 1px solid var(--bd-rule-2); font-size: 12px; }
@media (min-width: 1440px) {
  :root:not([data-tab="activity"]) .bd-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 0 20px; margin-right: -32px; }
  :root:not([data-tab="activity"]) .bd-acol { display: flex; }
  /* four cards across beside the rail and the column at 1,440 px */
  :root:not([data-tab="activity"]) .bd-body { gap: 0 20px; }
  :root:not([data-tab="activity"]) .bd-cards { grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 14px; }
  /* the toolbar on one row beside the column: the search a little narrower, the sort and its direction together */
  :root:not([data-tab="activity"]) .bd-search { flex-basis: 272px; min-width: 272px; }
  :root:not([data-tab="activity"]) .bd-selects { flex: none; flex-wrap: nowrap; }
  :root:not([data-tab="activity"]) #bd-sort { width: 112px; }
}

/* ---- the live ribbon (6.10), 720 to 1,439 px: one line under the strip, newest at the left, clipped at the right ---- */
.bd-rib { display: none; }
.bd-rib-in { max-width: 1680px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 16px; overflow: hidden; }
.bd-rib-lead { flex: none; display: inline-flex; align-items: center; font: 500 10.5px/1 var(--bd-mono); letter-spacing: .16em; color: var(--bd-mint); white-space: nowrap; }
.bd-rib.bd-stale .bd-rib-lead { letter-spacing: 0; color: var(--bd-brass); }
.bd-rib-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 24px; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.bd-ri { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1 var(--bd-mono); color: var(--bd-ink); }
.bd-ri .bd-akind { gap: 6px; font-size: 10px; letter-spacing: .08em; }
.bd-ri-who { display: inline-flex; align-items: baseline; gap: 5px; }
.bd-ri-who:hover .bd-nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-ri .bd-nm { font-size: 15px; max-width: 160px; }
.bd-ri .bd-id { font-size: 11px; }
.bd-ri-t { font-size: 11px; color: var(--bd-muted); }
a.bd-ri-tx .bd-ri-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-rib .bd-paused { position: static; flex: none; margin: 0; padding: 2px 6px 2px 10px; box-shadow: none; font-size: 12px; }
@media (min-width: 720px) and (max-width: 1439px) {
  :root { --bd-rib-h: 36px; }
  .bd-rib { display: block; position: sticky; top: var(--bd-top-h); z-index: 37; height: var(--bd-rib-h); background: var(--bd-panel); border-bottom: 1px solid var(--bd-rule); }
}
/* the Activity tab is the whole feed: no ribbon, no column beside it */
:root[data-tab="activity"] { --bd-rib-h: 0px; }
:root[data-tab="activity"] .bd-rib { display: none; }

/* ---- the Stocks tab (6.12): the hero, its words at the left and the stones at the right in their brass-ticked frame
   (their labels on a night band under the picture, never over it), the view's one picture (the masthead's plate gives
   way on this tab); the shares, then a tile per token ---- */
.bd-stpane { padding-top: 8px; }
.bd-st-wait, .bd-st-none { padding: 30px 0; font: 400 19px/1.4 var(--bd-serif); color: var(--bd-ink); }
.bd-sthero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 18px 36px; align-items: center; padding: 18px 0 20px; }
.bd-sthero .bd-eng { margin-bottom: 12px; }
.bd-sthero-s { margin-top: 14px; }
.bd-st-h { font: 400 36px/1.1 var(--bd-serif); letter-spacing: -.015em; outline: none; text-wrap: balance; }
.bd-sthero-s p { font-size: 15px; line-height: 1.5; color: var(--bd-ink-2); text-wrap: pretty; }
.bd-sthero-s p + p { margin-top: 8px; }
.bd-usecase em { font: italic 400 19px/1.4 var(--bd-serif); color: var(--bd-ink); }
.bd-st-next { display: flex; align-items: center; gap: 8px; }
.bd-stones { margin: 0; border: 1px solid var(--bd-rule); background: var(--bd-case); }
.bd-stones img { display: block; width: 100%; height: auto; aspect-ratio: 3.4 / 1; object-fit: cover; object-position: 50% 62%; }
.bd-stones-l { position: relative; list-style: none; margin: 0; padding: 0; height: 64px; background: linear-gradient(var(--bd-case), var(--bd-case-2)); border-top: 1px solid rgba(209, 174, 104, .35); }
.bd-stones-l li { position: absolute; top: 9px; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; white-space: nowrap; }
.bd-stones-l b { font: 500 24px/1 var(--bd-serif); letter-spacing: -.02em; color: #8fe8c2; }
.bd-stones-l span { font: 500 10.5px/1 var(--bd-mono); letter-spacing: .12em; color: #cdc6b5; }
.bd-backs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 14px 0; border-bottom: 1px solid var(--bd-rule-2); font: 400 12px/1.2 var(--bd-mono); color: var(--bd-ink); }
.bd-bt { display: inline-flex; align-items: center; gap: 7px; }
.bd-backs-r { margin-left: auto; color: var(--bd-muted); }
.bd-tiles { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.bd-tl { display: flex; flex-direction: column; padding: 14px 14px 12px; background: var(--bd-grain), var(--bd-panel); border: 1px solid var(--bd-rule); scroll-margin-top: calc(var(--bd-stick) + 16px); }
.bd-tl:target { border-color: var(--bd-mint); box-shadow: inset 0 0 0 1px var(--bd-mint); }
.bd-tl-pt { border-color: var(--bd-mint); }
.bd-tl-hd { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bd-tl-hd .bd-logo { width: 28px; height: 28px; }
.bd-tl-hd .bd-logo b { font-size: 12px; }
.bd-tl-id { display: grid; gap: 2px; min-width: 0; }
.bd-tl-s { font: 500 12px/1 var(--bd-mono); letter-spacing: .12em; color: var(--bd-ink); }
.bd-tl-n { font: 400 15px/1.2 var(--bd-serif); color: var(--bd-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-tl-hd .bd-stone { width: 11px; height: 18px; }
.bd-tl-p { margin-top: 16px; font: 500 26px/1 var(--bd-serif); letter-spacing: -.02em; color: var(--bd-mint); text-shadow: var(--bd-glow); font-variant-numeric: lining-nums tabular-nums; }
.bd-tl-a { margin-top: 6px; font: 400 11px/1.2 var(--bd-mono); color: var(--bd-muted); }
.bd-tl-a.bd-old { color: var(--bd-brass); }
/* the figure's age, then (a gap only where a neighbour in the row says more) the shares at the tile's foot */
.bd-tl-a { margin-bottom: 14px; }
.bd-tl-next { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--bd-ink-2); }
.bd-tl-hold { align-self: flex-start; margin-top: 10px; font: 500 10.5px/1.2 var(--bd-mono); letter-spacing: .1em; color: var(--bd-ink-2); }
/* one style for one status: "Takes no new line" as the hold's dashed word */
.bd-tl-cap { text-transform: uppercase; }
.bd-tl-f { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bd-rule-2); font: 400 11.5px/1.2 var(--bd-mono); color: var(--bd-muted); }
.bd-tl-f span:first-child { color: var(--bd-mint); }
/* the Stock Tokens with no feed yet, after the tiles (board-stocks-tab.js): one line each, its logo, symbol and name */
.bd-more { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--bd-rule-2); }
.bd-more-s { margin-top: 8px; max-width: 46em; font: 400 15px/1.45 var(--bd-serif); color: var(--bd-ink-2); }
.bd-more-l { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 18px; }
.bd-mt { display: grid; grid-template-columns: 20px 48px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--bd-rule-2); }
.bd-mt b { font: 500 12px/1 var(--bd-mono); letter-spacing: .12em; color: var(--bd-ink); }
.bd-mt span { font: 400 14px/1.2 var(--bd-serif); color: var(--bd-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-st-go { margin: 20px 0 6px; max-width: 360px; }

/* ---- the states and the end ---- */
.bd-end { padding: 16px 0 6px; font-size: 13px; color: var(--bd-muted); text-align: center; }
.bd-btn svg { width: 14px; height: 14px; }

/* ---- the footer ---- */
.bd-foot { border-top: 1px solid var(--bd-rule); margin-top: 18px; }
.bd-foot-in { max-width: 1680px; margin: 0 auto; padding: 22px 32px 34px; display: grid; gap: 8px; font-size: 13px; color: var(--bd-muted); }
.bd-foot-read { color: var(--bd-ink-2); }
.bd-foot-stock:empty { display: none; }
.bd-foot a { color: var(--bd-ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-foot a:hover { color: var(--bd-ink); }

/* ---- the sheet: a 540 px panel from the right, over the table, no backdrop (the list stays usable) ---- */
.bd-sheet { position: fixed; z-index: 50; top: var(--bd-top-h); right: 0; bottom: var(--bd-status-h); width: min(540px, 100vw - 32px); display: flex; flex-direction: column; background: var(--bd-grain), var(--bd-bg); border-left: 1px solid var(--bd-rule); box-shadow: -24px 0 48px -24px var(--bd-shade); animation: bd-in .28s var(--bd-ease); }
@keyframes bd-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* closing: out the way it came, a little quicker (240 ms) */
.bd-sheet.bd-out { animation: bd-out .24s var(--bd-ease) forwards; pointer-events: none; }
@keyframes bd-out { from { transform: none; opacity: 1; } to { transform: translateX(24px); opacity: 0; } }
/* the warm shade behind the sheet (a desk's; a phone's sheet is the whole screen): the page under it still answers a
   click, and a click beside the sheet closes it (board.js) */
.bd-scrim { position: fixed; z-index: 49; top: var(--bd-top-h); left: 0; right: 0; bottom: 0; background: var(--bd-scrim); pointer-events: none; animation: bd-fade .2s var(--bd-ease); }
.bd-sh-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--bd-line); }
.bd-sh-kicker { color: var(--bd-muted); }
.bd-sh-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 28px; }
.bd-sh-wait { color: var(--bd-muted); }
/* the bench (docs/BOARD-SPEC-V15.md 6.11), in the case's night (docs/DESIGN-KIT.md 3), a brass hairline edge: the tree
   about half the plate's height in its glass case (a brass hairline standing on the bench); at the left what backs its
   line, engraved in brass over its glyph on the bench (and, where no stock token backs it, the vault stone unlit), at
   the right the lamp on its stand. Lit while a loan is open: the lamp's light falls from the top and pools on the bench.
   No boxes on the labels, no tier tag (the score row says the tier) */
.bd-hero { position: relative; height: 220px; overflow: hidden; background: radial-gradient(80% 80% at 50% 45%, var(--bd-case-2), var(--bd-case)); box-shadow: inset 0 0 0 1px var(--bd-case-edge); }
.bd-hero.bd-lit { background: radial-gradient(90% 60% at 50% 0%, var(--bd-case-lamp), transparent 70%), radial-gradient(80% 80% at 50% 45%, var(--bd-case-2), var(--bd-case)); }
.bd-hero canvas { position: absolute; left: 50%; z-index: 2; display: block; transform: translateX(-50%); }
.bd-hcase { position: absolute; left: 50%; bottom: 20px; width: 210px; height: 194px; margin-left: -105px; border: 1px solid rgba(209, 174, 104, .28); border-top-color: var(--bd-case-edge); border-bottom: 0;
  background: linear-gradient(105deg, rgba(236, 230, 214, .045), transparent 32%); }
.bd-hbench { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 20px; background: linear-gradient(180deg, rgba(209, 174, 104, .1), transparent 80%); border-top: 1px solid var(--bd-case-edge); }
.bd-hero.bd-lit .bd-hbench { background: radial-gradient(22% 140% at 87% 0%, rgba(240, 205, 124, .26), transparent 75%), linear-gradient(180deg, rgba(209, 174, 104, .1), transparent 80%); }
.bd-hstand { position: absolute; bottom: 20px; z-index: 3; display: flex; flex-direction: column; align-items: center; width: 116px; margin-left: -58px; }
.bd-hobj { left: 14%; }
.bd-hlamp { left: 86%; }
.bd-htag { display: grid; justify-items: center; gap: 3px; max-width: 100%; text-align: center; }
.bd-htag b { font: 500 10px/1.25 var(--bd-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bd-brass); overflow-wrap: anywhere; }
.bd-htag span { font: 400 11px/1.2 var(--bd-mono); color: var(--bd-ink-2); }
.bd-htag span:empty { display: none; }
.bd-hlead { display: block; height: 8px; }
.bd-hthing { display: grid; place-items: end center; height: 40px; padding-top: 4px; }
.bd-hthing svg { width: 36px; height: 36px; shape-rendering: crispEdges; }
.bd-hthing .bd-stone { width: 18px; height: 30px; border-width: 1.5px; }
.bd-coin { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--bd-brass); background: var(--bd-case); }
.bd-coin svg { width: 22px; height: 22px; }
.bd-plinth { display: block; width: 34px; height: 12px; border: 1px dashed var(--bd-case-edge); border-bottom: 0; }
/* a line no stock token backs: the vault stone unlit on the bench, its words engraved under it */
.bd-hnostock { position: absolute; left: calc(14% + 34px); bottom: 3px; z-index: 3; display: grid; justify-items: center; gap: 4px; font: 500 9.5px/1 var(--bd-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bd-muted); white-space: nowrap; }
.bd-hstone { order: -1; width: 20px; height: 20px; color: var(--bd-case-dim); shape-rendering: crispEdges; }
/* the lamp on its stand: lit while a loan is open, the bench warm under it */
.bd-hlampo { position: relative; display: block; width: 28px; height: 46px; margin-top: 4px; }
.bd-hlampo::before { content: ""; position: absolute; left: 13.4px; top: 32px; width: 1.25px; height: 14px; background: rgba(209, 174, 104, .75); }
.bd-hlampo::after, .bd-hlampo .bd-bulb { top: 0; bottom: auto; }
/* lit: a warm halo round the lamp, falling on the bench under it */
.bd-hlamp::before { content: ""; position: absolute; left: 50%; bottom: -20px; z-index: -1; width: 150px; height: 110px; margin-left: -75px; pointer-events: none; opacity: 0; transition: opacity .6s var(--bd-ease);
  background: radial-gradient(36% 44% at 50% 52%, rgba(234, 211, 156, .34), rgba(234, 211, 156, .09) 55%, transparent 76%); }
.bd-hero.bd-lit .bd-hlamp::before { opacity: 1; }
.bd-sh-h { margin-top: 16px; font: 400 32px/1.1 var(--bd-serif); letter-spacing: -.01em; overflow-wrap: anywhere; outline: none; }
/* no such agent, or the page's one state line (no answer): a quieter heading, then the way back */
.bd-sh-unknown .bd-sh-h { font-size: 24px; line-height: 1.3; }
.bd-sh-unknown .bd-btn { margin-top: 20px; }
.bd-sh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 13.5px; color: var(--bd-ink-2); }
.bd-sh-owner { display: inline-flex; align-items: center; gap: 6px; }
.bd-sh-owner a { font-size: 13px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-copy { width: 28px; height: 28px; }
.bd-copy svg { width: 10px; height: 10px; }
/* its status: the mark, then the word (no capsule, no tint) */
.bd-statuspill { display: inline-flex; margin-top: 0; }
.bd-sh-xh { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-sh-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bd-rule-2); }
.bd-sh-sec h3 { margin-bottom: 12px; }
.bd-sh-score { display: grid; gap: 2px; }
.bd-sh-scorerow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bd-sh-scorerow b { font: 500 44px/1 var(--bd-serif); letter-spacing: -.035em; color: var(--bd-mint); text-shadow: var(--bd-glow); font-variant-numeric: lining-nums tabular-nums; }
.bd-sh-scorerow b.bd-def { color: var(--bd-ink-2); text-shadow: none; }
.bd-sh-scorerow b.bd-none { color: var(--bd-muted); }
.bd-sh-of { font: 500 13px var(--bd-mono); color: var(--bd-muted); }
.bd-sh-tierword { font-size: 14px; color: var(--bd-ink-2); }
.bd-sh-tierword.bd-def { color: var(--bd-ink); }
.bd-rungs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.bd-rungs li { min-width: 0; font-size: 11.5px; line-height: 1.25; color: var(--bd-muted); overflow-wrap: anywhere; }
.bd-rungs i { display: block; height: 5px; margin-bottom: 6px; background: var(--bd-panel-2); border: 1px solid var(--bd-rule-2); }
.bd-rungs li.on i { background: var(--bd-mint); border-color: var(--bd-mint); }
.bd-rungs li.now { color: var(--bd-ink); font-weight: 500; }
.bd-sh-next { margin-top: 16px; font-size: 14px; color: var(--bd-ink-2); }
.bd-needs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bd-needs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding-left: 14px; position: relative; font-size: 13px; color: var(--bd-ink-2); }
.bd-needs li::before { content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; border: 1px solid var(--bd-rule-2); background: var(--bd-panel-2); }
.bd-needs li.bd-met::before { background: var(--bd-mint); border-color: var(--bd-mint); }
.bd-needs b { font: 400 13px var(--bd-mono); color: var(--bd-ink); white-space: nowrap; }
.bd-parts { display: grid; gap: 14px; margin-bottom: 14px; }
.bd-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.bd-part b { font: 500 14px var(--bd-sans); }
.bd-part span.bd-pts { font: 400 13px var(--bd-mono); color: var(--bd-ink-2); }
.bd-part .bd-track { grid-column: 1 / -1; height: 5px; background: var(--bd-panel-2); border: 1px solid var(--bd-rule-2); position: relative; }
.bd-part .bd-track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bd-mint); }
.bd-part p { grid-column: 1 / -1; font-size: 13px; color: var(--bd-muted); }
.bd-sh-small { font-size: 13px; color: var(--bd-muted); margin-top: 6px; }
.bd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.bd-facts div { min-width: 0; }
.bd-facts dt { font-size: 10px; letter-spacing: .16em; color: var(--bd-muted); }
.bd-facts dd { margin: 3px 0 0; font: 500 20px/1.2 var(--bd-serif); color: var(--bd-ink); font-variant-numeric: lining-nums tabular-nums; }
.bd-facts dd.bd-coral { color: var(--bd-ink); }
.bd-facts .bd-help { grid-column: 1 / -1; margin-top: -4px; font-size: 12.5px; color: var(--bd-muted); }
.bd-sh-backer { margin-top: 12px; font-size: 14px; }
/* what backs this line: three layers, each with its glyph */
.bd-layers { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bd-rule-2); background: var(--bd-panel); }
.bd-layer { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; padding: 14px 16px; }
.bd-layer + .bd-layer { border-top: 1px solid var(--bd-rule-2); }
.bd-layer { align-items: start; }
/* its glyph in a 34 px specimen case (docs/DESIGN-KIT.md 3): night and a brass edge; lit (the case mint, the lamp's
   light at its top) when it is on this line, unlit (the case dim) when not; one colour in it. 12-grid glyphs at 24 px,
   the 10-grid lantern and stone at 20 */
.bd-lglyph { --bd-g-1: currentColor; --bd-g-3: currentColor; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 2px; color: var(--bd-case-dim); background: var(--bd-tile); box-shadow: inset 0 0 0 1px var(--bd-case-edge); }
.bd-lglyph.bd-lit { color: var(--bd-case-mint); background: var(--bd-tile-lit); }
.bd-lglyph svg, .bd-lglyph .bd-glyph { width: 24px; height: 24px; color: inherit; shape-rendering: crispEdges; }
.bd-lglyph .bd-g10 { width: 20px; height: 20px; }
.bd-lbody { min-width: 0; }
.bd-lh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.bd-lh b { font: 500 19px/1.2 var(--bd-serif); color: var(--bd-ink); }
.bd-lfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.bd-lfacts dd { color: var(--bd-mint); font-size: 24px; text-shadow: var(--bd-glow); }
.bd-lp { font-size: 14px; color: var(--bd-ink-2); }
.bd-lp p + p { margin-top: 4px; }
.bd-lp .bd-lnote { font-size: 13px; color: var(--bd-muted); }
.bd-layer .bd-sh-backer { margin-top: 6px; }
/* the 7 days of loans repaid, each against this agent's own busiest day; the counts over the bars, the days under */
.bd-r7c { margin: 18px 0 0; }
.bd-r7c figcaption { margin-bottom: 8px; }
.bd-r7c ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bd-r7c li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 92px; }
.bd-r7c b { font: 400 11px/1 var(--bd-mono); color: var(--bd-ink); margin-bottom: 4px; }
.bd-r7c b.bd-quiet { color: var(--bd-muted); }
.bd-r7c i { display: block; width: 46%; max-width: 22px; background: var(--bd-rule); }
.bd-r7c i.on { background: var(--bd-mint); }
.bd-r7c p { font-size: 13px; color: var(--bd-muted); }
.bd-r7c span { align-self: stretch; padding-top: 5px; border-top: 1px solid var(--bd-rule); font: 400 10.5px/1 var(--bd-mono); color: var(--bd-muted); text-align: center; white-space: nowrap; }
/* the owner's score next to the owner (SITE_ETHOS builds only: BOARD-SPEC.md 7.6) */
.bd-ethos { font-size: 13px; color: var(--bd-ink-2); }
.bd-ethos::before { content: "·"; margin: 0 8px 0 2px; color: var(--bd-muted); }
.bd-ethos a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-sh-backer a { color: var(--bd-mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-sh-gobar { display: none; }
.bd-noterow { display: grid; gap: 3px; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--bd-rule); font-size: 13px; color: var(--bd-muted); }
.bd-noterow b { font: 500 14px var(--bd-sans); color: var(--bd-ink-2); }
.bd-sh-pinrow { margin-top: 14px; }
.bd-sh-pinrow .bd-btn.bd-on { border-color: var(--bd-mint); color: var(--bd-mint); }
.bd-pays { list-style: none; margin: 0; padding: 0; }
.bd-pays li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bd-rule-2); font-size: 14px; }
.bd-pays a { font: 400 13px var(--bd-mono); color: var(--bd-ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-pays + .bd-sh-small:empty { display: none; }
.bd-card { border: 1px solid var(--bd-rule-2); background: var(--bd-tile); aspect-ratio: 1200 / 630; margin-bottom: 12px; }
.bd-card img { display: block; width: 100%; height: auto; }
.bd-shareacts { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-btn-x svg { width: 13px; height: 13px; }
.bd-sh-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--bd-rule-2); font-size: 12.5px; color: var(--bd-muted); }
.bd-sh-foot a { color: var(--bd-ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-how .bd-how-sub { margin-top: 6px; font: 400 17px/1.4 var(--bd-serif); color: var(--bd-ink-2); }
.bd-how section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bd-rule-2); }
.bd-how h3 { margin-bottom: 6px; font: 500 14.5px var(--bd-sans); }
.bd-how p { font-size: 14px; color: var(--bd-ink-2); }
.bd-how-tiers { margin: 0 0 8px; display: grid; gap: 6px; }
.bd-how-tiers div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.bd-how-tiers dt { padding-top: 2px; font: 500 10.5px/1.4 var(--bd-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bd-ink); }
.bd-how-tiers dd { margin: 0; color: var(--bd-ink-2); }
/* How's examples (6.13): the planter with the same young tree, no name, no id, no figure; a dashed frame, EXAMPLE on it */
.bd-exs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bd-ex { position: relative; display: flex; flex-direction: column; border: 1px dashed var(--bd-line); background: var(--bd-panel); }
.bd-ex .bd-case { height: 128px; }
.bd-ex-k { position: absolute; top: 8px; left: 10px; z-index: 2; font-size: 9.5px; }
.bd-ex-tag { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px 14px; }
.bd-ex .bd-tag-chip { margin: 0; justify-content: flex-start; }
.bd-ex-line { font-size: 13.5px; line-height: 1.45; color: var(--bd-ink-2); text-wrap: pretty; }
.bd-keys { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; color: var(--bd-ink-2); }
.bd-grow { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bd-grow li { display: grid; justify-items: center; gap: 6px; font: 500 10px/1.25 var(--bd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bd-ink-2); text-align: center; }

/* ---- the phone's "Sort and filter" sheet ---- */
.bd-filters { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: var(--bd-scrim); }
.bd-filters-in { width: 100%; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; background: var(--bd-grain), var(--bd-bg); border-top: 1px solid var(--bd-line); padding: 8px 16px 22px; animation: bd-up .26s var(--bd-ease); }
/* the sheet's brass grab bar (the kit's phone sheet) */
.bd-filters-in::before { content: ""; display: block; width: 24px; height: 3px; margin: 0 auto 8px; background: var(--bd-line); }
@keyframes bd-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.bd-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bd-filters-head h2 { font: 400 24px var(--bd-serif); outline: none; }
.bd-radios { border: 0; margin: 0 0 12px; padding: 0; }
.bd-radios legend { padding: 0; margin-bottom: 6px; font-size: 13px; color: var(--bd-muted); }
.bd-radios label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; border-bottom: 1px solid var(--bd-rule-2); }
/* the radio as the kit draws one (as the site's, styles.css): a square on the field's paper in a hairline, the 8 px mint
   square in it when picked; never the browser's round dot */
.bd-radios input { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; box-sizing: border-box; width: 18px; height: 18px; margin: 0; padding: 0; border: 1px solid var(--bd-field-edge); border-radius: 0; background: var(--bd-field); cursor: pointer; }
.bd-radios input::before { content: ""; width: 8px; height: 8px; }
.bd-radios input:checked { border-color: var(--bd-ink); }
.bd-radios input:checked::before { background: var(--bd-mint); }
@media (forced-colors: active) { .bd-radios input:checked::before { background: CanvasText; forced-color-adjust: none; } }
.bd-radios .bd-textbtn { margin-top: 8px; min-height: 36px; }
.bd-radios .bd-textbtn[aria-pressed="true"]::after { content: " (on)"; }
.bd-fsel { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--bd-muted); }
/* 16 px: under it a phone zooms the page in when one is tapped (the search field is 16 px on a phone too) */
.bd-fsel select { width: 100%; max-width: none; height: 44px; font-size: 16px; }
.bd-filters-acts { position: sticky; bottom: -22px; display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 18px -16px -22px; padding: 12px 16px 16px; background: var(--bd-bg); border-top: 1px solid var(--bd-rule-2); }
.bd-filters-acts .bd-btn { min-height: 46px; }

.bd-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translateX(-50%); padding: 10px 16px 12px; background: var(--bd-ink); color: var(--bd-bg); font: 500 14px var(--bd-sans); box-shadow: inset 0 -4px 0 var(--bd-ink), inset 0 -5px 0 var(--bd-pm-brass); opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100vw - 32px); }
.bd-toast.bd-show { opacity: 1; }

@media (max-width: 999px) {
  .bd-closest { min-height: 42px; }
}
@media (max-width: 1319px) {
  .bd-search { flex-basis: 280px; }
  .bd-sel select { width: 136px; }
  #bd-sort { width: 128px; }
}
/* the figures a little tighter under 1,440 px, so the pulse keeps its room beside them */
@media (min-width: 1180px) and (max-width: 1439px) {
  /* (the first column holds "116 joined this week" from the first paint: nothing moves as it comes in) */
  .bd-figs { grid-template-columns: minmax(146px, auto) minmax(128px, auto) minmax(168px, auto) minmax(146px, auto) minmax(140px, auto) minmax(108px, auto); }
  .bd-fig { padding: 13px 14px 12px; }
  .bd-figs dt { letter-spacing: .14em; }
  .bd-fv { font-size: 26px; }
  /* a note may take two lines here: their room is kept, so a note coming in moves nothing */
  .bd-fn { white-space: normal; min-height: 32px; }
}
/* ---- tablet (720 to 1179 px): the rail goes to "Sort and filter", the wide columns to the sheet; the plate beside the
   title from 1,000 px, above it under; no status bar (the block is in the top bar) ---- */
@media (max-width: 1179px) {
  :root { --bd-stick: calc(var(--bd-top-h) + var(--bd-rib-h)); --bd-status-h: 0px; }
  .bd-status { display: none; }
  .bd-top-in { gap: 22px; }
  /* no answer: the page's one line says it all, so the top bar keeps to the mark, the tabs and the buttons (never a
     status cut short) */
  :root:is([data-bd-state="off"], [data-bd-state="starting"], [data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) .bd-block { display: none; }
  :root:is([data-bd-state="off"], [data-bd-state="starting"], [data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) .bd-top .right { margin-left: auto; }
  .bd-tabs { gap: 18px; }
  .bd-tab { font-size: 10.5px; letter-spacing: .12em; }
  .bd-ss-lead { width: auto; }
  .bd-ss-sub { display: none; }
  .bd-mast h1 { font-size: 36px; }
  .bd-sub { font-size: 16px; }
  .bd-mast-f { grid-template-columns: minmax(0, 1fr); }
  .bd-figs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* a label in two lines keeps its figure on the row's line: the room goes under the label */
  .bd-fig { display: flex; flex-direction: column; padding: 10px 12px 9px; }
  .bd-figs dt { flex: 1 0 auto; }
  .bd-fv { font-size: 23px; }
  .bd-figs dt, .bd-fn { white-space: normal; }
  .bd-fn { min-height: 34px; }
  .bd-pulse { border-left: 0; border-top: 1px solid var(--bd-rule-2); }
  .bd-body { display: block; }
  .bd-rail, .bd-railbtn { display: none; }
  .bd-filterbtn { display: inline-flex; }
  .bd-tools { flex-wrap: wrap; }
  .bd-filters-in { max-width: 600px; margin: 0 auto; }
  .bd-sthero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .bd-mast { grid-template-columns: minmax(0, 1fr); grid-template-areas: "p" "t" "f"; gap: 14px; }
  .bd-plate { height: 120px; }
}
@media (max-width: 1023px) {
  .bd-how-l { display: none; }
  /* the views as their three icons (their words read out) */
  .bd-view { justify-content: center; width: 40px; padding: 0; }
  .bd-view span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1024px) { .bd-how-s { display: none; } }
/* 720 to 767 px: "How" as its "?" ring alone (its name read out), so "Live · 43 s" keeps its room whole */
@media (min-width: 720px) and (max-width: 767px) { .bd-top-in { gap: 18px; } .bd-top .bd-how-s { display: none; } .bd-top .bd-howlink { width: 34px; padding: 0; } }
@media (min-width: 720px) and (max-width: 899px) {
  .bd-word-b { display: none; }
  /* "Go mode" alone, as a phone has it, so the tabs, the block status and the buttons keep to one line */
  .bd-go-long { display: none; } .bd-go-short { display: inline; }
  /* the buttons 8 px apart, How a little tighter (its 16 px "?" and its word 9 px in from its edge), so the tabs, the
     status and the buttons keep to one line with "Live · 43 s" whole */
  .bd-top .right { gap: 8px; }
  .bd-top .bd-howlink { padding: 0 9px; gap: 6px; } .bd-top .bd-how-q { width: 16px; height: 16px; }
}
@media (max-width: 899px) {
  /* the brand's word (on a tablet) and the block's word give the tabs their room */
  .bd-bw { display: none; }
  /* "Sort and filter" as its icon and its count (its words read out), so the toolbar keeps to one row */
  .bd-filterbtn { justify-content: center; min-width: 44px; padding: 0 10px; gap: 6px; }
  .bd-filterbtn svg { display: block; }
  .bd-filterbtn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bd-search { flex-basis: 220px; }
  .bd-search input { min-width: 0; }
  .bd-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bd-fig:nth-child(4) { border-left: 0; }
  .bd-fig:nth-child(n+4) { border-top: 1px solid var(--bd-rule-2); }
}

/* ---- phone (under 720 px; 16 px gutters; no horizontal scroll): the top bar scrolls away; the tabs and the tools are
   one opaque sticky stack of 97 px ---- */
@media (max-width: 719px) {
  :root { --bd-top-h: 54px; --bd-ss-h: 45px; --bd-stick: 45px; --bd-tools-h: 52px; }
  .bd-top { position: relative; }
  .bd-top-in { padding: 0 16px; gap: 10px; }
  .bd-tabs { display: none; }
  .bd-block { margin-left: auto; min-width: 15ch; font-size: 11.5px; }
  .bd-top .right { gap: 8px; }
  .bd .prefs-btn { width: 30px; height: 30px; }
  .bd-go-long { display: none; } .bd-go-short { display: inline; }
  .bd-gobtn { height: 32px; padding: 0 11px; font-size: 13.5px; }
  .bd-me-name { display: none; }
  .bd-me-btn { height: 32px; gap: 6px; padding: 0 9px 0 2px; }
  .bd-word { font-size: 21px; }
  .bd-ss-in { padding: 0; }
  .bd-ss-lead { display: none; }
  .bd-ssi { padding: 0 14px; }
  .bd-ssi:first-child { padding-left: 16px; }
  .bd-ss-pin .bd-ssi { padding-right: 16px; }
  .bd-ssi-a { font-size: 10.5px; }
  .bd-main { padding: 0 16px 20px; }
  .bd-mast { gap: 8px; padding: 10px 0 12px; }
  /* the bench whole at the phone's width, at the plate's own shape: nothing of it cropped, and the first cards in view */
  .bd-plate { height: auto; aspect-ratio: 960 / 213; }
  .bd-kick { margin-bottom: 7px; }
  .bd-since { min-height: 36px; margin: 0 0 12px; font-size: 12.5px; line-height: 18px; }
  .bd-since .bd-textbtn { font-size: 12.5px; line-height: 18px; }
  .bd-mast h1 { font-size: 31px; }
  .bd-sub { margin-top: 5px; font-size: 15.5px; line-height: 1.36; }
  .bd-fig { padding: 8px 10px 8px; }
  .bd-fv { margin-top: 4px !important; font-size: 21px; }
  /* the figures alone on a phone, as the mockup's phone has them (their notes are a desk's: the Activity tab and the
     filters carry who joined, who repaid and who borrows) */
  .bd-fn { display: none; }
  .bd-figs dt { font-size: 10.5px; letter-spacing: .08em; }
  .bd-pulse { padding: 9px 10px 8px; }
  .bd-pulse-ticks { height: 22px; margin-top: 7px; }
  /* the meta row: the count and the key's toggle, then the sort sentence */
  .bd-meta-l { order: 1; }
  .bd-keybtn { order: 2; margin-left: auto; }
  .bd-sortline { order: 3; flex-basis: 100%; margin-left: 0 !important; }
  /* the sticky stack: the tabs (44 px), then the tools (52 px), on the page's own ground */
  /* the four spread evenly: the same room between the words as at either end, so the row sits even on the page; How
     is a link of another kind, marked by its "?" ring as on a desk, not by a place of its own */
  .bd-ptabs { position: sticky; top: 0; z-index: 31; display: flex; justify-content: space-evenly; height: 45px; margin: 0 -16px; padding: 0; background: var(--bd-bg); border-bottom: 1px solid var(--bd-rule-2); }
  .bd-ptabs .bd-tab { justify-content: center; min-width: 44px; padding: 0 6px; }
  .bd-ptabs .bd-how-q { width: 10px; height: 10px; margin-right: 1px; color: var(--bd-brass); }
  .bd-tools { flex-wrap: nowrap; gap: 8px; height: 52px; min-height: 0; padding: 4px 0; }
  html { scroll-padding-top: calc(var(--bd-stick) + var(--bd-tools-h) + 8px); }
  .bd-search { flex: 1 1 auto; min-width: 0; }
  .bd-search input { height: 44px; padding-right: 10px; font-size: 16px; }
  .bd-kbd { display: none; }
  .bd-selects { display: none; }
  .bd-filterbtn { justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; }
  .bd-filterbtn svg { display: block; }
  .bd-filterbtn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #bd-filterbtn-k { font: 500 11px/1 var(--bd-mono); }
  #bd-filterbtn-k:not(:empty) { margin-left: -4px; }
  .bd-meta { padding: 10px 0 8px; }
  .bd-sortline { font-size: 12.5px; }
  .bd-table { display: none; }
  .bd-foot-in { padding: 18px 16px 28px; }
  /* the sheet: full screen, a modal dialog; Back closes it */
  .bd-sheet { top: 0; width: 100vw; border-left: 0; box-shadow: none; animation-name: bd-up; }
  .bd-sh-bar { padding: 0 12px 0 16px; }
  .bd-sh-scroll { padding: 16px 16px 28px; }
  .bd-hero { height: 168px; }
  .bd-hcase { bottom: 14px; width: 142px; height: 144px; margin-left: -71px; }
  .bd-hbench { height: 14px; }
  .bd-hstand { bottom: 14px; width: 92px; margin-left: -46px; }
  .bd-hobj { left: 13%; }
  .bd-hlamp { left: 87%; }
  .bd-htag { padding: 5px 6px; }
  .bd-htag b { font-size: 9.5px; letter-spacing: .08em; }
  .bd-htag span { font-size: 10px; }
  .bd-hlead { height: 10px; }
  .bd-hthing { height: 34px; }
  .bd-hthing svg, .bd-coin { width: 28px; height: 28px; }
  .bd-coin svg { width: 18px; height: 18px; }
  .bd-hnostock { display: none; }
  .bd-hlampo { height: 36px; }
  .bd-hlampo::before { height: 26px; }
  .bd-lfacts dd { font-size: 21px; }
  /* "Open in Go mode" kept at the bottom of the phone's sheet */
  .bd-sh-gobar:not([hidden]) { display: block; flex: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bd-bg); border-top: 1px solid var(--bd-rule-2); }
  .bd-sh-gobar .bd-lead { min-height: 46px; }
  .bd-sh-h { font-size: 28px; }
  .bd-filters-acts .bd-btn { white-space: normal; }
  /* Activity: the kind narrower, the amount over the time */
  .bd-ar { grid-template-columns: 92px 34px minmax(0, 1fr) auto; gap: 0 9px; }
  .bd-akind { gap: 6px; font-size: 10px; letter-spacing: .04em; }
  /* Stocks: the hero in one column, the stones labelled with their shares alone */
  .bd-st-h { font-size: 28px; }
  .bd-usecase em { font-size: 17px; }
  .bd-stones img { aspect-ratio: 2 / 1; }
  .bd-tl { min-height: 0; }
  .bd-tl-f { margin-top: 14px; }
  /* the five filters on one line down to 360 px */
  .bd-actf { padding: 0 8px; letter-spacing: .04em; }
  .bd-stones-l { height: 44px; }
  .bd-stones-l b { font-size: 18px; }
  .bd-stones-l span { display: none; }
  .bd-backs-r { margin-left: 0; }
}
/* ---- phone cards (6.9): horizontal, 194 px; the case a 112 px square at the left (its lamp at its top, the tree about
   half its height), the tier, name, its status (the lantern and "Borrowing $5" or "Settled up", as on a desk), figures,
   chip and foot on the right. The view toggle as three icons beside "Sort and filter" ---- */
@media (max-width: 719px) {
  .bd-views { order: 2; }
  .bd-view { justify-content: center; width: 44px; height: 44px; padding: 0; }
  .bd-view span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bd-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bd-key { gap: 6px 14px; padding: 8px 12px; font-size: 12px; }
  .bd-key .bd-key-dot { display: none; }
  .bd-ci { contain-intrinsic-size: auto 194px; }
  .bd-plant { flex-direction: row; align-items: flex-start; height: 194px; }
  .bd-case { width: 112px; height: 112px; margin: 10px 0 0 10px; }
  .bd-case::before { inset: 26px 8px 12px; }
  .bd-case::after { height: 12px; }
  .bd-lamp { top: 0; width: 22px; height: 30px; margin-left: -11px; background-size: 1px 6px; }
  .bd-lamp::before, .bd-lamp .bd-bulb { --u: 3px; }
  .bd-cone { inset: 0 0 12px; }
  .bd-notch { top: 6px; right: 6px; }
  .bd-tag { align-items: stretch; padding: 9px 12px 8px; text-align: left; }
  .bd-tag-hd { position: static; height: auto; padding: 0; justify-content: flex-start; background: none; color: var(--bd-ink); }
  .bd-tag-hd .bd-tierc { color: var(--bd-ink); }
  .bd-tag-hd .bd-tmark { --bd-pm-l: var(--bd-mint); --bd-pm-t: var(--bd-coral); --bd-pm-p: var(--bd-pm-brass); --bd-pm-s: var(--bd-ink-2); --bd-pm-f: var(--bd-lamp-glass); }
  .bd-cid { color: var(--bd-muted); }
  .bd-tag-nm { margin-top: 3px; font-size: 18px; }
  .bd-tag-st { justify-content: flex-start; min-height: 18px; margin-top: 3px; }
  .bd-trio { margin-top: 5px; padding: 5px 0 0; border-bottom: 0; }
  .bd-tf { padding-left: 8px; }
  .bd-tf:first-child { padding-left: 0; }
  .bd-tf .bd-eng { margin-bottom: 4px; }
  .bd-tf b { font-size: 19px; }
  .bd-tag-chip { justify-content: flex-start; margin-top: 7px; }
  .bd-cfoot { padding-top: 6px; }
  .bd-ci.bd-skel .bd-tag i { margin-top: 10px; }
  /* Compact on a phone: line 1 only, 48 px, a 20 px tree in its 34 px case */
  .bd-plist.bd-compact .bd-prow { grid-template-columns: 34px minmax(0, 1fr); min-height: 48px; padding: 6px 2px; }
  .bd-plist.bd-compact .bd-prow .bd-tile { grid-row: auto; }
  .bd-plist.bd-compact .bd-tile { width: 34px; height: 34px; }
  .bd-plist.bd-compact .bd-tile img { width: 20px !important; height: 20px !important; }
  .bd-plist.bd-compact .bd-p2 { display: none; }
  .bd-plist.bd-compact > li { contain-intrinsic-size: auto 49px; }
}
@media (min-width: 720px) {
  .bd-plist { display: none !important; }
}
@media (max-width: 379px) {
  /* line 2 of a phone row: the line's source whole ("$9.70 · Backing"); the tier word stays by its colour */
  .bd-p2 { gap: 6px; }
  .bd-p2 .bd-dot { display: none; }
}
@media (max-width: 429px) {
  .bd-word-b { display: none; }
}

/* ---- a touch screen (pointer: coarse), as on the Go pages (web/launch-shell.css): every control a finger can hit is
   at least 44 px each way; a control that keeps its size where it sits (the theme button, a row's pin, the header's
   sort buttons, the since line's Hide) gets the room around it instead, so nothing moves; fields at 16 px, so a phone
   does not zoom in on them. Links inside a sentence ("Closest to Proven") are the text's own. A mouse and a trackpad
   see no change ---- */
@media (pointer: coarse) {
  .bd-gobtn, .bd-me-btn, .bd-me-link, .bd-filterbtn, .bd-btn, .bd-chip, .bd-radios label, .bd-search input, .bd-sel select, .bd-fsel select, .bd .prefs-row { min-height: 44px; }
  .bd-chip { min-width: 44px; }
  .bd-iconbtn { width: 44px; height: 44px; }
  .bd-sel select, .bd-search input { font-size: 16px; }
  /* a text button on its own: a 44 px box, its text in the middle */
  .bd-meta .bd-textbtn:not(.bd-keybtn), .bd-radios .bd-textbtn { display: inline-flex; align-items: center; min-height: 44px; }
  /* links on their own (not inside a sentence): a 44 px box; the footers' short ones ("API") 44 px wide too */
  .bd-brand, .bd-link, .bd-sh-backer a, #bd-sh-owner, #bd-sh-x, .bd-pays a, .bd-foot a, .bd-sh-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .bd-foot a, .bd-sh-foot a { min-width: 44px; justify-content: center; }
  /* the footer's links (Privacy and Privacy choices among them) wrap between whole links, spaced, with no dot left at a
     line's end */
  .bd-foot-links { display: flex; flex-wrap: wrap; column-gap: 14px; }
  .bd-foot-links span[aria-hidden="true"] { display: none; }
  .bd-actf, .bd-rrow { min-height: 44px; }
  /* the room around a control that keeps its size */
  .bd .prefs-btn, .bd-pin, .bd-thead button, .bd-since .bd-textbtn, .bd-key .bd-textbtn, .bd-order .bd-textbtn, .bd-paused .bd-textbtn, .bd-meta .bd-keybtn { position: relative; }
  :is(.bd .prefs-btn, .bd-pin, .bd-thead button, .bd-since .bd-textbtn, .bd-key .bd-textbtn, .bd-order .bd-textbtn, .bd-paused .bd-textbtn, .bd-meta .bd-keybtn)::before { content: ""; position: absolute; }
  .bd-meta .bd-keybtn::before { inset: -13px -10px; }
  .bd-order .bd-textbtn::before, .bd-paused .bd-textbtn::before { inset: -8px -6px; }
  .bd .prefs-btn::before, .bd-pin::before { inset: -7px; } /* 30 px: 44 around it */
  .bd-thead button::before { inset: -15px -6px; }
  .bd-since .bd-textbtn::before, .bd-key .bd-textbtn::before { inset: -13px -10px; }
}
/* the top bar's "How to read it", where it shows (a phone has it in the footer) */
@media (pointer: coarse) and (min-width: 720px) {
  :root { --bd-tools-h: 65px; }
  .bd-howlink { min-height: 44px; }
  .bd-top .bd-howlink { min-width: 44px; }
}

/* ---- "How to read it": not a tab (it opens the panel over the page), a quiet link with its "?" in the top bar's right
   group; a phone has "How" as the last of its tabs ---- */
@media (max-width: 719px) { .bd-top .bd-howlink { display: none; } }
.bd-ptabs .bd-tab[aria-current="page"]::after { content: ""; position: absolute; left: 6px; right: calc(6px + .16em); bottom: -1px; height: 2px; background: var(--bd-mint); }

/* ---- an agent's name is its own text: isolated, so a name written right to left never moves the #id after it ---- */
.bd-nm, .bd-tag-nm, .bd-sh-name, #bd-sh-backer a, #bd-closest a, #bd-rclosest a, #bd-fclosest a, #bd-rootnote a { unicode-bidi: isolate; }
.bd-sh-id { font: 400 0.55em/1 var(--bd-mono); letter-spacing: 0; color: var(--bd-muted); vertical-align: .18em; }

/* ---- the page's one state (docs/BOARD-SPEC-V15.md 6.16; board.js sets data-bd-state on <html>). Loading: every part
   holds its room with static loading bars (never a shimmer: only true events move), no figure, no dash. No answer (off,
   starting, busy, offline, failed): the masthead keeps its plate and title, and one line in the main column stands in
   for every pane; nothing of the record shows ---- */
/* loading: the figures, the pulse's number, the strip's lead, the rail's counts and the status as quiet bars */
:root[data-bd-state="loading"] .bd-fv, :root[data-bd-state="loading"] #bd-pulse-n { color: transparent; background: linear-gradient(var(--bd-rule) 0 0) left 78% / 4.2em 1px no-repeat; }
:root[data-bd-state="loading"] #bd-pulse-n { display: inline-block; min-width: 6em; background-size: 6em 1px; }
:root[data-bd-state="loading"] .bd-fn::before { content: ""; display: inline-block; width: 5.5em; height: 1px; background: var(--bd-rule); vertical-align: middle; }
:root[data-bd-state="loading"] .bd-ss-sub::before { content: ""; display: inline-block; width: 15em; height: 1px; background: var(--bd-rule); vertical-align: middle; }
:root[data-bd-state="loading"] .bd-rn:not(:empty) { color: transparent; background: linear-gradient(var(--bd-rule) 0 0) right 70% / 2.4ch 1px no-repeat; }
/* the count line says the first load ("Loading agents…", a status, so it is read out) after the growing sapling, over
   the loading cards' ruled lines (no picture in the list while it loads); the sort sentence keeps its room */
:root[data-bd-state="loading"] #bd-sortline { visibility: hidden; }
:root[data-bd-state="loading"] #bd-count { display: inline-flex; align-items: center; }
/* the strip's five loading tokens: a disc and two bars */
.bd-ss-sk { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 18px; border-right: 1px solid var(--bd-rule-2); }
.bd-ss-sk i { width: 20px; height: 20px; border: 1px dashed var(--bd-line); }
.bd-ss-sk b { width: 44px; height: 1px; background: var(--bd-rule); }
.bd-ss-sk b + b { width: 72px; }
/* the activity lists' loading rows (the column, the tab, the ribbon) */
.bd-ar.bd-skel { pointer-events: none; }
.bd-ar.bd-skel > i { display: block; height: 1px; background: var(--bd-rule); }
.bd-ar.bd-skel > i:first-child { width: 64px; height: 20px; background: none; border: 1px dashed var(--bd-line); }
.bd-ar.bd-skel > i:last-child { width: 44px; justify-self: end; }
.bd-ar.bd-skel .bd-tile { width: 34px; height: 34px; background: none; box-shadow: none; border: 1px dashed var(--bd-line); }
.bd-ri.bd-skel { gap: 10px; }
.bd-ri.bd-skel i { display: block; width: 56px; height: 16px; border: 1px dashed var(--bd-line); }
.bd-ri.bd-skel i + i { width: 110px; height: 1px; border: 0; background: var(--bd-rule); }
.bd-actpane .bd-arw.bd-skel, .bd-actpane .bd-ar.bd-skel { display: grid; }
/* the Stocks tab's loading tiles */
.bd-tl.bd-skel { min-height: 150px; gap: 14px; pointer-events: none; }
.bd-tl.bd-skel i { display: block; height: 1px; margin-top: 10px; background: var(--bd-rule); }
.bd-tl.bd-skel i:first-child { width: 60%; }
.bd-tl.bd-skel i:nth-child(2) { width: 46%; margin-top: 22px; }
/* nothing breathes before there is an answer, and the ribbon has no lead to show */
:root[data-bd-state="loading"] .bd-rib-lead { visibility: hidden; }
/* no answer: the panes, the rail, the tools, the strip, the ribbon and the Activity column give way to the one line */
:root:is([data-bd-state="off"], [data-bd-state="starting"], [data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) { --bd-ss-h: 0px; --bd-rib-h: 0px; }
:root:is([data-bd-state="off"], [data-bd-state="starting"], [data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) :is(#bd-stage, .bd-ss, .bd-rib, .bd-ptabs, .bd-mast-f, .bd-since, .bd-foot-stock, .bd-plate) { display: none !important; }
:root:is([data-bd-state="off"], [data-bd-state="starting"], [data-bd-state="busy"], [data-bd-state="offline"], [data-bd-state="failed"]) .bd-mast { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "f"; }
/* ---- the states (docs/DESIGN-KIT.md 3), left at the gutter under the head, never a centred block; each picture 220 px
   in a brass-ticked frame beside its words, the one picture in the view (the masthead's plate gives way), lazy, so only
   a state that shows it asks for it. An empty list: the seed plate, the kind engraved, one sentence in Garamond, one
   plain line, one link out. No answer: off or being built, the dawn aisle (every lantern cold) beside the one line; a
   read that failed or waits, or the browser offline, the error row (card paper, a 2 px coral edge, its mark: a 6 px
   coral square, the unlit lantern offline; two sentences; Try again) beside the lantern gone out ---- */
.bd-state { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; justify-content: start; text-align: left; }
.bd-art { position: relative; margin: 0; background: var(--bd-tile); box-shadow: 0 0 0 1px var(--bd-line); }
.bd-art::after { content: ""; position: absolute; inset: -5px; pointer-events: none; background: var(--bd-ticks-8); }
.bd-art img { display: block; width: 100%; height: auto; }
.bd-state-w { display: grid; justify-items: start; gap: 8px; min-width: 0; max-width: 560px; }
.bd-state-w > p { font: 400 14px/1.5 var(--bd-sans); color: var(--bd-ink-2); text-wrap: pretty; }
#bd-empty-w > p:first-child { font: 500 10.5px/1.3 var(--bd-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bd-brass); }
#bd-empty-w > p:nth-child(2), #bd-error-t { font: 400 20px/1.35 var(--bd-serif); color: var(--bd-ink); text-wrap: balance; }
.bd-state-w .bd-textbtn { margin-top: 2px; font-size: 14px; }
/* the list's empty states: one way out, so the chip row's "Clear all" gives way */
.bd-empty { margin: 4px 0 16px; padding: 18px; border: 1px solid var(--bd-rule-2); background: var(--bd-grain), var(--bd-panel); width: fit-content; max-width: 100%; }
:root:has(#bd-empty:not([hidden])) #bd-clear { display: none; }
/* no answer, in the place of every pane */
.bd-error { margin: 18px 0 40px; }
.bd-error .bd-art-error { display: none; }
:root:is([data-bd-state="busy"], [data-bd-state="failed"], [data-bd-state="offline"]) .bd-error .bd-art-empty { display: none; }
:root:is([data-bd-state="busy"], [data-bd-state="failed"], [data-bd-state="offline"]) .bd-error .bd-art-error { display: block; }
.bd-errrow { align-items: start; gap: 10px 12px; }
.bd-emark { display: none; }
:root:is([data-bd-state="busy"], [data-bd-state="failed"], [data-bd-state="offline"]) .bd-errrow > :not(.bd-emark) { grid-column: 2; }
:root:is([data-bd-state="busy"], [data-bd-state="failed"], [data-bd-state="offline"]) .bd-errrow { grid-template-columns: auto minmax(0, 1fr); padding: 14px 18px 16px 16px; border: 1px solid var(--bd-rule-2); border-left: 2px solid var(--bd-coral); background: var(--bd-grain), var(--bd-panel); }
:root:is([data-bd-state="busy"], [data-bd-state="failed"], [data-bd-state="offline"]) .bd-emark { display: inline-block; grid-column: 1; margin-top: 6px; }
:root:is([data-bd-state="busy"], [data-bd-state="failed"]) .bd-emark { width: 6px; height: 6px; margin-top: 10px; background: var(--bd-coral); }
.bd-list-wrap { position: relative; }
.bd-growdot { margin-right: 10px; }
@media (max-width: 719px) {
  .bd-state { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bd-art { width: 220px; }
  .bd-empty { padding: 14px; }
  #bd-empty-w > p:nth-child(2), #bd-error-t { font-size: 18px; }
  .bd-error { margin: 10px 0 28px; }
}
/* the ribbon with nothing to show yet (an answer with no events) keeps no empty band */
:root[data-bd-state="live"] .bd-rib:not(:has(.bd-ri)), :root[data-bd-state="stale"] .bd-rib:not(:has(.bd-ri)) { display: none; }

/* ---- the first answer: the first cards rise into place once, row by row (300 ms, 30 ms apart, the first 24 only; none
   under reduced motion). A true event: the record arriving ---- */
@keyframes bd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bd-reveal .bd-cards > .bd-ci:nth-child(-n+24) { animation: bd-rise .3s var(--bd-ease) both; }
.bd-reveal .bd-cards > .bd-ci:nth-child(2) { animation-delay: 30ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(3) { animation-delay: 60ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(4) { animation-delay: 90ms; }
.bd-reveal .bd-cards > .bd-ci:nth-child(5) { animation-delay: 120ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(6) { animation-delay: 150ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(7) { animation-delay: 180ms; }
.bd-reveal .bd-cards > .bd-ci:nth-child(8) { animation-delay: 210ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(9) { animation-delay: 240ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(10) { animation-delay: 270ms; }
.bd-reveal .bd-cards > .bd-ci:nth-child(11) { animation-delay: 300ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(12) { animation-delay: 330ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(13) { animation-delay: 360ms; }
.bd-reveal .bd-cards > .bd-ci:nth-child(14) { animation-delay: 390ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(15) { animation-delay: 420ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(16) { animation-delay: 450ms; }
.bd-reveal .bd-cards > .bd-ci:nth-child(17) { animation-delay: 480ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(18) { animation-delay: 510ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(19) { animation-delay: 540ms; }
.bd-reveal .bd-cards > .bd-ci:nth-child(20) { animation-delay: 570ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(21) { animation-delay: 600ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(22) { animation-delay: 630ms; }
.bd-reveal .bd-cards > .bd-ci:nth-child(23) { animation-delay: 660ms; } .bd-reveal .bd-cards > .bd-ci:nth-child(24) { animation-delay: 690ms; }

/* ---- the privacy window on the board (web/privacy.css is the site's, unchanged): square corners, outlined buttons and
   a warm shade, as the board's own controls ---- */
.bd .pcw-scrim { background: var(--bd-scrim); }
.bd .pcw-card { border-radius: 0; box-shadow: 0 24px 48px -24px var(--bd-shade); }
.bd .pcw-btn, .bd .pcw-x { border-radius: 0; }
.bd .pcw-btn:not(.pcw-save):not(.pcw-ghost) { background: transparent; color: var(--pcw-ink); border-color: var(--pcw-ink); }
.bd .pcw-btn:not(.pcw-save):not(.pcw-ghost):hover { background: var(--pcw-hover); color: var(--pcw-ink); border-color: var(--pcw-ink); }
@media (max-width: 640px) { .bd .pcw-card { border-radius: 0; } }

/* reduced motion: nothing moves, nothing washes */
@media (prefers-reduced-motion: reduce) {
  .bd *, .bd *::before, .bd *::after { animation: none !important; transition: none !important; }
}

/* [origins] */
/* Where an agent comes from (docs/BOARD-SPEC-V3.md 1.4, 5): generated by scripts/build-origin-marks.mjs from
   web/origin-logos/SOURCES.md; edit that table and run it again (scripts/test-board-site.mjs compares). One tile for
   every origin: card paper in both themes, so every logo shows as its platform publishes it; a 1 px hairline and the
   four brass corner ticks; the platform's own logo at 16 x 16 (20 on the sheet), or our 7 x 8 mark at 2 px a cell (3 on
   the sheet). Never a pill, a round dot, a gradient or a stock icon; no filter, no recolour. */
:root { --bd-card-edge: #e3dccd; --bd-om-paper: #fbf8f1; --bd-om-ink: #3a372f; --bd-om-brass: #94763a; }
:root[data-theme="dark"] { --bd-card-edge: #34322a; }
.bd-om { position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; vertical-align: middle; background: var(--bd-om-paper); box-shadow: inset 0 0 0 1px var(--bd-card-edge); }
.bd-om::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--bd-om-brass) 0 0) left top / 4px 1px no-repeat, linear-gradient(var(--bd-om-brass) 0 0) left top / 1px 4px no-repeat, linear-gradient(var(--bd-om-brass) 0 0) right top / 4px 1px no-repeat, linear-gradient(var(--bd-om-brass) 0 0) right top / 1px 4px no-repeat, linear-gradient(var(--bd-om-brass) 0 0) left bottom / 4px 1px no-repeat, linear-gradient(var(--bd-om-brass) 0 0) left bottom / 1px 4px no-repeat, linear-gradient(var(--bd-om-brass) 0 0) right bottom / 4px 1px no-repeat, linear-gradient(var(--bd-om-brass) 0 0) right bottom / 1px 4px no-repeat; }
.bd-om > i { display: block; width: 16px; height: 16px; background: center / contain no-repeat; image-rendering: auto; }
.bd-om-24 { width: 24px; height: 24px; }
.bd-om-24 > i { width: 20px; height: 20px; }
/* no facts yet: an empty slot of the same width, so names stay aligned; nothing drawn, nothing read out */
.bd-om-none { background: none; box-shadow: none; }
.bd-om-none::after { content: none; }
/* the platforms' own logos, each its own file (web/origin-logos/), as published */
.bd-om[data-o="agnts"] > i { background-image: url(origin-logos/agnts.png); }
.bd-om[data-o="alpharc"] > i { background-image: url(origin-logos/alpharc.png); }
.bd-om[data-o="bursar"] > i { background-image: url(origin-logos/bursar.png); }
.bd-om[data-o="bv7x"] > i { background-image: url(origin-logos/bv7x.png); }
.bd-om[data-o="daemon"] > i { background-image: url(origin-logos/daemon.png); }
.bd-om[data-o="ethos"] > i { background-image: url(origin-logos/ethos.svg); }
.bd-om[data-o="helixa"] > i { background-image: url(origin-logos/helixa.png); }
.bd-om[data-o="kagemi"] > i { background-image: url(origin-logos/kagemi.png); }
.bd-om[data-o="mesh"] > i { background-image: url(origin-logos/mesh.png); }
.bd-om[data-o="musegod"] > i { background-image: url(origin-logos/musegod.png); }
.bd-om[data-o="nenrin"] > i { background-image: url(origin-logos/nenrin.png); }
.bd-om[data-o="oddysey"] > i { background-image: url(origin-logos/oddysey.png); }
.bd-om[data-o="olas"] > i { background-image: url(origin-logos/olas.png); }
.bd-om[data-o="priors"] > i { background-image: url(origin-logos/priors.svg); }
.bd-om[data-o="ripples"] > i { background-image: url(origin-logos/ripples.png); }
.bd-om[data-o="spawnr"] > i { background-image: url(origin-logos/spawnr.svg); }
.bd-om[data-o="taopunks"] > i { background-image: url(origin-logos/taopunks.png); }
.bd-om[data-o="termix"] > i { background-image: url(origin-logos/termix.svg); }
/* our marks: the monograms of platforms whose logo could not be fetched, NFT-bound and Other ERC-8004; 7 x 8 cells of
   --u, ink-2 and brass on the tile's paper */
.bd-om[data-o="koi-foam"] > i, .bd-om[data-o="nft"] > i, .bd-om[data-o="other"] > i { --u: 2px; width: calc(var(--u) * 7); height: calc(var(--u) * 8); background: none; }
.bd-om-24[data-o="koi-foam"] > i, .bd-om-24[data-o="nft"] > i, .bd-om-24[data-o="other"] > i { --u: 3px; }
.bd-om[data-o="koi-foam"] > i {
  background:
    linear-gradient(var(--bd-om-ink) 0 0) 0 var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 2) var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 4) var(--u) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 2) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 4) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 4) calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 2) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 4) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 2) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 4) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-brass) 0 0) 0 calc(var(--u) * 7) / calc(var(--u) * 7) var(--u) no-repeat;
}
.bd-om[data-o="nft"] > i {
  background:
    linear-gradient(var(--bd-om-ink) 0 0) 0 0 / calc(var(--u) * 7) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 6) var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 4) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 6) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 3) calc(var(--u) * 3) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 6) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 2) calc(var(--u) * 4) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 6) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 5) / calc(var(--u) * 7) var(--u) no-repeat,
    linear-gradient(var(--bd-om-brass) 0 0) calc(var(--u) * 2) calc(var(--u) * 6) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-brass) 0 0) calc(var(--u) * 4) calc(var(--u) * 6) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-brass) 0 0) calc(var(--u) * 2) calc(var(--u) * 7) / calc(var(--u) * 3) var(--u) no-repeat;
}
.bd-om[data-o="other"] > i {
  background:
    linear-gradient(var(--bd-om-ink) 0 0) 0 var(--u) / calc(var(--u) * 7) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 6) calc(var(--u) * 2) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 2) calc(var(--u) * 3) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 6) calc(var(--u) * 3) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 6) calc(var(--u) * 4) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 2) calc(var(--u) * 5) / calc(var(--u) * 2) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) calc(var(--u) * 6) calc(var(--u) * 5) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--bd-om-ink) 0 0) 0 calc(var(--u) * 6) / calc(var(--u) * 7) var(--u) no-repeat;
}
/* [/origins] */

/* ---- v3 (docs/BOARD-SPEC-V3.md): where the origin tile sits, the Directory, the Ethos lane's words and ETH, BTC and SOL.
   One contiguous block after the generated origins block, so the site-wide kit pass merges cleanly ---- */
/* the Directory's tab only with the answer's `origins` (board.js sets .bd-dir-on on the root) */
:root:not(.bd-dir-on) .bd-tab[data-tab="directory"] { display: none; }
/* the tile: at the right end of a card's tier and # line; before the name in List, Compact, Activity and the ribbon */
@media (min-width: 720px) { .bd-tag-hd > .bd-cid:not(:last-child) { margin-left: auto; } }
.bd-name > .bd-om, .bd-p1 > .bd-om { align-self: center; margin-right: 1px; }
.bd-aname > .bd-om, .bd-ri-who > .bd-om { align-self: center; margin-right: 1px; }
/* where the room is short (Activity's rows and the ribbon): the same tile at 16 px, its logo at 12 */
:is(.bd-aname, .bd-ri-who) > .bd-om { width: 16px; height: 16px; }
:is(.bd-aname, .bd-ri-who) > .bd-om > i { width: 12px; height: 12px; }
:is(.bd-aname, .bd-ri-who) > .bd-om:is([data-o="koi-foam"], [data-o="nft"], [data-o="other"]) > i { --u: 1.5px; }
/* the live column is narrow: the tile takes as little of the name's room as it can */
.bd-acol .bd-aname { gap: 5px; }
.bd-acol .bd-aname > .bd-om { margin-right: 0; }
/* the sheet's COMES FROM line, on the plate under the owner and the status */
.bd-sh-om { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--bd-rule-2); background: var(--bd-grain), var(--bd-panel); }
.bd-om-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bd-om-name { font: 400 19px/1.2 var(--bd-serif); color: var(--bd-ink); overflow-wrap: anywhere; }
.bd-om-why { font-size: 13.5px; line-height: 1.45; color: var(--bd-ink-2); text-wrap: pretty; }
.bd-om-why:empty { display: none; }
.bd-om-x { width: fit-content; font-size: 13px; color: var(--bd-mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-om-x:hover { color: var(--bd-ink); }
/* How's two examples, our own marks */
.bd-om-exs { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.bd-om-ex { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.bd-om-ex > p { grid-column: 2 / -1; font-size: 13.5px; color: var(--bd-ink-2); }
.bd-om-ex > b { font: 500 14.5px var(--bd-sans); }

/* ---- ETH, BTC and SOL (docs/BOARD-SPEC-V3.md 3.3, docs/BOARD-SPEC-V15.md 6.14): in the status bar from 1,180 px, after
   its parts and a hairline, never wrapping (the parts give way first); under it one line above the stock strip, wrapping
   only between tickers. Each wears its coin's own logo before its symbol, as the project publishes it (web/coin-logos/,
   SOURCES.md; drawn from here, so the module only writes data-s), and its figure in the coin's colour (--bd-coin-*); the
   symbol stays ink-2 capitals, the age ink-2. The room before a logo is the separator ---- */
.bd-tk { white-space: nowrap; }
.bd-tk + .bd-tk { margin-left: 18px; }
.bd-tk-s { font: 500 11px/1 var(--bd-mono); letter-spacing: .16em; color: var(--bd-ink-2); }
.bd-tk-s::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -3px; background: center / contain no-repeat; }
.bd-tk[data-s="BTC"] .bd-tk-s::before { background-image: url(coin-logos/btc.svg); }
.bd-tk[data-s="ETH"] .bd-tk-s::before { background-image: url(coin-logos/eth.svg); }
.bd-tk[data-s="SOL"] .bd-tk-s::before { background-image: url(coin-logos/sol.svg); }
.bd-tk-p { font: 400 11.5px/1 var(--bd-mono); font-variant-numeric: lining-nums tabular-nums; color: var(--bd-ink); }
.bd-tk[data-s="BTC"] .bd-tk-p { color: var(--bd-coin-btc); }
.bd-tk[data-s="ETH"] .bd-tk-p { color: var(--bd-coin-eth); }
.bd-tk[data-s="SOL"] .bd-tk-p { color: var(--bd-coin-sol); }
.bd-tk-a { color: var(--bd-ink-2); }
.bd-tickers-d { flex: none; margin-left: auto; padding-left: 14px; border-left: 1px solid var(--bd-rule); white-space: nowrap; }
.bd-status-t { flex: 0 1 auto; }
.bd-tickers { display: flex; flex-wrap: wrap; gap: 4px 0; max-width: 1680px; margin: 0 auto; padding: 7px 32px; font: 400 12px/1.4 var(--bd-mono); color: var(--bd-ink-2); border-bottom: 1px solid var(--bd-rule-2); }
.bd-tickers .bd-tk-s, .bd-tickers .bd-tk-p { font-size: 12px; }
.bd-tickers .bd-tk-s::before { width: 16px; height: 16px; vertical-align: -4px; }
/* wrapping only between whole tickers: the row's own gap is the room between them, never a margin a new line would keep */
.bd-tickers { column-gap: 20px; }
.bd-tickers .bd-tk + .bd-tk { margin-left: 0; }
@media (min-width: 1180px) { .bd-tickers { display: none !important; } }
@media (max-width: 719px) { .bd-tickers { padding: 6px 16px; } }
/* Robinhood Chain's gas and a repay's cost (docs/BOARD-SPEC-V3.md 3.5): in the status bar from 1,440 px, after the
   tickers and a hairline, never wrapping; narrower, the footer's line has them */
.bd-chain-d { display: none; }
@media (min-width: 1440px) {
  .bd-chain-d:not([hidden]) { display: inline; flex: none; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--bd-rule); white-space: nowrap; }
  .bd-tickers-d[hidden] + .bd-chain-d { margin-left: auto; }
}
/* a phone under 420 px: the logo back to the bar's 14 px and a 12 px gap, so the three without an age keep one line at
   360 and 375, as they did before their logos (scripts/rig/board-v3.mjs measures it) */
@media (max-width: 419px) {
  .bd-tickers { column-gap: 12px; }
  .bd-tickers .bd-tk-s::before { width: 14px; height: 14px; margin-right: 4px; vertical-align: -3px; }
}

/* ---- the Directory (docs/BOARD-SPEC-V3.md 1.5): the rail (search, Comes from) from 1,180 px, the list beside it ---- */
.bd-dirpane { padding-top: 6px; }
.bd-dir { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.bd-dir-rail { position: sticky; top: var(--bd-stick); max-height: calc(100vh - var(--bd-stick) - var(--bd-status-h)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 14px 8px 18px 0; border-right: 1px solid var(--bd-rule-2); }
.bd-dir-search { display: block; margin-bottom: 14px; min-width: 0; }
#bd-directory .bd-dir-search { min-width: 0; flex-basis: auto; }
.bd-dir-search input { padding-right: 12px; }
.bd-dir-filt { display: none; }
.bd-dir-filt .bd-dir-k:empty { display: none; }
.bd-orow { grid-template-columns: 34px minmax(0, 1fr) auto; }
.bd-orow > .bd-om { justify-self: center; }
.bd-dir-col { min-width: 0; padding-top: 14px; }
.bd-dir-hd { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-dir-h { font: 400 28px/1.15 var(--bd-serif); letter-spacing: -.01em; color: var(--bd-ink); }
.bd-dir-h:empty { display: none; }
.bd-dir-sub { font-size: 14px; color: var(--bd-ink-2); }
.bd-dir-note { margin-top: 10px; }
.bd-dir-meta { min-height: 0; }
/* no filter and no search: no room taken, the count's status kept in the page (empty) so its next words are read out */
.bd-dir-meta:not(:has(.bd-chip, .bd-dir-count:not(:empty))) { padding: 0; }
.bd-dir-list { margin: 0; padding: 0; list-style: none; }
/* the last column one width on every row (its longest word, "No Priors record yet", fits), so the dates line up */
.bd-dr-a { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1.5fr) minmax(0, 1fr) 11.5em; align-items: center; gap: 0 14px; min-height: 48px; padding: 8px 10px; border-bottom: 1px solid var(--bd-rule-2); color: var(--bd-ink); }
.bd-dr-a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--bd-ticks); box-shadow: inset 0 0 0 1px var(--bd-line); opacity: 0; }
.bd-dr-a:hover::after, .bd-dr-a:focus-visible::after { opacity: 1; }
.bd-dr-a:hover { background: var(--bd-hover); }
.bd-dr-a:focus-visible { outline-offset: -2px; }
.bd-dr-nm { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.bd-dr-nm .bd-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 17px/1.25 var(--bd-serif); }
.bd-dr-nm .bd-id { flex: none; font: 400 12px/1 var(--bd-mono); color: var(--bd-muted); }
.bd-dr-at { font-size: 13px; color: var(--bd-ink-2); white-space: nowrap; }
.bd-dr-rec { justify-self: end; font-size: 13px; color: var(--bd-muted); white-space: nowrap; }
.bd-dr-rec.bd-more { color: var(--bd-mint); }
.bd-dir-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0 28px; }
.bd-dir-range { font: 400 12.5px/1 var(--bd-mono); color: var(--bd-muted); }
.bd-dir-pager .bd-btn[disabled] { opacity: .45; cursor: default; }
.bd-dir-empty, .bd-dir-state { margin: 14px 0 18px; }
.bd-dir-empty .bd-state-w > p.bd-eng { font: 500 10.5px/1.3 var(--bd-mono); letter-spacing: .2em; color: var(--bd-brass); }
.bd-dir-say, .bd-dir-state .bd-state-w > p { font: 400 20px/1.35 var(--bd-serif); color: var(--bd-ink); text-wrap: balance; }
.bd-dir-err .bd-state-w { grid-template-columns: auto minmax(0, 1fr); padding: 14px 18px 16px 16px; border: 1px solid var(--bd-rule-2); border-left: 2px solid var(--bd-coral); background: var(--bd-grain), var(--bd-panel); }
.bd-dir-err .bd-emark { display: inline-block; width: 6px; height: 6px; margin-top: 10px; background: var(--bd-coral); }
.bd-dir-err .bd-state-w > :not(.bd-emark) { grid-column: 2; }
/* the Directory card (an identity with no Priors record, as a sheet) */
.bd-sh-dir { padding-bottom: 24px; }
.bd-dir-norec { margin-top: 14px; font-size: 14px; color: var(--bd-ink-2); }
.bd-sh-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* under 1,180 px: the search above the list with the filter button; Comes from in the Sort and filter sheet */
@media (max-width: 1179px) {
  .bd-dir { display: block; }
  .bd-dir-rail { position: static; max-height: none; overflow: visible; display: flex; align-items: center; gap: 8px; padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--bd-rule-2); }
  .bd-dir-rail .bd-rg, .bd-dir-foot { display: none; }
  .bd-dir-search { flex: 1 1 auto; margin: 0; }
  .bd-dir-filt { display: inline-flex; }
}
@media (max-width: 719px) {
  .bd-dr-a { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; padding: 10px 4px; }
  .bd-dr-a > .bd-om { grid-row: 1 / span 2; }
  .bd-dr-at { grid-column: 2; grid-row: 2; font-size: 12.5px; }
  .bd-dr-rec { grid-column: 3; grid-row: 1 / span 2; }
  .bd-dir-h { font-size: 23px; }
  .bd-dir-filt { justify-content: center; min-width: 44px; padding: 0 10px; gap: 6px; }
  .bd-dir-filt svg { display: block; }
  .bd-dir-filt .bd-filterbtn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bd-dir-search input { height: 44px; font-size: 16px; }
  .bd-dir-pager .bd-btn { min-height: 44px; }
}
/* the Sort and filter sheet on the Directory: titled Filter (the Directory has no sort), its one select, Comes from; the
   Agents tab's controls elsewhere */
.bd-fh-d, :root[data-tab="directory"] .bd-fh-a { display: none; }
:root[data-tab="directory"] .bd-fh-d { display: inline; }
#bd-f-origin-l { display: none; }
:root[data-tab="directory"] #bd-f-origin-l { display: grid; }
:root[data-tab="directory"] #bd-filters :is(.bd-radios, .bd-fclosest, .bd-fsel:not(#bd-f-origin-l)) { display: none; }

/* ---- wide screens (the owner's ask of 2026-10-18): from 1,800 px the board breathes a little instead of standing
   in a tight centred column. The masthead (its title, its plate and the figures) keeps its 1,680 px, so the plate is
   never cut to a strip. The rail moves out to the left and the live Activity column out to the right, by up to 96 px
   each, with more room between the rail and the cards; the top bar, the stock strip, the ribbon and the status bar
   widen by the same amount, so their edges line up with the rail and the column. Below 1,800 px nothing changes. ---- */
@media (min-width: 1800px) {
  :root { --bd-out: clamp(0px, (100vw - 1680px) / 2 - 24px, 96px); }
  .bd-top-in, .bd-ss-in, .bd-rib-in, .bd-status-in { max-width: calc(1680px + 2 * var(--bd-out)); }
  .bd-body, :root:not([data-tab="activity"]) .bd-body { margin-left: calc(-1 * var(--bd-out)); gap: 0 44px; }
  :root:not([data-tab="activity"]) .bd-stage { gap: 0 28px; margin-right: calc(-32px - var(--bd-out)); }
}

/* ---- the dropdown (web/kit-select.js and kit-select.css, the site's one select, docs/DESIGN-KIT.md): drawn in the
   board's own tokens, the toolbar's Sort at the width its select had, Sort and filter's three at the sheet's width, 44 px
   tall in 16 px words. The open list sits in the top layer, positioned through the CSSOM (no inline style: CSP 9.4) ---- */
:root {
  --ks-ink: var(--bd-ink); --ks-ink-2: var(--bd-ink-2); --ks-muted: var(--bd-muted);
  --ks-field: var(--bd-field); --ks-edge: var(--bd-field-edge); --ks-rule: var(--bd-rule); --ks-card: var(--bd-panel);
  --ks-brass-line: var(--bd-line); --ks-shade: var(--bd-shade); --ks-hover: var(--bd-hover);
  --ks-green: var(--bd-mint); --ks-focus: var(--bd-mint); --ks-caret-c: var(--bd-ink-2);
  --ks-sans: var(--bd-sans); --ks-mono: var(--bd-mono);
}
.bd-sel .ks { width: 140px; font-size: 14px; }
.bd-fsel .ks { --ks-h: 44px; font-size: 16px; }
@media (max-width: 1319px) {
  .bd-sel .ks { width: 128px; }
}
@media (pointer: coarse) {
  .bd-sel .ks { font-size: 16px; }
}
/* Reach it (SITE_REACH; docs/research/2026-10-18-agent-hub/HUB-PLAN.md 4, release 2 step 9): an agent's own links on
   its sheet and its Directory card (board-sheet.js reachEls), and the Directory's toggle "Can be paid or hired" */
.bd-reach { display: grid; gap: 12px; }
.bd-reach-row { display: grid; gap: 2px; }
.bd-reach-k { font-size: 13px; color: var(--bd-muted); }
.bd-reach-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--bd-ink); overflow-wrap: anywhere; min-width: 0; }
.bd-reach-sell + .bd-reach-sell { margin-top: 8px; }
.bd-reach-pay { margin-top: 10px; padding: 10px 12px 12px; border: 1px solid var(--bd-rule); }
.bd-reach-pay .bd-reach-k { color: var(--bd-ink); font-weight: 500; }
.bd-reach-pay .bd-btn { margin-top: 10px; }
.bd-reach-sec .bd-reach { margin-top: 4px; }
.bd-dir-meta:has(.bd-reach-t:not([hidden])) { padding: 10px 0 9px; }
.bd-reach-t[aria-pressed="true"] { border-color: var(--bd-ink); color: var(--bd-ink); }
/* [answer-line] */
/* ---- the line board's open requests (SITE_ANSWER_LINE; docs/growth/answer-line-request.md): what board-line-asks.js
   adds where the line board answers, the same for every agent that asks. "Asks for a line" in the status's mono, after
   a hollow brass square: after a row's status (Compact: after its name), on a line of its own in a phone's row; on a
   card, after its status line: a tag in the hub's tag look with a brass edge, raised under the case's roof at the left
   as the night band is raised over it (the pin's notch is at the right), two short lines clear of the lantern on the
   narrowest card (192 px), so no card changes height; on a phone, where the hub's tags and Hire take the room under the
   case, a line under the status, the card that carries it as tall as it needs (one card a row); the sheet's Line
   request, its request in ink and the way to the agent's page ---- */
.bd-lr { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.25 var(--bd-mono); color: var(--bd-ink-2); white-space: nowrap; }
.bd-lr::before { content: ""; flex: none; width: 7px; height: 7px; box-shadow: inset 0 0 0 1.5px var(--bd-brass); }
.bd-c-agent .bd-st:has(+ .bd-lr) { display: inline-flex; }
.bd-c-agent .bd-lr { margin: 4px 0 0 12px; }
.bd-table.bd-compact .bd-c-agent .bd-lr { flex: none; align-self: center; margin: 0 0 0 10px; }
.bd-prow > .bd-lr { grid-column: 2; font-size: 11.5px; }
.bd-tag > .bd-lr { position: absolute; z-index: 3; top: -142px; left: 16px; display: block; max-width: 64px; padding: 3px 5px 3px 7px; background: rgba(12, 16, 13, .88); box-shadow: inset 2px 0 0 #d1ae68, inset 0 0 0 1px var(--bd-case-edge);
  font: 500 9px/1.25 var(--bd-mono); letter-spacing: .06em; text-transform: uppercase; color: #ece6d6; white-space: normal; pointer-events: none; }
.bd-tag > .bd-lr::before { content: none; }
@media (max-width: 719px) {
  .bd-tag > .bd-lr { position: static; display: inline-flex; max-width: none; margin-top: 4px; padding: 0; background: none; box-shadow: none; font: 500 11.5px/1.25 var(--bd-mono); letter-spacing: 0; text-transform: none; color: var(--bd-ink-2); white-space: nowrap; }
  .bd-tag > .bd-lr::before { content: ""; }
  .bd-ci:has(.bd-tag > .bd-lr) .bd-plant { height: auto; min-height: 194px; }
}
.bd-lr-line { font: 500 15px/1.45 var(--bd-sans); color: var(--bd-ink); overflow-wrap: anywhere; }
.bd-lr-line + .bd-lr-line { margin-top: 8px; }
.bd-lr-go { margin: 14px 0 6px; padding: 0 14px; }
.bd-lr-go svg { width: 9px; height: 9px; flex: none; }
/* [/answer-line] */
/* [hub] */
/* ---- hire and buy on the board (SITE_HUB; docs/research/2026-10-23-hub-status/HUB-V1-SPEC.md 1.4 to 1.6): what
   board-hub.js and board-hub-jobs.js add where /api/hub answers (:root.bd-hire), in the board's own look: a tag on the
   bench of a card, the case's night and mint, brass engraving, square controls with their ticks. Board v2 itself keeps
   every part as it was; a card turns over to its offer and back ---- */
:root { --bd-g-turn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1h-1zM0 1h6v1h-6zM4 2h1v1h-1zM2 4h1v1h-1zM1 5h6v1h-6zM2 6h1v1h-1z'/%3E%3C/svg%3E"); }
/* the Jobs tab: its link once the hub answers (or while its pane is open), its count the open paid requests */
:root:not(.bd-hire):not([data-tab="jobs"]) .bd-hx-tab { display: none; }
.bd-hx-n { font-weight: 400; letter-spacing: .04em; color: var(--bd-muted); }
.bd-hx-n:empty { display: none; }
/* the rail's Status: For hire a mint tag, For sale a brass one */
[data-status="hire"] .bd-rmark::before, [data-status="sale"] .bd-rmark::before { inset: 2px 1px; border: 2px solid var(--bd-mint); }
[data-status="sale"] .bd-rmark::before { border-color: var(--bd-brass); }

/* a card for hire (or for sale): its mark stands on the bench at the left of the pot, Hire (or Buy) at its right; on a
   phone both under the case. Hire turns the card over: the back takes the card's place, the front turns away (at once
   under reduced motion), and the focus goes to the back; Turn back, or Esc, brings the front again */
.bd-ci.bd-hx { position: relative; perspective: 1400px; }
.bd-hx-mark { position: absolute; z-index: 4; left: 9px; bottom: 232px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none; transition: opacity .12s; }
/* a brass-edged tag, its edge in its colour (mint for hire, brass for sale): at most 58 px, and Hire 56, so both keep
   clear of the pot (62 px, centred) on the narrowest card (200 px) */
.bd-hx-mark > span { display: inline-flex; align-items: center; height: 18px; padding: 0 5px 0 7px; background: rgba(12, 16, 13, .88); box-shadow: inset 2px 0 0 currentColor, inset 0 0 0 1px var(--bd-case-edge); font: 500 9px/1 var(--bd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bd-case-mint); white-space: nowrap; }
.bd-hx-mark > .bd-hx-s { color: #d1ae68; }
.bd-hx-turn { position: absolute; z-index: 4; right: 9px; bottom: 232px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; background: rgba(12, 16, 13, .88); border: 1px solid var(--bd-case-mint); border-radius: 0; font: 500 12.5px/1 var(--bd-sans); color: var(--bd-case-mint); cursor: pointer; transition: opacity .12s, background-color .15s, color .15s; }
.bd-hx-turn:hover { background: var(--bd-case-mint); color: var(--bd-case); }
.bd-hx-turn:focus-visible { outline: 2px solid var(--bd-mint); outline-offset: 2px; }
.bd-hx-ti { flex: none; width: 9px; height: 9px; background: currentColor; -webkit-mask: var(--bd-g-turn) center / 9px 9px no-repeat; mask: var(--bd-g-turn) center / 9px 9px no-repeat; }
/* the owner's own agent, the market open: Sell (Listed while listed) where Hire stands, a link into Go mode, no back */
.bd-hx-sell { text-decoration: none; }
.bd-hx-sell svg { flex: none; width: 9px; height: 9px; }
.bd-hx > .bd-plant { backface-visibility: hidden; transition: transform .5s var(--bd-ease); }
.bd-hx-back { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; padding: 0 12px 12px; overflow: hidden; background: var(--bd-grain), var(--bd-panel); border: 1px solid var(--bd-rule); color: var(--bd-ink); text-align: center;
  backface-visibility: hidden; transform: rotateY(180deg); visibility: hidden; transition: transform .5s var(--bd-ease), visibility 0s linear .5s; }
.bd-hx-over > .bd-plant { transform: rotateY(-180deg); visibility: hidden; transition: transform .5s var(--bd-ease), visibility 0s linear .5s; }
.bd-hx-over > .bd-hx-back { transform: none; visibility: visible; transition: transform .5s var(--bd-ease), visibility 0s; }
.bd-hx-over > :is(.bd-hx-mark, .bd-hx-turn) { opacity: 0; visibility: hidden; transition: opacity .12s, visibility 0s linear .12s; }
.bd-hx-back:focus { outline: none; }
.bd-hx-back:focus-visible { outline: 2px solid var(--bd-mint); outline-offset: -2px; }
/* the back: the case's night band (what it offers, its #id), its name, the rate in mint as the card's figures are, its
   limits and host, the clients that paid it in 30 days, whose offer it is; Hire (the card's one ink button), Turn back */
.bd-hx-band { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; height: 28px; margin: 0 -12px 16px; padding: 0 10px; background: var(--bd-case); font: 500 10.5px/1 var(--bd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bd-case-mint); white-space: nowrap; }
.bd-hx-id { flex: none; font: 400 11px/1 var(--bd-mono); letter-spacing: 0; text-transform: none; color: #a39b88; }
.bd-hx-nm { max-width: 100%; font: 500 19px/1.2 var(--bd-serif); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-hx-unit { margin-top: 14px; font-size: 10.5px; letter-spacing: .1em; }
.bd-hx-big { margin-top: 6px; font: 500 22px/1.1 var(--bd-serif); letter-spacing: -.02em; color: var(--bd-mint); text-shadow: var(--bd-glow); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.bd-hx-big.bd-hx-s { color: var(--bd-ink); text-shadow: none; }
.bd-hx-sm { margin-top: 6px; max-width: 100%; font: 400 11.5px/1.35 var(--bd-mono); color: var(--bd-muted); overflow-wrap: anywhere; }
.bd-hx-paid { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; margin-top: 14px; padding: 8px 2px 7px; border-top: 1px solid var(--bd-rule-2); border-bottom: 1px solid var(--bd-rule-2); }
.bd-hx-paid .bd-eng { font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.bd-hx-paid b { font: 500 20px/1 var(--bd-serif); color: var(--bd-mint); text-shadow: var(--bd-glow); font-variant-numeric: lining-nums tabular-nums; }
.bd-hx-src { margin-top: 10px; font-size: 12px; line-height: 1.35; color: var(--bd-muted); text-wrap: pretty; }
.bd-hx-back:has(.bd-hx-s) .bd-hx-src { display: none; }
.bd-hx-carry { margin-top: 12px; font-size: 12.5px; line-height: 1.4; color: var(--bd-ink-2); text-wrap: pretty; }
.bd-hx-back:has(.bd-hx-paid) .bd-hx-carry { display: none; }
.bd-hx-acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; align-self: stretch; margin-top: auto; padding-top: 12px; }
.bd-hx-acts .bd-hx-go { width: 100%; height: 34px; font-size: 14px; }
.bd-hx-unturn { align-self: center; }
@media (prefers-reduced-motion: reduce) {
  .bd-hx > .bd-plant, .bd-hx-back, .bd-hx-over > .bd-plant, .bd-hx-over > .bd-hx-back, .bd-hx-mark, .bd-hx-turn, .bd-hx-over > :is(.bd-hx-mark, .bd-hx-turn) { transition: none; }
}

/* a row's rate and Hire (its asking price and Buy): in List under the status, a line of their own; in Compact at the
   end of its one line, the rate short (the whole one in its title), the status word giving way to the lamp as Compact's
   narrow cell does; on a phone, a line under the row */
.bd-hx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; white-space: normal; }
.bd-hx-rate { font: 500 12px/1.2 var(--bd-mono); color: var(--bd-mint); white-space: nowrap; }
.bd-hx-rate.bd-hx-s { color: var(--bd-ink); }
.bd-hx-short { display: none; }
.bd-hx-go { height: 26px; padding: 0 8px; gap: 5px; font-size: 12px; }
.bd-hx-go svg { width: 9px; height: 9px; flex: none; }
.bd-table.bd-compact .bd-c-agent .bd-hx-row { flex: none; flex-wrap: nowrap; gap: 6px; align-self: center; order: 9; margin: 0 0 0 auto; padding-left: 8px; }
.bd-table.bd-compact .bd-hx-rate { font-size: 11px; }
.bd-table.bd-compact .bd-hx-full { display: none; }
.bd-table.bd-compact .bd-hx-short { display: inline; }
.bd-table.bd-compact .bd-c-agent:has(.bd-hx-row) :is(.bd-st, .bd-id) { display: none; }
.bd-table.bd-compact .bd-c-agent:has(.bd-hx-row) .bd-name { min-width: 0; }
.bd-table.bd-compact .bd-c-agent:has(.bd-hx-row) .bd-name::after { display: none; }
.bd-table.bd-compact .bd-c-agent:has(.bd-hx-row) .bd-lampdot { display: inline-block; flex: none; align-self: center; margin-left: 7px; }
.bd-table.bd-compact .bd-hx-go { height: 24px; padding: 0 6px; }
.bd-table.bd-compact .bd-hx-go svg { display: none; }
.bd-plist > li.bd-hx { contain-intrinsic-size: auto 104px; }
.bd-plist > li.bd-hx > .bd-prow { border-bottom: 0; }
.bd-hx-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 2px 10px 58px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-plist.bd-compact .bd-hx-prow { padding: 0 2px 8px 48px; }

/* the sheet's section, before its score: each offer (how it is paid, the rate in mint, its limits and host), the clients
   that paid it, Hire into Go mode, whose offer it is; while listed its asking price and Buy; the paid requests made for
   it with Take it */
.bd-hx-offers { display: grid; gap: 12px; margin: 0; }
.bd-hx-offers div { display: grid; gap: 4px; min-width: 0; }
.bd-hx-offers dt { font-size: 10px; letter-spacing: .16em; color: var(--bd-muted); }
.bd-hx-offers dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.bd-hx-offers dd b { font: 500 20px/1.2 var(--bd-serif); color: var(--bd-mint); text-shadow: var(--bd-glow); font-variant-numeric: lining-nums tabular-nums; }
.bd-hx-offers dd span { font: 400 12.5px/1.3 var(--bd-mono); color: var(--bd-ink-2); overflow-wrap: anywhere; }
.bd-hx-paidl { margin-top: 12px; font-size: 14px; color: var(--bd-ink-2); }
.bd-sh-hire > div > .bd-hx-go { height: 34px; margin: 14px 0 6px; padding: 0 14px; font-size: 14px; }
.bd-hx-h4 { margin: 20px 0 10px; font-size: 10.5px; letter-spacing: .14em; }
.bd-hx-ask { display: flex; align-items: baseline; gap: 12px; }
.bd-hx-ask .bd-eng { font-size: 10px; letter-spacing: .16em; color: var(--bd-muted); }
.bd-hx-ask b { font: 500 20px/1.2 var(--bd-serif); color: var(--bd-ink); }
.bd-hx-reqs { list-style: none; margin: 0; padding: 0; }
.bd-hx-reqs li { padding: 10px 0 12px; border-top: 1px solid var(--bd-rule-2); }
.bd-hx-reqs li:first-child { border-top: 0; padding-top: 0; }
.bd-hx-rq { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bd-hx-rq b { min-width: 0; font: 500 16px/1.3 var(--bd-serif); overflow-wrap: anywhere; }
.bd-hx-reqs .bd-hx-go { margin-top: 8px; }

/* Jobs, in the Activity tab's look: its engraved heads and their line, the paid requests as rows (the client's title, the
   budget in mint, time left and who may take it, Take it, Details), then the job ideas as tiles, a kind at a time */
.bd-jobpane { padding-top: 6px; }
.bd-jobpane > .bd-act-sub { padding: 14px 0; }
.bd-jb-head { align-items: flex-end; }
.bd-jb-head > div { flex: 1 1 320px; min-width: 0; }
.bd-jb-head .bd-act-sub { margin-top: 6px; max-width: 72ch; }
.bd-jb-head + .bd-jb-reqs, .bd-jb-head ~ .bd-jb-head { margin-top: 0; }
.bd-jb-reqs ~ .bd-jb-head { margin-top: 26px; }
.bd-jb-post svg { width: 9px; height: 9px; }
.bd-jb-kinds .ks { width: 176px; }
.bd-jb-reqs { list-style: none; margin: 0; padding: 0; }
.bd-jb-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; padding: 14px 0 12px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-jb-rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.bd-jb-t { font: 500 19px/1.25 var(--bd-serif); color: var(--bd-ink); overflow-wrap: anywhere; }
.bd-jb-b { font: 500 14px/1 var(--bd-mono); color: var(--bd-mint); white-space: nowrap; }
.bd-jb-l { grid-column: 1; font-size: 13.5px; line-height: 1.4; color: var(--bd-ink-2); }
.bd-jb-take { grid-column: 2; grid-row: 1 / span 2; }
.bd-jb-take svg, .bd-hx-go svg { width: 9px; height: 9px; }
.bd-jb-more { grid-column: 1 / -1; }
.bd-jb-more summary { width: fit-content; cursor: pointer; font: 500 10.5px/1.6 var(--bd-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bd-ink-2); }
.bd-jb-more summary:hover { color: var(--bd-ink); }
.bd-jb-d { display: grid; gap: 6px; padding: 8px 0 2px; font-size: 13.5px; color: var(--bd-ink-2); }
.bd-jb-brief { max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bd-ink); }
.bd-jb-wait, .bd-jb-due { color: var(--bd-muted); }
/* a job in progress or paid: its state's mark where an open row has Take it (brass while it waits, mint once paid) */
.bd-jb-st { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; height: 22px; padding: 0 8px 0 10px; box-shadow: inset 2px 0 0 currentColor, inset 0 0 0 1px var(--bd-rule); font: 500 10.5px/1 var(--bd-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bd-brass); white-space: nowrap; }
.bd-jb-req[data-state="paid"] .bd-jb-st { color: var(--bd-mint); }
.bd-jb-dl { font: 500 10.5px/1.6 var(--bd-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bd-muted); }
.bd-jb-dl:not(:first-child) { margin-top: 6px; }
.bd-jb-req.bd-skel { display: block; }
.bd-jb-req.bd-skel i { display: block; width: 46%; height: 1px; margin: 12px 0; background: var(--bd-rule); }
.bd-jb-req.bd-skel i + i { width: 28%; }
.bd-jb-ideas { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.bd-jb-idea { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 14px 14px 12px; background: var(--bd-grain), var(--bd-panel); border: 1px solid var(--bd-rule); }
.bd-jb-it { font: 500 17px/1.25 var(--bd-serif); color: var(--bd-ink); }
.bd-jb-ig { font-size: 13px; line-height: 1.4; color: var(--bd-ink-2); text-wrap: pretty; }
.bd-jb-il { font: 400 11.5px/1.35 var(--bd-mono); color: var(--bd-muted); }
.bd-jb-do { margin-top: auto; height: 30px; font-size: 13px; }
.bd-jb-il + .bd-jb-do, .bd-jb-ig + .bd-jb-do { margin-top: 8px; }
.bd-jb-state { display: flex; align-items: flex-start; gap: 10px; padding: 16px 0; }
.bd-jb-state p { font-size: 14.5px; color: var(--bd-ink-2); }
.bd-jb-state.bd-jb-err { border-left: 2px solid var(--bd-coral); padding-left: 14px; }
.bd-jb-state.bd-jb-err .bd-emark { display: inline-block; width: 6px; height: 6px; margin-top: 7px; background: var(--bd-coral); }
.bd-jb-morep { margin-top: 16px; }

@media (max-width: 719px) {
  /* a phone's card: the mark and Hire under the tree's case, at its width, on the paper: the mark as the board's status
     marks are (a square, engraved words), Hire a plain square button */
  .bd-hx-mark { left: 11px; top: 133px; bottom: auto; }
  .bd-hx-mark > span { gap: 6px; height: 14px; padding: 0; background: none; box-shadow: none; font-size: 10px; letter-spacing: .1em; color: var(--bd-mint); }
  .bd-hx-mark > span::before { content: ""; flex: none; width: 6px; height: 6px; background: currentColor; }
  .bd-hx-mark > .bd-hx-s { color: var(--bd-brass); }
  .bd-hx-turn { left: 11px; right: auto; top: 154px; bottom: auto; justify-content: center; width: 112px; height: 30px; background: transparent; border-color: var(--bd-ink); color: var(--bd-ink); font-size: 13.5px; }
  .bd-hx-turn:hover { background: var(--bd-hover); color: var(--bd-ink); }
  .bd-hx-back { flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: baseline; gap: 0 10px; padding: 0 12px 10px; text-align: left; }
  .bd-hx-back > * { flex: 1 0 100%; }
  .bd-hx-band { height: 24px; margin-bottom: 8px; }
  .bd-hx-nm { font-size: 18px; }
  .bd-hx-unit, .bd-hx-big { flex: 0 0 auto; margin-top: 6px; }
  .bd-hx-big { font-size: 19px; }
  .bd-hx-sm { margin-top: 3px; }
  .bd-hx-paid { justify-content: flex-start; gap: 10px; margin-top: 4px; padding: 0; border: 0; }
  .bd-hx-paid b { font-size: 17px; }
  .bd-hx-src { display: none; }
  .bd-hx-back:has(.bd-hx-paid):has(.bd-hx-s) .bd-hx-sm, .bd-hx-carry { display: none; }
  .bd-hx-acts { flex-direction: row; align-items: center; gap: 14px; padding-top: 8px; }
  .bd-hx-acts .bd-hx-go { width: auto; flex: 0 1 auto; padding: 0 16px; }
  .bd-hx-unturn { align-self: center; }
  .bd-jb-req { grid-template-columns: minmax(0, 1fr); }
  .bd-jb-take, .bd-jb-st { grid-column: 1; grid-row: auto; justify-self: start; }
  .bd-jb-ideas { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bd-jb-kinds .ks { width: 150px; }
}
@media (pointer: coarse) {
  .bd-hx-turn { min-height: 32px; }
  .bd-hx-go { min-height: 36px; }
}
/* [/hub] */
/* [bids] */
/* ---- bids on agents (SITE_BIDS, with the hub; board-bids-core.js and board-bids.js): the sheet's Bids under their
   engraved head, each open bid a row as a paid request is (its first line as a listing's says it, its pins under it,
   Accept in Go mode), then Bid in Go mode and Bid on any agent of its origin; the Directory's line under its head; any
   wallet's pins as plain check rows. A card shows no bid ---- */
.bd-bid-list { list-style: none; margin: 0; padding: 0; }
.bd-bid-list > li { padding: 10px 0 12px; border-top: 1px solid var(--bd-rule-2); }
.bd-bid-list > li:first-child { border-top: 0; padding-top: 0; }
.bd-bid-w { font: 500 15px/1.4 var(--bd-sans); color: var(--bd-ink); overflow-wrap: anywhere; }
.bd-bid-list .bd-sh-small { margin-top: 2px; }
.bd-bid-list .bd-hx-go { margin-top: 8px; }
.bd-bid-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.bd-bid-acts .bd-hx-go { max-width: 100%; }
.bd-bid-dir { display: grid; justify-items: start; gap: 4px; margin-top: 10px; }
.bd-bid-dir[hidden] { display: none; }
.bd-bid-dir > div { justify-self: stretch; }
.bd-bid-pins { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.bd-bid-pins legend { margin-bottom: 4px; padding: 0; font-size: 10px; letter-spacing: .16em; color: var(--bd-muted); }
.bd-bid-pin { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--bd-ink-2); cursor: pointer; }
.bd-bid-pin input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--bd-mint); }
.bd-bid-pin input:disabled + span { opacity: .6; }
/* the agent's builder share (AgentMarketV2's): a row as the listing's own, its rate and the address it pays, the
   address its own link to that address's page */
.bd-hx-share { margin-top: 12px; flex-wrap: wrap; row-gap: 2px; }
.bd-hx-share a, .bd-hx-share b { font: 500 15px/1.4 var(--bd-sans); color: var(--bd-ink); overflow-wrap: anywhere; }
.bd-hx-share a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bd-hx-share + .bd-sh-small { margin-top: 2px; }
@media (pointer: coarse) {
  .bd-bid-pin { min-height: 44px; align-items: center; }
  .bd-bid-pin input { margin-top: 0; }
  .bd-hx-share a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* [board-wallet] */
/* the Directory's line with any wallet: its bid form */
.bd-bid-dir .bd-wl-form { grid-template-columns: minmax(0, 1fr) 124px 124px; }
@media (max-width: 719px) { .bd-bid-dir .bd-wl-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* [/board-wallet] */
/* [/bids] */
/* [board-wallet] */
/* ---- any wallet on the board (SITE_BOARD_WALLET; board-wallet.js, loaded with hire and buy once the market is open): the
   visitor's own wallet in the top bar (Connect wallet, then its chip and menu, as Go mode's account is drawn), Your
   agents, and the steps of Sell and Buy with wallet in the sheet and the Directory card, in the board's own look: square
   controls, engraved words, the steps as a numbered ledger, a refusal in coral's rule ---- */
:root { --bd-g-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h7v1h-7zM0 2h9v1h-9zM0 3h1v5h-1zM8 3h1v1h-1zM6 4h4v1h-4zM6 5h1v1h-1zM9 5h1v1h-1zM6 6h4v1h-4zM8 7h1v1h-1zM0 8h9v1h-9z'/%3E%3C/svg%3E"); }
.bd-wl { position: relative; display: flex; }
.bd-wl[hidden] { display: none; }
.bd-wl-gl { flex: none; display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--bd-g-wallet) center / 16px 16px no-repeat; mask: var(--bd-g-wallet) center / 16px 16px no-repeat; }
.bd-wl-btn { border-color: var(--bd-rule); color: var(--bd-ink-2); }
.bd-wl-btn:hover { border-color: var(--bd-ink); color: var(--bd-ink); }
.bd-wl-btn:disabled { cursor: progress; opacity: .7; }
.bd-wl-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 4px; border: 1px solid var(--bd-rule); background: transparent; color: var(--bd-ink); font: 500 12.5px/1 var(--bd-mono); cursor: pointer; }
.bd-wl-chip:hover, .bd-wl-chip[aria-expanded="true"] { border-color: var(--bd-ink); }
.bd-wl-chip::after { content: ""; position: absolute; inset: -5px; pointer-events: none; background: var(--bd-ticks-8); opacity: 0; transition: opacity .15s; }
.bd-wl-chip:hover::after { opacity: 1; }
.bd-wl .me-tree { flex: none; display: block; width: 24px; height: 24px; image-rendering: pixelated; }
.bd-wl .me-plate { fill: var(--bd-panel-2); }
.bd-wl-chip > svg:last-child { flex: none; width: 14px; height: 14px; color: var(--bd-muted); }
.bd-wl-short { white-space: nowrap; }
/* its menu, Go mode's account's look; the picker and a refusal under the control alike */
/* the top bar over an open sheet while one of them is open (the sheet stands below the bar, over its popovers) */
.bd-top:has(.bd-wl-menu:not([hidden]), .bd-wl-pick, .bd-wl-note) { z-index: 52; }
.bd-wl-menu, .bd-wl-pick, .bd-wl-note { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; min-width: 240px; max-width: calc(100vw - 32px); background: var(--bd-panel); border: 1px solid var(--bd-ink); box-shadow: 0 24px 48px -24px var(--bd-shade); padding: 6px 0; }
.bd-wl-menu[hidden] { display: none; }
.bd-wl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 6px; padding: 10px 14px 12px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-wl-head .bd-eng { font-size: 10px; letter-spacing: .16em; }
.bd-wl-head code { font: 400 12.5px/1 var(--bd-mono); color: var(--bd-ink-2); }
.bd-wl-item, .bd-wl-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: none; border: 0; text-align: left; font: 500 14px/1.2 var(--bd-sans); color: var(--bd-ink); cursor: pointer; }
.bd-wl-item:hover, .bd-wl-opt:hover { background: var(--bd-wash-2); }
.bd-wl-pick { min-width: 260px; padding: 12px 0 8px; }
.bd-wl-pick-h { margin: 0 14px 6px; font-size: 10.5px; letter-spacing: .16em; }
.bd-wl-ic { flex: none; width: 20px; height: 20px; object-fit: contain; }
.bd-wl-close { margin: 6px 14px 2px; }
.bd-wl-note { width: 300px; padding: 12px 14px 12px 16px; border-left: 2px solid var(--bd-coral); font-size: 13.5px; line-height: 1.45; color: var(--bd-ink-2); }

/* Your agents: a panel under the top bar's right (a phone's bottom sheet, as Sort and filter is), at most 60% of the
   screen's height, scrolling; each agent a row that opens its sheet or its Directory card */
.bd-wl-mine { position: fixed; z-index: 55; top: calc(var(--bd-top-h) + 8px); right: max(16px, calc((100vw - 1680px) / 2 + 32px)); width: 380px; max-width: calc(100vw - 32px); }
.bd-wl-mine[hidden] { display: none; }
.bd-wl-mine-in { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 16px; background: var(--bd-grain), var(--bd-panel); border: 1px solid var(--bd-ink); box-shadow: 0 24px 48px -24px var(--bd-shade); }
.bd-wl-mine-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bd-wl-mine-h { font: 400 22px/1.2 var(--bd-serif); outline: none; }
.bd-wl-sub { margin: 4px 0 10px; }
.bd-wl-rows { list-style: none; margin: 0; padding: 0; }
.bd-wl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--bd-rule-2); color: var(--bd-ink); text-decoration: none; }
.bd-wl-rows li:first-child .bd-wl-row { border-top: 0; }
.bd-wl-row:hover { background: var(--bd-wash); }
.bd-wl-rn { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bd-wl-rn .bd-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 16px/1.25 var(--bd-serif); }
.bd-wl-rs { font: 500 11px/1.2 var(--bd-mono); letter-spacing: .04em; color: var(--bd-muted); white-space: nowrap; text-align: right; }
.bd-wl-rs.bd-wl-on { color: var(--bd-brass); }
.bd-wl-rs.bd-wl-no { color: var(--bd-ink-2); }
.bd-wl-lag { margin-top: 10px; }

/* a flow's part (the sheet's sale and Sell, the Directory card's): its lines, its form, its steps as a numbered ledger
   (done ones in mint, the next one in ink), its buttons, its status line (a refusal under coral's rule) */
.bd-wl-flow { display: grid; gap: 10px; margin: 14px 0 6px; }
.bd-wl-flow > .bd-sh-small { margin-top: 0; }
.bd-wl-line { font-size: 14.5px; line-height: 1.45; color: var(--bd-ink); }
.bd-wl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bd-wl-go:disabled { cursor: not-allowed; opacity: .55; }
.bd-wl-form { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 10px 14px; align-items: start; }
.bd-wl-f { display: grid; gap: 6px; min-width: 0; }
.bd-wl-f .bd-eng { font-size: 10px; letter-spacing: .16em; color: var(--bd-muted); white-space: nowrap; }
.bd-wl-in { width: 100%; height: 38px; padding: 0 12px; background: var(--bd-field); color: var(--bd-ink); border: 1px solid var(--bd-field-edge); border-radius: 0; font: 500 15px var(--bd-mono); -webkit-appearance: none; appearance: none; }
.bd-wl-in:focus { outline: 2px solid var(--bd-mint); outline-offset: -1px; }
.bd-wl-in:disabled { opacity: .6; }
.bd-wl-hint { font-size: 12px; color: var(--bd-muted); }
.bd-wl-fee { grid-column: 1 / -1; min-height: 1.3em; font: 400 12.5px/1.3 var(--bd-mono); color: var(--bd-ink-2); }
.bd-wl-steps { list-style: none; margin: 0; padding: 0; counter-reset: bd-wl; border-top: 1px solid var(--bd-rule-2); }
.bd-wl-steps li { counter-increment: bd-wl; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bd-rule-2); color: var(--bd-ink-2); }
.bd-wl-steps li::before { content: counter(bd-wl); grid-row: 1 / span 2; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--bd-rule); font: 500 11px/1 var(--bd-mono); color: var(--bd-muted); }
.bd-wl-steps b { font: 500 14px/1.35 var(--bd-sans); }
.bd-wl-steps span { font-size: 12.5px; line-height: 1.4; color: var(--bd-muted); }
.bd-wl-steps .bd-wl-next { color: var(--bd-ink); }
.bd-wl-steps .bd-wl-next::before { border-color: var(--bd-ink); color: var(--bd-ink); }
.bd-wl-steps .bd-wl-done b { color: var(--bd-mint); }
.bd-wl-steps .bd-wl-done::before { content: ""; border-color: var(--bd-mint); background: var(--bd-mint); box-shadow: inset 0 0 0 4px var(--bd-panel); }
.bd-wl-say { font-size: 13.5px; line-height: 1.45; color: var(--bd-ink-2); }
.bd-wl-say:empty { display: none; }
.bd-wl-say a { margin-left: 8px; }
.bd-wl-err { padding-left: 12px; border-left: 2px solid var(--bd-coral); color: var(--bd-ink); }
.bd-wl-h { margin: 0; font: 500 20px/1.2 var(--bd-serif); color: var(--bd-ink); }
/* a buy's part drawn inside the Sell after it (It's yours, Lock bond): one part, no second margin */
.bd-wl-flow .bd-wl-flow { margin: 0; }
/* a Directory row whose identity is listed on the market: what it asks, at the row's end, a brass mark */
.bd-wl-dp { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; color: var(--bd-brass); }
.bd-wl-dp .bd-eng { font-size: 9.5px; letter-spacing: .12em; color: var(--bd-brass); }
.bd-wl-dp b { font: 500 12.5px/1 var(--bd-mono); color: var(--bd-ink); }

@media (max-width: 719px) {
  /* a phone: Connect wallet its glyph alone (named), the chip its tree alone, each a 32 px square; Your agents a bottom
     sheet over a scrim */
  .bd-wl-t, .bd-wl-short, .bd-wl-chip > svg:last-child { display: none; }
  .bd-wl-btn { width: 32px; height: 32px; padding: 0; }
  .bd-wl-chip { justify-content: center; width: 32px; height: 32px; padding: 0; }
  .bd-wl .bd-wl-chip .me-tree { width: 22px; height: 22px; }
  .bd-wl-mine { inset: 0; top: 0; right: 0; width: auto; max-width: none; z-index: 60; display: flex; align-items: flex-end; background: var(--bd-scrim); }
  .bd-wl-mine-in { width: 100%; max-height: 88vh; border: 0; border-top: 1px solid var(--bd-line); background: var(--bd-grain), var(--bd-bg); animation: bd-up .26s var(--bd-ease); }
  .bd-wl-mine-in::before { content: ""; display: block; width: 24px; height: 3px; margin: 0 auto 8px; background: var(--bd-line); }
  /* the picker and a refusal span the screen under the top bar (anchored at the control, they ran off its left edge) */
  .bd-wl-pick, .bd-wl-note { position: fixed; top: calc(var(--bd-top-h) + 8px); left: 16px; right: 16px; width: auto; min-width: 0; max-width: none; }
}
@media (pointer: coarse) {
  /* every control a finger can hit at least 44 px each way (the chip too, a 32 px square on a phone; the picker's Close a
     44 px box, its text in the middle) */
  .bd-wl-btn, .bd-wl-chip { min-width: 44px; min-height: 44px; }
  .bd-wl-item, .bd-wl-opt, .bd-wl-go, .bd-wl-row { min-height: 44px; }
  .bd-wl-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .bd-wl-in { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bd-wl-mine-in { animation: none; } }
/* [handover] */
/* the wallet's own part on an agent come to it by a change of hands (board-wallet-handover.js, Make it yours): its two
   steps under their engraved labels, a done one with mint's rule, the file's form one field a row, and the services to
   keep as plain check rows */
.bd-ho-step { display: grid; gap: 8px; padding: 10px 0 12px 12px; border-left: 2px solid var(--bd-rule); }
.bd-ho-step > .bd-eng { font-size: 10px; letter-spacing: .16em; color: var(--bd-muted); }
.bd-ho-step.bd-ho-done { border-left-color: var(--bd-mint); }
.bd-ho-step .bd-sh-small { margin-top: 0; }
.bd-ho-form { grid-template-columns: minmax(0, 1fr); }
.bd-ho-keeps { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.bd-ho-keeps legend { margin-bottom: 4px; padding: 0; font-size: 10px; letter-spacing: .16em; color: var(--bd-muted); }
.bd-ho-keep { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/1.4 var(--bd-mono); color: var(--bd-ink-2); overflow-wrap: anywhere; cursor: pointer; }
.bd-ho-keep input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--bd-mint); }
.bd-ho-keep input:disabled + span { opacity: .6; }
@media (pointer: coarse) {
  .bd-ho-keep { min-height: 44px; align-items: center; }
  .bd-ho-keep input { margin-top: 0; }
}
/* [/handover] */
/* [/board-wallet] */
/* [board-mine] */
/* ---- Your agents on the board (SITE_BOARD_MINE): the rail's row, a filled square in the hub's mint (For hire's is its
   outline, For rent's dashed) ---- */
[data-status="mine"] .bd-rmark::before { inset: 2px 1px; background: var(--bd-mint); }
/* [/board-mine] */
/* [board-backers] */
/* ---- Backers on the board (SITE_BOARD_BACKERS; issue priors-agents/priors#23): the Backers tab, the Directory's head
   over the list's own table (its rows, cells and engraved heads), one row per root, its name the link to its sheet; and
   the backer under a row's chip, a link in the cell's muted sub-line ---- */
.bd-bkpane { padding-top: 6px; }
.bd-bk-hd { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--bd-rule-2); }
.bd-bk-h { font: 400 28px/1.15 var(--bd-serif); letter-spacing: -.01em; color: var(--bd-ink); }
.bd-bk-sub { max-width: 72ch; font-size: 14px; color: var(--bd-ink-2); }
.bd-bk-state { padding: 14px 0; font: 400 12px/1.3 var(--bd-mono); color: var(--bd-muted); }
.bd-bk-state.bd-bk-err { padding-left: 12px; border-left: 2px solid var(--bd-coral); color: var(--bd-ink-2); }
.bd-bk-scroll { overflow-x: auto; }
.bd-bk-table { --bd-cols: minmax(180px, 1.6fr) repeat(7, minmax(92px, 1fr)); min-width: 860px; }
.bd-bk-table .bd-thead { position: static; }
.bd-bk-table .bd-tbody .bd-tr { min-height: 54px; cursor: default; contain-intrinsic-size: auto 54px; }
.bd-bk-table .bd-name { flex-wrap: nowrap; }
.bd-bk-foot { padding: 12px 0 4px; font: 400 12px/1.4 var(--bd-mono); color: var(--bd-muted); }
.bd-bk-by { display: flex; align-items: baseline; gap: 5px; max-width: 100%; color: var(--bd-muted); }
.bd-bk-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-bk-by .bd-id { font-size: 11px; }
.bd-bk-by:hover .bd-bk-nm { color: var(--bd-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* a figure's own word, for a phone, where the heads are not shown */
.bd-bk-l { display: none; }
/* a phone (no horizontal scroll): each root a block, its name over its figures in three columns, each figure under its word */
@media (max-width: 719px) {
  .bd-bk-scroll { overflow: visible; }
  .bd-bk-table { display: block; min-width: 0; }
  .bd-bk-table .bd-thead { display: none; }
  .bd-bk-table .bd-tbody .bd-tr { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px 14px; padding: 12px 0 14px; }
  .bd-bk-table .bd-tr > div { padding: 0; white-space: normal; }
  .bd-bk-table .bd-tr > .bd-r { text-align: left; }
  .bd-bk-table .bd-tr > [data-k="backer"] { grid-column: 1 / -1; }
  .bd-bk-l { display: block; margin-bottom: 3px; font-size: 9.5px; }
}
/* [/board-backers] */