/* Priors: the ledger and the bonsai.
   A credit house, not a dashboard. Paper and ink by day, the grove by night. EB Garamond for what we say,
   Schibsted Grotesk for how it works, IBM Plex Mono only for things you would copy (ids, addresses, code).
   No pills, no glow, no tracked-out capitals. Every class the page scripts generate is styled here. */

:root {
  --paper: #f1ece1;
  --paper-2: #e9e2d3;
  --paper-3: #e2dac8;
  --ink: #1b1a16;
  --ink-2: #3a372f;
  --muted: #6d675a;
  --faint: #71695b; /* 4.6:1 on --paper (WCAG AA for text) */
  --rule: #cbc2af;
  --rule-2: #ddd5c4;
  --field: #faf7f0;
  --field-edge: #a69c86;
  --green: #2f6b4f;
  --green-2: #3f8a67;
  --green-soft: rgba(47, 107, 79, .1);
  --red: #a9432c;
  --red-soft: rgba(169, 67, 44, .1);
  --brass: #94763a;
  --brass-soft: rgba(148, 118, 58, .12);
  --night: #0f1411;
  --night-2: #161c18;
  --night-ink: #e8e2d2;
  --night-muted: #9b9788;
  --night-rule: #2a322d;
  --leaf: #84c49f;

  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .21, 1);
  --nav-bg: rgba(241, 236, 225, .94);
  --hover: rgba(27, 26, 22, .03);
  --shade: rgba(27, 26, 22, .06);
  color-scheme: light;

  /* legacy names the scripts and older markup still reference */
  --bg: var(--paper); --text: var(--ink); --text-2: var(--ink-2); --mint: var(--green); --coral: var(--red);
  --acc: var(--green); --acc-2: var(--green-2); --rose: var(--brass); --gold: var(--brass);

  /* the design kit's tokens (docs/DESIGN-KIT.md 0), for every page: brass as a hairline, the live leaves lit for a
     moment, the lamp, the night inside a specimen case (both themes), the warm scrim behind a sheet, the paper grain, the
     four brass corner ticks (8 px L's at 1.25 px), and the kit's pixel glyphs as masks drawn in currentColor (7 x 7:
     caret, arrow, out, x, plus; 10 x 10: check, up, down, gear). Jobs and the board keep their own twins. */
  --brass-line: rgba(148, 118, 58, .55);
  --leaf-lit: #57a07a;
  --lamp: #c4561f;
  --lamp-glass: #ecbb48;
  --case-0: #0c100d; --case-1: #17251d; --case-mint: #9fe0bd; --case-dim: #62736a; --case-lamp: rgba(240, 205, 124, .20); --case-edge: rgba(209, 174, 104, .5);
  --scrim: rgba(52, 38, 20, .30);
  --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");
  --ticks:
    linear-gradient(var(--brass) 0 0) left top / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) left top / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) right top / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) right top / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) left bottom / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) left bottom / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) right bottom / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) right bottom / 1.25px 8px no-repeat;
  --g-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 2h1v1H0zM6 2h1v1H6zM1 3h1v1H1zM5 3h1v1H5zM2 4h1v1H2zM4 4h1v1H4zM3 5h1v1H3z'/%3E%3C/svg%3E");
  --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");
  --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");
  --g-x: 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");
  --g-plus: 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 1h1v2H3zM1 3h5v1H1zM3 4h1v2H3z'/%3E%3C/svg%3E");
  --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");
  --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");
  --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");
  --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");
}

/* dark: the same ledger after hours. Warm ink-black paper, bone ink; the grove panels stay their own night. */
:root[data-theme="dark"] {
  --paper: #15140f;
  --paper-2: #1d1c16;
  --paper-3: #27251e;
  --ink: #ece6d6;
  --ink-2: #cdc6b5;
  --muted: #9d9686;
  --faint: #8e877a; /* 5.2:1 on --paper */
  --rule: #3b382f;
  --rule-2: #2a2821;
  --field: #1b1a14;
  --field-edge: #5f5a4c;
  --green: #7fbf98;
  --green-2: #95d0ab;
  --green-soft: rgba(127, 191, 152, .12);
  --red: #e0876d;
  --red-soft: rgba(224, 135, 109, .12);
  --brass: #d1ae68;
  --brass-soft: rgba(209, 174, 104, .14);
  --nav-bg: rgba(21, 20, 15, .92);
  --hover: rgba(236, 230, 214, .04);
  --shade: rgba(40, 30, 16, .42); /* a warm brown shade, never black (the kit's scrim) */
  --night: #0c100d;
  color-scheme: dark;
  /* the kit's dark twins: brass lighter, the leaves' light paler, the lamp's flame cream, the scrim warm brown (never
     near-black), the grain bone */
  --brass-line: rgba(209, 174, 104, .5);
  --leaf-lit: #c4f0d7;
  --lamp: #fff1c4;
  --lamp-glass: #d9a23f;
  --scrim: rgba(40, 30, 16, .42);
  --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");
}
:root[data-theme="dark"] .brand svg [fill="#1b1a16"] { fill: var(--ink); }
:root[data-theme="dark"] .brand svg [fill="#2f6b4f"] { fill: var(--green); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
img { display: block; max-width: 100%; }
::selection { background: rgba(47, 107, 79, .22); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 32px; }
.num, .mono { font-variant-numeric: lining-nums tabular-nums; }
.mono, code { font-family: var(--mono); }
.label { font-size: 13px; color: var(--muted); font-weight: 400; }
.sub { color: var(--muted); font-size: 14px; }
.k { color: var(--green); } .g { color: var(--green); } .r { color: var(--red); } .o { color: var(--brass); } .c { color: var(--muted); } .y { color: var(--brass); }
a.k, .prose a, .d a, .board-heading p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.k:hover { color: var(--ink); }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 10px; }
section[id] { scroll-margin-top: 90px; }

/* ------------------------------------------------------------------ masthead */
.nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--ink); }
.nav .wrap { display: flex; align-items: center; gap: 34px; height: 66px; max-width: 1280px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand svg { width: 26px; height: 26px; }
.brand span { font: 500 26px/1 var(--serif); letter-spacing: -.01em; }
/* the serif wordmark sits 4px below the links' baseline; meet halfway so they read as one line */
.brand span { position: relative; top: -2px; }
.links { display: flex; gap: 20px; font-size: 15px; padding-top: 4px; }
/* no label breaks inside itself ("First line" over two lines); a tight width drops the GitHub link first (below) */
.links a { color: var(--ink-2); padding: 4px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.links a:hover { color: var(--ink); }
.links a.on { color: var(--ink); border-bottom-color: var(--ink); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav .sub { display: none; }
/* the chain reader's state: a mono block counter beside a pixel bonsai (the logo's, in miniature). Its trunk and pot sit
   on .dot::before, its canopy on .dot::after; while live the canopy fills in a row per new block (data-n 1-4 on #status,
   set by setStatus in app.js / agent.js; no data-n is the full tree), then it is pruned back and grows again. A
   snapshot is the whole tree in brass, still; an error, the bare trunk in coral. */
.status { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.status .dot { position: relative; top: -1px; flex: none; width: 14px; height: 16px; }
.status .dot::before, .status .dot::after { content: ""; position: absolute; inset: 0; background: var(--faint); }
.status .dot::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='1' y='6' width='5' height='1'/%3E%3Crect x='2' y='7' width='3' height='1'/%3E%3C/svg%3E") 0 0 / 14px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='1' y='6' width='5' height='1'/%3E%3Crect x='2' y='7' width='3' height='1'/%3E%3C/svg%3E") 0 0 / 14px 16px no-repeat; }
.status .dot::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 8' shape-rendering='crispEdges'%3E%3Crect x='8' y='3' width='2' height='1'/%3E%3Crect x='11' y='3' width='2' height='1'/%3E%3Crect x='14' y='2' width='7' height='1'/%3E%3Crect x='15' y='3' width='2' height='1'/%3E%3Crect x='18' y='3' width='2' height='1'/%3E%3Crect x='22' y='1' width='5' height='1'/%3E%3Crect x='21' y='2' width='7' height='1'/%3E%3Crect x='22' y='3' width='2' height='1'/%3E%3Crect x='25' y='3' width='2' height='1'/%3E%3Crect x='30' y='0' width='3' height='1'/%3E%3Crect x='29' y='1' width='5' height='1'/%3E%3Crect x='28' y='2' width='7' height='1'/%3E%3Crect x='29' y='3' width='2' height='1'/%3E%3Crect x='32' y='3' width='2' height='1'/%3E%3C/svg%3E") -56px 0 / 70px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 8' shape-rendering='crispEdges'%3E%3Crect x='8' y='3' width='2' height='1'/%3E%3Crect x='11' y='3' width='2' height='1'/%3E%3Crect x='14' y='2' width='7' height='1'/%3E%3Crect x='15' y='3' width='2' height='1'/%3E%3Crect x='18' y='3' width='2' height='1'/%3E%3Crect x='22' y='1' width='5' height='1'/%3E%3Crect x='21' y='2' width='7' height='1'/%3E%3Crect x='22' y='3' width='2' height='1'/%3E%3Crect x='25' y='3' width='2' height='1'/%3E%3Crect x='30' y='0' width='3' height='1'/%3E%3Crect x='29' y='1' width='5' height='1'/%3E%3Crect x='28' y='2' width='7' height='1'/%3E%3Crect x='29' y='3' width='2' height='1'/%3E%3Crect x='32' y='3' width='2' height='1'/%3E%3C/svg%3E") -56px 0 / 70px 16px no-repeat; }
.status.live { color: var(--ink-2); }
.status.live .dot::before { background: linear-gradient(var(--red) 75%, var(--ink-2) 0); }
.status.live .dot::after { background: var(--green); }
.status.live[data-n="1"] .dot::after { -webkit-mask-position: -14px 0; mask-position: -14px 0; }
.status.live[data-n="2"] .dot::after { -webkit-mask-position: -28px 0; mask-position: -28px 0; }
.status.live[data-n="3"] .dot::after { -webkit-mask-position: -42px 0; mask-position: -42px 0; }
/* live: the seedling grows on a loop (sprout, three canopy rows, then the full tree held), so the reader reads as alive.
   Still under reduced motion: the full tree. */
@keyframes status-grow {
  0% { -webkit-mask-position: -14px 0; mask-position: -14px 0; }
  18% { -webkit-mask-position: -28px 0; mask-position: -28px 0; }
  36% { -webkit-mask-position: -42px 0; mask-position: -42px 0; }
  54%, 100% { -webkit-mask-position: -56px 0; mask-position: -56px 0; }
}
.status.live .dot::after { animation: status-grow 3.6s step-end infinite; }
@media (prefers-reduced-motion: reduce) { .status.live .dot::after { animation: none; } }
.status.snapshot { color: var(--brass); } .status.snapshot .dot::before, .status.snapshot .dot::after { background: var(--brass); }
.status.error { color: var(--red); } .status.error .dot::before { background: var(--red); }
.status.error .dot::after { -webkit-mask-position: 0 0; mask-position: 0 0; }
.nav.solid { box-shadow: 0 6px 24px var(--shade); }
.reading-progress { position: absolute; bottom: -1px; left: 0; height: 2px; width: 100%; background: var(--green); transform-origin: left; }

/* buttons: the design kit's (docs/DESIGN-KIT.md 2), on every page: square, a 1 px ink edge, Schibsted 500. The primary is
   ink with a brass hairline engraved along its foot, green on hover; hover brings the four brass corner ticks 5 px off
   the button (.gobtn draws its own shape on ::after, so it keeps that); focus is the site's 2 px green ring. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; font: 500 15px/1 var(--sans); border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn:not(.gobtn)::after { content: ""; position: absolute; inset: -5px; pointer-events: none; background: var(--ticks); opacity: 0; transition: opacity .15s; }
.btn:not(.gobtn):hover::after { opacity: 1; }
.btn:hover { background: var(--hover); color: var(--ink); }
.btn.primary, .btn.ink { background: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--ink), inset 0 -5px 0 var(--brass); }
.btn.primary:hover, .btn.ink:hover { background: var(--green); border-color: var(--green); color: var(--paper); box-shadow: inset 0 -4px 0 var(--green), inset 0 -5px 0 var(--brass); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.btn.sm { padding: 9px 14px; font-size: 14px; }
/* a button's arrow is the kit's 7 x 7 pixel arrow (the up-right one for a link that leaves the site), never the "→" text
   it carries for a reader without styles */
.btn .arr { display: inline-block; flex: none; width: 14px; height: 14px; font-size: 0; background: currentColor; -webkit-mask: var(--g-arrow) center / 14px 14px no-repeat; mask: var(--g-arrow) center / 14px 14px no-repeat; transition: transform .3s var(--ease); }
.btn[target="_blank"] .arr { -webkit-mask-image: var(--g-out); mask-image: var(--g-out); }
.btn:hover .arr { transform: translateX(3px); }
/* and after a link's words outside a button (a door, a quiet link, an explorer link, the public pages' links): the same
   7 x 7 arrow in the link's colour, the up-right one for a link that leaves the site, its "→" or "↗" text kept for a
   reader without styles (a <span class="arr" aria-hidden="true">). Its box sits on the words' baseline (overflow hidden
   puts an inline-block's baseline at its foot; its own zero-size text would put it at its head, a line below) */
span.arr { display: inline-block; flex: none; width: 14px; height: 14px; overflow: hidden; vertical-align: -2px; font-size: 0; line-height: 0; background: currentColor; -webkit-mask: var(--g-arrow) center / 14px 14px no-repeat; mask: var(--g-arrow) center / 14px 14px no-repeat; }
[target="_blank"] span.arr { -webkit-mask-image: var(--g-out); mask-image: var(--g-out); }
/* the way back (a pager's Previous): the same arrow turned round, nudged left on hover */
.arr.back { transform: scaleX(-1); }
.btn:hover .arr.back { transform: scaleX(-1) translateX(3px); }
.btn:disabled .arr.back, .btn:disabled:hover .arr.back { transform: scaleX(-1); }
/* disabled: plainly not pressable. Faded, a dashed edge, the not-allowed cursor, and no hover change */
.btn:disabled, .btn:disabled:hover { opacity: 1; cursor: not-allowed; color: var(--muted); border: 1px dashed var(--field-edge); background: transparent; box-shadow: none; }
.btn.primary:disabled, .btn.primary:disabled:hover { background: transparent; border: 1px dashed var(--field-edge); color: var(--muted); box-shadow: none; }
.btn:disabled::after { display: none; }
.btn:disabled .arr, .btn:disabled:hover .arr { transform: none; }
.btn.on { background: var(--paper); border-color: var(--green); color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.agentbtn { background: var(--ink); color: var(--paper); }
/* x402, beside "Your agent": outlined, with a small "new" mark (build-time switch SITE_X402_BUTTON) */
.x402btn { gap: 8px; }
.x402btn .mk { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--green); padding: 3px 5px 2px; }
.x402btn:hover .mk { background: var(--ink); color: var(--paper); }
.agentbtn:hover, .agentbtn.on { background: var(--green); border-color: var(--green); color: var(--paper); }
/* Go mode, beside Join: the app (go.priors.trade; me.js points it at the account's origin). A block of ink with
   pixel-stepped corners and the app's pixel sprout (goapp.js ICONS.sprout), which grows a pixel on hover. The shape is
   drawn on ::after, so the focus ring around the button is never clipped. */
.gobtn { position: relative; isolation: isolate; gap: 8px; padding-left: 12px; border-color: transparent; color: var(--paper); --go-glyph: var(--leaf); }
:root[data-theme="dark"] .gobtn { --go-glyph: #2f6b4f; }
.gobtn::after { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--ink); transition: background-color .15s;
  clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); }
.gobtn::before { content: ""; flex: none; width: 20px; height: 20px; margin-block: -3px; background: var(--go-glyph);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='2' height='1'/%3E%3Crect x='7' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='6' y='2' width='4' height='1'/%3E%3Crect x='1' y='3' width='4' height='1'/%3E%3Crect x='6' y='3' width='3' height='1'/%3E%3Crect x='3' y='4' width='4' height='1'/%3E%3Crect x='4' y='5' width='2' height='1'/%3E%3Crect x='4' y='6' width='2' height='1'/%3E%3Crect x='4' y='7' width='2' height='1'/%3E%3Crect x='2' y='8' width='6' height='1'/%3E%3Crect x='11' y='0' width='2' height='1'/%3E%3Crect x='17' y='0' width='2' height='1'/%3E%3Crect x='10' y='1' width='4' height='1'/%3E%3Crect x='16' y='1' width='4' height='1'/%3E%3Crect x='11' y='2' width='4' height='1'/%3E%3Crect x='16' y='2' width='3' height='1'/%3E%3Crect x='13' y='3' width='4' height='1'/%3E%3Crect x='14' y='4' width='2' height='1'/%3E%3Crect x='14' y='5' width='2' height='1'/%3E%3Crect x='14' y='6' width='2' height='1'/%3E%3Crect x='14' y='7' width='2' height='1'/%3E%3Crect x='12' y='8' width='6' height='1'/%3E%3C/svg%3E") 0 0 / 40px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='2' height='1'/%3E%3Crect x='7' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='6' y='2' width='4' height='1'/%3E%3Crect x='1' y='3' width='4' height='1'/%3E%3Crect x='6' y='3' width='3' height='1'/%3E%3Crect x='3' y='4' width='4' height='1'/%3E%3Crect x='4' y='5' width='2' height='1'/%3E%3Crect x='4' y='6' width='2' height='1'/%3E%3Crect x='4' y='7' width='2' height='1'/%3E%3Crect x='2' y='8' width='6' height='1'/%3E%3Crect x='11' y='0' width='2' height='1'/%3E%3Crect x='17' y='0' width='2' height='1'/%3E%3Crect x='10' y='1' width='4' height='1'/%3E%3Crect x='16' y='1' width='4' height='1'/%3E%3Crect x='11' y='2' width='4' height='1'/%3E%3Crect x='16' y='2' width='3' height='1'/%3E%3Crect x='13' y='3' width='4' height='1'/%3E%3Crect x='14' y='4' width='2' height='1'/%3E%3Crect x='14' y='5' width='2' height='1'/%3E%3Crect x='14' y='6' width='2' height='1'/%3E%3Crect x='14' y='7' width='2' height='1'/%3E%3Crect x='12' y='8' width='6' height='1'/%3E%3C/svg%3E") 0 0 / 40px 20px no-repeat; }
.gobtn:hover { background: transparent; border-color: transparent; color: var(--paper); }
.gobtn:hover::after { background-color: var(--green); }
.gobtn:hover::before { background: var(--paper); -webkit-mask-position: -20px 0; mask-position: -20px 0; }
.gobtn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gobtn::after { transition: none; } }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link:hover { color: var(--green); }

/* ------------------------------------------------------------------ page heading (inner pages) */
.app-main { max-width: 1280px; padding-block: 40px 88px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.app-main > * { min-width: 0; }
.board-heading { padding: 18px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-bottom: 28px; }
.eyebrow { font-size: 15px; color: var(--green); margin-bottom: 14px; }
.eyebrow > span { display: none; }
.eyebrow .ek { font-style: italic; font-family: var(--serif); font-size: 17px; }
.board-heading h1 { font: 400 clamp(38px, 5vw, 64px)/1.02 var(--serif); letter-spacing: -.02em; }
.board-heading h1 em, .hero-accent { font-style: italic; color: var(--green); }
.board-heading p { margin-top: 16px; max-width: 40em; font: 400 19px/1.55 var(--serif); color: var(--ink-2); }
.board-heading .aside { font-size: 14px; color: var(--muted); text-align: right; max-width: 22em; }

/* ------------------------------------------------------------------ panels */
.panel { border-top: 1px solid var(--ink); background: transparent; }
.panel > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0 14px; border-bottom: 1px solid var(--rule); }
.panel > header h2 { font: 400 26px/1.15 var(--serif); letter-spacing: -.01em; }
.panel > header .sub { font-size: 14px; }
.panel > header .label { margin-left: auto; font-size: 14px; color: var(--muted); }
.panel > header .btn { margin-left: auto; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.split > * { min-width: 0; }
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; }
.side > * { min-width: 0; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
.grid2 + .grid2, .grid2 + .panel { margin-top: 8px; }

/* the account: figures as a ruled ledger row */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.kpi { padding: 22px 22px 20px; border-left: 1px solid var(--rule); position: relative; min-width: 0; }
.kpi:first-child { border-left: 0; padding-left: 0; }
.kpi .label { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.kpi .val { font: 400 clamp(32px, 3.4vw, 46px)/1.05 var(--serif); letter-spacing: -.015em; font-variant-numeric: lining-nums tabular-nums; }
.kpi .val.rec { font: 500 18px/1.3 var(--mono); letter-spacing: .04em; color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 10px; }
.kpi .val.rec .r { color: var(--red); } .kpi .val.rec .o { color: var(--brass); }
.kpi .sub { margin-top: 8px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.good .val { color: var(--green); }
.kpi.bad .val { color: var(--red); }
.kpi::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green); opacity: 0; transition: opacity .9s; }
.kpi.tick::after { opacity: 1; }

.kpis > .kpi-paid { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 13px 0 14px; border-top: 1px solid var(--rule); min-width: 0; }
.kpis > .kpi-paid[hidden] { display: none; }
.kpi-paid .label { font-size: 14px; color: var(--muted); }
.kpi-paid .pw-val { font: 400 24px/1.15 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.kpi-paid .sub { font-size: 14px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }

.reach-panel { margin: 0 0 28px; }
.reach-body { padding: 2px 0 0; }
.reach-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; }
.reach-row:last-child { border-bottom: 0; }
.reach-k { font-size: 14px; color: var(--muted); }
.reach-v { min-width: 0; overflow-wrap: anywhere; }
.reach-v p { margin: 0 0 3px; }
.reach-v .sub { display: block; font-size: 13.5px; color: var(--muted); }
.reach-v > .btn { margin-left: 6px; }
.reach-pay { margin: 10px 0 4px; padding: 10px 12px 12px; border: 1px solid var(--rule); }
.reach-pay b { display: block; font-weight: 500; }
.reach-pay .btn { margin-top: 8px; }
.reach-pay .reach-s { margin-top: 6px; }
@media (max-width: 640px) { .reach-row { grid-template-columns: minmax(0, 1fr); } }

/* Ways to a line on the page of an identity with no Priors record, and the home page's id field
   (SITE_BRING_AGENT: agent.html #p-lw, agent.js showLineWays, web/ways-core.js; index.html #lw-home) */
.lw-panel { margin: 0 0 28px; }
.lw-list { list-style: none; margin: 0; padding: 0; }
.lw-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); }
.lw-row:last-child { border-bottom: 0; }
.lw-n { font: italic 400 20px/1.25 var(--serif); color: var(--brass); }
.lw-main { min-width: 0; }
.lw-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.lw-t { font-weight: 500; font-size: 15.5px; }
.lw-line { margin: 5px 0 7px; max-width: 62em; font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.lw-go { font-size: 14.5px; }
.lw-none { padding: 14px 0; font-size: 14.5px; color: var(--muted); }
.lw-home { margin: 28px 0 0; max-width: 30em; }
.lw-home label { display: block; margin-bottom: 8px; font: italic 400 17px/1.35 var(--serif); color: var(--ink-2); }
.lw-home-row { display: flex; gap: 10px; }
.lw-home-row input { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ tables */
.tablewrap, .tblwrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; white-space: nowrap; font-size: 14.5px; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th { font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--ink); background: transparent; }
th .sub { font-weight: 400; color: var(--faint); margin-left: 6px; font-size: 12px; }
tbody tr { transition: background .3s; }
tbody tr:hover td { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
td.rank { color: var(--faint); width: 44px; font-variant-numeric: tabular-nums; }
td.wrapcell { white-space: normal; min-width: 120px; }
tr.empty td { padding: 26px 0; color: var(--muted); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable.on { color: var(--ink); }
/* the sort's direction: the kit's 10 x 10 pixel down and up, in the heading's colour (no arrow text) */
th.sortable.on::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--g-down) center / 10px 10px no-repeat; mask: var(--g-down) center / 10px 10px no-repeat; }
th.sortable.on[aria-sort="ascending"]::after { -webkit-mask-image: var(--g-up); mask-image: var(--g-up); }
tr.top td.rank { color: var(--green); }
tr.dead .nm, tr.dead .scorecell b { color: var(--red); }
@keyframes rowFlash { from { background: var(--green-soft); } to { background: transparent; } }
tr.flash td { animation: rowFlash 3s ease-out both; }
table.score-table, table.loans-table { min-width: 520px; }
.tbl { min-width: 0; }
.tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.c { color: var(--muted); white-space: normal; font-size: 14px; }

/* agents in tables */
.agent { display: flex; align-items: center; gap: 12px; }
a.agent:hover .nm { color: var(--green); }
.agent .av { width: 32px; height: 32px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--rule); font: 500 12px var(--mono); color: var(--ink-2); flex-shrink: 0; }
.agent .av.root { background: var(--paper); border-color: var(--brass); color: var(--brass); }
.agent .av.dead { background: var(--paper); border-color: var(--red); color: var(--red); }
.agent .nm { font: 500 17px/1.2 var(--serif); }
.agent .nm a:hover { color: var(--green); }
.agent .id { font: 12px var(--mono); color: var(--muted); }
.scorecell { display: flex; align-items: center; gap: 10px; min-width: 110px; }
.scorecell b { font-weight: 500; min-width: 3ch; font-variant-numeric: tabular-nums; }
tr.top .scorecell b { color: var(--green); }
.bar, .lbar { flex: 1; height: 4px; background: var(--rule-2); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width 1.6s var(--ease); }
.bar.dead i { background: var(--red); }
.lbar i { display: block; height: 100%; width: 0; background: var(--green); transition: width 1.6s var(--ease); }
.lbar.root i { background: var(--brass); }
.lbar.dead i { background: var(--red); }
.linecell { display: grid; gap: 6px; min-width: 110px; max-width: 170px; }
.linecell span { font-size: 14px; font-variant-numeric: tabular-nums; }
.linecell em { font-style: normal; color: var(--muted); }
td.rec { font: 13px var(--mono); color: var(--green); letter-spacing: .03em; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
td.rec .r { color: var(--red); } td.rec .o { color: var(--brass); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ink); }
.pager[hidden] { display: none; }

/* chips: a word with a mark, never a pill */
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.chip::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.chip.ok { color: var(--green); } .chip.warn, .chip.root { color: var(--brass); } .chip.bad { color: var(--red); } .chip.neutral { color: var(--ink-2); }

/* filters and search */
.lbtools { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); flex-wrap: wrap; }
.lbtools .seg { display: inline-flex; gap: 18px; }
.lbtools .seg button { font: 500 14px var(--sans); padding: 4px 0; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--muted); cursor: pointer; }
.lbtools .seg button:hover { color: var(--ink); }
.lbtools .seg button.on { color: var(--ink); border-bottom-color: var(--ink); }
input, textarea { font: 15px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); padding: 11px 12px; border-radius: 0; outline: none; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:focus, textarea:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
input:disabled, textarea:disabled { background: var(--paper-2); color: var(--muted); cursor: not-allowed; }
/* radios and checkboxes: the kit's square, never the browser's round dot or its own tick (docs/DESIGN-KIT.md §0): a
   16 px box on the field's paper in a hairline; a radio picked holds the 8 px green square, a box ticked turns green
   with the pixel check in paper. A place that sizes or hides its own (a row's see-through radio) still does */
input:is([type="radio"], [type="checkbox"]) { -webkit-appearance: none; appearance: none; position: relative; display: inline-grid; place-content: center; box-sizing: border-box; width: 16px; height: 16px; margin: 0; padding: 0; flex: none; vertical-align: -3px; border: 1px solid var(--field-edge); border-radius: 0; background: var(--field); box-shadow: none; color: var(--ink); cursor: pointer; }
input:is([type="radio"], [type="checkbox"])::before { content: ""; width: 8px; height: 8px; }
input[type="radio"]:checked { border-color: var(--ink); }
input[type="radio"]:checked::before { background: var(--green); }
input[type="checkbox"]:checked { border-color: var(--green); background: var(--green); }
input[type="checkbox"]:checked::before { width: 10px; height: 10px; background: var(--paper); -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; }
input:is([type="radio"], [type="checkbox"]):focus { border-color: var(--ink); box-shadow: none; }
input:is([type="radio"], [type="checkbox"]):checked:focus { border-color: var(--green); }
input[type="radio"]:checked:focus { border-color: var(--ink); }
input:is([type="radio"], [type="checkbox"]):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
input:is([type="radio"], [type="checkbox"]):disabled { cursor: not-allowed; border-style: dashed; background: transparent; }
input:is([type="radio"], [type="checkbox"]):disabled:checked::before { background: var(--muted); }
@media (forced-colors: active) { input:is([type="radio"], [type="checkbox"]):checked::before { background: CanvasText; forced-color-adjust: none; } }
.lbtools input { margin-left: auto; width: 220px; max-width: 100%; padding: 9px 12px; font-size: 14px; }

/* ------------------------------------------------------------------ the grove (night) */
.grove, .map, .seatgrove { position: relative; height: clamp(420px, 58vh, 820px); background: var(--night); overflow: hidden; }
.grove canvas, .map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tip, .grove .tip, .schem .tip { position: absolute; z-index: 2; pointer-events: none; padding: 9px 12px; background: var(--night-2); border: 1px solid var(--night-rule); color: var(--night-muted); font-size: 13px; line-height: 1.5; max-width: 250px; }
.tip b { color: var(--night-ink); font-weight: 500; }
.map { height: 380px; }
.map .legend { position: absolute; left: 14px; bottom: 12px; display: inline-flex; gap: 14px; font-size: 12px; color: var(--night-muted); }
.map .legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: middle; }

/* capital bar */
.cap { padding: 16px 0 4px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.capbar { display: flex; height: 8px; overflow: hidden; background: var(--rule-2); margin-bottom: 4px; }
.capbar i { display: block; height: 100%; width: 0; transition: width 1.6s var(--ease); }
.cap .idle { background: var(--ink-2); } .cap .out { background: var(--brass); } .cap .stake { background: var(--red); } .cap .res { background: var(--green); }
.caprow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; color: var(--ink-2); }
.caprow i { width: 8px; height: 8px; }
.caprow b { font: 400 20px var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.caprow.cap-held { border-top: 1px solid var(--rule-2); padding-top: 10px; }
.caprow.cap-held + .caprow.cap-held { border-top: 0; padding-top: 0; }
.cap-note { margin: 0; font-size: 13px; color: var(--ink-3, var(--ink-2)); }

/* activity */
.ledger { max-height: 560px; overflow: auto; }
.ev { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); align-items: start; font-size: 14px; }
.ev:last-child { border-bottom: 0; }
.ev .k { width: 7px; height: 7px; margin-top: 7px; background: var(--faint); }
.ev.repaid .k, .ev.claimed .k { background: var(--green); }
.ev.borrowed .k { background: var(--ink-2); }
.ev.vouched .k, .ev.root .k { background: var(--brass); }
.ev.defaulted .k, .ev.recourse .k, .ev.slashed .k { background: var(--red); }
.ev .d { color: var(--ink-2); overflow-wrap: anywhere; }
.ev .d b { color: var(--ink); font-weight: 500; }
.ev .t { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ev .t a:hover { color: var(--green); }
.ev .a { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.ev.repaid .a, .ev.claimed .a { color: var(--green); }
.ev.defaulted .a { color: var(--red); }
@keyframes evIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ev.new { animation: evIn 1.4s ease-out both; }

/* ------------------------------------------------------------------ boxes, code, definitions */
.box { border-top: 1px solid var(--ink); min-width: 0; }
.box > header { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.box > header span:first-child { font: italic 400 18px/1.2 var(--serif); color: var(--ink); }
.box > header span:last-child { margin-left: auto; font: 12.5px var(--mono); }
pre, .code { margin: 0; padding: 18px 20px; background: var(--paper-2); border: 0; font: 13px/1.75 var(--mono); color: var(--ink-2); white-space: pre; overflow-x: auto; }
.code b, pre b { color: var(--ink); font-weight: 500; }
.code .cm, pre .cm { color: var(--faint); }
.code .line { display: block; margin-inline: -20px; padding-inline: 20px; transition: background .6s; }
.code .line.hi { background: var(--green-soft); }
.branch, #p-cast { line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
/* an agent's badge on its record (agent.js): the live SVG, Copy badge, and its Markdown, selectable by hand */
.ag-badge-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0 12px; }
.ag-badge-row img { display: block; height: 20px; max-width: 100%; }
.ag-badge-md { display: block; width: 100%; resize: none; padding: 12px 14px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-badge-s { min-height: 1.5em; margin-top: 8px; font-size: 13px; }
/* [share] Share on an agent's record (SITE_SHARE_CARD: agent.html #p-share, agent.js showShare, agent-share.js; Go
   mode's share sheet further down, in its own block): the card first, then its film on a canvas in the same box, so
   nothing moves; a press on the card opens it full size; Replay, small, in the card's top right corner once the film
   has played; the actions under it, the main one (Share on X) on its own line and the others two to a line (one to a
   line on the narrowest phones), one size; the answers on the status line under them (no room taken until it says
   something); the badge under its own label. On a phone or a narrow window the panel comes right after the figures
   (agent.js placeShare) */
#p-share.sh-up { margin-top: 32px; }
.sh-prev { position: relative; margin: 14px 0 0; aspect-ratio: 1200 / 630; background: var(--night); border: 1px solid var(--rule); overflow: hidden; }
.sh-prev[hidden] { display: none; }
.sh-full { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.sh-full > img, .sh-full > canvas { display: block; width: 100%; height: 100%; }
.sh-full > [hidden], .sh-prev > [hidden], .sh-acts > [hidden] { display: none; }
.sh-full:focus-visible { outline: 2px solid var(--night-ink); outline-offset: -4px; }
/* the pill is 26px tall; its touch target, 44px, is the transparent ::before around it */
.sh-replay { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid rgba(232, 226, 210, .4); background: rgba(15, 20, 17, .6); color: var(--night-ink); font: 500 11.5px/1 var(--sans); cursor: pointer; }
.sh-replay::before { content: ""; position: absolute; inset: -9px; }
.sh-replay:hover, .sh-replay:focus-visible { background: rgba(15, 20, 17, .85); border-color: var(--night-ink); }
.sh-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.sh-acts > .btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
.sh-acts > .btn.primary { flex-basis: 100%; }
@media (max-width: 360px) { .sh-acts > .btn { flex-basis: 100%; } }
.sh-xm { width: 13px; height: 13px; flex: none; }
.sh-s { margin: 8px 0 0; font-size: 13px; }
.sh-s:empty { margin: 0; }
.sh-badge { margin-top: 16px; border-top: 1px solid var(--rule); }
.sh-k { padding-top: 12px; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.sh-badge .ag-badge-row { padding-top: 10px; }
@media (pointer: coarse) { #p-share .btn { min-height: 44px; } }
/* a touch screen keeps :hover on what was last tapped: here a plain button stays plain after its tap, so Share on X
   stays the one filled button */
@media (hover: none) { :is(#p-share, .sh-sheet) .btn:not(.primary):not(:disabled):hover { background: transparent; border-color: var(--ink); color: var(--ink); } }
/* web/ itself (unbuilt) has both panels: the Badge panel a build without the switch ships in Share's place stays hidden */
[data-no-share] { display: none; }
/* [/share] */
.branch a:hover { color: var(--green); }
.prose { font: 400 18px/1.6 var(--serif); color: var(--ink-2); padding: 16px 0; }
.prose b { color: var(--ink); font-weight: 500; }
.prose p + p { margin-top: 12px; }
.defs { display: grid; grid-template-columns: minmax(0, 1fr); }
.def { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.def:last-child { border-bottom: 0; }
.def .t { font: 500 17px/1.3 var(--serif); color: var(--ink); }
.def .d { color: var(--ink-2); }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; padding: 16px 0; }
.kv span { color: var(--muted); }
.kv code { overflow-wrap: anywhere; color: var(--ink-2); font-size: 13px; }
.kv a { color: var(--green); }
#p-verify code a { color: var(--green); }
.params { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--rule-2); }
.params b { color: var(--ink-2); font-weight: 500; }
.sig { padding: 10px 0; border-bottom: 1px solid var(--rule-2); font: 13px var(--mono); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.sig .fn { color: var(--ink); } .sig .fn .k { color: var(--green); } .sig .who { color: var(--muted); font-family: var(--sans); }
.ex { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.ex .v { text-align: right; font-variant-numeric: tabular-nums; }
.ex .sub { font-size: 13px; }
.ex.total { border-bottom: 3px double var(--ink); font-weight: 500; }
.ex.total .v { font: 400 24px var(--serif); color: var(--green); }
.stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.stat > div { padding: 18px 20px; border-left: 1px solid var(--rule); }
.stat > div:first-child { border-left: 0; padding-left: 0; }
.stat .v { font: 400 28px/1.1 var(--serif); }
.stat .v.g { color: var(--green); }
.stat .label { margin-top: 6px; }
.inv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.fsm svg { width: 100%; height: auto; display: block; padding: 14px 0; background: var(--paper-2); }
.fsm rect { fill: var(--paper); stroke: var(--ink); }
.fsm text { font: 12px var(--sans); fill: var(--ink-2); }
.fsm text.t { font: 500 15px var(--serif); fill: var(--ink); }
.fsm text.c { fill: var(--muted); font-size: 12px; }
.fsm path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.fsm path.hot { stroke: var(--brass); stroke-dasharray: 4 8; animation: dash 3s linear infinite; }
.fsm path.bad { stroke: var(--red); stroke-dasharray: 4 8; animation: dash 3s linear infinite; }
.fsm path.ok { stroke: var(--green); stroke-dasharray: 4 8; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }

/* ------------------------------------------------------------------ agent page: lookup, wallet, owner */
.lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.lookup label { font: italic 400 19px var(--serif); color: var(--ink); }
.lookup input { flex: 1 1 260px; min-width: 0; }
#wallet > header .btn, #own > header .btn { margin-left: auto; }
#wallet > header .btn + .btn, #own > header .btn + .btn { margin-left: 8px; }
.wstat { padding: 10px 0; font-size: 14px; color: var(--ink-2); min-height: 8px; overflow-wrap: anywhere; }
.wstat.ok { color: var(--green); } .wstat.warn { color: var(--red); } .wstat.muted { color: var(--muted); }
.wstat a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
/* a Google account not on the closed list (account.js notListedSay): the words, then three ways out */
.wstat.nl .nl-t { display: block; }
.wstat.nl .nl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wstat.nl .nl-acts .btn { color: var(--ink); text-decoration: none; min-height: 40px; }
.wstat.nl .nl-acts .btn:hover { color: var(--paper); }
/* a failure's way forward, after its words (account.js failLine): Try again, or Sign in again */
.wstat .fail-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wstat .fail-act .btn { min-height: 40px; }
/* each action's own line, right under its button (journey audit 2026-10-11, B1-04 to B1-11): on an agent's card
   (Repay, Borrow, Close line), the transfer address, Claim fees (a backing row's with the backing screens' styles); no room taken
   while it is empty, and still a live region */
.ac-act-s:empty, #ac-wd-set-s:empty, .se-claim-s:empty, #st-3-s:empty { padding: 0; min-height: 0; }
.ac-loans .ac-act-s { padding: 4px 0 6px; }
.ac-loans .ac-act-s:empty { padding: 0; }
/* a stock line's own line: inside its row, under its buttons */
.ga-row .ga-row-s { flex: 1 1 100%; padding: 0; min-height: 0; }
.ga-row .ga-row-s:empty { display: none; }
.acct .se-you > div.se-claim-s { grid-column: 1 / -1; display: block; padding: 0; justify-self: end; max-width: 52ch; text-align: right; }
.acct .se-you > div.se-claim-s b { font: inherit; font-weight: 600; }
.acct .se-you > div.se-claim-s .fail-act { justify-content: flex-end; }
.acct .se-you > div.se-claim-s:empty { display: none; }
@media (max-width: 640px) { .acct .se-you > div.se-claim-s { justify-self: stretch; max-width: none; text-align: left; } .acct .se-you > div.se-claim-s .fail-act { justify-content: flex-start; } }
.wmine { padding: 0 0 8px; }
.wmine a { text-decoration: underline; text-underline-offset: 3px; }
.acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.act { padding: 16px 24px 10px 0; border-bottom: 1px solid var(--rule-2); }
.acts > .act:nth-child(2n) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--rule-2); }
.act.alt, .acts > .act.alt { grid-column: 1 / -1; padding-left: 0; padding-right: 0; border-left: 0; }
.act:last-child { border-bottom: 0; }
.act .t { font: 500 17px/1.35 var(--serif); color: var(--ink); margin-bottom: 10px; }
.act .t b { font-weight: 500; }
.act .row, .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.act input { flex: 1 1 130px; min-width: 0; padding: 10px 12px; font-size: 14px; }
.row input.invite { flex: 1 1 260px; min-width: 200px; font: 12.5px var(--mono); }
.act .btn { padding: 10px 14px; font-size: 14px; }
.act .btn.busy { opacity: .6; }
.act .row > .btn:first-of-type:not(:disabled) { background: var(--ink); color: var(--paper); }
.act .row > .btn:first-of-type:not(:disabled):hover { background: var(--green); border-color: var(--green); }
.act .wstat { padding-left: 0; padding-right: 0; }
/* an app's own browser (account.js inAppNotice): a quiet note over the Google button on /account, /start and /stocks,
   with the page's link to copy and, on Android, Open in Chrome; its buttons are plain, the Google button stays the one
   that stands out */
.inapp { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 2px solid var(--brass); background: var(--card, var(--paper)); color: var(--ink-2); font: 400 14.5px/1.45 var(--sans); text-align: left; }
.inapp[hidden] { display: none; }
.acct .inapp { border-radius: 0; border: 1px solid var(--rule-2); border-left: 2px solid var(--brass); }
#ac-in .act > .inapp { margin: 0; }
.inapp-t { margin: 0 0 10px; }
.inapp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.inapp .inapp-acts .btn { padding: 9px 14px; font-size: 14px; background: var(--field); border-color: var(--field-edge); color: var(--ink); text-decoration: none; }
.inapp .inapp-acts .btn:hover { border-color: var(--ink); }
.inapp .inapp-s { padding: 8px 0 0; min-height: 0; font-size: 14px; }
.inapp .inapp-s:empty { display: none; }
.inapp-url { display: block; margin-top: 6px; padding: 8px 10px; background: var(--field); border: 1px solid var(--field-edge); color: var(--ink); font: 400 13px/1.4 var(--mono); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.row .reqlink { flex-basis: 100%; color: var(--green); font-size: 14px; }
#own .ownact { border: 0; padding-top: 6px; }
.act-cell { width: 1px; white-space: nowrap; }
.act-cell .btn.repay { padding: 6px 10px; font-size: 13px; }
body:not(.owner) .act-cell { display: none; }
.agentcard, .agentcard[hidden], .act[hidden], .row .reqlink[hidden] { display: none; }
.steps.grid2 .code { font-size: 12.5px; }

/* ------------------------------------------------------------------ seats page */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.doors.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door { display: block; position: relative; padding: 26px 28px 30px 0; border-right: 1px solid var(--rule); color: var(--ink); }
.door + .door { padding-left: 28px; }
.door:last-child { border-right: 0; }
.door .n { font: italic 400 26px/1 var(--serif); color: var(--brass); margin-bottom: 12px; }
.door b { display: block; font: 400 28px/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 10px; }
.door p { color: var(--ink-2); font-size: 15px; max-width: 34em; }
.door .tag { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 1px solid currentColor; }
.door .tag.live { color: var(--green); }
.door:hover b { color: var(--green); }
.steps.three, .steps:not(.grid2) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.steps.three > div { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule-2); }
.steps.three > div + div { padding-left: 24px; border-left: 1px solid var(--rule-2); }
.steps.three .n { font: italic 400 22px/1 var(--serif); color: var(--brass); margin-bottom: 10px; }
.steps.three b { display: block; font: 500 19px/1.25 var(--serif); margin-bottom: 6px; }
.steps.three p { color: var(--ink-2); font-size: 15px; }
.reqtext { margin: 10px 0 6px; padding: 14px 16px; background: var(--paper-2); white-space: pre-wrap; font: 13px/1.6 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.request .row .sub { flex-basis: 100%; }
.fallback summary { cursor: pointer; padding: 12px 0; color: var(--ink-2); font-size: 15px; list-style: none; }
.fallback summary::-webkit-details-marker { display: none; }
.fallback summary::before { content: "+ "; color: var(--green); }
.fallback[open] summary::before { content: "− "; }
.fallback > .t { padding-top: 6px; font-size: 16px; }
#rq-out[hidden] { display: none; }
.label.g { color: var(--green); }

/* ------------------------------------------------------------------ contract address */
.ca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k a a" "c c x"; border: 1px solid var(--ink); background: var(--paper-2); max-width: 640px; }
.ca .ca-k { grid-area: k; } .ca code { grid-area: a; } .ca #ca-copy { grid-area: c; } .ca .ca-x { grid-area: x; }
.ca .ca-k, .ca .k { padding: 13px 14px; border-right: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ca code { min-width: 0; padding: 14px; font: 13px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.ca code::-webkit-scrollbar { display: none; }
.ca button, .ca #ca-copy { border: 0; border-top: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 14px var(--sans); padding: 13px 18px; cursor: pointer; }
.ca button:hover { background: var(--green); }
.ca .ca-x { display: flex; align-items: center; justify-content: center; padding: 13px 18px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ca .ca-x:hover { color: var(--green); }

/* ------------------------------------------------------------------ landing */
.dateline { border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.dateline .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 2px 16px; max-width: 1280px; flex-wrap: wrap; padding-block: 6px; }
/* each line reads whole or not at all: the middle one goes below 1180px, the first below 600px (rules below), and a
   larger text size moves the link to a line of its own rather than cut a word */
.dateline .wrap > * { white-space: nowrap; }
.dateline a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.dateline a:hover { color: var(--green); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-block: 56px 64px; align-items: end; }
.kicker { font-size: 15px; color: var(--green); margin: 0 0 22px; }
.hero h1 { font: 400 clamp(46px, 6.2vw, 86px)/.98 var(--serif); letter-spacing: -.022em; margin: 0 0 28px; }
.hero h1 em { font-style: italic; color: var(--green); }
.lede { font: 400 21px/1.5 var(--serif); color: var(--ink-2); max-width: 32em; margin: 0 0 34px; }
.actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.tree { margin: 0; align-self: stretch; display: flex; flex-direction: column; }
.tree canvas { width: 100%; flex: 1; min-height: 520px; display: block; cursor: grab; touch-action: pan-y; }
.tree canvas:active { cursor: grabbing; }
.tree figcaption { display: flex; gap: 14px; align-items: baseline; border-top: 1px solid var(--ink); padding-top: 12px; font: italic 400 16px/1.4 var(--serif); color: var(--muted); }
.tree figcaption b { font: normal 500 14px/1.4 var(--sans); color: var(--green); white-space: nowrap; }
.account { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.account .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.account .cell { padding: 28px 28px 24px; border-left: 1px solid var(--rule); min-width: 0; }
.account .cell:first-child { border-left: 0; padding-left: 0; }
.account .k { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.account .v { font: 400 clamp(38px, 4vw, 54px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.account .v.good { color: var(--green); }
.account .s { font-size: 14px; color: var(--muted); margin-top: 10px; }
.source { font-size: 13px; color: var(--muted); padding-top: 12px; }
.source code { font-size: 12px; color: var(--ink-2); }
.chapter { padding: 104px 0; }
.chead { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; margin-bottom: 52px; }
.chead .no { font: italic 400 22px/1 var(--serif); color: var(--brass); border-top: 1px solid var(--ink); padding-top: 14px; }
.chead h2 { font: 400 clamp(34px, 4vw, 52px)/1.04 var(--serif); letter-spacing: -.018em; border-top: 1px solid var(--ink); padding-top: 12px; }
.chead p { font: 400 19px/1.55 var(--serif); color: var(--ink-2); margin-top: 18px; max-width: 36em; }
.howto { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; }
.diagram { position: sticky; top: 96px; align-self: start; }
.diagram svg { width: 100%; height: auto; }
.diagram .box { stroke: var(--ink); fill: transparent; transition: fill .5s var(--ease), stroke .5s var(--ease); }
.diagram .t1 { fill: var(--ink); font: 400 22px "EB Garamond", serif; }
.diagram .t2 { fill: var(--muted); font: 400 12px "Schibsted Grotesk", sans-serif; }
.diagram .lb { fill: var(--brass); font: italic 400 16px "EB Garamond", serif; transition: opacity .5s; }
.diagram .ar, .diagram .hd { stroke: var(--ink); transition: stroke .5s, opacity .5s; }
.diagram .g { stroke: var(--green); } .diagram .lb.g { fill: var(--green); stroke: none; }
.diagram .r { stroke: var(--red); } .diagram .lb.r { fill: var(--red); stroke: none; font-size: 14px; }
.diagram .loss { opacity: .28; transition: opacity .5s; }
/* the walk-through: one step at a time, its money moving, its box lit */
.diagram [data-step].on .box { fill: var(--green-soft); stroke: var(--green); }
.diagram [data-step].on .ar { stroke-dasharray: 5 6; animation: dash 1.1s linear infinite; }
.diagram [data-step="4"].on { opacity: 1; }
.howto.at-4 .diagram [data-step="1"] .box { fill: var(--red-soft); stroke: var(--red); }
.howto.playing .stepl { transition: opacity .5s var(--ease); opacity: .5; cursor: pointer; }
.howto.playing .stepl.on { opacity: 1; }
.stepl.on .n { color: var(--green); }
.stepl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--rule); }
.stepl:last-child { border-bottom: 1px solid var(--rule); }
.stepl .n { font: italic 400 34px/1 var(--serif); color: var(--brass); }
.stepl h3 { font: 500 25px/1.2 var(--serif); margin: 0 0 8px; }
.stepl p { color: var(--ink-2); max-width: 38em; }
.stepl .aside { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); }
.night { background: var(--night); color: var(--night-ink); }
.night .chead .no { color: var(--leaf); border-color: var(--night-ink); }
.night .chead h2 { border-color: var(--night-ink); }
.night .chead p { color: var(--night-muted); }
.night .link { color: var(--night-ink); }
.night .link:hover { color: var(--leaf); }
.after { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 28px; font-size: 15px; }
/* the landing ledger (rows written by app.js into #log) */
.logwrap { min-width: 0; }
.logwrap header { display: grid; grid-template-columns: 110px 100px minmax(0, 1.1fr) minmax(0, 1.4fr) 170px; white-space: nowrap; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--night-ink); font-size: 14px; font-weight: 500; color: var(--night-muted); }
.logwrap header span:last-child { text-align: right; font-weight: 400; }
.log { display: grid; grid-template-columns: minmax(0, 1fr); }
.log .ln { display: grid; grid-template-columns: 110px 100px minmax(0, 1.1fr) minmax(0, 1.4fr) 170px 0; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--night-rule); align-items: baseline; white-space: nowrap; overflow: hidden; font-size: 15px; }
.log .ln > span { overflow: hidden; text-overflow: ellipsis; }
.log .ln .blk { font: 13px var(--mono); color: var(--night-muted); }
.log .ln .kind { font: 400 18px/1.2 var(--serif); color: var(--night-ink); }
.log .ln .amt { text-align: right; font-variant-numeric: tabular-nums; }
.log .ln .tx { display: none; }
.log .ln .who2 { color: var(--night-muted); }
.log .ln.repaid .kind, .log .ln.claimed .kind, .log .ln.repaid .amt { color: var(--leaf); }
.log .ln.vouched .kind, .log .ln.root .kind { color: #d6b36c; }
.log .ln.defaulted .kind, .log .ln.defaulted .amt, .log .ln.slashed .kind { color: #e08a6f; }
@keyframes lnIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.log .ln.new { animation: lnIn 1.4s ease-out both; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.way { padding: 34px 32px 38px 0; border-right: 1px solid var(--rule); }
.way + .way { padding-left: 32px; }
.way:last-child { border-right: 0; }
.way .who { font-size: 14px; color: var(--muted); }
.way h3 { font: 400 32px/1.08 var(--serif); letter-spacing: -.012em; margin: 10px 0 14px; }
.way p { color: var(--ink-2); margin-bottom: 22px; }
.way ul { margin: 0 0 24px; padding: 0; list-style: none; font-size: 15px; }
.way li { padding: 8px 0; border-top: 1px dotted var(--rule); color: var(--ink-2); }
.way li b { font-weight: 500; color: var(--ink); }
/* a quieter second way under a door's button (index.html: from your own wallet) */
.way .link.sm { display: block; width: fit-content; margin-top: 14px; font-size: 14px; color: var(--muted); }
.way .link.sm:hover { color: var(--ink); }
.token .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.token .wrap > * { min-width: 0; }
.token h2 { font: 400 clamp(32px, 3.6vw, 46px)/1.06 var(--serif); letter-spacing: -.016em; margin-bottom: 18px; }
.token p { font: 400 19px/1.55 var(--serif); color: var(--ink-2); margin-bottom: 26px; }
.terms2 { border-top: 1px solid var(--ink); }
.terms2 div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.terms2 span { font-size: 14px; color: var(--muted); }
.terms2 b { font: 400 22px/1.3 var(--serif); }

/* protocol page sections */
section.sec { padding-block: 72px; border-top: 1px solid var(--ink); }
section.sec:first-of-type { border-top: 0; }
.sec .head { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: baseline; margin-bottom: 36px; }
.sec .head .no { font: italic 400 22px/1 var(--serif); color: var(--brass); }
.sec .head h2 { font: 400 clamp(30px, 3.4vw, 44px)/1.08 var(--serif); letter-spacing: -.016em; }
.sec .head p { margin-top: 12px; font: 400 18px/1.55 var(--serif); color: var(--ink-2); max-width: 40em; }
.sec pre.code { font-size: 11.5px; line-height: 1.8; padding: 16px 16px; }
.sec .grid2 { gap: 28px; }
.app-main .sec > .wrap { padding-inline: 0; max-width: none; }

/* a line under the home page's "Get a first line" card, the Seats page's fourth door (four across on a wide screen, one
   under another below), a line in Start's sign-in step */
.way .ethos-note { margin: 22px 0 0; padding-top: 14px; border-top: 1px dotted var(--rule); font-size: 15px; color: var(--ink-2); }
.way .ethos-note b, .st-step .ethos-note b { font-weight: 500; color: var(--ink); }
.way .ethos-note a.k { color: var(--green); white-space: nowrap; }
@media (min-width: 1001px) { .doors:has(> .ethos-note-door:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-step .ethos-note { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--rule); }

/* ------------------------------------------------------------------ colophon */
footer.foot { border-top: 1px solid var(--ink); padding: 42px 0 60px; font-size: 14px; color: var(--muted); }
footer.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; max-width: 1280px; }
footer.foot .brand span { font-size: 22px; color: var(--ink); }
footer.foot p { margin-top: 12px; max-width: 30em; }
footer.foot h4 { margin: 0 0 12px; font: 500 14px var(--sans); color: var(--ink); }
footer.foot a { display: block; padding: 3px 0; }
footer.foot a:hover { color: var(--ink); text-decoration: underline; }
footer.foot #foot-chain { display: block; margin-top: 10px; font-size: 13px; }

/* ------------------------------------------------------------------ skeletons: nothing but the truth */
/* the design kit's loading: a ruled line where the words will go (1 px, at their foot), no grey block, no shimmer */
.sk { color: transparent !important; background: linear-gradient(var(--rule) 0 0) 0 100% / 100% 1px no-repeat; display: inline-block; min-width: 3.4em; vertical-align: middle; }
.night .sk { background: linear-gradient(var(--night-rule) 0 0) 0 100% / 100% 1px no-repeat; }
.sk > * { visibility: hidden; }
.sk.wide { min-width: min(100%, 24em); }
tbody.sk-rows td { padding-top: 12px; padding-bottom: 12px; }
tbody.sk-rows .sk { min-width: 100%; height: 1em; }

/* ------------------------------------------------------------------ motion */
.reveal { opacity: 1; transform: none; }
@keyframes arrive { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .arrived { animation: arrive .6s var(--ease) var(--arrival-delay, 0ms) backwards; }
}
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 1000px) {
  .split, .grid2, .grid3, .howto, .chead, .sec .head, .token .wrap, .board-heading { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .board-heading .aside { text-align: left; }
  .diagram { position: static; max-width: 320px; }
  .ways, .doors, .doors.two, .steps.three, .steps:not(.grid2) { grid-template-columns: minmax(0, 1fr); }
  .way, .way + .way, .door, .door + .door { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .steps.three > div + div { padding-left: 0; border-left: 0; }
  .logwrap header { grid-template-columns: 90px minmax(0, 1fr) auto; }
  .logwrap header span:nth-child(3), .logwrap header span:nth-child(4) { display: none; }
  .log .ln { grid-template-columns: 90px minmax(0, 1fr) 90px 0; }
  .log .ln .who2, .log .ln > span:nth-child(3) { display: none; }
}
/* the header's links, status and buttons outgrow the row below ~1500px (signed in, the account corner is the widest
   thing in it): the status keeps its bonsai and drops its block text, then the gaps close up, the x402 button drops its
   "new" mark, and from 1120px the links and buttons take the compact sizes. The page never scrolls sideways at any
   width (checked at 1024, 1280 and 1440, signed in and out). */
@media (max-width: 1500px) {
  .status #status-text { display: none; }
}
@media (max-width: 1360px) {
  .nav .wrap { gap: 24px; }
  .links { gap: 16px; }
  .nav .right { gap: 12px; }
  .x402btn .mk { display: none; }
}
@media (max-width: 1180px) {
  .links a[href*="github.com"] { display: none; } /* still in the footer */
  .dateline .wrap > span:nth-child(2) { display: none; }
}
/* 561-880px with Go mode: the links have a row of their own (below), with room for it again */
@media (min-width: 561px) and (max-width: 880px) {
  .nav .wrap:has(.gobtn) .links a[href*="github.com"] { display: revert; }
}
@media (max-width: 600px) {
  .dateline .wrap > span:first-child { display: none; }
}
@media (max-width: 1120px) {
  .nav .wrap { gap: 18px; }
  .links { gap: 13px; font-size: 14px; }
  .nav .right { gap: 10px; }
  .nav .right .btn.sm { padding: 8px 11px; font-size: 13.5px; }
  .me-btn { gap: 8px; padding-right: 10px; }
  .me-bal > span { display: none; }
}
/* the timelock's delay (build-site.mjs SITE_TIMELOCK_DELAY): web/ shows the 48h words; a build keeps one version, unmarked */
[data-timelock="0"] { display: none !important; }
/* a build ships either the links marked data-no-onboarding or the ones marked data-onboarding, never both
   (scripts/build-site.mjs); the unbuilt web/ folder has both, so it shows the onboarding ones, as the live site does */
:has(> [data-onboarding]) > [data-no-onboarding] { display: none; }
@media (max-width: 900px) {
  .wrap { padding-inline: 20px; }
  .nav .wrap { gap: 16px; height: 60px; }
  .links { gap: 14px; font-size: 14px; }
  .brand span { font-size: 22px; }
  .status #status-text { display: none; }
  .agentbtn { display: none; }
  .x402btn { padding: 8px 10px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 40px 52px; }
  .lede { font-size: 19px; }
  .tree canvas { min-height: 380px; }
  .account .wrap, .kpis, .stat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .account .cell, .kpi, .stat > div { padding: 20px 14px 18px; }
  .account .cell:nth-child(odd), .kpi:nth-child(odd), .stat > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .account .cell:nth-child(n+3), .kpi:nth-child(n+3), .stat > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .chapter { padding: 72px 0; }
  .acts { grid-template-columns: minmax(0, 1fr); }
  .act, .acts > .act:nth-child(2n) { padding-left: 0; padding-right: 0; border-left: 0; }
  .def { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .terms2 div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ca { grid-template-areas: "k a a" "c c x"; }
  .ca code { font-size: 12px; padding: 12px; }
  .ca .ca-k { padding: 12px 10px; font-size: 13px; }
  footer.foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .grove { height: 440px; }
  .lbtools input { margin-left: 0; width: 100%; }
}

/* phones: every field gets the full row so its placeholder reads whole; buttons share the row below */
@media (max-width: 620px) {
  .act input, .row input.invite { flex: 1 1 100%; min-width: 0; }
  .act .row > .btn { flex: 1 1 auto; }
}

/* display settings: a gear in the top bar, one switch behind it */
.prefs { position: relative; display: flex; }
.prefs-btn { width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 1px solid var(--rule); color: var(--ink-2); cursor: pointer; padding: 0; }
.prefs-btn:hover, .prefs-btn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.prefs-btn svg { width: 20px; height: 20px; fill: none; stroke: none; background: currentColor; -webkit-mask: var(--g-gear) center / 20px 20px no-repeat; mask: var(--g-gear) center / 20px 20px no-repeat; } /* the kit's pixel gear over theme.js's stroke drawing */
.prefs-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; min-width: 210px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); padding: 6px 0; }
.prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; font: 500 14px var(--sans); color: var(--ink); cursor: pointer; }
/* the kit's square switch: a 30 x 16 hairline box on the field paper, a 10 px square knob, muted and left when off, green
   and right when on (no round knob, no filled track) */
.switch { position: relative; box-sizing: border-box; width: 30px; height: 16px; border-radius: 0; border: 1px solid var(--field-edge); background: var(--field); padding: 0; cursor: pointer; transition: background .2s, border-color .2s; flex: none; }
.switch i { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 0; background: var(--muted); transition: transform .2s var(--ease), background .2s; }
.switch[aria-checked="true"] { background: var(--field); border-color: var(--green); }
.switch[aria-checked="true"] i { transform: translateX(14px); background: var(--green); }
.switch:focus-visible, .prefs-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 560px) {
  .links a[href*="github.com"] { display: none; }
  .nav .wrap { gap: 12px; }
  .links { gap: 12px; }
  /* the section links scroll sideways in their own strip rather than push the settings gear off the screen */
  .nav .links { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
    /* soft edges, so a link cut by the strip reads as "scroll for more", not as a clipped word */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); padding-inline: 6px; }
  .nav .links::-webkit-scrollbar { display: none; }
  .nav .links a { flex: none; }
  .nav .right { gap: 10px; }
  .x402btn { padding: 7px 9px; font-size: 13px; }
  .x402btn .mk { display: none; }
  .prefs-btn { width: 30px; height: 30px; }
  .gobtn { padding: 7px 10px 7px 9px; font-size: 13px; gap: 6px; }
  .nav .wrap:has(.gobtn) .links { margin-inline: -6px; } /* the strip's soft edge sits outside the text's line */
}
/* with the Go mode button, below 880px the top row is the logo and the buttons; the section links take a second row of
   their own, the full width (under 560px the strip that scrolls sideways, above), and the status dot goes (the dateline
   and the pages still say where the figures come from) */
@media (max-width: 880px) {
  .nav .wrap:has(.gobtn) { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 10px; }
  .nav .wrap:has(.gobtn) .links { order: 3; flex: 1 1 100%; min-width: 0; padding-block: 6px 10px; }
  .nav .wrap:has(.gobtn) .status { display: none; }
  body:has(.nav .gobtn) section[id] { scroll-margin-top: 120px; }
}

/* the ownership proof on /invite?prove=… */
body.proving .doors, body.proving #request, body.proving #usdg { display: none; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 22px 0 8px; align-items: start; }
.pv-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.pv-row .n { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); font: italic 400 18px/1 var(--serif); color: var(--ink); }
.pv-row.done .n { background: var(--green); border-color: var(--green); color: var(--paper); font-style: normal; }
.pv-row.done .n::after { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; } .pv-row.done .n { font-size: 0; }
.pv-row b { font: 500 18px/1.3 var(--serif); } .pv-row p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.pv-msg { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.7; }
.pv-done { border-top: 0; padding-top: 6px; }
.prove.dead .pv-grid { display: none; }
.prove.dead .sub { display: none; } .prove.dead .pv-done .sub { display: inline; }
@media (max-width: 760px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } .pv-row { grid-template-columns: 30px minmax(0, 1fr); } .pv-row .btn { grid-column: 1 / -1; } }

/* the 3D grove: corner controls, a pinned record card, clickable table rows */
.grove-ctl { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; border: 1px solid var(--night-rule); background: var(--night-2); }
.grove-ctl button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--night-ink); font: 400 20px/1 var(--sans); cursor: pointer; }
.grove-ctl button + button { border-top: 1px solid var(--night-rule); }
.grove-ctl button:hover { background: var(--night); color: var(--leaf); }
.grove-ctl button:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }
.grove .tip.pinned { pointer-events: auto; padding: 12px 34px 12px 14px; }
.grove .tip .go { display: inline-block; margin-top: 8px; color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; }
.grove .tip .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--night-muted); font-size: 18px; cursor: pointer; }
.grove .tip .x:hover { color: var(--night-ink); }
.grove canvas.three { cursor: grab; } .grove canvas.three:active { cursor: grabbing; }
#lb-body tr[data-id] { cursor: pointer; }

/* use a line (web/use.html): the small notes under a box */
.sec .note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sec .note a { text-decoration: underline; text-underline-offset: 3px; }
.sec .stack { margin-top: 28px; }

/* participate: two plain cards, facts with hints, seat terms as four tiles, short answers below */
.pt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 22px 0 8px; }
.pt-card { border-top: 1px solid var(--rule); padding-top: 18px; min-width: 0; display: flex; flex-direction: column; }
.pt-kicker { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.pt-card h3 { font: 400 30px/1.1 var(--serif); letter-spacing: -.01em; }
.pt-lede { margin: 8px 0 14px; font: 400 18px/1.45 var(--serif); color: var(--ink-2); max-width: 30em; }
.pt-facts { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--rule-2); }
.pt-facts li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.pt-facts li span { color: var(--muted); }
.pt-facts li b { font-weight: 500; color: var(--ink); }
.pt-tip { position: relative; width: 22px; height: 22px; border-radius: 0; border: 1px solid var(--rule); background: transparent; color: var(--muted); font: 500 12px/1 var(--sans); cursor: help; padding: 0; }
.pt-tip:hover, .pt-tip:focus-visible { color: var(--ink); border-color: var(--ink); }
.pt-tip::after { content: attr(data-tip); position: absolute; right: -6px; bottom: calc(100% + 10px); box-sizing: border-box; width: min(300px, calc(100vw - 32px)); padding: 12px 14px; background: var(--ink); color: var(--paper); font: 400 14px/1.45 var(--sans); text-align: left; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 20; box-shadow: 0 10px 30px var(--shade); }
.pt-tip:hover::after, .pt-tip:focus::after, .pt-tip.open::after { opacity: 1; transform: none; }
.pt-tip.shut::after { opacity: 0 !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* an address, short until asked for (addr.js): 0xAa85…0902 [Show] */
.addr { display: inline; }
.addr-v[data-shown] { overflow-wrap: anywhere; word-break: break-all; }
/* (also where a box styles every button in it: the token's address box, the Go app's account menu) */
.addr-tog, .ca .addr-tog, .ga-me-menu .addr-tog { position: relative; display: inline-block; width: auto; margin: 0 0 0 6px; padding: 1px 7px; border: 1px solid var(--rule); border-radius: 0; background: none; color: var(--muted); font: 500 11px/1.4 var(--sans); letter-spacing: 0; text-align: center; text-transform: none; vertical-align: middle; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; flex: none; align-self: center; }
.addr-tog:hover, .addr-tog:focus-visible, .ca .addr-tog:hover, .ga-me-menu .addr-tog:hover { color: var(--ink); border-color: var(--ink); background: none; }
.pt-card .row { margin-top: auto; }
.pt-card input { flex: 1 1 160px; min-width: 0; padding: 12px 14px; font-size: 15px; }
.pt-card .btn.busy, .pt-feerow .btn.busy { opacity: .6; }
.pt-card .wstat { padding-left: 0; padding-right: 0; }
.pt-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin: 2px 0 10px; }
.pt-kv > div { background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.pt-kv span { font-size: 13px; color: var(--muted); }
.pt-kv b { font: 500 19px/1.2 var(--serif); color: var(--ink); }
.pt-kv i { font-style: normal; font-size: 13px; color: var(--muted); }
.pt-seats { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.pt-meter { display: inline-block; width: 90px; height: 6px; background: var(--rule-2); position: relative; }
.pt-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
#pt-terms { padding-top: 0; }
.pt-steps { margin: 6px 0 16px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.pt-steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; color: var(--ink-2); }
.pt-steps li::before { content: counter(s); width: 24px; height: auto; border: 0; color: var(--brass-ink); border-radius: 0; display: block; font: 400 12px/1.5 var(--mono); }
.pt-steps b { font-weight: 500; color: var(--ink); }
.pt-more { display: flex; gap: 18px; margin-top: 10px; }
.pt-link { background: none; border: 0; padding: 0; color: var(--muted); font: 400 14px var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.pt-link:hover { color: var(--ink); }
.pt-link:disabled { opacity: .5; cursor: not-allowed; }
.pt-feerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 16px 0; border-top: 1px solid var(--rule); margin-top: 18px; }
.pt-feelabel { font: 400 19px/1.2 var(--serif); }
.pt-feerow .wstat { padding: 0; }
.pt-faq details { border-bottom: 1px solid var(--rule-2); }
.pt-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font: 400 19px/1.3 var(--serif); display: flex; justify-content: space-between; gap: 16px; }
.pt-faq summary::-webkit-details-marker { display: none; }
.pt-faq summary::after { content: ""; flex: none; align-self: center; width: 14px; height: 14px; background: var(--muted); -webkit-mask: var(--g-plus) center / 14px 14px no-repeat; mask: var(--g-plus) center / 14px 14px no-repeat; transition: transform .2s var(--ease); } /* the kit's 7 x 7 pixel plus; open, it turns to an x */
.pt-faq details[open] summary::after { transform: rotate(45deg); }
.pt-faq details p { margin: 0 0 18px; max-width: 46em; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 860px) {
  .pt-two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pt-facts li { grid-template-columns: minmax(0, 1fr) auto; }
  .pt-facts li span { grid-column: 1 / -1; font-size: 13px; margin-bottom: -6px; }
  .pt-tip::after { right: 0; }
  .pt-card .row > .btn { flex: 1 1 auto; }
}

/* seats: a "best for" line on each door; the bond hint sits in the panel header */
.door .best { display: block; margin-top: 10px; font-size: 13.5px; color: var(--green); }
.panel > header .pt-tip { margin-left: 4px; }
.panel > p.pad { margin: 0; padding: 12px 0 16px; }
.v2why { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
#p-v2 table.score-table { min-width: 0; }
#p-v2 td.num { white-space: nowrap; vertical-align: top; }

/* The next tier under Priors Score v2, the treasury's raise and where a Go mode owner acts (agent.html #p-nx and
   #p-raise, agent.js showNextTier, showRaise and showOwnerKind, web/next-step-core.js). Each condition a row: its words,
   then "have / need", with a pixel square that is filled once it is met */
.nx-tier { padding: 4px 0 14px; border-top: 1px solid var(--rule-2); }
.nx-s { margin: 12px 0 8px; font-size: 14.5px; color: var(--ink); max-width: 62em; overflow-wrap: anywhere; text-wrap: pretty; }
.nx-list { list-style: none; margin: 0; padding: 0; }
.nx-list li { display: flex; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); font-size: 14px; }
.nx-list li:last-child { border-bottom: 0; }
.nx-list li::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--muted); transform: translateY(-1px); }
.nx-list li.nx-met::before { background: var(--green); border-color: var(--green); }
.nx-k { flex: 1 1 auto; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.nx-v { flex: none; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.nx-list li.nx-met .nx-v { color: var(--green); }
#p-raise .nx-list { padding-top: 2px; }
#p-raise .nx-rule { padding-bottom: 4px; }
#p-raise .nx-next { margin-top: 0; padding-bottom: 16px; }
/* the connect button "Open in Go mode" stands in for keeps its address's Show button hidden with it, once a wallet has
   connected through the request block (Answer a line request's own Connect wallet) */
#own > header .btn[hidden] + .addr-tog { display: none; }

/* footer: the X account, with its mark */
footer.foot a.xlink { display: flex; align-items: center; gap: 8px; }
footer.foot a.xlink svg { width: 14px; height: 14px; flex: none; }

/* the dev log (web/updates.html, web/devlog.js): releases by day, each with a "details" list */
.dl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--ink); }
.dl-bar[hidden], .dl-day[hidden] { display: none; }
.dl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.dl-filters button, .dl-all { font: 500 12.5px/1 var(--mono); letter-spacing: .04em; padding: 7px 10px; background: transparent; border: 1px solid var(--rule); color: var(--muted); cursor: pointer; }
.dl-filters button:hover, .dl-all:hover { border-color: var(--ink); color: var(--ink); }
.dl-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dl-log { border-top: 1px solid var(--ink); }
.dl-bar:not([hidden]) + .dl-log { border-top-color: var(--rule); }
.dl-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 28px; border-bottom: 1px solid var(--rule); }
.dl-day > time { position: relative; padding: 20px 0 0 18px; font: 500 14px/1.4 var(--mono); color: var(--ink-2); }
.dl-day > time::before { content: ""; position: absolute; left: 0; top: 25px; width: 8px; height: 8px; background: var(--green); }
.dl-item { padding: 18px 0 16px; border-bottom: 1px solid var(--rule-2); }
.dl-entries > .dl-item:last-child { border-bottom: 0; }
.dl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dl-tag { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--green); border: 1px solid var(--rule); padding: 4px 7px; }
.dl-ver { font: 400 12.5px/1 var(--mono); color: var(--ink-2); background: var(--paper-2); padding: 5px 7px; }
.dl-item h3 { font: 400 23px/1.25 var(--serif); letter-spacing: -.005em; margin: 9px 0 6px; }
.dl-item p { margin: 0; max-width: 46em; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.dl-item p code { font-size: .88em; background: var(--paper-2); padding: 1px 4px; overflow-wrap: anywhere; }
.dl-list code { font-size: .88em; background: var(--paper-3); padding: 1px 4px; overflow-wrap: anywhere; }
.dl-item details { margin-top: 10px; }
.dl-item summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font: 500 13px/1 var(--mono); color: var(--green); padding: 6px 0; }
.dl-item summary::-webkit-details-marker { display: none; }
.dl-item summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; font-size: 13px; line-height: 1; }
.dl-item details[open] > summary::before { content: "\2212"; }
.dl-item summary:hover { color: var(--ink); }
.dl-list { list-style: none; margin: 8px 0 4px; padding: 12px 14px; border-left: 2px solid var(--green); background: var(--paper-2); display: grid; gap: 9px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 52em; }
.dl-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.dl-k { font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 1px 0; border: 1px solid; }
.dl-k.new { color: var(--green); } .dl-k.fix { color: var(--brass); } .dl-k.chg { color: var(--ink-2); } .dl-k.sec { color: var(--red); } .dl-k.ref { color: var(--muted); }
.dl-list a.dl-a { font-family: var(--mono); font-size: .92em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.dl-list a.dl-a:hover { color: var(--green); }
.dl-empty { padding: 24px 0; color: var(--muted); }
@media (max-width: 720px) {
  .dl-day { grid-template-columns: minmax(0, 1fr); }
  .dl-day > time { padding: 18px 0 0 18px; }
  .dl-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dl-k { justify-self: start; padding: 1px 6px; }
}

/* the Protocol menu in the top bar: Protocol and its dev log, on hover or keyboard focus (web/nav.js: tap, Esc) */
.dd { position: relative; display: inline-flex; }
.dd-top::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 26px; } /* the pointer's path to the menu keeps it open */
.dd-caret { display: inline-block; flex: none; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--g-caret) center / 14px 14px no-repeat; mask: var(--g-caret) center / 14px 14px no-repeat; transition: transform .2s var(--ease); }
.dd:hover .dd-caret, .dd:focus-within .dd-caret, .dd.open .dd-caret { transform: scaleY(-1); }
.dd-menu { position: absolute; top: calc(100% + 18px); left: -18px; z-index: 40; min-width: 270px; padding: 6px 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd.shut .dd-menu { opacity: 0; visibility: hidden; }
/* 561-880px: the last menu opens leftward from its title, so even closed it never widens the page past the screen */
@media (max-width: 880px) { .links .dd:last-of-type .dd-menu { left: auto; right: -18px; } }
.links .dd-menu a, .links .dd-menu a.on { display: block; padding: 11px 16px 12px; border-bottom: 0; color: var(--ink); white-space: nowrap; }
.links .dd-menu a + a { border-top: 1px solid var(--rule-2); }
.dd-menu a b { display: block; font: 500 15px/1.3 var(--sans); }
.dd-menu a span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.links .dd-menu a:hover, .links .dd-menu a:focus-visible { background: var(--paper-2); }
.dd-menu a[aria-current="page"] b { color: var(--green); }
.dd-menu a[aria-current="page"] b::after { content: " ·  you are here"; font: 400 12px var(--mono); color: var(--muted); }
@media (max-width: 560px) {
  /* phones: the section links scroll in one strip, so Protocol and Dev log sit in it side by side */
  .dd, .links .dd-menu { display: contents; visibility: visible; }
  .dd-top { display: none; }
  .links .dd-menu a, .links .dd-menu a + a, .links .dd-menu a.on { display: inline; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; color: var(--ink-2); background: none; }
  .links .dd-menu a.on { color: var(--ink); border-bottom-color: var(--ink); }
  .dd-menu a b { display: inline; font: inherit; color: inherit; }
  .dd-menu a[aria-current="page"] b { color: inherit; }
  .dd-menu a b::after, .dd-menu a[aria-current="page"] b::after { content: none; }
  .dd-menu a span { display: none; }
}


/* /agent: "your agent" (web/agent.html #launch) — a hero with how a line grows, the 4-step path, three action cards */
.ag-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; padding: 18px 0 30px; }
.ag-hero h1 { font: 400 clamp(38px, 5vw, 62px)/1.02 var(--serif); letter-spacing: -.02em; }
.ag-hero h1 em { font-style: italic; color: var(--green); }
.ag-hero p { margin-top: 16px; max-width: 34em; font: 400 19px/1.55 var(--serif); color: var(--ink-2); }
.ag-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ag-level { border: 1px solid var(--ink); background: var(--paper); box-shadow: none; padding: 20px 22px; }
.ag-level-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); }
.ag-level-top b { display: block; font: 500 16px var(--mono); }
.ag-level-top span { font-size: 13px; color: var(--muted); }
.ag-bot { width: 34px; height: 34px; background: var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; }
.ag-bot i { width: 6px; height: 6px; background: var(--green-2); }
@media (prefers-reduced-motion: no-preference) { .ag-bot i { animation: ag-blink 4.5s infinite; } }
@keyframes ag-blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.15); } }
.ag-ladder { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.ag-ladder li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.ag-amt { font: 500 17px/1 var(--mono); text-align: center; padding: 9px 0; border: 1px solid var(--rule); color: var(--muted); }
.ag-ladder li.on .ag-amt { background: var(--green); border-color: var(--green); color: var(--paper); }
.ag-scorebar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 400 12.5px var(--mono); color: var(--muted); padding-top: 12px; border-top: 1px solid var(--rule-2); }
.ag-bar { height: 8px; background: var(--rule-2); position: relative; overflow: hidden; }
.ag-bar i { position: absolute; inset: 0 auto 0 0; width: 34%; background: var(--green); }
@media (prefers-reduced-motion: no-preference) { .ag-bar i { animation: ag-grow 6s var(--ease) infinite; } }
@keyframes ag-grow { 0% { width: 4%; } 70%, 100% { width: 62%; } }
.ag-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.ag-journey { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); }
.ag-journey li + li { border-left: 1px solid var(--rule); }
.ag-journey a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; color: var(--ink); height: 100%; box-sizing: border-box; }
.ag-journey a:hover { background: var(--paper-2); }
.ag-journey .ag-n { grid-row: span 2; width: 26px; height: 26px; border-radius: 0; border: 1px solid var(--green); color: var(--green); display: grid; place-items: center; font: 500 13px/1 var(--sans); }
.ag-journey b { font-weight: 500; font-size: 15.5px; }
.ag-journey a > span:last-child { font-size: 13px; color: var(--muted); }
.ag-journey li.done .ag-n { background: var(--green); color: var(--paper); font-size: 0; }
.ag-journey li.done .ag-n::after { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; }
.ag-journey li.next { box-shadow: inset 2px 0 0 var(--green); }
.ag-journey li.next b::after { content: " · next"; font: 400 12px var(--mono); color: var(--green); }

.ag-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 22px 0 8px; }
.ag-three .pt-facts li { grid-template-columns: 96px minmax(0, 1fr) auto; }
.ag-three .row { margin-top: 10px; flex-wrap: wrap; }
.ag-three .pt-card .row:first-of-type { margin-top: auto; }
.ag-three input { flex: 1 1 90px; }
.ag-sub { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }
.ag-adv { margin: 18px 0 4px; border-top: 1px solid var(--rule-2); padding-top: 12px; }
.ag-adv summary { cursor: pointer; font-size: 14.5px; color: var(--ink-2); }
.ag-adv summary:hover { color: var(--ink); }

.ag-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 20px 0 6px; }
.ag-use { border-top: 1px solid var(--rule); padding-top: 16px; }
.ag-ico { width: 38px; height: 38px; border: 1px solid var(--ink); display: grid; place-items: center; font: 500 18px var(--mono); margin-bottom: 12px; }
.ag-use h3 { font: 400 23px/1.2 var(--serif); margin: 0 0 6px; }
.ag-use p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.ag-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; background: var(--paper-2); font-size: 14px; color: var(--muted); }
.ag-copy code { flex: 1 1 320px; min-width: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .ag-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ag-level { max-width: 460px; }
  .ag-three, .ag-uses { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 720px) {
  .ag-journey { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ag-journey li:nth-child(3) { border-left: 0; }
  .ag-journey li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* /agent lookup: a list of agents under the field (web/agent.js) */
.ag-combo { position: relative; flex: 1 1 260px; min-width: 0; display: flex; }
.ag-combo input { flex: 1 1 auto; min-width: 0; }
.ag-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; list-style: none; margin: 0; padding: 4px 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); max-height: 340px; overflow-y: auto; }
.ag-suggest li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; cursor: pointer; font-size: 15px; }
.ag-suggest li + li { border-top: 1px solid var(--rule-2); }
.ag-suggest li[aria-selected="true"], .ag-suggest li[data-id]:hover { background: var(--paper-2); }
.ag-suggest .lk-name i { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.ag-suggest .lk-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ag-suggest .lk-none { cursor: default; color: var(--muted); font-size: 14px; }

/* /start and /stocks: the Priors account pages (web/start.js, web/stocks.js) */
.rigbar { padding: 12px 16px; background: var(--card, var(--paper)); border-left: 2px solid var(--brass); font-size: 14.5px; color: var(--ink-2); }
.st-step > header h2 { display: flex; align-items: baseline; gap: 12px; }
.st-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink); font: italic 400 18px/1 var(--serif); transform: translateY(-3px); }
.st-step.done .st-n { background: var(--green); border-color: var(--green); color: var(--paper); }
.st-step[aria-disabled="true"] .acts, .st-step[aria-disabled="true"] > .act { opacity: .55; }
.st-p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); max-width: 44em; }
.st-addr { flex: 1 1 320px; min-width: 0; padding: 10px 12px; background: var(--paper-2); font: 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.st-key { letter-spacing: .02em; }
.st-own { margin: 4px 0 10px; font-size: 14px; }
.st-auto { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 10px; cursor: pointer; font-size: 14px; }
.st-auto input { margin-top: 3px; accent-color: var(--green); }
.st-auto > span { display: grid; gap: 2px; }
.st-auto b { font-weight: 500; }
/* Start's choice of how a new agent starts (start.js paintPick), while the seat vault seats new agents */
.st-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; border: 0; padding: 0; }
.st-pick > .label { grid-column: 1 / -1; }
.st-opt { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: 0; cursor: pointer; font-size: 14px; background: var(--card-2, transparent); }
.st-opt:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.st-opt:has(input:disabled) { cursor: default; opacity: .6; }
.st-opt input { margin-top: 3px; accent-color: var(--green); flex: none; }
.st-opt > span { display: grid; gap: 4px; min-width: 0; }
.st-opt b { font-weight: 500; color: var(--ink); }
.st-seat { margin: 0 0 12px; display: grid; gap: 6px; }
.st-ethos { margin: 0 0 12px; display: grid; gap: 8px; }
.st-seat-figs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.st-seat-figs > div { display: grid; gap: 2px; }
.st-seat-figs dt { font-size: 12.5px; color: var(--muted); }
.st-seat-figs dd { margin: 0; font: 500 15px var(--mono); color: var(--ink); }
.st-seat p { margin: 0; }
.st-seat .st-seat-warn { color: var(--red); }
.st-steps.one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .st-pick { grid-template-columns: minmax(0, 1fr); } }
.st-own summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.st-own .row { margin-top: 8px; }
.st-own .row input { font: 13px var(--mono); }
.st-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); counter-reset: st; }
.st-steps li { counter-increment: st; padding: 12px 16px 12px 0; font-size: 14.5px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
.st-steps li + li { padding-left: 16px; border-left: 1px solid var(--rule-2); }
.st-steps li::before { content: counter(st); font: italic 400 17px/1 var(--serif); color: var(--faint); }
.st-steps li.on { color: var(--ink); } .st-steps li.on::before { content: "…"; color: var(--brass); font-style: normal; }
.st-steps li.done { color: var(--green); } .st-steps li.done::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--green); -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; }
.st-steps li.fail { color: var(--red); } .st-steps li.fail::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--red); -webkit-mask: var(--g-x) center / 14px 14px no-repeat; mask: var(--g-x) center / 14px 14px no-repeat; }
.st-done { border-top: 1px solid var(--rule); padding-top: 18px; }
.st-done .t { font-size: 22px; }
.st-done code { font: 13px var(--mono); overflow-wrap: anywhere; }
@media (max-width: 760px) { .st-steps { grid-template-columns: minmax(0, 1fr); } .st-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-2); } }
.sk-check { display: flex; gap: 12px; align-items: flex-start; padding: 0 0 18px; font-size: 15px; color: var(--ink); cursor: pointer; max-width: 52em; }
.sk-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--green); flex: none; }
.sk-elig { border-top-color: var(--brass); }
.sk-table { min-width: 640px; }
.sk-tok { display: flex; align-items: center; gap: 10px; }
.sk-tok img { width: 24px; height: 24px; border-radius: 0; background: var(--paper-2); flex: none; }
.sk-tok b { font-weight: 500; min-width: 3.4em; }
.sk-tok .sub { font-size: 13.5px; white-space: normal; }
.sk-radio { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-2); margin-right: 14px; cursor: pointer; }
.sk-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-2); }
.sk-figs > div { padding: 16px 16px 16px 0; display: grid; gap: 6px; }
.sk-figs > div + div { padding-left: 16px; border-left: 1px solid var(--rule-2); }
.sk-figs b { font: 400 24px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.stocks select, .start select { font: 14px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); padding: 10px 12px; border-radius: 0; }
@media (max-width: 760px) { .sk-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-figs > div:nth-child(3) { padding-left: 0; border-left: 0; } }
.sk-act { width: 1px; white-space: nowrap; text-align: right; }

/* ---------------------------------------------------------------------------------------------------------------
   The app look for /start and /stocks (main.acct): rounded cards, pill buttons, big numbers, token rows with logos.
   Scoped to .acct so the rest of the site keeps its editorial style. */
:root { --card: #fbf8f1; --card-2: #f5f0e5; --card-edge: #e3dccd; --glow: rgba(47, 107, 79, .14); }
:root[data-theme="dark"] { --card: #1c1b15; --card-2: #23221b; --card-edge: #34322a; --glow: rgba(127, 191, 152, .16); }
/* brass as small text: darker by day, so it reads (4.5:1) on brass-soft and the cards; --brass stays for fills and rules */
:root { --brass-ink: #765c2b; }
:root[data-theme="dark"] { --brass-ink: var(--brass); }
.acct { max-width: 1120px; padding-block: 28px 80px; gap: 18px; }
.acct .board-heading { padding: 10px 0 4px; }
.acct .board-heading h1 { font-size: clamp(36px, 5.2vw, 60px); }
.acct .board-heading p { font-size: 18px; margin-top: 12px; }
.acct .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.acct .chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--rule); border-radius: 0; background: var(--card); color: var(--ink-2); font: 500 13.5px/1 var(--sans); }
.acct .chips li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--green); } /* the kit's 6 px square, no "✓" text */

.acct .panel { background: var(--grain), var(--card); border: 1px solid var(--card-edge); border-radius: 0; padding: 6px 22px 16px; box-shadow: none; } /* card paper with grain, a hairline, square, no shadow (the kit's card) */
.acct .panel > header { border-bottom: 0; padding: 16px 0 6px; }
.acct .panel > header h2 { font-size: 24px; }
.acct .panel > header .label { font-size: 13.5px; }
.acct .rigbar { border-radius: 0; border-left-width: 2px; background: var(--grain), var(--card); }
.acct .acts { border-top: 0; gap: 12px; margin-top: 6px; }
.acct .act, .acct .acts > .act:nth-child(2n) { padding: 0; border: 0; }
.acct .acts > .act, .acct .acts > .act:nth-child(2n) { background: var(--card); border: 1px solid var(--rule-2); border-radius: 0; padding: 16px 16px 8px; }
.acct .act .t { font: 500 18px/1.3 var(--serif); margin-bottom: 6px; }
.acct .act.alt { padding-top: 14px; }
.acct .st-p { font-size: 14.5px; }

/* the kit's buttons on the account pages: 42 px (sm 34, big 48), square, Schibsted 500; the primary ink with its brass
   foot, green on hover (it was a green pill with a green shadow); off: a dashed edge, muted. The foot is the ink's
   alone: a row's first button made light or outlined (Max, Sign out, Link wallet, Sign in with Google) takes it off */
.acct .btn { border-radius: 0; padding: 13px 20px; font: 500 15px/1 var(--sans); border-color: var(--ink); }
.acct .btn.sm { padding: 9px 13px; font-size: 14px; font-weight: 500; }
.acct .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--ink), inset 0 -5px 0 var(--brass); }
.acct .btn.primary:hover { background: var(--green); border-color: var(--green); box-shadow: inset 0 -4px 0 var(--green), inset 0 -5px 0 var(--brass); }
.acct .btn.primary:disabled { background: transparent; border: 1px dashed var(--field-edge); color: var(--muted); box-shadow: none; }
.acct .act .row > .btn:first-of-type:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--ink), inset 0 -5px 0 var(--brass); }
.acct .act .row > .btn:first-of-type:not(:disabled):hover { background: var(--green); border-color: var(--green); box-shadow: inset 0 -4px 0 var(--green), inset 0 -5px 0 var(--brass); }
.acct .act .row > .btn.primary:first-of-type:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* the dark theme's green is light, so what sits on it turns dark (near-white on it read at about 2:1) */
:root[data-theme="dark"] .acct .btn.primary:not(:disabled), :root[data-theme="dark"] .acct .act .row > .btn.primary:first-of-type:not(:disabled),
:root[data-theme="dark"] .acct .sk-table .btn.sm:not(:disabled), :root[data-theme="dark"] .acct .st-step.done .st-n { color: var(--paper); }
.acct .btn.big { width: 100%; padding: 16px 24px; font-size: 16px; }
/* busy: the label stays ("Borrowing…") and three 4 px cells fill in turn after it (the kit's, no spinner) */
.acct .btn.busy, .acct .act .btn.busy { opacity: 1; color: var(--ink-2); background: var(--paper-2); border-color: var(--rule); box-shadow: none; cursor: progress; }
.acct .btn.busy::after, .acct .btn.busy:hover::after { content: ""; position: static; inset: auto; flex: none; width: 16px; height: 4px; border: 0; border-radius: 0; background: linear-gradient(currentColor 0 0) 0 0 / 4px 4px no-repeat, linear-gradient(currentColor 0 0) 6px 0 / 4px 4px no-repeat, linear-gradient(currentColor 0 0) 12px 0 / 4px 4px no-repeat; opacity: .7; animation: app-cells .9s steps(1) infinite; }
@keyframes app-cells { 0% { clip-path: inset(0 12px 0 0); } 33% { clip-path: inset(0 6px 0 0); } 66%, 100% { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .acct .btn.busy::after { animation: none; } }
/* fields: square, a 1 px edge on the field paper; focus is the site's 2 px green ring (no glow) */
.acct input:not([type="radio"]):not([type="checkbox"]), .acct select, .stocks.acct select { border-radius: 0; font-size: 16px; padding: 13px 14px; background: var(--field); border: 1px solid var(--rule); }
.acct input:not([type="radio"]):not([type="checkbox"]):focus, .acct select:focus { border-color: var(--ink); box-shadow: none; outline: 2px solid var(--green); outline-offset: 2px; }
/* a field the page refused (aria-invalid, with the reason in its status line) */
.acct input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), .acct input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.acct .st-addr { border-radius: 0; background: var(--card-2); border: 1px dashed var(--card-edge); font-size: 12.5px; }
.acct .wstat { font-size: 14.5px; }
.acct .wstat.ok { font-weight: 500; }

/* progress: three segments over the start steps */
.st-prog { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: sp; }
.st-prog li { counter-increment: sp; font: 500 13.5px/1.2 var(--sans); color: var(--muted); padding-top: 12px; border-top: 2px solid var(--rule); border-radius: 0; }
.st-prog li::before { content: counter(sp) " · "; color: var(--faint); }
.st-prog li.on { color: var(--ink); border-top-color: var(--brass); }
.st-prog li.done { color: var(--green); border-top-color: var(--green); }
.st-prog li.done::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--green); -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; }

.acct .st-step[aria-disabled="true"] { opacity: .6; }
.acct .st-step[aria-disabled="true"] .acts, .acct .st-step[aria-disabled="true"] > .act { opacity: 1; pointer-events: none; }
.acct .st-n { width: 32px; height: 32px; border-radius: 0; border: 1px solid var(--rule); background: none; font: 400 13px/1 var(--mono); color: var(--brass-ink); font-style: normal; transform: translateY(-2px); }
.acct .st-step.done .st-n { background: var(--green); border-color: var(--green); color: var(--paper); font-size: 0; }
.acct .st-step.done .st-n::before { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; }
.acct #st-1.done { padding-bottom: 8px; }
.acct #st-bal { margin-left: auto; padding: 6px 12px; border-radius: 0; background: none; border: 1px solid var(--rule); color: var(--green); font: 500 13.5px/1.2 var(--mono); }
.acct .st-steps { border-top: 0; gap: 8px; margin-top: 14px; }
.acct .st-steps li, .acct .st-steps li + li { padding: 12px 14px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); }
.acct #st-go-row input { flex: 1 1 240px; }
.acct .st-done { margin-top: 14px; padding: 22px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); border-left: 2px solid var(--green); }
.acct .st-done .t { font: 400 30px/1.2 var(--serif); }
.acct .st-done .t b { font: 500 44px/1 var(--serif); color: var(--green); }
.acct .st-done #st-key-box { margin: 16px 0 10px; padding: 14px 16px; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); }
/* the new agent's key (journey audit B1-13): the warning first, Copy the one main button, the AI setup folded away, and
   the way on off ("Copy the key to continue") until the key is copied */
.st-key-warn { color: var(--ink); }
.st-key-warn b { font-weight: 600; }
.st-key-ai { margin: 10px 0 8px; font-size: 14px; }
.st-key-ai > summary { cursor: pointer; color: var(--ink-2); padding: 8px 0; min-height: 28px; }
.st-key-ai > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 0; }
.st-key-ai[open] > summary { margin-bottom: 6px; }
#st-key-s:empty { display: none; }
#st-key-s .btn { margin-left: 6px; }
#st-go-wait.btn, #st-go-wait.btn:hover { cursor: not-allowed; color: var(--muted); border: 1.5px dashed var(--field-edge); background: transparent; box-shadow: none; }

/* Stocks: eligibility first, then the account/line/deposit column beside the token list */
.acct .sk-elig { border-color: var(--brass); box-shadow: inset 4px 0 0 var(--brass); }
.acct .sk-elig .pad { padding: 4px 0 10px; font-size: 15px; }
.acct .sk-check { padding: 12px 14px; border-radius: 0; background: var(--card-2); margin-bottom: 4px; }
.sk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; grid-template-areas: "list side"; gap: 18px; align-items: start; }
.sk-grid > .sk-side { grid-area: side; display: grid; gap: 18px; }
.sk-grid > #sk-list { grid-area: list; }
.sk-grid.solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list"; }
.sk-grid.solo > .sk-side { display: none; }
.acct .sk-table tr[hidden] { display: none; }

.acct #sk-pos { background: var(--grain), var(--card); box-shadow: inset 2px 0 0 var(--green); border-color: var(--green); }
.acct .sk-hero { padding: 6px 0 12px; }
.acct .sk-hero .label { display: block; margin-bottom: 4px; }
.acct .sk-hero b { font: 500 52px/1 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; }
.acct .sk-figs { border-bottom: 0; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acct .sk-figs > div, .acct .sk-figs > div + div { padding: 10px 12px; border: 0; border-radius: 0; background: var(--card-2); }
.acct .sk-figs b { font-size: 19px; }
.acct #sk-pos .act { padding-top: 14px; }
.acct #sk-borrow-form input { flex: 1 1 120px; }
.acct #sk-key-box { margin-top: 12px; padding: 12px 14px; border-radius: 0; background: var(--card-2); }
.acct #sk-dep { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.acct #sk-dep .acts { grid-template-columns: minmax(0, 1fr); }
.acct #sk-amt { font: 500 22px/1.2 var(--sans); flex: 1 1 0; }
.acct #sk-dep-form { flex-wrap: nowrap; }
.acct #sk-dep-form #sk-max, .acct #sk-dep-form #sk-max:not(:disabled) { background: var(--card); border-color: var(--rule); color: var(--green); flex: none; box-shadow: none; }
.acct #sk-to, .acct #st-key-addr, .acct .st-done code { overflow-wrap: anywhere; word-break: break-all; }
.acct #st-out, .acct .act .row > #st-out:first-of-type:not(:disabled) { background: transparent; color: var(--ink-2); border-color: var(--rule); box-shadow: none; }
/* the start page's second way to add USDG (Or link your wallet): plain buttons, so Create agent stays the page's one
   filled button, and the amount with its visible label above it */
.acct .act .row > :is(#st-link, #st-pull):first-of-type:not(:disabled) { background: transparent; border-color: var(--ink); color: var(--ink); box-shadow: none; }
.acct .act .row > :is(#st-link, #st-pull):first-of-type:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }
.st-pull > .label { display: block; margin: 2px 0 6px; }
#st-link-who:empty { display: none; } /* no linked wallet yet: Link wallet as wide as the field and Sign deposit */
.acct #st-1.done > header .sub { display: none; }
.acct #sk-quote.ok { font-size: 16px; }
.acct .sk-radio input, .acct .act .sk-radio input { accent-color: var(--green); margin: 0; flex: none; width: 16px; height: 16px; padding: 0; }
.acct .sk-radio { padding: 9px 14px; border-radius: 0; background: var(--card); border: 1px solid var(--rule); margin: 0 6px 6px 0; }

/* the token list as rows with logos; on a phone each row wraps instead of widening the page */
.acct .sk-search { width: 100%; margin: 6px 0 4px; }
.acct .tablewrap { overflow: visible; }
.acct table.sk-table { min-width: 0; }
.acct .sk-table th { border-bottom: 1px solid var(--rule-2); }
.acct .sk-table td { border-bottom: 1px solid var(--rule-2); padding-block: 12px; }
.acct .sk-table tr:last-child td { border-bottom: 0; }
.acct .sk-table tbody tr:hover td { background: var(--hover); }
.sk-logo { position: relative; flex: none; width: 34px; height: 34px; border-radius: 0; background: var(--paper-3); overflow: hidden; display: grid; place-items: center; }
.sk-logo::before { content: attr(data-l); font: 600 12px/1 var(--sans); color: var(--ink-2); letter-spacing: .02em; }
/* the letters only where there is no logo (none, or one that failed and was taken out): under a logo they showed
   through its clear parts until its load was seen */
.sk-logo:has(img)::before { content: none; }
/* a logo drawn in white: its tile dark from the start, its letters (when it has none) light */
.sk-logo.dk { background: #1b1a16; }
.sk-logo.dk::before { color: #e9e3d6; }
.sk-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.sk-logo img.in { background: #fff; }
.sk-logo.dk img.in { background: #1b1a16; }
.acct .sk-tok { gap: 12px; }
/* desktop: the token cell stays a table cell (as a flex box its bottom rule drifted from the row's) */
@media (min-width: 641px) {
  /* fixed columns: the numbers keep their width and the name takes the rest, cut with an ellipsis */
  .acct table.sk-table { table-layout: fixed; }
  .acct .sk-table th:nth-child(2) { width: 96px; } .acct .sk-table th:nth-child(3) { width: 80px; }
  .acct .sk-table th:nth-child(4) { width: 78px; } .acct .sk-table th:nth-child(5) { width: 70px; } .acct .sk-table th.sk-act { width: 94px; }
  .acct .sk-table td.sk-tok { display: table-cell; overflow: hidden; }
  .acct .sk-table td.sk-tok > .sk-logo { display: inline-grid; vertical-align: middle; margin-right: 12px; }
  .acct .sk-table td.sk-tok > .nm { display: inline-grid; vertical-align: middle; max-width: calc(100% - 50px); }
}
.acct .sk-tok b { font: 600 15.5px/1.2 var(--sans); min-width: 0; display: block; }
.acct .sk-tok .nm { display: grid; min-width: 0; }
.acct .sk-tok .sub { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct .sk-table td.num:nth-child(2) { font: 600 15.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
/* a lending hold, under the price age: wraps inside its column instead of running over the next ones */
.acct .sk-table td.num .sub { display: block; white-space: normal; font-size: 12px; line-height: 1.3; margin-top: 2px; }
.acct .sk-table .btn.sm { padding: 8px 14px; }
.acct .sk-table .btn.sm:not(:disabled) { background: var(--green); border-color: var(--green); color: #fbf8f1; }

.acct .pt-faq { padding-bottom: 6px; }
.acct .pt-faq details:last-child { border-bottom: 0; }

@media (max-width: 980px) {
  .sk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "list"; }
}
@media (max-width: 640px) {
  .acct { padding-block: 18px 64px; gap: 14px; }
  .acct .panel { padding: 4px 16px 12px; border-radius: 0; }
  .acct .board-heading p { font-size: 16.5px; }
  .acct .acts { grid-template-columns: minmax(0, 1fr); }
  .acct .sk-hero b { font-size: 44px; }
  .acct .sk-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acct .sk-figs b { font-size: 16px; }
  .acct .st-prog li { font-size: 12.5px; }
  .acct #st-go-row .btn, .acct #sk-borrow-form .btn { flex: 1 1 100%; }
  .acct #sk-borrow-form input { flex: 1 1 0; min-width: 0; }
  .acct #sk-borrow-form select { flex: none; }
  /* each token row: logo and name, price on the right; the rest on a second line */
  .acct .sk-table thead { display: none; }
  .acct .sk-table, .acct .sk-table tbody { display: block; }
  .acct .sk-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
  .acct .sk-table tr:last-child { border-bottom: 0; }
  /* the line break before "the rest": without it a row with empty balance cells fits on one line and squeezes the name away */
  .acct .sk-table tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .acct .sk-table td { display: block; border: 0; padding: 0; white-space: nowrap; }
  .acct .sk-table td.sk-tok { flex: 1 1 0; min-width: 0; display: flex; }
  .acct .sk-table td.sk-tok .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .acct .sk-table td:empty { display: none; }
  .acct .sk-table td:nth-child(2) { margin-left: auto; }
  .acct .sk-table td:nth-child(n+3):not(.sk-act) { order: 3; font-size: 12.5px; color: var(--muted); padding-left: 46px; }
  .acct .sk-table td:nth-child(n+4):not(.sk-act) { padding-left: 0; }
  .acct .sk-table td[data-h]::after { content: " " attr(data-h); }
  .acct .sk-table td.sk-act { order: 4; margin-left: auto; width: auto; }
}

/* /account: the signed-in account, every agent it owns as a card */
.acct .ac-sum .ac-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: end; }
.acct .ac-figs { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
/* Home's $PRIORS tile: its figure leads to Seats; under it, what is in seats, or a link to buy some */
.ac-fig-link { color: inherit; text-decoration: none; justify-self: start; line-height: 1.1; }
.ac-fig-link:hover b, .ac-fig-link:focus-visible b { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.ac-fig-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: -2px; font-size: 12.5px; color: var(--muted); }
.ac-fig-sub[hidden], .ac-fig-sub > [hidden] { display: none; }
.ac-fig-sub .k { font-size: 12.5px; }
.acct .ac-addr { margin-top: 12px; }
.acct #ac-out-btn { background: transparent; color: var(--ink-2); border-color: var(--rule); }
.ac-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; }
.ac-agents[hidden] { display: none; }
.acct .ac-card > header { align-items: center; }
.acct .ac-card .ac-id { font: 500 15px var(--sans); color: var(--muted); }
.acct .ac-card .sk-hero b { font-size: 44px; }
/* an agent's status: the kit's 6 px square and the word in mono (green, brass, muted or coral), no capsule, no tint */
.ac-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none; font: 500 12.5px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.ac-pill::before { content: ""; flex: none; width: 6px; height: 6px; background: currentColor; }
.ac-pill.ok { color: var(--green); }
.ac-pill.on { color: var(--brass-ink); }
.ac-pill.off { color: var(--muted); }
.ac-pill.bad { color: var(--red); }
/* the card's head: the agent's tree (agent-tree.js, drag to turn), its Score v2 and the five rungs */
.ac-hero { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; align-items: center; margin: 14px 0 6px; }
.ac-tree { position: relative; aspect-ratio: 1; border-radius: 0; overflow: hidden; border: 0; background: radial-gradient(80% 80% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); cursor: grab; touch-action: pan-y; user-select: none; }
.ac-tree.turning { cursor: grabbing; }
.ac-tree img, .ac-tree canvas.tree-live { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ac-tree:has(canvas.tree-live) img { visibility: hidden; }
.ac-tree img:not([src]) { visibility: hidden; }
.ac-tree-cap { position: absolute; left: 10px; top: 9px; z-index: 1; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
/* the agent's tier on its tree, in the tier's own colour (Home's tile and every agent card): grey, green, blue, brass,
   violet up the five Score v2 levels, red for a default; the card's ladder names the level it is on in the same colour */
:root { --t-unproven: #77715f; --t-started: #2f6b4f; --t-proven: #2d5f9e; --t-earned: #8a6a28; --t-income: #7448a6; }
:root[data-theme="dark"] { --t-unproven: #a8a291; --t-started: #7fbf98; --t-proven: #8db4ea; --t-earned: #d9b56c; --t-income: #c7a3ee; }
.ac-tree-cap[data-rung] { --t: var(--t-unproven); left: 8px; top: 8px; padding: 4px 8px 4px 9px; border-radius: 0; font-weight: 600; color: var(--t); background: color-mix(in srgb, var(--t) 14%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 40%, transparent); }
.ac-tree-cap[data-rung="started"] { --t: var(--t-started); } .ac-tree-cap[data-rung="proven"] { --t: var(--t-proven); }
.ac-tree-cap[data-rung="earned"] { --t: var(--t-earned); } .ac-tree-cap[data-rung="income-backed"] { --t: var(--t-income); }
.ac-tree-cap[data-rung="defaulted"] { --t: var(--red); }
.ac-rungs span.now:nth-child(1) { color: var(--t-unproven); } .ac-rungs span.now:nth-child(2) { color: var(--t-started); }
.ac-rungs span.now:nth-child(3) { color: var(--t-proven); } .ac-rungs span.now:nth-child(4) { color: var(--t-earned); }
.ac-rungs span.now:nth-child(5) { color: var(--t-income); }
.ac-score .label { display: block; }
.ac-score-n { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.ac-score-n b { font: 400 64px/1 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; }
.ac-score-n.bad b { color: var(--red); }
.ac-score-n.none b { font-size: 34px; color: var(--muted); }
.ac-score-n span { font: 500 13px var(--mono); color: var(--muted); }
.ac-rungs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.ac-rungs span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ac-rungs i { display: block; height: 5px; margin-bottom: 6px; border-radius: 0; background: var(--paper-3); }
.ac-rungs .on i { background: var(--green); }
.ac-rungs .now { color: var(--ink); }
.acct .ac-figs4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* with its wallet's USDG (journey audit B1-15): five figures, as many to a row as fit */
.acct .ac-figs4.ac-figs5 { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
/* the card's borrow, before it is pressed (journey audit B2-04): the fee, the repayment and its date */
.ac-quote { margin: 6px 0 0; }
.ac-quote:empty { display: none; }
/* several loans open (B2-10): each row with its own Repay */
.ac-loans.ac-loans-each li { flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ac-loans.ac-loans-each li .btn { margin-left: auto; }
html[data-hide-trees] .ac-hero { grid-template-columns: minmax(0, 1fr); }
html[data-hide-trees] .ac-tree, html[data-hide-trees] .ag-item-tree { display: none; }
@media (max-width: 640px) {
  .ac-hero { grid-template-columns: 118px minmax(0, 1fr); gap: 14px; }
  .ac-score-n b { font-size: 48px; }
  .ac-rungs span { color: transparent; }
  .ac-rungs span.now { color: var(--ink); overflow: visible; }
  .acct .ac-figs4, .acct .ac-figs4.ac-figs5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct .ac-figs5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ac-level { display: grid; gap: 8px; margin: 14px 0 2px; font-size: 14px; color: var(--ink-2); }
.ac-bar { height: 6px; border-radius: 0; background: var(--paper-3); overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: 0; background: var(--green); }
.ac-stock { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 12px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); font-size: 14.5px; }
.ac-stock a { margin-left: auto; }
.ac-loans { margin-top: 14px; padding: 12px 14px 6px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); border-left: 2px solid var(--brass); }
.ac-loans .t { font: 500 17px/1.3 var(--serif); }
.ac-loans ul { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; }
.ac-loans li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.ac-loans .sub { color: var(--ink-2); }
.acct .ac-borrow { margin-top: 14px; }
.acct .ac-borrow input { flex: 1 1 120px; min-width: 0; }
.acct .ac-card > .sub { margin-top: 4px; }
@media (max-width: 760px) {
  .acct .ac-sum .ac-top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .acct .ac-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct .ac-figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* five tiles: the last one the row's width */
}
@media (max-width: 640px) {
  .ac-agents { grid-template-columns: minmax(0, 1fr); }
  .acct .ac-borrow .btn { flex: 1 1 100%; }
  .acct .ac-borrow select { flex: none; }
}

/* Start: Go mode and Builder mode, the live strip, what an agent gets, and joining the builders */
.start .st-hero h1 { font-size: clamp(40px, 6vw, 72px); }
.start .st-live { display: flex; flex-wrap: wrap; margin: 26px 0 0; padding: 0; }
.start .st-live > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 2px 28px 2px 0; margin-right: 28px; border-right: 1px solid var(--rule); }
.start .st-live > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.start .st-live dd { margin: 0; font: 500 clamp(24px, 3vw, 32px)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.start .st-live dt { font: 400 13.5px/1.2 var(--sans); color: var(--muted); }
.start .st-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; border-radius: 0; background: var(--card); border: 1px solid var(--rule); }
/* Go mode or Builder mode: the chosen one is a card of ink with its pixel mark (the site's "selected", as on the dev
   log's filters), the other stays flat and quiet */
.start .st-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; text-align: left; padding: 16px 20px; border-radius: 0; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 400 14px/1.4 var(--sans); transition: background .18s var(--ease), color .18s var(--ease); }
.start .st-tab .px-ico { grid-row: span 2; width: 36px; height: 36px; color: var(--faint); transition: color .18s var(--ease); }
.start .st-tab b { font: 500 22px/1.1 var(--serif); color: var(--ink-2); }
.start .st-tab:hover { background: var(--hover); color: var(--ink-2); }
.start .st-tab:hover .px-ico { color: var(--ink-2); }
.start .st-tab + .st-tab { box-shadow: inset 1px 0 0 var(--rule); }
/* the chosen way: boxed in ink on the paper over a 2 px green rule (the kit's chosen choice), its glyph green */
.start .st-tab.on, .start .st-tab.on:hover { background: var(--paper); border-color: var(--ink); color: var(--ink-2); box-shadow: inset 0 -2px 0 var(--green); }
.start .st-tab.on b { color: var(--ink); } .start .st-tab.on .px-ico { color: var(--green); }
.start .st-tab.on > span { opacity: .78; }
.start .st-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.start .st-pane { display: grid; gap: 28px; }
.start .st-pane[hidden] { display: none; }
.start .st-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.start .st-get { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
.start .st-get b { font: 500 21px/1.2 var(--serif); color: var(--ink); }
.start .st-get > span:last-child { font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.start .st-get-n { font: 500 13px/1 var(--mono); letter-spacing: .12em; color: var(--green); }
.start .st-build-lede { margin: 0; max-width: 46em; font: 400 18px/1.55 var(--serif); color: var(--ink-2); }
.start .st-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.start .st-build { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 22px 24px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
.start .st-build h3 { margin: 0; font: 500 24px/1.15 var(--serif); color: var(--ink); }
.start .st-build p { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.start .st-build-k { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.start .st-cmd { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 0; background: var(--card-2); border: 1px solid var(--card-edge); font: 400 12.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
/* Builder mode's Connect your AI (connect-ai.js): one tab per AI, each with its one action */
.start .st-connect { display: grid; gap: 16px; padding: 24px 26px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
.start .st-connect h2 { margin: 0; font: 500 28px/1.15 var(--serif); color: var(--ink); }
.start .st-ai-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.start .st-ai-tab { padding: 8px 15px; border-radius: 0; border: 1px solid var(--rule); background: var(--card); font: 500 14px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; }
.start .st-ai-tab:hover { border-color: var(--ink-2); color: var(--ink); }
.start .st-ai-tab.on { background: var(--paper); border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.start .st-ai-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.start .st-ai { display: grid; gap: 10px; justify-items: start; }
.start .st-ai p, .start .st-steps, .start .st-mcp p, .start .st-can p { margin: 0; max-width: 46em; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.start .st-ai p.sub, .start .st-mcp p.sub { font-size: 13.5px; color: var(--muted); }
.start .st-cmdrow { display: flex; gap: 8px; align-items: center; width: 100%; }
.start .st-cmdrow .st-cmd { flex: 1 1 auto; min-width: 0; }
.start .st-cmdrow .btn { flex: none; }
.start .st-mcp { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rule-2); }
.start .st-can { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.start .st-can > div { display: grid; gap: 8px; align-content: start; }
@media (max-width: 760px) {
  .start .st-gets, .start .st-builds, .start .st-can { grid-template-columns: minmax(0, 1fr); }
  .start .st-connect { padding: 20px 18px; }
  .start .st-cmdrow { flex-wrap: wrap; }
  .start .st-cmdrow .st-cmd { flex-basis: 100%; }
  .start .st-tab { padding: 12px 14px; column-gap: 12px; }
  .start .st-tab .px-ico { width: 24px; height: 24px; }
  .start .st-tab b { font-size: 19px; }
  .start .st-tab span { font-size: 12.5px; }
}

/* The sign-in window (web-src/privy-signin.mjs): Priors' own, over any page; one button that leaves for Google. */
.signin { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--scrim); animation: signin-in .18s var(--ease); }
.signin-card { position: relative; width: min(400px, 100%); display: grid; justify-items: center; text-align: center; gap: 0; padding: 34px 28px 26px; background: var(--grain), var(--card, var(--paper)); border: 1px solid var(--card-edge, var(--rule)); border-radius: 0; box-shadow: inset 0 1px 0 var(--brass-line), 0 30px 80px -34px var(--shade); color: var(--ink); }
.signin-mark { width: 44px; height: 44px; }
.signin-card h2 { margin: 14px 0 0; font: 500 30px/1.1 var(--serif); color: var(--ink); }
.signin-sub { margin: 8px 0 24px; font: 400 15px/1.45 var(--sans); color: var(--muted); }
.signin .signin-g { width: 100%; gap: 12px; padding: 14px 22px; border-radius: 0; font: 500 15px/1 var(--sans); background: var(--field); border: 1px solid var(--ink); color: var(--ink); }
.signin .signin-g:hover { background: var(--hover); border-color: var(--ink); color: var(--ink); }
.signin .signin-g:disabled { color: var(--muted); }
.signin .signin-g svg { flex: none; }
.signin-note { margin: 16px 0 0; font: 400 13px/1.4 var(--sans); color: var(--faint); }
.signin-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: 400 22px/1 var(--sans); cursor: pointer; }
.signin-x:hover { background: var(--hover); color: var(--ink); }
@keyframes signin-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .signin { animation: none; } }

/* Two-step verification (web/account-2fa.js): in Transfer out, and its code window (the sign-in window's look) */
.ac-2fa { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.tf-setup, .tf-codes { display: grid; gap: 10px; margin-top: 12px; }
.tf-qr svg { display: block; width: 180px; height: 180px; padding: 8px; background: #fff; border-radius: 0; }
.tf-qr svg rect { fill: #1b1a16; } /* ink on white in both themes (never pure black): what a phone's camera reads */
.tf-key { font: 500 14px/1.4 var(--mono, monospace); letter-spacing: .04em; word-break: break-all; user-select: all; }
.tf-list { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 22px; margin: 0; padding-left: 22px; font: 500 14px/1.5 var(--mono, monospace); }
.tf-code { font: 500 18px/1.2 var(--mono, monospace); letter-spacing: .12em; max-width: 12ch; }
.tf-ask .tf-code { width: 100%; max-width: none; margin: 0 0 14px; padding: 12px 14px; text-align: center; border-radius: 0; background: var(--field); border: 1px solid var(--field-edge); color: var(--ink); }
.tf-ask .tf-code[aria-invalid="true"] { border-color: var(--red); }
.tf-ask .btn.primary { width: 100%; }

/* Sign in with Google on the account pages: a neutral button carrying Google's mark (web/start, stocks, account) */
.acct .btn.gbtn, .acct .act .row > .btn.gbtn:first-of-type:not(:disabled) { gap: 12px; padding: 14px 24px; background: var(--field); border-color: var(--field-edge); color: var(--ink); box-shadow: none; }
.acct .btn.gbtn:hover, .acct .act .row > .btn.gbtn:first-of-type:not(:disabled):hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); box-shadow: none; }
#st-privy-row, #sk-privy-row, #ac-privy-row { margin-top: 10px; }
.acct .btn.gbtn .g-logo { flex: none; }
/* Privy's key export window (A.exportKey). Its Copy key / Copy Phrase buttons live in Privy's own frame, laid out exactly
   as wide as the frame, but that page reserves a scrollbar gutter (html { scrollbar-gutter: stable }): with a desktop
   scrollbar that takes ~16px, Copy Phrase was cut short and Privy's loading box showed through. On a desktop the frame
   runs past its row by more than any gutter (the spare width is the window's own colour), and once the frame shows,
   the loading boxes behind it go. The loading and "Copied" boxes take the app's card colour, not Privy's blue-grey. */
:root { --privy-color-background-2: var(--card-2) !important; }
#privy-dialog iframe[src*="/embedded-wallets/export"] { border: 0 !important; }
@media (hover: hover) and (pointer: fine) { #privy-dialog iframe[src*="/embedded-wallets/export"] { width: calc(100% + 24px) !important; max-width: none !important; } }
#privy-dialog iframe[src*="/embedded-wallets/export"][style*="opacity: 1"] ~ div { visibility: hidden; }
@media (max-width: 560px) {
  .start .st-live > div { padding-right: 16px; margin-right: 16px; }
  .start .st-live dt { font-size: 12px; }
}

/* The Tools tab (web/account-x402.js, web/account-connect.js; its ids keep the name x402): what it is for in one line,
   two big choices, who pays, the tools as cards, Connect your AI and Let it pay; Sell your API in three steps. Tokens
   only, so dark mode follows. */
.acct .tl { display: grid; gap: 18px; padding-bottom: 22px; min-width: 0; }
.acct .tl > *, .acct .tl-pane > * { min-width: 0; }
.acct .tl-pane { display: grid; gap: 18px; min-width: 0; }
.acct .tl-pane[hidden] { display: none; }
.acct .tl-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; padding: 18px 0 0; border-bottom: 0; }
.acct .tl-head h2 { margin: 0; font: 400 30px/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.acct .tl-lede { margin: 8px 0 0; max-width: 40em; font: 400 16.5px/1.45 var(--sans); color: var(--ink-2); }
.acct .tl-how { position: relative; font: 500 13.5px/1.3 var(--sans); }
/* How it works: a plain link (the kit's), no capsule, no circled i; its note a square card with a brass top hairline */
.acct .tl-how > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 0; padding: 4px 0; border-radius: 0; border: 0; background: none; font: 400 13.5px/1.35 var(--sans); color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.acct .tl-how > summary::-webkit-details-marker { display: none; }
.acct .tl-how > summary .i { display: none; }
.acct .tl-how[open] > summary, .acct .tl-how > summary:hover { color: var(--ink); border: 0; }
.acct .tl-how > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.acct .tl-how > p { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: min(360px, 80vw); margin: 0; padding: 14px 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); box-shadow: inset 0 1px 0 var(--brass-line), 0 14px 34px -22px var(--shade); font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
/* the switch (a tablist): the design kit's engraved page tabs, with Jobs or without: Plex Mono capitals, the open one in
   ink over a 2 px green rule, square, no slab, no tile, no shadow. The small lines and the arrows in their tiles go:
   each pane's own head says what it is */
.acct .tl-switch { display: flex; align-items: stretch; gap: 0 30px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; }
.acct .tl-switch .ax-tab { position: relative; flex: 0 1 auto; display: flex; align-items: center; gap: 0; min-width: 0; min-height: 46px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); box-shadow: none; text-align: left; cursor: pointer; font: inherit; }
.acct .tl-switch .ax-tab:hover { background: none; color: var(--ink); }
.acct .tl-switch .ax-tab b { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: inherit; overflow-wrap: normal; }
.acct .tl-switch .ax-tab small { display: none; }
.acct .tl-switch .ax-tab.on, .acct .tl-switch .ax-tab.on:hover { background: none; color: var(--ink); }
.acct .tl-switch .ax-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green); }
.acct .tl-switch .ax-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.acct .tl-switch .ico { display: none; }
/* Use tools: who pays, and the three steps */
.acct .tl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.acct .tl-payer { display: grid; gap: 4px; }
.acct .tl-payer[hidden] { display: none; }
.acct .tl-payer-row { display: flex; align-items: center; gap: 10px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.acct .tl-payer select { padding: 9px 34px 9px 12px; font: 500 15px var(--sans); color: var(--ink); max-width: 260px; }
.acct .tl-payer-one { font: 600 15px/1.2 var(--sans); color: var(--ink); }
.acct .tl-bal { font: 400 13.5px/1.4 var(--sans); color: var(--ink-2); }
.acct .tl-bal.empty { color: var(--brass-ink, var(--brass)); }
/* the three steps: a ledger on one line (the kit's: a mono step number in brass, the step's words), no pill, no circle */
.acct .tl-start { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule-2); background: var(--card); }
.acct .tl-start li + li { border-left: 1px solid var(--rule-2); }
.acct .tl-start a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 0; background: none; border: 0; font: 500 13.5px/1.1 var(--sans); color: var(--ink-2); text-decoration: none; }
.acct .tl-start a:hover { background: var(--hover); color: var(--ink); }
.acct .tl-start a b { font-weight: 500; }
.acct .tl-start a span { flex: none; display: inline; width: auto; height: auto; border-radius: 0; background: none; border: 0; font: 400 11px/1 var(--mono); color: var(--brass-ink); }
.acct .tl-where { margin: -6px 0 0; max-width: 52em; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.acct .tl-h { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 -6px; font: 500 21px/1.2 var(--serif); color: var(--ink); }
.acct .tl-h .n { font: 400 12.5px/1 var(--mono); color: var(--muted); }
.acct .tl-h:focus { outline: none; }
/* the catalog */
.acct .tl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.acct .tl-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 18px 18px 14px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); min-width: 0; transition: border-color .15s; }
.acct .tl-card::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ticks); opacity: 0; transition: opacity .15s; }
.acct .tl-card:hover { border-color: var(--brass-line); } .acct .tl-card:hover::after { opacity: 1; }
.acct .tl-card > * { min-width: 0; }
.acct .tl-card-top { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.acct .tl-glyph { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; background: radial-gradient(90% 60% at 50% 0%, var(--case-lamp), transparent 70%), radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)), var(--case-0); border: 0; box-shadow: inset 0 0 0 1px var(--case-edge); color: var(--case-mint); font: 500 22px/1 var(--serif); } /* the kit's specimen case, lit */
.acct .tl-card h4 { margin: 2px 0 0; font: 500 21px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.acct .tl-card p { margin: 0; font: 400 15px/1.5 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.acct .tl-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--rule-2); }
.acct .tl-facts div { display: grid; gap: 4px; }
.acct .tl-facts dt { font: 500 11px/1.3 var(--mono); letter-spacing: .02em; color: var(--brass-ink); } /* a term in brass mono; sentence case: the rigs read these words with innerText */
.acct .tl-facts dd { margin: 0; font: 500 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.acct .tl-facts dd small { font: 400 13px/1.2 var(--sans); color: var(--muted); }
.acct .tl-facts dd.new { font-weight: 500; font-size: 14.5px; color: var(--ink-2); }
.acct .tl-card .tl-cap { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.acct .tl-card .tl-cap.warn { color: var(--red); }
.acct .tl-card-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.acct .tl-dev { font: 400 13px/1.45 var(--sans); color: var(--muted); min-width: 0; }
.acct .tl-dev > summary { cursor: pointer; padding: 6px 0; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.acct .tl-dev > summary:hover { color: var(--ink); }
.acct .tl-dev[open] { flex: 1 1 100%; }
.acct .tl-dev dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 8px 0 0; padding: 12px; border-radius: 0; background: var(--field); border: 1px solid var(--card-edge); }
.acct .tl-dev dt { color: var(--muted); }
.acct .tl-dev dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.acct .tl-dev code { font: 400 12.5px/1.4 var(--mono); color: var(--ink); }
.acct .tl-seen pre { margin: 8px 0 0; padding: 12px; border-radius: 0; background: var(--field); border: 1px solid var(--card-edge); font: 400 13px/1.5 var(--sans); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.acct .tl-copied { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); border-left: 2px solid var(--green); font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.acct .tl-copied[hidden] { display: none; }
.acct .tl-copied b { color: var(--green); }
.acct .tl-copied .ok { flex: none; width: 10px; height: 10px; margin-top: 5px; font-size: 0; background: var(--green); -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; } /* the kit's pixel check over the text mark */
.acct .btn.tl-done, .acct .btn.tl-done:hover { background: var(--paper); border-color: var(--green); color: var(--green); box-shadow: none; }
.acct .tl-more { margin: -2px 0 0; font: 400 14.5px/1.4 var(--sans); color: var(--muted); }
/* loading: the kit's ruled lines where the words will go (no grey blocks) */
.acct .tl-skel { display: grid; gap: 14px; padding: 18px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); }
.acct .tl-skel i { display: block; height: 1px; border-radius: 0; background: var(--rule); }
.acct .tl-skel i.t { width: 55%; height: 1px; } .acct .tl-skel i.s { width: 85%; } .acct .tl-skel i.u { width: 40%; }
.acct .tl-note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--grain), var(--card); font: 400 15px/1.45 var(--sans); color: var(--ink-2); }
.acct .tl-note[hidden] { display: none; }
.acct .tl-note.warn { border-left: 2px solid var(--red); background: var(--card); } /* the kit's error: a coral edge, no tint */
/* Connect your AI */
.acct .tl-connect { display: grid; gap: 16px; padding: 20px 22px 22px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); min-width: 0; }
.acct .tl-connect > * { min-width: 0; }
.acct .tl-connect > header { padding: 0; border: 0; display: block; }
.acct .tl-connect > header h3 { margin: 0; font: 500 23px/1.2 var(--serif); color: var(--ink); }
.acct .tl-connect > header p { margin: 6px 0 0; font: 400 15px/1.45 var(--sans); color: var(--ink-2); }
.acct .tl-connect-body { display: grid; gap: 16px; min-width: 0; }
.acct .tl-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.acct .tl-apps-more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.acct .tl-apps-more[hidden] { display: none; }
.acct .tl-app { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 44px; padding: 12px 6px 11px; border-radius: 0; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink-2); font: 500 13.5px/1.2 var(--sans); cursor: pointer; text-align: center; min-width: 0; }
.acct .tl-app.big { padding: 16px 8px 14px; font-size: 15px; }
.acct .tl-app:hover { border-color: var(--ink); }
.acct .tl-app .logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 0; background: var(--card-2); border: 1px solid var(--card-edge); font: 600 14px/1 var(--sans); color: var(--ink); }
.acct .tl-app.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
/* a mark on a tile or a card (account-connect.js: each app's official file in web/app-logos/; account-x402.js: the
   Priors tree on Priors' own service): over the letters, on no plate of ours. A pair is the light theme's file and the
   dark theme's, the other hidden. The letters show again, on their plate, if the file fails (the script removes it). */
.acct .tl-app .logo > *, .acct .tl-glyph > * { grid-area: 1 / 1; }
.acct .tl-app .logo.has-mark, .acct .tl-glyph.has-mark { background: none; border-color: transparent; }
.acct .has-mark > .lt { display: none; }
.acct img.tl-mark { display: block; width: auto; max-width: none; }
.acct img.tl-mark.on-dark, :root[data-theme="dark"] .acct img.tl-mark.on-light { display: none; }
:root[data-theme="dark"] .acct img.tl-mark.on-dark { display: block; }
.acct .tl-app .logo > img.tl-mark { height: 20px; }
.acct .tl-app .logo > img.tl-mark.h22 { height: 22px; }
.acct .tl-app .logo > img.tl-mark.h24 { height: 24px; }
.acct .tl-glyph > img.tl-mark { width: 32px; height: 32px; }
.acct .tl-more-apps[aria-expanded="true"] { border-style: dashed; }
.acct .tl-app-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.acct .tl-go { display: grid; gap: 14px; min-width: 0; }
.acct .tl-go > .btn.primary { justify-self: start; padding: 15px 26px; font-size: 16px; }
.acct .tl-go > .sub { margin: -4px 0 0; font-size: 13.5px; }
.acct .tl-go code, .acct .tl-pay code { font: 400 12.5px var(--mono); overflow-wrap: anywhere; }
.acct .tl-link { display: grid; gap: 6px; min-width: 0; }
.acct .tl-link .label { font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.acct .tl-link-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 0; background: var(--field); border: 1px solid var(--field-edge); min-width: 0; }
.acct .tl-link-row code { flex: 1; min-width: 0; font: 400 14.5px/1.3 var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .tl-link-row .btn { flex: none; }
.acct .tl-steps { counter-reset: s; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.acct .tl-steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.acct .tl-steps li::before { content: counter(s); display: block; width: 28px; padding-top: 3px; border-radius: 0; background: none; color: var(--brass-ink); font: 400 12px/1.5 var(--mono); } /* a ledger's mono step number, no numbered circle */
.acct .tl-steps li > span { min-width: 0; }
.acct .tl-steps li b { color: var(--ink); font-weight: 600; }
.acct .tl-steps li .btn { margin: 4px 6px 0 0; vertical-align: middle; }
.acct .tl-steps q { font-style: italic; quotes: "\201C" "\201D"; }
.acct .tl-code { font: 400 13.5px/1.4 var(--sans); color: var(--muted); min-width: 0; }
.acct .tl-code > summary { cursor: pointer; display: list-item; padding: 6px 0; font: 500 13.5px/1.3 var(--sans); color: var(--muted); }
.acct .tl-code > summary:hover { color: var(--ink); }
/* Tools' disclosures (Details for developers, Do it by hand), as Jobs' are: no browser triangle, the kit's 7 x 7 caret
   after the words, turned over when open */
.acct :is(.tl-dev, .tl-code) > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; list-style: none; }
.acct :is(.tl-dev, .tl-code) > summary::-webkit-details-marker { display: none; }
.acct :is(.tl-dev, .tl-code) > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--g-caret) center / 14px 14px no-repeat; mask: var(--g-caret) center / 14px 14px no-repeat; }
.acct :is(.tl-dev, .tl-code)[open] > summary::after { transform: scaleY(-1); }
.acct :is(.tl-dev, .tl-code) > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.acct .tl-code > p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.acct .tl-code h5 { margin: 14px 0 0; font: 600 13.5px/1.3 var(--sans); color: var(--ink); }
.acct .tl-code pre { margin: 8px 0 0; padding: 12px 14px; border-radius: 0; background: var(--field); border: 1px solid var(--field-edge); overflow-x: auto; font: 400 12.5px/1.55 var(--mono); color: var(--ink); white-space: pre; max-width: 100%; }
.acct .tl-code .sub .btn { margin-left: 6px; }
.acct .tl-can { display: grid; gap: 10px; padding: 16px 18px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); }
.acct .tl-can h4 { margin: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.acct .tl-can ul { display: grid; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.acct .tl-can li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); }
/* can: the kit's 10 x 10 pixel check in green; can't: its 7 x 7 pixel x, muted (no text glyphs, no tinted tiles) */
.acct .tl-can li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border-radius: 0; background: var(--green); -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; }
.acct .tl-can li.n::before { background: var(--muted); -webkit-mask: var(--g-x) center / 14px 14px no-repeat; mask: var(--g-x) center / 14px 14px no-repeat; }
/* Let it pay */
.acct .tl-pay { display: grid; gap: 14px; padding: 14px 16px; border-radius: 0; border: 1px dashed var(--field-edge); background: var(--card); min-width: 0; }
.acct .tl-pay:focus { outline: none; }
.acct .tl-pay.open { border-style: solid; border-color: var(--card-edge); }
.acct .tl-pay-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 18px; }
.acct .tl-pay-head > div { flex: 1 1 320px; min-width: 0; }
.acct .tl-pay h4 { margin: 0; font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.acct .tl-pay h4 .tag { display: inline-block; margin-left: 8px; padding: 0; border-radius: 0; background: none; color: var(--brass-ink, var(--brass)); font: 500 10.5px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; vertical-align: 1px; } /* engraved, no capsule */
.acct .tl-pay p { margin: 4px 0 0; max-width: 46em; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.acct .tl-pay .tl-need-h { margin-top: 10px; font-weight: 600; color: var(--ink); }
.acct .tl-need-list { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.acct .tl-pay-body { display: grid; gap: 14px; min-width: 0; }
.acct .tl-pay-body[hidden] { display: none; }
.acct .tl-pay-body > * { min-width: 0; }
.acct .tl-why { padding: 10px 12px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); border-left: 2px solid var(--brass); color: var(--ink) !important; }
.acct .tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* the kit's chips: square, a hairline, card paper; on: an ink edge and the 6 px green square before the word */
.acct .tl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 12px; border-radius: 0; border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); font: 500 13.5px/1 var(--sans); cursor: pointer; }
.acct .tl-chip:hover { border-color: var(--ink); color: var(--ink); }
.acct .tl-chip.on { background: var(--card); border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.acct .tl-chip.on::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--green); }
.acct .tl-limits { margin: 0; padding: 10px 12px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
/* Sell your API */
.acct .tl-sell-hero h3 { margin: 0; font: 500 24px/1.2 var(--serif); color: var(--ink); }
.acct .tl-sell-hero p { margin: 6px 0 0; font: 400 15.5px/1.45 var(--sans); color: var(--ink-2); }
.acct .tl-sell-hero .tl-need { font-size: 14px; color: var(--muted); }
.acct .tl-sell-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.acct .tl-sell-steps li { counter-increment: s; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); min-width: 0; }
.acct .tl-sell-steps li::before { content: "0" counter(s); display: block; width: auto; height: auto; padding-bottom: 6px; border-radius: 0; border-bottom: 1px dotted var(--brass-line); background: none; color: var(--brass-ink); font: 400 12px/1.2 var(--mono); letter-spacing: .1em; } /* a ledger's mono step, a dotted brass leader under it */
.acct .tl-sell-steps b { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.acct .tl-sell-steps span { font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.acct .tl-earn { display: grid; gap: 14px; }
.acct .tl-earn[hidden] { display: none; }
.acct .tl-earn > div { padding: 16px 18px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--grain), var(--card); min-width: 0; }
.acct .tl-earn h4 { margin: 0 0 8px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.acct .tl-earn .big { font: 500 26px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.acct .tl-earn .big em { font-style: normal; color: var(--green); }
.acct .tl-earn .big .sub { font: 400 14px/1.4 var(--sans); }
.acct .tl-earn p { margin: 6px 0 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.acct .tl-sales { padding: 16px 18px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--grain), var(--card); }
.acct .tl-sales[hidden] { display: none; }
.acct .tl-sales h4 { margin: 0 0 8px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.acct .tl-sales ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acct .tl-sales li { display: grid; gap: 2px; font: 400 14px/1.45 var(--sans); }
.acct .tl-sales li b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.acct .tl-form { display: grid; gap: 14px; padding: 18px 20px 20px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); min-width: 0; }
.acct .tl-form[hidden] { display: none; }
.acct .tl-form > * { min-width: 0; }
.acct .tl-form h4 { margin: 0; font: 500 20px/1.2 var(--serif); color: var(--ink); }
.acct .tl-form > .sub { margin: 0; }
.acct .ax-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.acct .ax-grid label { display: grid; gap: 6px; font: 500 13.5px/1.3 var(--sans); color: var(--muted); min-width: 0; }
.acct .ax-grid .ax-wide { grid-column: 1 / -1; }
.acct .ax-grid .sub { font-weight: 400; font-size: 12.5px; }
.acct .ax-grid input, .acct .ax-grid select { box-sizing: border-box; width: 100%; min-width: 0; height: 46px; font: 15px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--rule); border-radius: 0; padding: 11px 13px; }
.acct .tl-form .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 640px) {
  .acct .tl { gap: 16px; }
  .acct .tl-head { padding-top: 14px; }
  .acct .tl-head h2 { font-size: 26px; }
  .acct .tl-lede { font-size: 15.5px; }
  .acct .tl-how > p { left: 0; right: auto; }
  .acct .tl-switch { gap: 0 20px; }
  .acct .tl-switch .ax-tab { min-height: 48px; }
  .acct .tl-switch .ax-tab b { letter-spacing: .12em; }
  .acct .tl-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .acct .tl-payer-row { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .acct .tl-payer select { max-width: none; width: 100%; }
  .acct .tl-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .acct .tl-start li + li { border-left: 1px solid var(--rule-2); }
  .acct .tl-start a { flex-direction: column; gap: 6px; height: 100%; padding: 8px 4px; border-radius: 0; text-align: center; font-size: 12.5px; line-height: 1.2; }
  .acct .tl-cards { grid-template-columns: minmax(0, 1fr); }
  .acct .tl-card-acts .btn.primary { flex: 1 1 100%; }
  .acct .tl-connect { padding: 16px 14px 18px; }
  .acct .tl-apps { max-width: none; }
  .acct .tl-apps-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .acct .tl-app .logo { width: 30px; height: 30px; font-size: 13px; }
  .acct .tl-app .logo > img.tl-mark { height: 18px; }
  .acct .tl-app .logo > img.tl-mark.h22 { height: 18px; }
  .acct .tl-app .logo > img.tl-mark.h24 { height: 22px; }
  .acct .tl-app { padding: 10px 4px; font-size: 12.5px; }
  .acct .tl-app.big { padding: 12px 4px; font-size: 14px; }
  .acct .tl-app-body { grid-template-columns: minmax(0, 1fr); }
  .acct .tl-go > .btn.primary { justify-self: stretch; }
  .acct .tl-sell-steps, .acct .ax-grid { grid-template-columns: minmax(0, 1fr); }
  .acct .tl-pay-head > .btn { flex: 1 1 100%; }
  .acct .tl-dev dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .acct .tl-dev dd { margin-bottom: 6px; }
  .acct .tl-earn .big { font-size: 22px; }
  .acct .tl-form { padding: 16px 14px 18px; }
}

/* Stocks: beside the side panel (wide screens), the 35 tokens scroll inside their panel (header and search stay put),
   so the page stays short. On a phone the list sits under the panels, its header row is hidden and its rows are cards:
   there it is part of the page, which scrolls on past its end. */
@media (min-width: 981px) {
  .acct #sk-list .tablewrap { max-height: min(640px, 72vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .acct #sk-list .sk-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
}
.acct .sk-builder { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); font: 400 14px/1.5 var(--sans); color: var(--muted); }
.acct .sk-builder b { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------------ the signed-in account (web/me.js, account page) */
/* pixel glyphs and trees: drawn in whole pixels, like the mark */
.px-ico { flex: none; display: block; shape-rendering: crispEdges; }
.me-tree { flex: none; display: block; image-rendering: pixelated; }
.me-plate { fill: var(--paper-2); }
/* hide balances: every figure that is money blurs, on every page, until shown again */
html[data-hide-balances] .money, html[data-hide-balances] .ac-card .sk-hero b, html[data-hide-balances] .ac-card .sk-figs b, html[data-hide-balances] .ac-loans b { filter: blur(7px); user-select: none; }

/* the header's account corner: the account's tree and its USDG, a menu of its figures and doors under it */
.me { position: relative; display: inline-flex; }
.me::after { content: ""; position: absolute; left: -12px; right: 0; top: 100%; height: 16px; } /* the pointer's path to the menu */
.me-btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 4px; background: transparent; border: 1px solid var(--ink); color: var(--ink); cursor: pointer; font: 500 14px/1 var(--sans); }
.me-btn:hover, .me.open .me-btn { background: var(--paper-2); }
.me-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.me-btn .me-tree { width: 32px; height: 32px; }
.me-bal { display: inline-flex; align-items: baseline; gap: 6px; }
.me-bal b { font: 500 19px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.me-bal > span { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
.me .dd-caret { margin-left: 0; }
.me.open .dd-caret { transform: scaleY(-1); }
.me-menu { position: absolute; top: calc(100% + 14px); right: 0; z-index: 45; width: 340px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 22px 60px -18px var(--shade); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s; }
.me.open .me-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .me:hover .me-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .me:hover .dd-caret { transform: scaleY(-1); } }
.me.shut .me-menu, .me.shut:hover .me-menu { opacity: 0; visibility: hidden; transform: translateY(-4px); }
.me.shut .dd-caret, .me.shut:hover .dd-caret { transform: none; }
.me-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; border-bottom: 1px solid var(--rule-2); }
.me-head .me-tree { width: 48px; height: 48px; }
.me-head b { display: block; font: 500 21px/1.15 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.me-addr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font: 400 12.5px/1.2 var(--mono); color: var(--muted); }
.me-addr-line .me-addr { margin-top: 0; font-family: var(--sans); font-size: 12px; }
.me-addr { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 0; background: none; border: 0; font: 400 12.5px/1 var(--mono); color: var(--muted); cursor: pointer; }
.me-addr:hover { color: var(--ink); }
.me-figs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--rule-2); }
.me-figs > div > span { display: block; font: 400 12.5px/1.2 var(--sans); color: var(--muted); }
.me-figs b { display: block; margin-top: 6px; font: 500 28px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.me-figs b i { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .1em; color: var(--muted); }
.me-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px 14px; border-bottom: 1px solid var(--rule-2); }
.me-acts .btn { gap: 8px; }
.me-acts .btn:first-child { background: var(--ink); color: var(--paper); }
.me-acts .btn:first-child:hover { background: var(--ink-2); border-color: var(--ink-2); }
.me-list { display: grid; padding: 6px 0; }
.me-list > a, .me-list > button { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 18px; background: none; border: 0; text-align: left; color: var(--ink); font: 500 14.5px/1.25 var(--sans); cursor: pointer; }
.me-list > a:hover, .me-list > button:hover, .me-list > a:focus-visible, .me-list > button:focus-visible { background: var(--paper-2); outline: 0; }
.me-list b { display: block; font-weight: 500; }
.me-list i { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.me-list .px-ico { color: var(--ink-2); }
.me-list a[aria-current="page"] b::after { content: "  · here"; font: 400 11.5px var(--mono); color: var(--muted); }
.me-hide .switch { pointer-events: none; }
.me-hide[aria-checked="true"] .switch { background: var(--ink); border-color: var(--ink); }
.me-hide[aria-checked="true"] .switch i { transform: translateX(16px); background: var(--paper); }
.me-list > .me-out { margin-top: 6px; border-top: 1px solid var(--rule-2); padding-top: 12px; color: var(--red); }
.me-list > .me-out .px-ico { color: var(--red); }
@media (max-width: 900px) {
  .me-btn { height: 38px; padding: 0 8px 0 3px; gap: 8px; }
  .me-bal b { font-size: 17px; }
}
@media (max-width: 560px) {
  .me-btn { height: 34px; padding: 0 3px; }
  .me-btn .me-tree { width: 26px; height: 26px; }
  .me-bal, .me .dd-caret { display: none; }
  .me { position: static; }
  .me-menu { position: fixed; top: 56px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 72px); overflow-y: auto; }
}

/* the account page once signed in: its own header (the tree, who, the figures, the doors), then a strip of sections */
.account.in .board-heading { display: none; }
.acct .ac-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 14px 0 18px; border-bottom: 1px solid var(--rule-2); }
.acct .ac-me .me-tree { width: 96px; height: 96px; }
.acct .ac-me .eyebrow { margin: 0 0 6px; }
.acct .ac-me h1, .acct .ac-me h2 { margin: 0; font: 500 clamp(28px, 3.4vw, 40px)/1.05 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.acct .ac-me .ac-addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 12px; }
.acct .ac-me .ac-addr code { font: 400 13px/1.35 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.acct .ac-link { padding: 0; background: none; border: 0; font: 500 13.5px/1 var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.acct .ac-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.acct .ac-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.acct .ac-name-form { margin-top: 10px; max-width: 520px; }
.acct .ac-name-form .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.acct .ac-name-form input { flex: 1 1 220px; min-width: 0; font-family: var(--mono); }
.acct .ac-name-form .sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.acct .ac-doors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.acct .ac-doors .btn { gap: 8px; }
.acct .ac-sum .ac-top { padding-top: 16px; }
.acct .ac-add { margin-top: 14px; padding: 14px 16px; border-radius: 0; background: var(--card-2); border: 1px dashed var(--card-edge); }
.acct .ac-add[hidden] { display: none; }
.acct .ac-add p { margin: 0 0 10px; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
/* ---- Add USDG, up to three ways (account-add.js): On Robinhood Chain, and From Base and From another network (Across)
   where each is offered; the account page's Add block (#ac-add) and the start page's Add USDG step (#st-2). Both themes
   through the tokens ---- */
.add-ways { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.add-ways[hidden], .add-base[hidden], .add-rh[hidden], .add-x[hidden], .add-way[hidden] { display: none; }
.add-way { padding: 7px 14px; border-radius: 0; border: 1px solid var(--rule); background: var(--card); font: 500 13.5px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; }
.add-way:hover { border-color: var(--ink); color: var(--ink); }
.add-way.on { background: var(--paper); border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.add-way:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.add-base, .add-x { display: grid; gap: 12px; min-width: 0; }
.add-base p.add-lead, .add-x p.add-lead { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.add-base p.add-lead b, .add-x p.add-lead b { font-weight: 600; color: var(--ink); }
/* From another network (Across): the network and the amount side by side, wrapping on a phone; then the price */
.add-x-form { display: flex; flex-wrap: wrap; gap: 10px 14px; max-width: 600px; }
.add-x-f { flex: 1 1 200px; min-width: 0; display: grid; gap: 6px; }
.add-x-f select, .add-x-f input { box-sizing: border-box; width: 100%; min-width: 0; }
.add-x-quote { font: 400 14px/1.5 var(--sans); color: var(--ink-2); min-height: 21px; }
.add-x-quote .wstat { padding: 0; }
.add-where { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; max-width: 600px; padding: 14px 16px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); }
.add-addr-box { flex: 1 1 210px; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.add-addr { font: 500 16px/1.35 var(--mono); color: var(--ink); overflow-wrap: anywhere; min-height: 22px; }
.add-addr .wstat { padding: 0; font: 400 14px/1.45 var(--sans); }
.add-qr { flex: none; }
.add-qr[hidden] { display: none; }
.add-qr svg { display: block; width: 112px; height: 112px; padding: 6px; background: #fff; border-radius: 0; }
.add-qr svg rect { fill: #1b1a16; } /* ink on white in both themes (never pure black): what a phone's camera reads */
.add-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.add-rules li { position: relative; padding-left: 16px; }
.add-rules li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 6px; height: 6px; border-radius: 0; background: var(--muted); }
.add-rules li b { font-weight: 600; color: var(--ink); }
.add-rules .add-rule-warn::before { background: var(--brass); }
.add-deps { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--card-edge); }
.add-deps-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.add-live { display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px/1 var(--sans); color: var(--muted); }
.add-live[hidden], .add-link[hidden] { display: none; }
.add-live i { width: 6px; height: 6px; border-radius: 0; background: var(--green); }
@media (prefers-reduced-motion: no-preference) { .add-live i { animation: add-pulse 2.4s ease-in-out infinite; } }
@keyframes add-pulse { 50% { opacity: .35; } }
.add-link { padding: 0; background: none; border: 0; font: 500 13px/1.3 var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.add-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.add-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 0; }
.add-dep-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.add-dep-list:empty { display: none; }
.add-dep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 12px; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); font: 400 13.5px/1.4 var(--sans); }
.add-dep-amt { color: var(--ink); font-variant-numeric: tabular-nums; }
.add-dep-st { font-weight: 500; color: var(--muted); }
.add-dep-st.ok { color: var(--green); }
.add-dep-st.warn { color: var(--red); }
.add-dep-at { color: var(--muted); font-size: 12.5px; }
.add-dep-tx { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; font-size: 12.5px; }
.add-base p.add-empty, .add-base p.add-note, .add-x p.add-note { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.add-base p.add-empty[hidden], .add-base p.add-note[hidden], .add-x p.add-note[hidden] { display: none; }
.add-base .wstat, .add-x .wstat { padding: 2px 0 0; }
.add-base .wstat:empty, .add-x .wstat:empty { display: none; }
.ac-sections { position: sticky; top: 66px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin: -10px 0; background: var(--paper); }
.ac-sections[hidden] { display: none; }
.ac-sections::-webkit-scrollbar { display: none; }
.ac-sections a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 0; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.ac-sections a:hover { border-color: var(--ink); color: var(--ink); }
.ac-sections a.on { background: var(--paper); border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), inset 0 -2px 0 var(--green); }
.ac-sections a .n { font: 500 12px/1 var(--mono); opacity: .7; }

/* history: the account's ledger, newest first */
.acct .ac-feed { list-style: none; margin: 4px 0 0; padding: 0; }
.acct .ac-ev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule-2); }
.acct .ac-ev:last-child { border-bottom: 0; }
.acct .ac-ev-ico { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-2); }
.acct .ac-ev.repaid .ac-ev-ico, .acct .ac-ev.back .ac-ev-ico { color: var(--green); }
.acct .ac-ev.defaulted .ac-ev-ico { color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.acct .ac-ev-what { font: 500 15px/1.3 var(--sans); color: var(--ink); min-width: 0; }
.acct .ac-ev-amt { font: 500 17px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; }
.acct .ac-ev-amt.in { color: var(--green); }
.acct .ac-ev-sub { font: 400 13px/1.3 var(--sans); color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
/* a borrow's loan, still open or repaid (journey audit B2-21) */
.ac-ev-chip { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 0; background: none; border: 1px solid var(--rule); font: 500 11.5px/1.5 var(--mono); color: var(--muted); white-space: nowrap; vertical-align: 1px; }
a.ac-ev-chip.open { background: none; border-color: var(--brass); color: var(--ink); text-decoration: none; }
a.ac-ev-chip.open:hover { text-decoration: underline; }
/* an action sent and not confirmed yet, at the top of History until a read shows it (account-history.js sending) */
.acct .ac-ev.sending .ac-ev-ico { color: var(--ink); box-shadow: inset 0 0 0 1px var(--brass); }
.acct .ac-ev.sending .ac-ev-what { color: var(--ink-2); }
/* words kept on one line: an address, its Show button and the comma after it (account-x402.js Sell) */
.nowrap { white-space: nowrap; }
.acct .ac-ev-when { font: 400 12.5px/1 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.acct a.ac-ev-when:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .acct .ac-me { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .acct .ac-me .me-tree { width: 64px; height: 64px; }
  .acct .ac-doors { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .acct .ac-doors .btn { padding: 12px 8px; font-size: 14px; }
}
@media (max-width: 900px) { .ac-sections { top: 60px; } }

/* the contact page (/contact): the form posts to the bot's POST /contact */
.contact .ct-panel { max-width: 760px; }
.ct-form { display: grid; gap: 14px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-field { display: grid; gap: 6px; }
.ct-field > span { font: 500 12px var(--sans); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.ct-field input, .ct-field textarea { width: 100%; box-sizing: border-box; }
.ct-field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.ct-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ct-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ct-status { margin: 0; font-size: 14px; }
.ct-status.ok { color: var(--green); }
.ct-status.warn { color: var(--red); }
.ct-status.muted { color: var(--muted); }
.ct-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.ct-addr { font-family: var(--mono); }
@media (max-width: 640px) { .ct-row { grid-template-columns: 1fr; } }

/* The privacy notice (privacy.html): the ledger's rules and type; the window it opens is privacy.css's */
.privacy-page .board-heading .aside { display: grid; justify-items: end; gap: 10px; }
.pn-ver { font-size: 13px; color: var(--muted); }
.pn-sec { margin-top: 34px; }
.pn-list { margin: 0; padding: 14px 0 6px 20px; display: grid; gap: 10px; max-width: 52em; font: 400 17px/1.55 var(--serif); color: var(--ink-2); }
.pn-list b { font-weight: 500; color: var(--ink); }
.pn-h3 { margin: 26px 0 0; font: 500 20px/1.2 var(--serif); color: var(--green); }
.pn-link { padding: 0; border: 0; background: none; font: inherit; color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.pn-link:hover { color: var(--ink); }
.pn-tblwrap { overflow-x: auto; }
.pn-tbl { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.pn-tbl th, .pn-tbl td { padding: 12px 18px 12px 0; text-align: left; vertical-align: top; white-space: normal; font-size: 14.5px; border-bottom: 1px solid var(--rule-2); }
.pn-tbl tbody tr:hover td { background: none; }
.pn-tbl th:last-child, .pn-tbl td:last-child { padding-right: 0; }
.pn-tbl thead th { padding-top: 14px; font: 500 13px/1.3 var(--sans); color: var(--muted); border-bottom-color: var(--rule); }
.pn-tbl tbody th { width: 28%; font-weight: 500; color: var(--ink); }
.pn-tbl td { color: var(--ink-2); }
.pn-tbl .pn-grp th { width: auto; padding: 24px 0 8px; font: 500 20px/1.2 var(--serif); color: var(--green); border-bottom-color: var(--rule); }
.pn-keys { list-style: none; margin: 0; padding: 0; }
.pn-keys li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) minmax(0, .85fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pn-k { color: var(--ink); overflow-wrap: anywhere; }
.pn-k code { font-size: 13px; }
.pn-kind { color: var(--muted); }
.pn-kind.pn-opt { color: var(--green); }
.pn-dl { margin: 0; display: grid; }
.pn-dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.pn-dl dt { font: 500 17px/1.35 var(--serif); color: var(--ink); }
.pn-dl dd { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.privacy-page .prose { max-width: 46em; }
/* a phone: each table row as a block, its cells under their column's name */
@media (max-width: 760px) {
  .privacy-page .board-heading .aside { justify-items: start; }
  .pn-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pn-tbl, .pn-tbl tbody, .pn-tbl tr, .pn-tbl th, .pn-tbl td { display: block; width: auto; }
  .pn-tbl tr { padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
  .pn-tbl tbody th, .pn-tbl td { width: auto; padding: 0; border: 0; }
  .pn-tbl tbody td::before { content: attr(data-k); display: block; margin-top: 8px; font: 500 12.5px/1.3 var(--sans); color: var(--muted); }
  .pn-tbl tr.pn-grp { padding: 0; border-bottom: 1px solid var(--rule); }
  .pn-tbl .pn-grp th { padding: 24px 0 8px; }
  .pn-keys li, .pn-dl > div { grid-template-columns: minmax(0, 1fr); }
}

/* Savings (account.html #ac-save) */
.acct .as-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 14px; }
.acct .as-form { display: grid; gap: 8px; margin-bottom: 10px; }
.acct .as-form input { max-width: 220px; }
.acct .ac-save p.sub { margin: 10px 0 0; }
@media (max-width: 640px) { .acct .as-figs { grid-template-columns: minmax(0, 1fr); } .acct .as-form input { max-width: none; flex: 1; } }

/* ---- Go mode, signed in: the account as a full-screen app (web/goapp.js). The site's top bar, footer and page
   heading give way to a sidebar and a top bar; on the account page one tab shows at a time. ---- */
body.goapp { --ga-side: 236px; --ga-top: 64px; background: var(--paper); }
body.goapp > .nav, body.goapp > .foot, body.goapp .board-heading, body.goapp #ac-sections, body.goapp .sk-builder { display: none; }
/* the app opening (mode.js decided Go mode before paint, goapp.js painted the shell from the corner's record): nothing
   of the public page shows while the page signs in; it fills the app, or gets the screen back (goapp.js release) */
html.go-boot body > .nav, html.go-boot body > .foot { display: none; }
html.go-boot body > main { visibility: hidden; }
/* /account signed out: the sign-in gate, full screen, nothing of the account behind it (mode.js sets html.ac-gate before
   paint; goapp.js release puts it back; account-page.js lifts it once signed in). Help (#ac-faq) opens below it. */
html.ac-gate body > .nav, html.ac-gate body > .foot { display: none; }
html.ac-gate #main { display: block; max-width: none; padding: 0; border: 0; }
html.ac-gate:not(.ac-gate-faq) #main > :not(#ac-in):not(#ac-rig):not(#ac-faq:target) { display: none !important; }
/* the gate's Help opens the questions under it without changing the address (account-page.js #ac-gate-help) */
html.ac-gate.ac-gate-faq #main > :not(#ac-in):not(#ac-rig):not(#ac-faq) { display: none !important; }
html.ac-gate.ac-gate-faq #main > #ac-faq { max-width: 760px; margin: 0 auto 64px; }
/* a sign-in on the gate: the gate stays over the app while Home's first read paints under it, then fades once
   (account-page.js lifted) */
html.ac-lift body #main.account > #ac-in { display: flex !important; position: fixed; inset: 0; z-index: 990; min-height: 100vh; min-height: 100svh; margin: 0; padding: 64px 16px 40px; overflow: auto; background: var(--grain), var(--paper); }
html.ac-lift #ac-privy-row, html.ac-lift #ac-rig-row, html.ac-lift .ac-gate-links { visibility: hidden; }
html.ac-lift.ac-lift-out body #main.account > #ac-in { opacity: 0; transition: opacity .2s var(--ease, ease); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.ac-lift.ac-lift-out body #main.account > #ac-in { transition: none; } }
html.ac-gate #ac-rig { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); margin: 0; z-index: 2; }
html.ac-gate #ac-faq:target { max-width: 760px; margin: 0 auto 64px; }
/* the gate's text waits for the reader's language (i18n.js), 3 s at most */
html.ac-gate.i18n-wait #ac-in { visibility: hidden; }
.ac-gate-box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 0; text-align: center; }
html.ac-gate .ac-gate-box { min-height: 100vh; min-height: 100svh; padding: 64px 16px 40px; background: var(--grain), var(--paper); }
.ac-gate-box[hidden] { display: none; }
.ac-gate-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.ac-gate-mark svg { width: 44px; height: 44px; }
.ac-gate-mark span { font: 500 40px/1 var(--serif); letter-spacing: -.01em; position: relative; top: -2px; }
.ac-gate-t { max-width: 22em; margin: 0; font: 400 19px/1.45 var(--sans); color: var(--ink-2); text-wrap: balance; }
.ac-gate-box .act { width: min(420px, 100%); display: grid; gap: 12px; justify-items: stretch; text-align: left; }
.ac-gate-box .act > .row { display: flex; justify-content: center; margin: 0; }
.ac-gate-box .act > .row > .btn { flex: 1 1 auto; }
.ac-gate-box .act > .wstat:empty { display: none; }
.ac-gate-box .act > .wstat { text-align: center; }
.ac-gate-links { display: flex; gap: 22px; margin-top: 6px; font-size: 14px; }
.ac-gate-links a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.ac-gate-links a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 560px) {
  .ac-gate-mark svg { width: 36px; height: 36px; }
  .ac-gate-mark span { font-size: 34px; }
  .ac-gate-t { font-size: 17px; }
}
.ga-opening { margin-left: var(--ga-side); padding: 40px var(--ga-gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 500 15px/1.4 var(--sans); color: var(--muted); }
.ga-opening-dot { width: 6px; height: 6px; border-radius: 0; background: var(--green); animation: ga-pulse 1.1s steps(2) infinite; } /* the kit's 6 px square; it blinks only while the app opens */
@keyframes ga-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ga-opening-dot { animation: none; } }
/* the content is centred in the space beside the sidebar, at most 1160 px wide; the top bar lines up with it */
body.goapp { --ga-gutter: max(32px, calc((100vw - var(--ga-side) - 1160px) / 2)); }
body.goapp > main { box-sizing: border-box; width: auto; max-width: none; margin: 0 0 0 var(--ga-side); padding: 28px var(--ga-gutter) 72px; border: 0; }
body.goapp > main:focus { outline: none; } /* the skip link's stop (goapp.js): the whole tab, not a control */
.ga-side { position: fixed; inset: 0 auto 0 0; width: var(--ga-side); z-index: 40; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; background: var(--card); border-right: 1px solid var(--card-edge); overflow-y: auto; }
.ga-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font: 500 24px/1 var(--serif); color: var(--ink); text-decoration: none; }
.ga-brand svg { width: 28px; height: 28px; }
/* GO MODE: an engraved label (Plex Mono capitals in brass) after the kit's 6 px green square; no capsule */
.ga-mode { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--brass-ink); background: none; border-radius: 0; padding: 5px 0; white-space: nowrap; }
.ga-mode::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--green); }
.ga-tabs { position: relative; display: flex; flex-direction: column; gap: 2px; }
/* the current tab's mark: the design kit's engraved-tab rule, stood on its side: a 2 px green rule along the open item's
   left edge that glides from tab to tab (goapp.js places it). No tint, no pill, no glow; the open item's words go ink 600
   and its pixel icon green */
.ga-ind { position: absolute; left: 0; right: 0; top: 0; z-index: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none; }
.ga-ind::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--green); }
.ga-tabs.ready .ga-ind { transition: transform .32s var(--ease), height .2s var(--ease); }
.ga-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 0; font: 500 15px/1.2 var(--sans); color: var(--ink-2, var(--ink)); text-decoration: none; }
.ga-tab .px-ico { color: var(--muted); flex: none; transition: color .2s steps(3), transform .16s steps(2); }
.ga-tab > span { position: relative; transition: transform .16s steps(2); }
/* hover: the pixel icon lights and lifts a pixel, and a pixel rule types itself under the name, block by block */
.ga-tab > span::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--green) 0 4px, transparent 4px 6px) 0 0 / 6px 2px repeat-x; clip-path: inset(0 100% 0 0); transition: clip-path .3s steps(8); }
.ga-tab:hover .px-ico, .ga-tab:focus-visible .px-ico { color: var(--green); transform: translateY(-1px); }
.ga-tab:hover > span, .ga-tab:focus-visible > span { transform: translateX(2px); }
.ga-tab:hover > span::after, .ga-tab:focus-visible > span::after { clip-path: inset(0 0 0 0); }
.ga-tab.on > span::after { display: none; }
.ga-tab.on { color: var(--ink); font-weight: 600; }
.ga-tab.on .px-ico { color: var(--green); }
.ga-foot .ga-tab.on { background: none; box-shadow: inset 2px 0 0 var(--green); }
@media (prefers-reduced-motion: reduce) { .ga-tabs.ready .ga-ind, .ga-tab .px-ico, .ga-tab > span, .ga-tab > span::after { transition: none; } }
.ga-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--card-edge); }
.ga-new { color: var(--green); }
.ga-new .px-ico { color: var(--green); }
.ga-builder { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 0; border: 1px solid var(--rule-2); font: 500 13px/1.3 var(--sans); color: var(--muted); text-decoration: none; }
.ga-builder:hover { color: var(--ink); border-color: var(--muted); }
/* Priors on X, under Help (goapp.js): a quiet link with X's mark, as the public footers draw it */
/* and Privacy choices under it (privacy.js opens its window), the same quiet link with a lock */
.ga-x, .ga-privacy { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 0; font: 500 13px/1.3 var(--sans); color: var(--muted); text-decoration: none; }
.ga-x svg, .ga-privacy svg { flex: none; width: 14px; height: 14px; margin: 0 2px; }
.ga-x > .arr { margin-left: auto; } /* the kit's up-right pixel arrow (span.arr) */
.ga-x:hover, .ga-x:focus-visible, .ga-privacy:hover, .ga-privacy:focus-visible { color: var(--ink); background: var(--hover); }
/* the language menu (goapp.js): a quiet button above Builder mode, the languages in their own names in the kit's
   dropdown list (kit-select.css .ks-list): card paper over the sidebar, a brass hairline on the side it opens from, the
   language in use in ink 500 after the 6 px green square. It opens under its button, or over it when the screen has
   no room below (the sidebar's foot sits at the bottom of the screen), so every language shows without a scroll */
.ga-lang { position: relative; margin-top: 8px; }
.ga-lang-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 0; border: 1px solid var(--rule); background: none; color: var(--muted); font: 500 13px/1.3 var(--sans); text-align: left; cursor: pointer; }
.ga-lang-btn > span { flex: 1; min-width: 0; }
.ga-lang-btn:hover, .ga-lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.ga-lang-btn[aria-expanded="true"] .dd-caret { transform: scaleY(-1); }
.ga-lang-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; border-radius: 0; background: var(--card); border: 1px solid var(--rule); border-top-color: var(--brass-line); box-shadow: 0 14px 28px -18px var(--shade); }
.ga-lang-list[data-up] { top: auto; bottom: calc(100% + 4px); border-top-color: var(--rule); border-bottom-color: var(--brass-line); box-shadow: 0 -14px 28px -18px var(--shade); }
.ga-lang-list[hidden] { display: none; }
.ga-lang-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 14px 8px 12px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font: 400 14px/1.3 var(--sans); text-align: left; cursor: pointer; }
/* the place of the mark in use: the 6 px square, green on the language in use (no tick) */
.ga-lang-list button::before { content: ""; flex: none; width: 6px; height: 6px; }
.ga-lang-list button:hover, .ga-lang-list button:focus-visible { color: var(--ink); background: var(--hover); box-shadow: inset 0 0 0 1px var(--ink); }
.ga-lang-list [aria-current="true"] { color: var(--ink); font-weight: 500; }
.ga-lang-list [aria-current="true"]::before { background: var(--green); }
@media (pointer: coarse) { .ga-lang-list button { min-height: 44px; font-size: 16px; } }
@media (forced-colors: active) { .ga-lang-list [aria-current="true"]::before { background: CanvasText; forced-color-adjust: none; } }
.ga-top { position: sticky; top: 0; z-index: 30; margin-left: var(--ga-side); height: var(--ga-top); display: flex; align-items: center; gap: 14px; padding: 0 var(--ga-gutter); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--card-edge); }
.ga-top { padding-right: 24px; }
.ga-title { margin: 0; font: 500 26px/1 var(--serif); letter-spacing: -.3px; white-space: nowrap; }
/* the house's figures, like a market's header */
.ga-stats { display: flex; align-items: center; gap: 4px; margin: 0 0 0 22px; min-width: 0; overflow: hidden; }
.ga-stat { position: relative; padding: 4px 14px; border-left: 1px solid var(--card-edge); }
.ga-stat:first-child { border-left: 0; }
.ga-stats::before { content: attr(data-k); flex: none; align-self: center; padding: 3px 4px 3px 0; border-radius: 0; background: none; font: 500 10.5px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); white-space: nowrap; } /* engraved, no capsule */
.ga-stat dt { font: 500 11px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
.ga-stat dd { margin: 3px 0 0; font: 600 15px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ga-stat.zero dd { color: var(--green); }
.ga-stat.tick dd { animation: ga-tick 1.4s var(--ease); }
@keyframes ga-tick { 0% { color: var(--green); } 100% { color: inherit; } }
@media (max-width: 1640px) { .ga-stat[data-stat="agents"], .ga-stat[data-stat="loans"] { display: none; } }
@media (max-width: 1320px) { .ga-stat[data-stat="reserve"], .ga-stat[data-stat="lost"] { display: none; } }
@media (max-width: 1080px) { .ga-stats { display: none; } }
/* notes at the top right, under the bar */
.ga-toasts { position: fixed; right: 22px; top: calc(var(--ga-top, 64px) + 14px); z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.ga-toast { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule); box-shadow: 0 18px 40px -22px var(--shade); color: var(--ink); text-decoration: none; overflow: hidden; animation: ga-toast-in .3s var(--ease) both; }
.ga-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--muted); }
.ga-toast.up::before { background: var(--green); } .ga-toast.down::before { background: var(--red); } .ga-toast.warn::before { background: var(--brass); }
button.ga-toast { width: 100%; font: inherit; text-align: left; cursor: pointer; }
/* the bell's panel open (its list says the same) or the account menu open (it opens over them): the notes step aside */
body:has(.gn.on) .ga-toasts, body:has(.ga-me.open) .ga-toasts { opacity: 0; visibility: hidden; transition: opacity .15s; }
.ga-toast-logo img { display: block; width: 32px; height: 32px; border-radius: 0; background: #fff; }
.ga-toast-logo.dk img { background: #1b1a16; } /* a logo drawn in white (goapp.js toast) */
.ga-toast-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ga-toast-t b { font: 600 14.5px/1.2 var(--sans); }
.ga-toast-t b em { font-style: normal; font-variant-numeric: tabular-nums; }
.ga-toast.up .ga-toast-t b em { color: var(--green); } .ga-toast.down .ga-toast-t b em { color: var(--red); }
.ga-toast-t span { font: 400 13px/1.35 var(--sans); color: var(--muted); }
.ga-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--green) 55%, transparent); transform-origin: 0 50%; animation: ga-toast-left var(--left, 8000ms) linear forwards; }
.ga-toast.paused .ga-toast-bar { animation-play-state: paused; }
.ga-toast:hover { border-color: var(--brass-line); }
.ga-toast.out { animation: ga-toast-out .26s var(--ease) forwards; }
@keyframes ga-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ga-toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes ga-toast-left { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ga-toast, .ga-toast.out { animation: none; } }
.ga-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ga-cash { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 0; background: var(--card); border: 1px solid var(--rule); }
.ga-cash .label { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--brass-ink); }
.ga-cash b { font: 500 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
a.ga-cash { color: inherit; text-decoration: none; } /* a phone's balance pill opens Add USDG (goapp.js cashPill) */
a.ga-cash:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ga-top .btn.sm { border-radius: 0; }
.ga-me { position: relative; }
.ga-me-btn { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 0; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; font: 500 14px/1 var(--sans); }
.ga-me-btn .me-tree { border-radius: 0; }
.ga-me-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; display: none; flex-direction: column; padding: 8px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule); box-shadow: inset 0 1px 0 var(--brass-line), 0 18px 40px -22px var(--shade); }
.ga-me.open .ga-me-menu { display: flex; }
.ga-me-head { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--rule-2); margin-bottom: 4px; }
.ga-me-head code { font-size: 12px; color: var(--muted); }
.ga-me-menu button, .ga-me-menu a { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px; border-radius: 0; border: 0; background: none; color: var(--ink); font: 500 14px/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.ga-me-menu button:hover, .ga-me-menu a:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--rule); }
/* each item's pixel icon (goapp.js ICONS), a shade quieter than its words */
.ga-me-menu button > .px-ico, .ga-me-menu a > .px-ico { flex: none; opacity: .78; }
/* Hide balances, Show steps and Dark mode: a toggle at the right, on in the app's green */
/* the kit's square switch: a 30 x 16 hairline box with a 10 px square knob, left and muted when off, right and green when
   on (no round knob, no white, no gradient) */
.ga-me-menu [role="switch"]::after { content: ""; flex: none; box-sizing: border-box; margin-left: auto; width: 30px; height: 16px; border: 1px solid var(--field-edge); border-radius: 0; background: linear-gradient(var(--muted) 0 0) 2px 50% / 10px 10px no-repeat, var(--field); transition: background-position .15s var(--ease, ease), border-color .15s; }
.ga-me-menu [role="switch"][aria-checked="true"]::after { border-color: var(--green); background: linear-gradient(var(--green) 0 0) calc(100% - 2px) 50% / 10px 10px no-repeat, var(--field); }
/* Sign out: last, apart, in the brand's red */
.ga-me-menu a[data-act="out"] { margin-top: 4px; color: var(--red); position: relative; }
.ga-me-menu a[data-act="out"]::before { content: ""; position: absolute; left: 10px; right: 10px; top: -3px; border-top: 1px solid var(--rule-2); }
.ga-me-menu a[data-act="out"] > .px-ico { opacity: 1; }
.ga-menu-btn { display: none; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 0; padding: 8px; cursor: pointer; }
/* the account page's tabs: one section at a time (account-page.js marks the current ones) */
body.goapp #main.account > section:not(.ga-on) { display: none !important; }
body.goapp .acct > .rigbar { margin-bottom: 12px; }
/* Agents: your agents, or all of them (account-explore.js) */
.ac-agbar, .ac-explore { display: none; }
body.goapp #main.account > .ac-agbar.ga-on { display: flex; margin-bottom: 14px; }
body.goapp #main.account > .ac-explore.ga-on { display: block; }
#main[data-agview="all"] > #ac-agents, #main[data-agview="all"] > #ac-empty { display: none !important; }
#main:not([data-agview="all"]) > #ac-explore { display: none !important; }
/* the kit's segmented choice: one hairline box of engraved choices, the chosen one boxed in ink on the paper */
.ag-switch { position: relative; display: inline-flex; padding: 0; gap: 0; border-radius: 0; background: var(--card); border: 1px solid var(--rule); }
.ag-switch button { position: relative; min-height: 34px; padding: 0 14px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .15s; }
.ag-switch button + button { border-left: 1px solid var(--rule); }
.ag-switch button:hover { color: var(--ink); }
.ag-switch button.on { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-head h2 .sub { font: 500 13px var(--sans); margin-left: 8px; }
.ex-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 6px; }
.ex-tools .ga-search { flex: 1 1 220px; }
.ex-items { display: grid; gap: 6px; margin-top: 8px; }
.ex-row { position: relative; display: grid; grid-template-columns: 30px minmax(140px, 1.4fr) minmax(110px, 1fr) 96px 96px 64px; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink); text-decoration: none; overflow: hidden; animation: ex-in .5s var(--ease) both; animation-delay: calc(var(--i) * 18ms); }
.ex-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--green); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .24s steps(4); }
.ex-row:hover, .ex-row:focus-visible { background: var(--card); box-shadow: inset 0 0 0 1px var(--brass-line); }
.ex-row:hover::before, .ex-row:focus-visible::before { transform: scaleY(1); }
.ex-rank { font: 500 13px var(--mono, monospace); color: var(--faint, var(--muted)); text-align: right; }
.ex-name { display: grid; gap: 4px; min-width: 0; }
.ex-nm { font: 600 15px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-nm .sub { font: 500 12.5px var(--mono, monospace); color: var(--muted); }
.ex-score { display: flex; align-items: center; gap: 8px; }
.ex-score b { font: 500 20px/1 var(--serif); color: var(--green); min-width: 36px; font-variant-numeric: tabular-nums; }
.ex-score i { flex: 1; height: 5px; border-radius: 0; background: var(--rule-2); overflow: hidden; }
.ex-score s { display: block; height: 100%; background: var(--green); text-decoration: none; }
.ex-num b { display: block; font: 600 14.5px/1.15 var(--sans); font-variant-numeric: tabular-nums; }
.ex-num .sub { font-size: 11.5px; white-space: nowrap; }
/* what an agent has out right now, a short line under its name */
.ex-st { display: flex; white-space: nowrap; font: 600 12.5px/1.2 var(--sans); }
.ex-on { color: var(--brass-ink, var(--brass)); } .ex-idle { color: var(--muted); }
.ex-side { position: sticky; top: calc(var(--ga-top) + 16px); max-height: calc(100vh - var(--ga-top) - 40px); overflow: auto; }
.ex-feed { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.ex-ev { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "dot what amt" ". when when"; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--card-edge); font: 500 13.5px/1.3 var(--sans); animation: ex-in .45s var(--ease) both; }
.ex-ev:last-child { border-bottom: 0; }
.ex-dot { grid-area: dot; width: 6px; height: 6px; margin-top: 5px; background: var(--muted); }
.ex-ev.up .ex-dot { background: var(--green); } .ex-ev.down .ex-dot { background: var(--red); }
.ex-what { grid-area: what; min-width: 0; } .ex-what .sub { font: 500 12px var(--mono, monospace); }
.ex-amt { grid-area: amt; font-variant-numeric: tabular-nums; }
.ex-ev.up .ex-amt { color: var(--green); }
.ex-when { grid-area: when; font-size: 12px; color: var(--muted); }
@keyframes ex-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ex-row, .ex-ev { animation: none; } .ex-row::before { transition: none; } }
@media (max-width: 1560px) { .ex-row { grid-template-columns: 26px minmax(120px, 1.3fr) minmax(90px, .9fr) 86px 86px; } .ex-line { display: none; } }
@media (max-width: 1280px) { .ex-layout { grid-template-columns: minmax(0, 1fr); } .ex-side { position: static; max-height: none; } }
@media (max-width: 900px) { .ex-row { grid-template-columns: 26px minmax(0, 1fr) 110px; } .ex-row .ex-num { display: none; } }
/* Home: quick doors */
.ga-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.ga-door { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.ga-door::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ticks); opacity: 0; transition: opacity .15s; }
.ga-door:hover { border-color: var(--brass-line); box-shadow: none; } .ga-door:hover::before { opacity: 1; }
.ga-door b { font: 500 15px/1.2 var(--sans); display: flex; align-items: center; gap: 8px; }
.ga-door b .px-ico { color: var(--green); }
.ga-door > span { font: 400 13px/1.35 var(--sans); color: var(--muted); } /* the line under the name (the name's pixel arrow is a span.arr of its own) */
/* the Guide (account.html #ac-guide): Go mode only; a contents box, then one part per feature, in short lines a reader
   can scan (a readable measure, headings with the sidebar's pixel icons, numbered steps, the five levels as a ladder) */
body:not(.goapp) #ac-guide { display: none; }
.gd { --gd-measure: 44em; }
.gd p, .gd li { font: 400 15.5px/1.6 var(--sans); color: var(--ink-2); }
.gd p { margin: 0 0 10px; max-width: var(--gd-measure); }
/* the contents beside the parts: a column that stays in view while the parts scroll (the window scrolls in Go mode, so
   sticky under the top bar), the part in view marked (account-guide.js: aria-current); on a phone a bar of chips that
   stays under the top bar and scrolls sideways on its own */
.gd-wrap { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 0 36px; align-items: start; margin-top: 16px; }
.gd-body { min-width: 0; }
.gd-toc { position: sticky; top: calc(var(--ga-top, 64px) + 16px); max-height: calc(100vh - var(--ga-top, 64px) - 32px); overflow-y: auto; padding: 14px 10px 12px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); scrollbar-width: thin; }
.gd-toc-t { margin: 0 8px 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.gd-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: gd; }
.gd-toc li { counter-increment: gd; font-size: 14.5px; }
.gd-toc a { position: relative; display: flex; gap: 10px; padding: 7px 8px; border-radius: 0; color: var(--ink-2); text-decoration: none; line-height: 1.3; transition: background .2s var(--ease), color .2s var(--ease); }
.gd-toc a::before { content: counter(gd); min-width: 1.4em; font: 500 12.5px/1.45 var(--mono); color: var(--faint); }
.gd-toc a:hover, .gd-toc a:focus-visible { background: var(--hover); color: var(--ink); }
.gd-toc a.on { background: none; color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--green); }
.gd-toc a.on::before { color: var(--green); }
.gd-body > .gd-sec:first-child { border-top: 0; padding-top: 4px; }
.gd-end { height: 1px; }
.gd-sec { padding: 22px 0 8px; border-top: 1px solid var(--card-edge); scroll-margin-top: calc(var(--ga-top, 64px) + 12px); }
/* the window from the sidebar's fold to a laptop: a narrower column */
@media (max-width: 1100px) and (min-width: 761px) { .gd-wrap { grid-template-columns: 168px minmax(0, 1fr); gap: 0 24px; } .gd-toc li { font-size: 14px; } }
@media (max-width: 760px) {
  .gd-wrap { display: block; margin-top: 8px; }
  .gd-toc { top: var(--ga-top, 64px); z-index: 5; max-height: none; overflow: visible; margin: 0 -26px 8px; padding: 8px 0; border-radius: 0; border-width: 0 0 1px; background: var(--card); }
  .gd-toc-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .gd-toc ol { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 26px; scroll-padding: 0 26px; scrollbar-width: none; }
  .gd-toc ol::-webkit-scrollbar { display: none; }
  .gd-toc li { flex: none; scroll-snap-align: center; font-size: 14px; }
  .gd-toc a { gap: 6px; padding: 7px 12px; border-radius: 0; white-space: nowrap; background: none; box-shadow: inset 0 0 0 1px var(--rule-2); }
  .gd-toc a.on { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), inset 0 -2px 0 var(--green); }
  .gd-toc a.on::before { color: var(--green); opacity: 1; }
  .gd-sec { scroll-margin-top: calc(var(--ga-top, 64px) + 62px); }
}
@media (prefers-reduced-motion: reduce) { .gd-toc a { transition: none; } }
.gd-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 400 24px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); border-radius: 0; }
.gd-h:focus { outline: none; }
.gd-ico { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 0; background: radial-gradient(90% 60% at 50% 0%, var(--case-lamp), transparent 70%), radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); color: var(--case-mint); }
.gd h4 { margin: 18px 0 6px; font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.gd-steps { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; counter-reset: gs; max-width: calc(var(--gd-measure) + 64px); }
.gd-steps > li { counter-increment: gs; position: relative; padding: 14px 16px 6px 56px; border-radius: 0; background: var(--grain), var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.gd-steps > li::before { content: counter(gs); position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 0; background: none; color: var(--brass-ink); font: 400 12.5px/1 var(--mono); box-shadow: inset 0 -1px 0 var(--brass-line); }
.gd-steps > li > b { display: block; margin: 2px 0 6px; font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.gd-steps p { margin-bottom: 8px; }
.gd-rungs { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; counter-reset: gr -1; max-width: var(--gd-measure); }
.gd-rungs li { counter-increment: gr; position: relative; padding: 9px 12px 9px 46px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); line-height: 1.45; }
.gd-rungs li::before { content: counter(gr); position: absolute; left: 12px; top: 9px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 0; background: none; color: var(--green); font: 600 12.5px/1 var(--mono); }
.gd-rungs li:nth-child(1)::before { background: none; color: var(--muted); box-shadow: none; }
.gd-rungs li:nth-child(5)::before { background: none; color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }
.gd-list { margin: 0 0 10px; padding-left: 20px; max-width: var(--gd-measure); }
.gd-list li { margin: 0 0 6px; }
.gd-list li::marker { color: var(--green); }
.gd-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.gd-pt { margin-top: 4px; }
.gd-faq details { border-bottom: 1px solid var(--card-edge); max-width: var(--gd-measure); }
.gd-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font: 600 15.5px/1.35 var(--sans); color: var(--ink); }
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary::after { content: ""; flex: none; align-self: center; width: 14px; height: 14px; background: var(--muted); -webkit-mask: var(--g-plus) center / 14px 14px no-repeat; mask: var(--g-plus) center / 14px 14px no-repeat; transition: transform .2s var(--ease); }
.gd-faq details[open] summary::after { transform: rotate(45deg); }
.gd-faq details p { margin: 0 0 14px; }
.gd-faq .ga-note { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .gd-faq summary::after { transition: none; } }
/* the Guide's figures (account.html .gd-fig): drawn with the page's own tokens (both themes), the sidebar's pixel icons
   and the trees; each is one picture for a screen reader (role="img" and its words in aria-label) */
.gd-fig { margin: 18px 0 16px; padding: 18px; max-width: calc(var(--gd-measure) + 64px); border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); color: var(--ink); }
.gd-fig .px-ico { display: block; }
.gd-fig-t { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.gd .gd-cap { font-size: 14px; line-height: 1.5; color: var(--muted); }
.gd-fig .gd-cap { margin: 12px 0 0; }
.gd-node { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 0; background: var(--card); color: var(--green); box-shadow: inset 0 0 0 1px var(--card-edge); }
.gd-node .px-ico { width: 18px; height: 18px; }
.gd-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.gd .gd-legend li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.45; }
.gd-k { flex: none; width: 12px; height: 12px; border-radius: 0; transform: translateY(1px); }
/* the loop: six steps round a ring, the record in its middle */
.gd-wheel { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1.02; padding: 0; box-sizing: border-box; background: radial-gradient(closest-side, var(--glow), transparent 70%), var(--card-2); }
.gd-wheel-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gd-wheel-ring circle { fill: none; stroke: var(--card-edge); stroke-width: 1.4; stroke-dasharray: 2 2.2; }
.gd-wheel-arrows polyline { fill: none; stroke: var(--green); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.gd-wheel-spin { fill: var(--green); transform-box: view-box; transform-origin: 50% 50%; animation: gd-spin 14s linear infinite; }
@keyframes gd-spin { to { transform: rotate(360deg); } }
.gd-wheel-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; display: grid; justify-items: center; gap: 6px; text-align: center; }
.gd-wheel-hub b { font: 400 17px/1.15 var(--serif); color: var(--ink); }
.gd-wheel-tree { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 0; background: var(--green); color: var(--card); }
.gd-wheel-tree .px-ico { width: 30px; height: 30px; }
.gd-wheel-steps { list-style: none; margin: 0; padding: 0; }
.gd .gd-wheel-steps li { position: absolute; width: 31%; transform: translate(-50%, -18px); display: grid; justify-items: center; gap: 4px; text-align: center; font: 500 13.5px/1.25 var(--sans); color: var(--ink); }
.gd-wheel-steps li:nth-child(1) { left: 50%; top: 16%; }
.gd-wheel-steps li:nth-child(2) { left: 79.4%; top: 33%; }
.gd-wheel-steps li:nth-child(3) { left: 79.4%; top: 67%; }
.gd-wheel-steps li:nth-child(4) { left: 50%; top: 84%; }
.gd-wheel-steps li:nth-child(5) { left: 20.6%; top: 67%; }
.gd-wheel-steps li:nth-child(6) { left: 20.6%; top: 33%; }
.gd-wheel-steps .gd-node { animation: gd-pulse 14s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 14s / 6 - 1.2s); }
.gd-wheel-steps li:nth-child(2) .gd-node { --d: 1; } .gd-wheel-steps li:nth-child(3) .gd-node { --d: 2; } .gd-wheel-steps li:nth-child(4) .gd-node { --d: 3; }
.gd-wheel-steps li:nth-child(5) .gd-node { --d: 4; } .gd-wheel-steps li:nth-child(6) .gd-node { --d: 5; }
@keyframes gd-pulse { 0%, 14%, 100% { box-shadow: inset 0 0 0 1px var(--card-edge); } 6% { box-shadow: inset 0 0 0 2px var(--green), 0 0 0 4px var(--glow); } }
/* the five levels: a stair, a tree on each step */
.gd-stair ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; }
.gd .gd-stair li { display: grid; justify-items: center; gap: 6px; text-align: center; font: 600 13px/1.2 var(--sans); color: var(--ink); overflow-wrap: break-word; hyphens: manual; }
.gd-stair li > i { display: block; width: 100%; height: calc(10px + var(--h) * 14px); border-radius: 0; background: linear-gradient(var(--green), var(--green-2)); opacity: calc(.35 + var(--h) * .16); }
.gd-stair li:nth-child(1) { --h: 0; --s: .5; } .gd-stair li:nth-child(2) { --h: 1; --s: .62; } .gd-stair li:nth-child(3) { --h: 2; --s: .76; }
.gd-stair li:nth-child(4) { --h: 3; --s: .9; } .gd-stair li:nth-child(5) { --h: 4; --s: 1; }
.gd-tree { display: grid; place-items: end center; width: 100%; max-width: 80px; aspect-ratio: 1; color: var(--green); }
.gd-tree .px-ico { width: calc(44px * var(--s)); height: calc(44px * var(--s)); }
.gd-tree img { width: 100%; height: auto; transform: scale(var(--s)); transform-origin: 50% 100%; }
/* a loan, day by day */
.gd-fig-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 18px; }
.gd-terms { display: inline-flex; padding: 0; border-radius: 0; background: var(--card); box-shadow: none; border: 1px solid var(--rule); }
.gd-term { border: 0; background: none; min-height: 34px; padding: 0 12px; border-radius: 0; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; color: var(--ink-2); cursor: pointer; }
.gd-term + .gd-term { border-left: 1px solid var(--rule); }
.gd-term[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.gd-term:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.gd-loan-fig { position: relative; padding: 26px 0 0; }
.gd-pins { position: absolute; inset: 0 0 auto; height: 22px; }
.gd-pin { position: absolute; top: 0; font: 600 12.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap; transition: left .35s var(--ease); }
.gd-pin::after { content: ""; position: absolute; left: 0; top: 17px; width: 2px; height: 14px; background: var(--ink); border-radius: 0; }
.gd-pin-due { transform: translateX(-50%); }
.gd-pin-due::after { left: calc(50% - 1px); }
.gd-loan-bar { display: flex; height: 18px; border-radius: 0; overflow: hidden; gap: 2px; }
.gd-z { display: block; min-width: 0; transition: width .35s var(--ease); }
.gd-z-early { background: color-mix(in srgb, var(--green) 30%, var(--card)); }
.gd-z-week { background: var(--green); }
.gd-z-grace { background: var(--brass); }
.gd-z-late { background: repeating-linear-gradient(135deg, var(--red) 0 4px, color-mix(in srgb, var(--red) 55%, var(--card)) 4px 8px); }
.gd-ticks { position: relative; height: 22px; margin-top: 4px; font: 500 12px/1.2 var(--mono); color: var(--muted); }
.gd-ticks span { position: absolute; top: 4px; transform: translateX(-50%); transition: left .35s var(--ease); }
.gd-ticks span[style*="left:0%"] { transform: none; }
.gd-ticks span[style*="left:100%"] { transform: translateX(-100%); }
.gd-axis { display: block; font: 400 12px/1.3 var(--sans); color: var(--muted); }
/* the pool: the flow, the fee's split, a default's order */
.gd-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: gf; }
.gd .gd-flow li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font: 500 13.5px/1.3 var(--sans); color: var(--ink); }
.gd-flow li + li::before { content: ""; position: absolute; left: -18px; top: 13px; width: 14px; height: 14px; background: var(--green); -webkit-mask: var(--g-arrow) center / 14px 14px no-repeat; mask: var(--g-arrow) center / 14px 14px no-repeat; }
.gd-split { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--card-edge); }
.gd-split-bar { display: flex; gap: 2px; height: 18px; margin-top: 10px; border-radius: 0; overflow: hidden; background: repeating-linear-gradient(135deg, var(--card-edge) 0 6px, var(--card) 6px 12px); }
.gd-split-bar:not(.read) i { display: none; }
.gd-split-bar i { display: block; min-width: 0; transition: width .5s var(--ease); }
.gd-split [data-part="lenders"] { background: var(--green); }
.gd-split [data-part="sponsor"] { background: var(--brass); }
.gd-split [data-part="reserve"] { background: color-mix(in srgb, var(--ink) 55%, var(--card)); }
.gd-split-legend b { margin-left: auto; font: 500 13.5px/1.45 var(--sans); color: var(--muted); }
.gd-pool.read .gd-split-legend b { font: 600 14px/1.45 var(--mono); color: var(--ink); }
.gd-split-legend b[data-split] { white-space: nowrap; }
.gd-loss { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--card-edge); }
.gd-loss ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: gl; }
.gd .gd-loss li { counter-increment: gl; display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); font: 500 13.5px/1.3 var(--sans); color: var(--ink); }
.gd-loss li::before { content: counter(gl); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 0; background: none; color: var(--red); box-shadow: inset 0 0 0 1px var(--red); font: 600 12px/1 var(--mono); }
/* backing: a value bar for stock tokens, the seat's line */
.gd-backing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.gd-bk { min-width: 0; }
.gd-bk + .gd-bk { padding-left: 28px; border-left: 1px dashed var(--card-edge); }
.gd-bk-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 15px/1.3 var(--sans); }
.gd-val-bar { position: relative; height: 18px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); overflow: hidden; }
.gd-val-bar i { position: absolute; top: 0; bottom: 0; }
.gd-val-base { left: 0; width: 25%; background: var(--green); }
.gd-val-range { left: 25%; width: 25%; background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 35%, var(--card))); }
.gd-val-plus { left: 50%; width: 20%; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 45%, var(--card)) 0 4px, var(--card) 4px 8px); }
.gd-k-base { background: var(--green); }
.gd-k-plus { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 45%, var(--card)) 0 3px, var(--card) 3px 6px); box-shadow: inset 0 0 0 1px var(--card-edge); }
.gd-seat { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.gd-seat-a, .gd-seat-b { padding: 8px 14px; border-radius: 0; font: 600 14px/1.2 var(--sans); }
.gd-seat-a { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--card-edge); }
.gd-seat-b { background: var(--green); color: var(--card); }
.gd-seat-arrow { flex: 1 1 40px; max-width: 90px; height: 10px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .gd-fig { padding: 14px; }
  .gd-wheel { padding: 0; }
  .gd .gd-wheel-steps li { font-size: 12.5px; width: 30%; }
  /* the arrows at three and nine o'clock would sit under the side steps' words: the other four show the way round */
  .gd-wheel-arrows polyline:nth-child(2), .gd-wheel-arrows polyline:nth-child(5) { display: none; }
  .gd-wheel-hub b { font-size: 15px; }
  .gd-wheel-tree { width: 42px; height: 42px; }
  .gd-flow { gap: 16px; }
  .gd-flow li + li::before { left: -14px; }
  .gd .gd-flow li, .gd .gd-loss li { font-size: 13px; }
  .gd-loss ol { grid-template-columns: 1fr; }
  .gd-backing { grid-template-columns: 1fr; }
  .gd-bk + .gd-bk { padding: 16px 0 0; border-left: 0; border-top: 1px dashed var(--card-edge); }
  .gd-stair ol { gap: 3px; }
  .gd .gd-stair li { font-size: 10.5px; letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce) {
  .gd-wheel-spin, .gd-wheel-steps .gd-node { animation: none; }
  .gd-pin, .gd-z, .gd-ticks span, .gd-split-bar i { transition: none; }
}
@media (max-width: 520px) {
  .gd-h { font-size: 22px; }
  .gd-steps > li { padding-left: 48px; }
  .gd-steps > li::before { left: 12px; }
}
/* shared bits of the new tabs */
.ga-list { display: grid; gap: 8px; margin: 10px 0; }
.ga-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.ga-row .grow { flex: 1 1 200px; min-width: 0; }
.ga-row b { font: 600 15px/1.2 var(--sans); }
.ga-row .sub { display: block; }
.ga-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 0; border-radius: 0; background: none; color: var(--green); }
.ga-chip::before { content: ""; flex: none; width: 6px; height: 6px; background: currentColor; }
.ga-chip.warn { background: none; color: var(--red); }
.ga-note { font: 400 13px/1.45 var(--sans); color: var(--muted); }
.ga-empty { padding: 16px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--card); color: var(--muted); font: 400 14px/1.45 var(--sans); }
/* a phone: the sidebar slides in from the menu button */
@media (max-width: 860px) {
  body.goapp { --ga-side: 0px; --ga-gutter: 16px; }
  body.goapp > main { margin: 0; padding: 16px 16px 72px; }
  /* closed, it is out of the Tab order and of screen readers too, not only off screen */
  .ga-side { width: 272px; transform: translateX(-102%); visibility: hidden; transition: transform .2s var(--ease, ease), visibility .2s; box-shadow: 24px 0 48px -24px var(--shade); }
  /* opening, it shows at once (the focus moves into it); shutting, it stays visible while it slides away */
  .ga-side.open { transform: none; visibility: visible; transition: transform .2s var(--ease, ease); }
  /* open, the page behind it dims; a tap there lands on the body, so it only shuts the sidebar (goapp.js) */
  body.goapp.ga-drawer::after { content: ""; position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
  .ga-top { padding: 0 12px; gap: 10px; }
  .ga-menu-btn { display: inline-flex; }
  .ga-title { font-size: 21px; }
  .ga-me-name, .ga-cash .label { display: none; }
  .ga-add { display: none; }
  .ga-cash { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .ga-side, .ga-side.open { transition: none; } }
/* The Go pages draw to the screen's edges (viewport-fit=cover: Go mode installed as an app, web/manifest.webmanifest):
   what flows keeps clear of a notch and the rounded corners of a phone held sideways, and the sidebar (a drawer on a
   phone), the sign-in screen's foot and the tab bar (launch-shell.css) keep clear of the home indicator. Every inset is
   0 on a screen without them, so nothing moves there. */
html[data-go-page] body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
html[data-go-page] .ga-side { padding-left: max(14px, env(safe-area-inset-left)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
html[data-go-page] #ac-in.gt .gt-wrap { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) { html[data-go-page] #ac-in.gt .gt-wrap { padding-bottom: calc(32px + env(safe-area-inset-bottom)); } }
.acct .ga-h { margin: 18px 0 4px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.sk-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 18px; padding: 14px 18px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); font: 400 14px/1.45 var(--sans); color: var(--muted); }
.sk-buy b { color: var(--ink); }
.sk-buy .row { margin: 0; gap: 8px; }
body.goapp .st-tabs, body.goapp #st-build-pane { display: none !important; }
.go-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 14px 18px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); border-left: 2px solid var(--green); color: var(--ink); text-decoration: none; font: 400 14.5px/1.4 var(--sans); }
.go-cta:hover { border-color: var(--brass-line); border-left-color: var(--green); box-shadow: none; }
.go-cta-tag { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); background: none; border-radius: 0; padding: 0; }
.go-cta-txt { flex: 1 1 260px; color: var(--muted); }
.go-cta-txt b { color: var(--ink); }
.go-cta-arr { font-weight: 600; color: var(--green); white-space: nowrap; }
.go-cta-tag::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--green); }
html[data-signed-in] .go-cta-new { display: none; } /* signed in (me.js): no sign-in to offer */

/* ---- Go mode, round 2: the in-tab stock flow, the agents list, the score, help, the withdrawal steps, polish ---- */
body.goapp .acct .panel { padding: 8px 26px 22px; border-radius: 0; }
body.goapp .acct .panel > header { padding: 18px 0 10px; }
body.goapp .acct .panel > header h2 { font-size: 26px; }
body.goapp .acct .panel > header .sub { font-size: 14.5px; }
.ga-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 8px 0 6px; padding: 14px 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); font: 400 14px/1.45 var(--sans); color: var(--muted); }
.ga-banner b { color: var(--ink); }
.ga-banner .row { margin: 0; gap: 8px; }
.ga-h-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; }
.ga-h-row .ga-h { margin: 0; }
.ga-search { max-width: 280px; padding: 10px 14px !important; font-size: 14.5px !important; }
.ga-table td, .ga-table th { vertical-align: middle; }
.ga-acts { display: inline-flex; gap: 6px; }
.ga-row .sk-logo { flex: none; }
.ga-sheet { margin: 14px 0; padding: 16px 18px; border-radius: 0; border: 1px solid var(--rule); background: var(--grain), var(--card); box-shadow: inset 0 1px 0 var(--brass-line); }
.ga-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ga-sheet-head h3 { margin: 0; font: 500 22px/1.1 var(--serif); }
/* the Backing tab's deposit sheet: the token's logo beside its name, and its name, price and LTV under it */
#as-dep { scroll-margin-top: calc(var(--ga-top, 64px) + 12px); }
#as-dep .ga-sheet-head h3 { display: flex; align-items: center; gap: 10px; min-width: 0; }
#as-dep .ga-sheet-head h3:focus { outline: none; }
#as-dep .ga-sheet-head .sk-logo { flex: none; width: 34px; height: 34px; }
.as-dep-tok { margin: -2px 0 12px; font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.ga-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.ga-sheet-grid label { display: grid; gap: 6px; font: 600 12px/1 var(--sans); letter-spacing: .04em; color: var(--muted); }
.ga-sheet-grid label .row { margin: 0; }
.ga-sheet-grid .sub { font-weight: 400; letter-spacing: 0; }
/* agents: the chosen card and its score on the left, the list on the right */
.ag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.ag-main { display: grid; gap: 18px; min-width: 0; }
.ag-list { position: sticky; top: calc(var(--ga-top, 64px) + 16px); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--ga-top, 64px) - 40px); padding: 16px !important; }
.ag-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-list-head b { font: 500 20px/1 var(--serif); }
.ag-list .ga-search { max-width: none; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); border-radius: 0; padding: 0 10px; font: 500 13px/1 var(--sans); cursor: pointer; }
.ag-chip:hover { border-color: var(--ink); color: var(--ink); }
.ag-chip.on { background: var(--card); border-color: var(--ink); color: var(--ink); }
.ag-chip.on::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--green); }
.ag-sort { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.ag-sort select { padding: 7px 10px !important; font-size: 13px !important; border-radius: 0 !important; }
.ag-items { display: grid; gap: 6px; overflow-y: auto; padding-right: 2px; }
.ag-item { display: grid; gap: 4px; text-align: left; padding: 11px 12px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.ag-item:hover { border-color: var(--brass-line); }
.ag-item:has(.ag-item-tree) { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
.ag-item:has(.ag-item-tree) > :not(.ag-item-tree) { grid-column: 2; }
.ag-item-tree { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 44px; height: 44px; border-radius: 0; overflow: hidden; background: radial-gradient(80% 80% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); }
.ag-item-tree img { width: 100%; height: 100%; display: block; }
.ag-item-tree img:not([src]) { visibility: hidden; }
html[data-hide-trees] .ag-item:has(.ag-item-tree) { grid-template-columns: minmax(0, 1fr); }
html[data-hide-trees] .ag-item:has(.ag-item-tree) > :not(.ag-item-tree) { grid-column: 1; }
.ag-item.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ag-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-item-top b { font: 600 14.5px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item-sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.ag-item-due { font: 600 12px/1.2 var(--sans); color: var(--brass-ink); }
.ag-item-due.r { color: var(--red); }
.ag-score > header h2 { display: flex; align-items: baseline; gap: 10px; }
.ag-big { font: 500 40px/1 var(--serif); color: var(--green); }
/* the score's parts (sc-: the site's .ag-bar is the home page's decorative bar, animated for ever) */
.sc-bars { display: grid; gap: 10px; margin: 10px 0 14px; }
.sc-bar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; align-items: center; gap: 12px; font: 500 13.5px/1.2 var(--sans); cursor: help; }
.sc-bar-t { height: 6px; border-radius: 0; background: var(--rule-2); overflow: hidden; }
.sc-bar-t i { display: block; height: 100%; border-radius: 0; background: var(--green); transform-origin: 0 50%; }
.sc-bar-v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes sc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) { .sc-grow .sc-bar-t i { animation: sc-grow .9s var(--ease) both; } .sc-grow .sc-bar:nth-child(2) i { animation-delay: .06s; } .sc-grow .sc-bar:nth-child(3) i { animation-delay: .12s; } .sc-grow .sc-bar:nth-child(4) i { animation-delay: .18s; } .sc-grow .sc-bar:nth-child(5) i { animation-delay: .24s; } .sc-grow .sc-bar:nth-child(6) i { animation-delay: .3s; } }
.st-have { margin: 12px 0 0; }
.ag-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* help */
.ga-help { padding: 18px 0 6px; border-bottom: 1px solid var(--card-edge); margin-bottom: 4px; }
.ga-help h3 { margin: 0 0 4px; font: 500 26px/1.1 var(--serif); }
/* take it out: three steps */
.wd-steps { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 14px; }
.wd-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 0; background: var(--grain), var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.wd-n { width: 30px; height: 30px; border-radius: 0; display: grid; place-items: center; background: none; color: var(--brass-ink); font: 400 13px/1 var(--mono); box-shadow: inset 0 0 0 1px var(--rule); }
.wd-body { min-width: 0; }
.wd-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wd-h h3 { margin: 0; font: 500 21px/1.1 var(--serif); }
.wd-asset { background: var(--card) !important; }
.wd-amt { width: 160px; text-align: right; padding: 9px 12px !important; }
.wd-dest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
/* Transfer out's Remove: a quiet link after the address it removes (it asks first); on a touch screen a real 44 px box,
   not the links' grown tap area, which would reach the address above it */
@media (pointer: coarse) { html[data-go-page] .acct #ac-wd-clear { min-height: 44px; } html[data-go-page] .acct #ac-wd-clear::before { content: none; } }
#ac-wd-set input { flex: 1 1 320px; min-width: 0; }
.wd-review { padding: 14px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); font: 400 14.5px/1.5 var(--sans); margin-bottom: 12px; }
.wd-sum { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 16px; }
.wd-review .r { color: var(--red); }
@media (max-width: 1100px) {
  .ag-layout { grid-template-columns: minmax(0, 1fr); }
  .ag-list { position: static; max-height: none; order: -1; }
  .ag-items { max-height: 320px; }
}
@media (max-width: 640px) {
  .ga-sheet-grid { grid-template-columns: 1fr; }
  .sc-bar { grid-template-columns: 110px minmax(0, 1fr) 56px; font-size: 12.5px; }
  .ag-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-amt { width: 110px; }
  .wd-step { grid-template-columns: minmax(0, 1fr); }
  .wd-n { display: none; }
}
/* the Agents tab's own layout replaces the old grid of cards */
.ac-agents { display: block; }
#ag-cards > article[hidden] { display: none; }
/* the agent path (account-path.js): a card's Next step, the chosen agent's Steps and Scores, Home's Next steps, and
   Help's points per action */
.ac-next .label { font: 500 10.5px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.ac-next p { margin: 0; } .ac-next p.r { color: var(--red); }
/* the ways to a new line (account-path.js routeList), in a card's Next step and the Steps panel's Line step: one per
   line, its dot saying where it stands (open now, on hold, shut) */
.ac-routes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.ac-routes li { position: relative; padding-left: 16px; line-height: 1.45; }
.ac-routes li::before { content: ""; position: absolute; left: 2px; top: calc(.725em - 3px); width: 6px; height: 6px; border-radius: 0; background: var(--faint); }
.ac-routes li[data-state="open"]::before { background: var(--green); }
.ac-routes li[data-state="held"]::before { background: var(--brass); }
.ac-routes li b { font-weight: 600; color: var(--ink); }
.ac-routes .k { white-space: nowrap; }
.ac-next:has(.ac-routes) { margin-bottom: 12px; } /* the card's buttons under it, with no line between them */
.ac-next-bar, .pa-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ac-next-bar .sub, .pa-prog .sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* the bar's track, seen on the card and on a step's card-2 in both themes (paper-3 is near both in dark) */
.ac-next-bar .ac-bar, .pa-prog .ac-bar { background: color-mix(in srgb, var(--muted) 35%, transparent); }
/* the Steps header: its title, then How the score works and Hide steps together at the right (wrapped, still at the
   right), its line under them; Home's Next steps holds Agents and Hide steps the same way */
.ag-path > header .sub { order: 1; flex-basis: 100%; }
.ag-path > header .pa-acts, .hm-next > header .pa-acts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 12px; }
.ag-path > header .pa-acts .k { font-size: 13.5px; }
.ag-path > header > .ac-link { margin-left: auto; }
.ag-path > .ga-note { margin: 0 0 8px; }
.pa-steps { gap: 10px; }
.pa-steps .wd-h { margin-bottom: 4px; }
.pa-steps .wd-h h3 { font-size: 18px; }
.pa-steps .ac-pill { white-space: nowrap; flex: none; } /* the title wraps, not the pill (pt: "Em andamento") */
.pa-steps .wd-body > .sub { display: block; margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.pa-steps .ga-row { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); } /* a row on a step's own card-2 */
.pa-steps .ga-row .sub + .sub { margin-top: 2px; }
.pa-steps .pa-go { margin-top: 10px; } /* a step's way there: the tab or the card where it is done */
.wd-step.pa-done { padding: 10px 16px; }
.wd-step.pa-off { background: transparent; border: 1px dashed var(--field-edge); box-shadow: none; }
.wd-step.pa-off .wd-n { background: none; color: var(--muted); }
.pa-conds { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.pa-conds li { display: flex; gap: 8px; font-size: 14px; }
/* a condition: the kit's 6 px square outlined while it is to do, the 10 x 10 pixel check in green once met (no text marks) */
.pa-conds li::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 10px; margin-top: 5px; border: 1px solid var(--muted); }
.pa-conds li.ok::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 5px; background: var(--green); -webkit-mask: var(--g-check) center / 10px 10px no-repeat; mask: var(--g-check) center / 10px 10px no-repeat; border: 0; }
.pa-conds li span { flex: 1; } .pa-conds b { font-weight: 500; font-variant-numeric: tabular-nums; }
a.ga-row.pa-do { color: var(--ink); text-decoration: none; border: 1px solid transparent; }
a.ga-row.pa-do:hover, a.ga-row.pa-do:focus-visible { border-color: var(--brass-line); box-shadow: none; }
a.ga-row.pa-do i { display: inline-block; flex: none; font-style: normal; font-size: 0; width: 14px; height: 14px; background: var(--green); -webkit-mask: var(--g-arrow) center / 14px 14px no-repeat; mask: var(--g-arrow) center / 14px 14px no-repeat; /* the kit's 7 x 7 pixel arrow over the text one */ }
.acct .sk-figs.sc-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acct .sk-figs.sc-tot b { font: 500 34px/1 var(--serif); color: var(--green); }
.acct .sk-figs.sc-tot b .sub { display: inline; margin-left: 6px; font: 500 13px/1 var(--sans); }
.sc-tot .sub { display: block; font-size: 13px; color: var(--muted); }
.sc-v1 { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.sc-v1 > div { display: flex; gap: 4px; } .sc-v1 dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sc-how { grid-column: 1 / -1; margin: -4px 0 2px; font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.sc-bar:not([title]) { cursor: default; }
.ag-score .sc-next { margin: 0 0 10px; color: var(--ink-2); }
#ap-v2 .sc-next { margin-top: 14px; }
.sc-needs { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.sc-needs li { display: flex; justify-content: space-between; gap: 12px; font: 400 13px/1.4 var(--sans); padding: 4px 0; border-bottom: 1px solid var(--rule-2); }
.sc-needs li b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-needs li.met b { color: var(--green); }
.sc-needs li.todo b { color: var(--ink); }
.hm-next { margin: 14px 0 0; } .hm-next[hidden] { display: none; }
.hm-next > header { flex-wrap: wrap; row-gap: 4px; }
.hm-next > header .ac-link { font-size: 13px; white-space: nowrap; } /* one line: its underline never runs through a second */
.hm-next .hm-list { gap: 8px; }
.hm-next .ap-act .sub.r { color: var(--red); }
/* steps you can move past (account-path.js): the current step with where it is, Back and Next; a skipped one, dashed,
   with Reopen; a done one, one quiet line; all done or skipped, a short line with the way back */
.st-item { display: grid; gap: 6px; }
.st-item.st-now > .ap-act { border-color: var(--rule); background: var(--card); box-shadow: inset 2px 0 0 var(--green); }
.st-item.st-skipped > .ap-act { border-style: dashed; background: transparent; }
.st-item.st-skipped > .ap-act b, .st-item.st-skipped > .ap-act .sub { color: var(--muted); }
.st-at { font: 500 12.5px/1.2 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.st-skip { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.st-skip .ac-pill { margin-left: 0; }
.st-item > .st-skip { padding: 0 2px; }
.st-skip .ac-link { font-size: 13px; }
.st-done .st-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 0; border: 1px solid var(--rule-2); }
.st-done .st-row b { font: 500 14px/1.2 var(--sans); color: var(--muted); }
.st-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 16px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); border-left: 2px solid var(--green); }
.st-fin p { margin: 0; font: 500 14.5px/1.4 var(--sans); color: var(--ink); }
.ag-path .st-fin { margin: 8px 0 12px; }
.wd-step.pa-skipped { background: transparent; border: 1px dashed var(--field-edge); box-shadow: none; }
.wd-step.pa-skipped .wd-n { background: none; color: var(--muted); }
/* the controls in the card's header, beside its links: where it is, Previous, Next (wrapping under the title on a phone) */
.st-nav { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.st-nav .ac-link { font-size: 13px; white-space: nowrap; }
.ag-path > header .st-nav .ac-link { font-size: 13.5px; }
.st-nav .st-at { white-space: nowrap; }
#hm-next-nav:empty { display: none; }
/* a phone: the title and its links on the first row, the step controls on their own row under them */
@media (max-width: 640px) {
  .hm-next > header .pa-acts, .ag-path > header .pa-acts { display: contents; }
  .hm-next > header .pa-acts > .k, .ag-path > header .pa-acts > .k { margin-left: auto; }
  .hm-next > header .st-nav, .ag-path > header .st-nav { order: 1; flex-basis: 100%; }
  .ag-path > header .sub { order: 2; }
  #hm-next-nav { order: 1; flex-basis: 100%; }
  #hm-next-nav .st-nav { flex-basis: auto; }
}
/* Home's hints (account-page.js): a pixel (i) beside a figure or a card's title, and what it is, under it */
.hint-of { display: inline-flex; align-items: center; gap: 4px; }
.acct .sk-hero .label.hint-of { display: flex; }
.hint-btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--faint); cursor: pointer; }
.hint-btn::before { content: ""; position: absolute; inset: -11px; } /* a 44 px target for a finger */
.hint-btn:hover, .hint-btn[aria-expanded="true"] { color: var(--green); }
.hint-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.hint-i { font: 500 11px/1 var(--mono); }
.hint-pop { position: fixed; z-index: 60; display: block; box-sizing: border-box; max-width: calc(100vw - 32px); padding: 10px 12px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule); box-shadow: 0 10px 28px var(--shade); font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); text-transform: none; letter-spacing: normal; text-align: left; white-space: normal; }
.hint-pop[hidden] { display: none; }
/* a hint with a name (the Repay step's timeline: account-launchpad.js): its name, then what it means */
.hint-pop .hint-t { display: block; margin-bottom: 2px; font: 600 13.5px/1.35 var(--sans); color: var(--ink); }
/* what needs attention (goapp.js, account-alerts.js): a count on a sidebar tab, a dot on the phone's menu button, and
   the notice at the top of the tab */
.ga-tab > .ga-badge, .ga-tab:hover > .ga-badge, .ga-tab:focus-visible > .ga-badge { margin-left: auto; transform: none; }
.ga-tab > .ga-badge::after, .ga-tab > .ga-badge-t::after { display: none; }
.ga-tab > .ga-badge-t { position: absolute; }
.ga-badge { min-width: 0; height: auto; padding: 0; box-sizing: border-box; border-radius: 0; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; background: none; color: var(--ink); }
.ga-badge::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--green); }
.ga-badge.r { background: none; color: var(--red); }
.ga-badge.r::before { background: var(--red); }
.ga-badge[hidden] { display: none; }
.ga-menu-btn { position: relative; }
.ga-menu-btn.ga-dot::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 0; background: var(--green); box-shadow: 0 0 0 2px var(--card); }
.ga-menu-btn.ga-dot.r::after { background: var(--red); }
@media (prefers-reduced-motion: no-preference) { .ga-badge:not([hidden]), .ga-menu-btn.ga-dot::after { animation: ga-badge-in .4s steps(4) both; } }
@keyframes ga-badge-in { from { opacity: 0; } }
.ga-notice { position: relative; margin: 0 0 14px; padding: 12px 48px 12px 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); border-left: 2px solid var(--green); }
.ga-notice:has(li.r) { border-left-color: var(--red); }
.ga-notice-h { display: block; margin-bottom: 8px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.ga-notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ga-notice-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); }
.ga-notice-list li + li { padding-top: 8px; border-top: 1px solid var(--rule-2); }
.ga-notice-list li.r .ga-notice-t { color: var(--red); }
.ga-notice-t { flex: 1 1 240px; min-width: 0; }
.ga-notice-t b { color: var(--ink); font-weight: 600; }
.ga-notice-list li.r .ga-notice-t b { color: inherit; }
.ga-notice-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 400 22px/1 var(--sans); cursor: pointer; }
/* a close: the kit's 7 x 7 pixel x drawn at 14 px over the "×" text the scripts write (the text stays for no styles) */
:is(.ga-notice-x, .gn-close, .gn-x, .ap-x, .signin-x, .pcw-x) { display: inline-grid; place-items: center; font-size: 0 !important; }
:is(.ga-notice-x, .gn-close, .gn-x, .ap-x, .signin-x, .pcw-x)::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--g-x) center / 14px 14px no-repeat; mask: var(--g-x) center / 14px 14px no-repeat; }
.ga-notice-x:hover { color: var(--ink); background: var(--hover); }
/* the notifications (account-notify.js): a bell at the bottom right with a count, and its panel above it. Clear of the
   page's last buttons (main's foot grows by the bell's height), above a phone's home bar (safe-area), and gone while
   the phone's sidebar is open. The corner's notes (toasts) sit above the bell. */
.gn { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.gn[hidden], body:not(.goapp) .gn, body.ga-drawer .gn { display: none; }
.gn > * { pointer-events: auto; }
body.goapp:has(.gn:not([hidden])) > main { padding-bottom: 112px; }
.gn-bell { order: 2; position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 0; border: 1px solid var(--rule); background: var(--card); color: var(--ink); box-shadow: 0 12px 30px -16px var(--shade); cursor: pointer; }
.gn-bell:hover { border-color: var(--ink); }
.gn-bell:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.gn.on .gn-bell { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gn-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 0; display: grid; place-items: center; font: 500 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; background: var(--green); color: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
.gn-n[hidden] { display: none; }
.gn-bell.r .gn-n { background: var(--red); }
.gn-panel { order: 1; box-sizing: border-box; width: min(400px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); max-height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule); box-shadow: inset 0 1px 0 var(--brass-line), 0 24px 60px -28px var(--shade); color: var(--ink); overflow: hidden; }
.gn-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .gn-panel:not([hidden]) { animation: gn-in .22s var(--ease) both; transform-origin: 100% 100%; } }
@keyframes gn-in { from { opacity: 0; transform: translateY(8px); } }
.gn-head { display: flex; align-items: center; gap: 10px; padding: 14px 10px 12px 18px; border-bottom: 1px solid var(--brass-line); }
.gn-head h2 { margin: 0 auto 0 0; font: 600 16px/1.2 var(--sans); outline: none; }
.gn-head .gn-all { font-size: 13.5px; }
.gn-head .gn-all:disabled { color: var(--faint); cursor: default; text-decoration: none; }
.gn-close { width: 36px; height: 36px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 400 22px/1 var(--sans); cursor: pointer; }
.gn-close:hover, .gn-x:hover { color: var(--ink); background: var(--hover); }
.gn-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; }
.gn-i { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) 36px; gap: 0 10px; padding: 12px 8px 12px 14px; border-top: 1px solid var(--rule-2); }
.gn-i:first-child { border-top: 0; }
.gn-mark { width: 6px; height: 6px; margin-top: 8px; border-radius: 0; background: transparent; }
.gn-i.new .gn-mark { background: var(--green); }
.gn-i.warn .gn-mark { background: var(--brass); }
.gn-i.r { box-shadow: inset 2px 0 0 var(--red); }
.gn-i.r .gn-mark { background: var(--red); }
.gn-t { margin: 0; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.gn-t b { color: var(--ink); font-weight: 600; }
.gn-i.r .gn-t, .gn-i.r .gn-t b { color: var(--red); }
.gn-i.info .gn-t { color: var(--muted); }
.gn-w { display: block; margin-top: 2px; font: 400 12.5px/1.3 var(--sans); color: var(--faint); }
.gn-i.warn .gn-w { color: var(--brass-ink); }
.gn-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gn-s { margin: 6px 0 0; font-size: 13px; }
.gn-s:empty { display: none; }
.gn-x { align-self: start; width: 36px; height: 36px; border: 0; border-radius: 0; background: none; color: var(--faint); font: 400 20px/1 var(--sans); cursor: pointer; }
.gn-x:focus-visible, .gn-close:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
/* the panel sits outside the account page (.acct): its buttons and link as the page draws them */
.gn .btn { border-radius: 0; border-color: var(--ink); }
.gn .btn.sm { padding: 9px 15px; font: 500 13.5px/1 var(--sans); }
.gn .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--ink), inset 0 -5px 0 var(--brass); }
.gn .btn.primary:hover { background: var(--green); border-color: var(--green); box-shadow: inset 0 -4px 0 var(--green), inset 0 -5px 0 var(--brass); }
.gn .btn.primary:disabled { background: transparent; border: 1px dashed var(--field-edge); color: var(--muted); box-shadow: none; }
:root[data-theme="dark"] .gn .btn.primary:not(:disabled) { color: var(--paper); }
.gn .gn-i.r .btn.primary:not(:disabled) { background: var(--red); border-color: var(--red); box-shadow: inset 0 -4px 0 var(--red), inset 0 -5px 0 var(--brass); }
:root[data-theme="dark"] .gn .gn-i.r .btn.primary:not(:disabled) { color: var(--paper); }
.gn .ac-link { padding: 6px 4px; background: none; border: 0; font: 500 13.5px/1 var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.gn .ac-link:not(:disabled):hover { color: var(--ink); text-decoration-color: currentColor; }
.gn-empty { padding: 28px 18px; text-align: center; font: 400 14px/1.4 var(--sans); color: var(--muted); }
@media (max-width: 760px) {
  .gn { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); }
  .gn-bell { width: 48px; height: 48px; border-radius: 0; }
  .gn-panel { max-height: calc(100dvh - 140px); }
  body.goapp:has(.gn:not([hidden])) > main { padding-bottom: 96px; }
}
.sx { margin: 0 0 18px; max-width: 60em; }
.sx-row { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 6px 16px; margin: 0; padding: 10px 0; border-top: 1px solid var(--rule-2); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.sx-head { border-top: 0; font: 600 12.5px/1.2 var(--sans); color: var(--muted); }
.sx-row dt { color: var(--ink); font-weight: 500; } .sx-row dd { margin: 0; }
.sx-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acct .pt-faq .sx-levels { margin: -8px 0 18px; padding-left: 20px; max-width: 46em; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 760px) { .sx-head { display: none; } .sx-row { grid-template-columns: minmax(0, 1fr); } .sx-k { position: static; width: auto; height: auto; clip: auto; font-weight: 600; color: var(--muted); margin-right: 6px; } }
/* on a phone: the Scores totals in one column, its facts in two (.acct .sk-figs holds three: fr's "Remboursements"
   would not fit) */
@media (max-width: 640px) { .acct .sk-figs.sc-tot { grid-template-columns: minmax(0, 1fr); } .acct .sk-figs.ag-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a Help entry a link opens (#ac-faq-score): its question lands under the app's top bar, not behind it */
#ac-faq > details { scroll-margin-top: calc(var(--ga-top, 64px) + 16px); }
/* the stock table stays inside its panel: it scrolls sideways within it on a narrow screen, never past the edge */
#ac-stocks .tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
#ac-stocks .ga-table { width: 100%; min-width: 620px; }
#ac-stocks .ga-table .sk-act { width: 1%; white-space: nowrap; }
#ac-stocks .ga-table .btn.sm { padding: 7px 12px; }
#ac-stocks .ga-table td.num { white-space: nowrap; }
#ac-stocks .sk-tok .sub { display: block; }
.acct .le-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acct .le-earn { background: var(--card) !important; box-shadow: inset 2px 0 0 var(--green); }
.acct .le-earn b { color: var(--green); }
.acct .le-earn .label { color: var(--ink-2); }
.acct .le-earn i { display: block; margin-top: 4px; font: 400 12px/1.35 var(--sans); font-style: normal; color: var(--ink-2); }
@media (max-width: 900px) { .acct .le-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the Stocks tab's tokens: rows that always fit their panel (on a phone: the token, then price, holding and buttons).
   The buttons' column has one width in the header and in every row (each is its own grid), so the columns line up. */
.st-head, .st-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(110px, .8fr) minmax(110px, .8fr) 10.5rem; align-items: center; gap: 12px; }
.st-head { padding: 0 12px 6px; font: 600 11.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.st-head span:nth-child(2), .st-head span:nth-child(3) { text-align: right; }
.st-list { display: grid; gap: 6px; }
.st-row { padding: 10px 12px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.st-row[hidden] { display: none; }
.st-tok { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-tok .nm { display: grid; min-width: 0; }
.st-tok .nm b { font: 600 15px/1.2 var(--sans); }
.st-tok .nm .sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-price, .st-held { display: grid; text-align: right; }
.st-price b, .st-held b { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.st-price .sub, .st-held .sub { font-size: 12px; }
.st-price .sub.r { color: var(--red); }
.st-acts { display: inline-flex; justify-content: flex-end; gap: 6px; }
.st-acts .btn.sm { padding: 7px 12px; }
@media (max-width: 640px) {
  .st-head { display: none; }
  .st-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tok tok" "price held" "acts acts"; row-gap: 8px; }
  .st-tok { grid-area: tok; } .st-price { grid-area: price; text-align: left; } .st-held { grid-area: held; } .st-acts { grid-area: acts; }
  .st-acts .btn.sm { flex: 1; text-align: center; }
}

/* ---- Go app layout: nothing overlaps, clips or runs off at any width (a layout audit, 360 to 1920 px) ---- */
/* the top bar: the title gives way last but can, the house's figures give way first and only whole (a figure that
   does not fit wraps onto a second line the bar hides), and the right-hand cluster never moves */
.ga-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.ga-title:focus { outline: none; } /* focused by script on a tab change (account-page.js), for screen readers */
.ga-stats { flex: 0 100 auto; flex-wrap: wrap; align-content: flex-start; height: 44px; }
.ga-stat { box-sizing: border-box; height: 44px; display: flex; flex-direction: column; justify-content: center; }
.ga-stat[hidden] { display: none; }
.ga-right { flex: none; }
.ga-me-btn { max-width: 220px; min-width: 40px; min-height: 40px; }
.ga-me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-me-menu { max-width: calc(100vw - 24px); }
.ga-me-head b { overflow-wrap: anywhere; }
/* a figure's label and value sit at the top of their cell, however tall a neighbour in the row is */
.acct .sk-figs > div { align-content: start; }
/* All agents: a long name wraps (two lines at most) so the agent's number beside it always shows */
.ex-nm { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ex-nm .sub { white-space: nowrap; }
@media (max-width: 560px) { .ex-row { grid-template-columns: 22px minmax(0, 1fr) 92px; gap: 10px; padding: 10px 12px; } .ex-nm { -webkit-line-clamp: 3; line-clamp: 3; } }
/* the Stocks tab: a token's long name wraps to a second line rather than hiding its LTV */
.st-tok .nm .sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* phones: notes under the top bar stay compact (the newest two), and every control is at least 32 px tall to tap */
@media (max-width: 560px) {
  .ga-toasts { right: 10px; top: calc(var(--ga-top, 64px) + 8px); gap: 6px; width: calc(100vw - 20px); }
  .ga-toast { padding: 9px 12px 11px; gap: 10px; }
  .ga-toast:nth-child(n+3) { display: none; }
  .ga-toast-logo img { width: 28px; height: 28px; }
}
@media (max-width: 860px) {
  .acct .ac-link { display: inline-flex; align-items: center; min-height: 32px; }
  .acct .ac-me .ac-addr { align-items: center; row-gap: 0; }
  .acct .ac-name { align-items: center; row-gap: 0; }
  .addr-tog::after { content: ""; position: absolute; inset: -8px -4px; } /* a bigger tap area, the same small pill */
  .ag-switch button { padding: 11px 16px; }
  .ag-chip { padding: 9px 12px; }
  .st-acts .btn.sm { padding: 9px 12px; }
  .st-own summary { padding: 8px 0; }
}

/* ---- Home, the control tower: the featured stocks, savings on Morpho, the pool, the latest of History ---- */
.hm-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin: 18px 0 8px; }
.hm-grid[hidden] { display: none; }
.hm-card { min-width: 0; padding: 16px 18px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 10px; }
.hm-card > header { display: flex; align-items: baseline; gap: 8px; }
.hm-card > header h3 { margin: 0; font: 600 15px/1.2 var(--sans); color: var(--ink); }
.hm-card > header .sub { font: 500 10.5px/1 var(--mono); color: var(--brass-ink); letter-spacing: .2em; text-transform: uppercase; }
.hm-card > header .k { margin-left: auto; font-size: 13px; }
.hm-stocks { grid-row: span 2; }
.hm-list { display: flex; flex-direction: column; }
.hm-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 76px; align-items: center; gap: 12px; padding: 9px 6px; margin: 0 -6px; border-radius: 0; color: var(--ink); text-decoration: none; transition: background .15s steps(2); }
.hm-row + .hm-row { border-top: 1px solid var(--rule-2); }
.hm-row:hover { background: var(--hover); }
.hm-row .sk-logo { width: 30px; height: 30px; }
.hm-nm { display: flex; flex-direction: column; min-width: 0; }
.hm-nm b { font: 600 14px/1.2 var(--sans); }
.hm-nm .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-px { font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hm-ch { justify-self: end; font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; padding: 0; border-radius: 0; background: none; color: var(--muted); white-space: nowrap; }
.hm-ch.up { color: var(--green); background: none; }
.hm-ch.down { color: var(--red); background: none; }
.hm-ch.na { background: none; }
.hm-row:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.hm-big { display: flex; align-items: baseline; gap: 10px; }
.hm-big b { font: 400 40px/1 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; }
.hm-big b.na { font-size: 22px; color: var(--muted); }
.hm-big span { font: 500 13px/1 var(--sans); color: var(--muted); }
.hm-save .sub { margin: 0; font-size: 12.5px; color: var(--muted); }
.hm-save .btn { align-self: flex-start; }
.hm-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px 14px; margin: 0; }
.hm-dl dt { font: 500 11px/1.3 var(--mono); letter-spacing: .02em; color: var(--brass-ink); } /* a term in brass mono; sentence case: the rigs read these words with innerText */
.hm-dl dd { margin: 3px 0 0; font: 500 15px/1.15 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-pool .hm-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-recent { grid-column: 1 / -1; }
.hm-feed { list-style: none; margin: 0; padding: 0; }
.hm-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; }
.hm-ev + .hm-ev { border-top: 1px solid var(--rule-2); }
.hm-ev-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-2); }
.hm-ev.repaid .hm-ev-ico, .hm-ev.back .hm-ev-ico { color: var(--green); }
.hm-ev.defaulted .hm-ev-ico { color: var(--red); }
.hm-ev-what { font: 500 14px/1.3 var(--sans); min-width: 0; }
.hm-ev-amt { font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-ev-amt.in { color: var(--green); }
.hm-ev-when, .hm-ev-when a { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) {
  .hm-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-stocks { grid-row: auto; }
}
@media (max-width: 560px) {
  .hm-row { grid-template-columns: 28px minmax(0, 1fr) auto 64px; gap: 10px; }
  .hm-pool .hm-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-ev { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .hm-ev-when { grid-column: 2 / -1; }
}

/* [pt] account-pt.js's cards: Home's short card across the grid, and its section on the Backing tab. Each [pt] block,
   up to its closing marker, is left out of a build without SITE_PT=on (scripts/build-site.mjs), as account-pt.js is. */
.hm-pt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px 22px; }
.hm-pt > header { grid-column: 1 / -1; }
.hm-pt > .sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.hm-pt .hm-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-pt > .btn { justify-self: end; }
/* its figures wrap rather than run into the next (the kit's mono figures: "$970.77 of $1,000" is wider than a third of the
   row), and the card stacks below 1180 px, where three figures beside the words and the button would not fit */
.hm-pt .hm-dl dd { white-space: normal; }
@media (max-width: 1180px) { .hm-pt { grid-template-columns: minmax(0, 1fr); } .hm-pt > .btn { justify-self: start; } }
@media (max-width: 560px) { .hm-pt .hm-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* [/pt] */
/* a protocol's own mark beside the feature that uses it (web/brand-logos/: Morpho on Savings), as identification only:
   the official file on a round tile, as a stock logo sits (.sk-logo; the colour mark on the dark tile, .dk), at --s */
.sk-logo.pl-logo { width: var(--s, 34px); height: var(--s, 34px); align-self: center; }
.sk-logo.pl-logo img { padding: calc(var(--s, 34px) * .14); }
.sk-logo.dk.pl-logo img { padding: 0; } /* the mark's file has its own margin round the mark */
.sk-logo.pl-logo::before { content: none; }
.panel > header .pl-logo { align-self: center; margin-right: -4px; }
.hm-card > header .pl-logo { align-self: center; margin: -4px -2px -4px 0; }
/* the Backing tab's sections (account.html #ac-stocks): Your lines, then any other token's section, then Stock tokens */
.acct .bk-sec { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule-2); }
.acct .bk-h { margin: 0 0 4px; font: 400 24px/1.15 var(--serif); color: var(--ink); }
.acct .bk-lead { margin: 0 0 10px; font: 400 14px/1.45 var(--sans); color: var(--muted); }
/* [pt] account-pt.js's section on the Backing tab */
.ptu-card { display: grid; gap: 10px; margin: 10px 0 6px; padding: 16px 18px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
.ptu-card > header { display: flex; align-items: center; gap: 12px; }
.ptu-card > header h3 { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--ink); }
.ptu-card > header .sub { font: 500 14px/1.3 var(--sans); color: var(--ink-2); }
.ptu-card > p { margin: 0; max-width: 62em; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.ptu-card .ptu-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 2px; }
.ptu-card .ptu-bar { height: 5px; margin-top: 7px; max-width: 160px; }
.ptu-card > .row { margin: 0; gap: 8px; }
.ptu-tag { display: inline-block; margin-left: 8px; padding: 0; border-radius: 0; vertical-align: middle; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink, var(--ink-2)); background: none; border: 0; }
.hm-card > header .ptu-tag { margin-left: 2px; }
.ptu-tag, .hm-pt > header h3 { white-space: nowrap; }
.hm-pt > header { flex-wrap: wrap; row-gap: 6px; }
.ptu-card > .ptu-why { margin: 0; font-size: 13px; color: var(--muted); }
.ptu-card > .row { align-items: center; flex-wrap: wrap; }
.ptu-card .ptu-dl.ptu-dl2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.ptu-mk { margin-left: 6px; font: 500 13px/1.3 var(--sans); color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.ptu-mk:hover { color: var(--ink); }
/* the trade panel (account-pt.js trade): buy or sell, an amount, the quote, one button */
.ptu-trade:empty { display: none; }
.ptu-tr { display: grid; gap: 10px; max-width: 520px; padding: 14px 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
.ptu-trh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ptu-trt { font: 600 15px/1.2 var(--sans); color: var(--ink); }
.ptu-seg { display: inline-flex; gap: 0; padding: 0; border-radius: 0; background: var(--card); border: 1px solid var(--rule); }
.ptu-seg[hidden] { display: none; }
.ptu-seg button { min-width: 64px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; font: 500 12px/1 var(--mono); letter-spacing: .02em; color: var(--ink-2); cursor: pointer; } /* sentence case: e2e-pt-trade reads Buy|Sell */
.ptu-seg button + button { border-left: 1px solid var(--rule); }
.ptu-seg button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ptu-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.ptu-amt { display: flex; align-items: center; gap: 8px; min-width: 0; }
html[data-go-page] .ptu-amt > input ~ .btn.sm { align-self: stretch; }
@media (max-width: 640px) { .ptu-card .ptu-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (pointer: coarse) { html[data-go-page] .ptu-seg button { min-height: 44px; } }
.acct .ptu-amt .ptu-in { flex: 1 1 auto; min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
.ptu-u { font: 600 13px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.ptu-tr > .ptu-bal { margin: -2px 0 0; font-size: 13px; color: var(--muted); }
.ptu-tr > .wstat { padding: 0; }
.ptu-tr > .wstat:empty { display: none; }
.ptu-tr > .row { margin: 2px 0 0; }
.ptu-tr .ptu-go { min-width: 160px; }
@media (max-width: 560px) { .ptu-tr { padding: 12px; } .ptu-tr .ptu-go { width: 100%; } }
/* Go mode's Pendle tab (account.html #ac-pendle: its header, its lines, the card above; the deposit sheet while it is for
   PT-USDG), in the design kit (docs/DESIGN-KIT.md 0 and 2): corners 0 on the panel, the card, the trade panel, rows,
   fields and buttons; brass as hardware (a 1 px hairline, the four corner ticks 5 px off a button on hover); the primary
   ink with a brass hairline along its foot; the tab's own pixel mark by its name; the status marks for the deposit's
   state, the mark then the word, no capsule; no pill anywhere */
.acct .panel.pd {
  --ticks:
    linear-gradient(var(--brass) 0 0) left top / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) left top / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) right top / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) right top / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) left bottom / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) left bottom / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) right bottom / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) right bottom / 1.25px 8px no-repeat;
  --brass-line: rgba(148, 118, 58, .55);
  border-radius: 0;
}
body.goapp .acct .panel.pd { border-radius: 0; box-shadow: none; }
:root[data-theme="dark"] .acct .panel.pd { --brass-line: rgba(209, 174, 104, .5); }
.acct .panel.pd > header.pd-head { align-items: center; border-bottom: 1px solid var(--brass-line); padding-bottom: 14px; margin-bottom: 4px; }
.acct .panel.pd > header.pd-head h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.acct .panel.pd > header.pd-head .sub { flex-basis: 100%; max-width: 62em; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.pd .pd-mk { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--brass-ink, var(--brass)); border: 1px solid var(--brass-line); }
.pd .pd-mk .px-ico { display: block; }
.pd .pd-lines .ga-row, .pd .ptu-card, .pd .ptu-tr, .pd .ga-sheet, .pd .ptu-tag { border-radius: 0; }
.acct .pd input:not([type="radio"]):not([type="checkbox"]), .acct .pd select { border-radius: 0; }
.acct .pd input:not([type="radio"]):not([type="checkbox"]):focus, .acct .pd select:focus { box-shadow: none; outline: 2px solid var(--green); outline-offset: 1px; }
.pd .pd-lines { margin: 4px 0 6px; }
/* the card right under the header (no second rule above it) */
.acct .pd > .bk-sec { margin-top: 14px; padding-top: 0; border-top: 0; }
.pd .ptu-card { border-color: var(--card-edge); }
.pd .ptu-card > .bk-h, .pd .bk-h { display: flex; align-items: center; gap: 8px; }
.pd .ptu-tag { padding: 3px 7px; background: none; border: 1px solid var(--brass-line); color: var(--brass-ink, var(--ink-2)); font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
/* (Buy | Sell is the kit's segmented control, .ptu-seg above: one hairline box, the chosen boxed in ink, never filled) */
/* buttons: square, the kit's ticks on hover (not on one at work: its spinner is the ::after then), the primary's brass foot */
.acct .pd .btn { border-radius: 0; position: relative; }
.acct .pd .btn:not(.busy)::after { content: ""; position: absolute; inset: -5px; pointer-events: none; background: var(--ticks); opacity: 0; transition: opacity .15s; }
.acct .pd .btn:not(.busy):not(:disabled):hover::after { opacity: 1; }
.acct .pd .btn.primary:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--ink), inset 0 -5px 0 var(--brass); }
.acct .pd .btn.primary:not(:disabled):hover { background: var(--green); border-color: var(--green); box-shadow: inset 0 -4px 0 var(--green), inset 0 -5px 0 var(--brass); }
:root[data-theme="dark"] .acct .pd .btn.primary:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.acct .pd .btn:focus-visible, .pd .ptu-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .acct .pd .btn::after { transition: none; } }
/* the deposit's state: the kit's sapling (takes new lines now) or sprout (new lines from a date), then the word */
.pd .pd-st { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 12px/1.3 var(--mono); color: var(--ink-2); }
.pd .pd-st.live { color: var(--green); }
.pd .pm { flex: none; display: inline-block; shape-rendering: crispEdges; }
.pd .pm .l { fill: var(--green); } .pd .pm .t { fill: var(--red); } .pd .pm .p { fill: var(--brass); }
/* Stocks' note where the account's PT-USDG lines went */
.acct .as-pt-note { margin: 6px 0 0; font-size: 13.5px; }
/* [/pt] */

/* the account's own address copies itself when clicked (addr.js .addr-copy): a pointer, a dotted underline on hover,
   and "Copied" over it for a moment */
.addr-copy[data-addr] { position: relative; cursor: copy; border-radius: 0; text-decoration: underline dotted transparent; text-underline-offset: 3px; transition: text-decoration-color .15s steps(2), color .15s steps(2); }
.addr-copy[data-addr]:hover, .addr-copy[data-addr]:focus-visible { color: var(--ink); text-decoration-color: currentColor; outline: none; }
.addr-copy.copied::after { content: "Copied"; position: absolute; left: 50%; top: calc(100% + 6px); z-index: 5; transform: translateX(-50%); padding: 4px 8px; border-radius: 0; background: var(--ink); color: var(--paper, #fff); font: 600 11px/1 var(--sans); white-space: nowrap; pointer-events: none; animation: addr-copied .18s steps(3) both; }
@keyframes addr-copied { from { opacity: 0; transform: translate(-50%, -3px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Savings: the figures share the row evenly, whichever show (no empty column when Available to withdraw is hidden), and
   Morpho's net APY sits beside the balances in a soft green card, labelled as Morpho's and variable */
.acct .as-figs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.acct .as-figs > .as-apy { background: var(--card); box-shadow: inset 2px 0 0 var(--green); }
.as-apy .label { display: inline-flex; align-items: center; gap: 7px; }
.as-apy .label::before { content: ""; width: 6px; height: 6px; border-radius: 0; background: var(--green); }
.as-apy b { color: var(--green); }
.as-apy b.na { font-size: 15px; color: var(--muted); }
.as-apy .sub { font-size: 11.5px; color: var(--muted); }
@media (max-width: 760px) { .acct .as-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct #as-ready-box[hidden] ~ .as-apy { grid-column: 1 / -1; } }
/* a part of a tab opened from the account menu (#ac-2fa): a short glow where the eye should land */
.ac-flash { animation: ac-flash 1.6s var(--ease, ease) both; border-radius: 0; }
@keyframes ac-flash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--green); } 100% { box-shadow: inset 0 0 0 2px transparent; } } /* a 2 px green edge, once (no glow) */
@media (prefers-reduced-motion: reduce) { .ac-flash { animation: none; box-shadow: inset 0 0 0 2px var(--green); } } /* still: the edge, no glow that fades */
/* a Help entry's question brought in (#ac-faq-score): a tint spread past its text, which has no side padding, instead of a
   ring; the focus ring, when it shows, sits inside the tint */
.pt-faq summary.ac-flash { animation: ac-flash-q 1.6s var(--ease, ease) both; border-radius: 0; }
@keyframes ac-flash-q { 0%, 30% { background: var(--hover); box-shadow: 0 0 0 10px var(--hover), inset 2px 0 0 var(--green); } 100% { background: transparent; box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .pt-faq summary.ac-flash { animation: none; background: var(--hover); box-shadow: 0 0 0 10px var(--hover); } }

/* All agents: the right-hand column, short (what is out, with a dot) */
.ex-on { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); }
.ex-on i { width: 6px; height: 6px; border-radius: 0; background: currentColor; }
/* Activity: one line a row (dot, what, amount, when), a short name */
.ex-ev { grid-template-columns: 10px minmax(0, 1fr) auto auto; grid-template-areas: "dot what amt when"; align-items: center; gap: 0 10px; padding: 9px 0; }
.ex-ev .ex-dot { margin-top: 0; }
.ex-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-when { white-space: nowrap; font-size: 11.5px; }

/* New agent, signed in: the create form and the USDG step wait for the account's agents to be read (start.js) */
body.st-checking #st-go-row, body.st-checking #st-3 .st-own, body.st-checking #st-steps, body.st-checking #st-have, body.st-checking #st-2 { display: none !important; }
body.st-checking #st-3-s:empty::before { content: attr(data-wait); color: var(--muted); }

/* ---- The agent panel (web/account-agent.js): an agent's record over the tab, and what the account can do with it. A
   drawer on the right on a computer, the whole screen on a phone. Above the sidebar (40) and a phone's dimmed page (35),
   below the notes in the corner (60) and the two-step code window (1000). Closed, it is hidden: nothing off screen. ---- */
.ap { position: fixed; inset: 0; z-index: 50; }
.ap-back { position: absolute; inset: 0; background: var(--scrim); animation: ap-fade .2s var(--ease) both; }
.ap-card { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--grain), var(--card); border-left: 1px solid var(--rule); box-shadow: -24px 0 48px -24px var(--shade); color: var(--ink); animation: ap-in .26s var(--ease) both; }
.ap-card:focus, .ap-t:focus { outline: none; }
.ap-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: var(--ga-top, 64px); padding: 0 14px 0 24px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--brass-line); }
.ap-tt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15px/1.2 var(--sans); color: var(--ink); opacity: 0; transition: opacity .15s var(--ease); }
.ap-tt .ac-id { font: 500 12.5px var(--mono); color: var(--muted); }
.ap-top.titled .ap-tt { opacity: 1; }
.ap-kind { margin: 0 0 6px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.ap-kind:empty { display: none; }
.ap-wait { color: var(--muted); } /* a name not read yet: "Agent", "Agent #490", faint until the record names it */
.ap-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink-2); font: 400 22px/1 var(--sans); cursor: pointer; }
.ap-x:hover { color: var(--ink); border-color: var(--ink); }
.ap-body { padding: 20px 24px 28px; }
.ap-t { margin: 0; font: 500 34px/1.08 var(--serif); letter-spacing: -.3px; overflow-wrap: anywhere; }
.ap-t .ac-id { font: 500 15px var(--mono); letter-spacing: 0; color: var(--muted); }
.ap-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.ap-sub .ac-pill { margin: 0; }
.ap-you { display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; border: 0; color: var(--green); font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.ap-you::before { content: ""; flex: none; width: 6px; height: 6px; background: currentColor; }
.ap-own { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-own .label { font-size: 12.5px; }
.ap-uri { overflow-wrap: anywhere; }
.ap-sub > .ap-uri { flex-basis: 100%; } /* the card URI: always on a line of its own */
.ap-sub .btn { margin-left: 2px; }
/* what the account can do: one row each, its name and a line on it; one leads; one that can't be done says why */
.ap-acts { display: grid; gap: 8px; margin: 22px 0 4px; }
.ap-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 14px; width: 100%; padding: 13px 16px; border: 1px solid var(--rule-2); border-radius: 0; background: var(--grain), var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s steps(2), box-shadow .15s steps(2); }
.ap-act b { font: 600 15.5px/1.2 var(--sans); }
.ap-act .sub { grid-column: 1; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.ap-act .sub .r { color: var(--red); }
.ap-act i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; align-self: center; font-size: 0; width: 14px; height: 14px; background: var(--green); -webkit-mask: var(--g-arrow) center / 14px 14px no-repeat; mask: var(--g-arrow) center / 14px 14px no-repeat; }
.ap-act:hover:not([aria-disabled="true"]), .ap-act:focus-visible { border-color: var(--brass-line); box-shadow: none; }
.ap-act.lead { border-color: var(--rule); box-shadow: inset 2px 0 0 var(--green); }
.ap-act[aria-disabled="true"] { cursor: default; background: transparent; border: 1px dashed var(--field-edge); }
.ap-act[aria-disabled="true"] b { color: var(--muted); font-weight: 500; }
.ap-act[aria-disabled="true"] .sub { color: var(--ink-2); }
.ap-act[aria-disabled="true"] i { visibility: hidden; }
.ap-fail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font: 400 13.5px/1.4 var(--sans); }
.ap-fail .r, .ap-sub .r { color: var(--red); }
/* its figures: two to a row, public ones never blurred (only the account's own agent's, with Hide balances) */
.ap-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0 0; border: 1px solid var(--rule-2); border-radius: 0; overflow: hidden; background: var(--rule-2); }
.ap-figs > div { min-width: 0; padding: 12px 14px 13px; background: var(--card); }
.ap-figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ap-figs dt { font: 500 11px/1.3 var(--mono); letter-spacing: .02em; color: var(--brass-ink); } /* a term in brass mono; sentence case: the rigs read these words with innerText */
.ap-figs dd { margin: 5px 0 0; font: 400 24px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.ap-figs dd .sub { margin-left: 5px; font: 500 12px var(--sans); color: var(--muted); }
.ap-figs dd.ap-name { font: 500 16px/1.35 var(--sans); }
.ap-body .sc-bars { margin-top: 10px; }
.ap-body .sc-bar { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; }
.ap-feed { margin-top: 4px; }
.ap-feed .ap-self { font-weight: 400; color: var(--muted); }
.ap-feed .ex-what .ap-v1 { margin-left: 6px; font: 500 11.5px var(--sans); }
/* the agent's links (Open public page, View on explorer, Share) at the top of the panel, above its kind and name */
.ap-foot { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--card-edge); }
.ap-foot:empty { display: none; }
/* a phone: the foot's buttons two to a line, each half of it (the third the next line's width), never one alone at the
   start of a line */
@media (max-width: 640px) { .ap-foot > .btn { flex: 1 1 calc(50% - 4px); } }
/* Copy badge in the foot (account-agent.js): its confirmation beside it, and the Markdown below, shown only when the
   browser refused the clipboard */
.ap-badge-s { align-self: center; font-size: 13px; color: var(--muted); }
.ap-badge-s:empty { display: none; }
.ap-badge-md { flex: 1 1 100%; min-width: 0; padding: 8px 10px; font: 12px/1.5 var(--mono); color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); }
/* [share] the agent panel's share sheet (SITE_SHARE_CARD: account-agent.js shsheet), built like the X link's sheet
   (whose styles ship only with SITE_XLINK, so these are its own), under the foot whose Share opened it: Close
   in its head, the card in the panel's rounded shapes, the actions as on the public page (the main one on its own line,
   the others two to a line), the status line under them, the badge under its own label, Copy badge the size of the
   sheet's buttons */
#ap-shs:not([hidden]) { margin: 14px 0 4px; scroll-margin-top: calc(var(--ga-top, 64px) + 12px); }
.ap-foot [data-go="share"][aria-expanded="true"] { background: var(--paper); border-color: var(--green); color: var(--green); box-shadow: inset 0 0 0 1px var(--green); } /* its sheet is open */
.sh-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 18px 16px; border: 1px solid var(--rule); border-radius: 0; background: var(--grain), var(--card); box-shadow: inset 0 1px 0 var(--brass-line); }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-head h3 { margin: 0; font: 500 22px/1.15 var(--serif); }
.sh-head h3:focus { outline: none; }
.sh-head .btn { flex: none; }
.sh-sheet .sh-prev { margin: 0; border-color: var(--card-edge); border-radius: 0; }
.sh-sheet .sh-replay { border-radius: 0; }
.sh-sheet .sh-acts { padding: 0; }
.acct .sh-sheet .sh-acts > .btn { gap: 8px; }
.sh-sheet .sh-s { margin: 0; padding: 0; min-height: 0; font-size: 13.5px; }
.sh-sheet .sh-badge { margin: 0; padding-top: 14px; border-top: 1px solid var(--card-edge); }
.sh-sheet .sh-k { display: block; padding: 0; margin-bottom: 8px; }
.sh-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.acct .sh-badge-row > .btn.sm { padding: 13px 22px; font: 500 15px/1 var(--sans); }
@media (max-width: 700px) { .sh-sheet { padding: 16px 14px 14px; } .sh-head h3 { font-size: 20px; } }
/* [/share] */
/* an agent's name anywhere in the app: a link to its panel */
.ap-link { color: inherit; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; cursor: pointer; }
.ap-link:hover, .ap-link:focus-visible { color: var(--green); text-decoration-color: currentColor; }
.ga-row .ap-link .sub { display: inline; } /* a row's agent: its name and number on one line */
#ag-cards > article[data-agent] { scroll-margin-top: calc(var(--ga-top, 64px) + 16px); }
@keyframes ap-in { from { transform: translateX(32px); opacity: 0; } }
@keyframes ap-up { from { transform: translateY(28px); opacity: 0; } }
@keyframes ap-fade { from { opacity: 0; } }
@media (max-width: 860px) {
  .ap-card { width: 100%; border-left: 0; box-shadow: none; animation-name: ap-up; }
  .ap-top { min-height: 56px; padding: 0 10px 0 16px; }
  .ap-body { padding: 16px 16px 32px; }
  .ap-t { font-size: 30px; }
  .ap-link { position: relative; }
  .ap-link::after { content: ""; position: absolute; inset: -8px -2px; } /* a bigger tap area, the same text */
  .ap-feed a.ex-when { display: inline-block; padding: 9px 0; margin: -9px 0; } /* a transaction's time: a 33px tap */
}
@media (max-width: 640px) { .ap-body .sc-bar { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { .ap-back, .ap-card { animation: none; } .ap-act, .ap-tt { transition: none; } }

/* ---- Buy $PRIORS (web/account-buy.js): the account's USDG swapped for $PRIORS, in the agent panel's frame (.ap). Opened
   from Home's $PRIORS figure (#ac-priors-get) and the Seats tab (#se-buy-usdg). ---- */
html.pb-lock, html.pb-lock body { overflow: hidden; }
.ac-fig-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ac-fig-btn:hover { color: var(--ink); }
.pb .pb-lead { margin: 10px 0 0; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.pb .pb-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 6px; }
.pb .pb-figs > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 0; background: var(--card); min-width: 0; }
.pb .pb-figs b { font: 600 17px/1.2 var(--sans); overflow-wrap: anywhere; }
.pb .pb-form { display: grid; gap: 8px; margin-top: 16px; }
.pb .pb-form .row { display: flex; gap: 8px; flex-wrap: nowrap; }
.pb .pb-form input { flex: 1 1 auto; min-width: 0; }
.pb .pb-quote { min-height: 24px; }
.pb .pb-q { margin: 6px 0 0; font: 500 15px/1.45 var(--sans); color: var(--ink); }
.pb .pb-why { margin: 6px 0 0; font: 400 14px/1.45 var(--sans); color: var(--red); }
.pb .pb-notes { margin: 6px 0 4px; padding-left: 18px; display: grid; gap: 4px; font: 400 13.5px/1.45 var(--sans); color: var(--muted); }
.pb .pb-acts { flex-wrap: wrap; margin-top: 8px; }
/* /borrow: the landing's hero, account strip and chapters (.hero, .account, .chapter), a mosaic of the accepted tokens
   in place of the bonsai (web/borrow.js fills it), and the narrower blocks that sit in the chapter's text column */
.bw-hero h1 { font-size: clamp(44px, 5.6vw, 76px); }
.bw-signin { margin-top: 14px; font-size: 14px; color: var(--muted); }
.bw-art { margin: 0; align-self: end; min-width: 0; }
.bw-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule-2); }
.bw-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 96px; padding: 14px 4px 12px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.bw-tile.empty { background: var(--paper-2); }
.bw-tile .sk-logo { width: 34px; height: 34px; margin-bottom: 4px; }
.bw-tile b { font: 500 13px/1.2 var(--sans); color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bw-tile > span:last-child { font: 400 12px/1.2 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.bw-tile.hold { opacity: .5; }
.bw-art figcaption { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; align-items: baseline; padding-top: 12px; font: italic 400 16px/1.4 var(--serif); color: var(--muted); }
.bw-art figcaption b { font: normal 500 14px/1.4 var(--sans); color: var(--green); white-space: nowrap; }
.bw .chapter.bw-tight { padding-top: 0; }
.bw .account .v { font-size: clamp(34px, 3.6vw, 50px); }
.bw-col { margin-left: 344px; min-width: 0; }
.bw-meta { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 65ch; }
.bw-meta a { text-decoration: underline; text-underline-offset: 3px; }
.bw-risks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.bw-risk { padding: 26px 32px 28px 0; border-bottom: 1px solid var(--rule); }
.bw-risk:nth-child(even) { padding: 26px 0 28px 32px; border-left: 1px solid var(--rule); }
.bw-risk h3 { font: 500 23px/1.2 var(--serif); margin: 0 0 8px; }
.bw-risk p { color: var(--ink-2); max-width: 38em; }
.bw-risk a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bw-end { margin-top: 36px; gap: 18px 22px; }
.bw-end .bw-signin { margin: 0; }
#bw-table td:first-child { white-space: nowrap; }
#bw-table .bw-logo { display: inline-grid; width: 26px; height: 26px; vertical-align: middle; margin-right: 10px; }
#bw-table .bw-logo::before { font-size: 10px; }
#bw-table .bw-logo img { padding: 3px; }
@media (max-width: 1000px) {
  .bw-col { margin-left: 0; }
  .bw .chapter.bw-tight { padding-top: 0; }
}
@media (max-width: 900px) {
  .bw-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bw-tile { min-height: 78px; padding: 10px 2px 9px; gap: 2px; }
  .bw-tile .sk-logo { width: 28px; height: 28px; }
  .bw-tile b { font-size: 11.5px; }
  .bw-tile > span:last-child { font-size: 10.5px; }
  .bw-risks { grid-template-columns: minmax(0, 1fr); }
  .bw-risk, .bw-risk:nth-child(even) { padding: 22px 0; border-left: 0; }
  .bw-cost table { min-width: 0; }
  .bw-cost th, .bw-cost td { white-space: normal; }
}

/* [chat] Builder mode's chat page (chat.html, chat.js): only with SITE_CHAT=on (scripts/build-site.mjs) */
/* ------------------------------------------------------------------ Builder mode's chat page (chat.html, chat.js) */
.chat .ch-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 22px 0 30px; }
.chat .ch-setup .panel > *:not(header) { margin-top: 12px; }
.chat .ch-pick { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.chat .ch-pick label { display: inline-flex; align-items: baseline; gap: 7px; font: 500 15px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.chat .ch-pick .sub { font-size: 13px; }
.chat .ch-keyrow input { flex: 1 1 240px; min-width: 0; padding: 10px 12px; font: 13px var(--mono); }
.chat .ch-modelrow label { font-size: 14px; color: var(--muted); }
.chat .ch-modelrow select { flex: 1 1 220px; min-width: 0; padding: 9px 10px; font: 13px var(--mono); }
.chat .ch-note { font-size: 13.5px; }
.chat .ch-wallet .btn.on { font-family: var(--mono); }
.chat .ch-log { list-style: none; margin: 0; padding: 14px 0; display: grid; gap: 10px; min-height: 140px; }
.chat .ch-m { max-width: 46em; padding: 10px 14px; border-radius: 0; font: 400 15px/1.55 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat .ch-user { justify-self: end; background: var(--ink); color: var(--paper); }
.chat .ch-bot { justify-self: start; background: var(--card); border: 1px solid var(--card-edge); color: var(--ink); }
.chat .ch-tool { justify-self: start; padding: 2px 4px; font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.chat .ch-err { justify-self: start; color: var(--red); border: 1px solid var(--red); }
.chat .ch-card { justify-self: start; max-width: 34em; display: grid; gap: 8px; padding: 16px 18px; border-radius: 0; border: 1.5px solid var(--green); background: var(--card); }
.chat .ch-card b { font: 500 20px/1.25 var(--serif); color: var(--ink); }
.chat .ch-card ul { margin: 0; padding-left: 1.1em; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.chat .ch-card .wstat { padding: 0; }
.chat .ch-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 12px; }
.chat .ch-input { display: flex; gap: 10px; align-items: flex-end; padding-bottom: 8px; }
.chat .ch-input textarea { flex: 1 1 auto; min-width: 0; padding: 12px 14px; font: 15px/1.45 var(--sans); resize: vertical; }
@media (max-width: 760px) {
  .chat .ch-setup { grid-template-columns: minmax(0, 1fr); }
  .chat .ch-input { flex-direction: column; align-items: stretch; }
}
/* [/chat] */

/* ------------------------------------------------------------------ Go mode Seats tab (account-seats.js) */
.acct .se-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 10px; margin: 6px 0 12px; }
.acct .se-big { display: grid; align-content: center; gap: 6px; padding: 20px 22px; border-radius: 0; background: var(--grain), var(--card); box-shadow: inset 0 0 0 1px var(--rule-2), inset 2px 0 0 var(--green); }
.acct .se-big b { font: 500 38px/1.05 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--green); overflow-wrap: anywhere; }
.acct .se-big .sub { font-size: 13px; }
.acct .se-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.acct .se-figs > div { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.acct .se-figs b { font: 500 22px/1.15 var(--serif); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.acct .se-figs .sub { font-size: 12.5px; line-height: 1.4; }
.acct .se-you { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px 18px; align-items: center; margin: 4px 0 8px; padding: 14px 16px; border-radius: 0; border: 1px solid var(--card-edge); background: var(--card); }
.acct .se-you > div:not(.se-you-act) { display: grid; gap: 4px; }
.acct .se-you b { font: 600 16px/1.2 var(--sans); }
.acct .se-you-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.acct .se-need { margin: 0 0 8px; padding: 10px 14px; border-radius: 0; background: var(--card); box-shadow: inset 2px 0 0 var(--brass); color: var(--ink-2); font: 400 13.5px/1.45 var(--sans); }
.acct .se-chips { margin: 0 0 10px; }
.acct .se-chips .ag-chip i { font-style: normal; opacity: .7; margin-left: 2px; }
.acct .se-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; margin: 6px 0 10px; }
.acct .se-cards > .ga-empty { grid-column: 1 / -1; }
.acct .se-card { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); transition: border-color .15s, box-shadow .15s; }
.acct .se-card.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.acct .se-c-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.acct .se-c-name { font: 600 16px/1.25 var(--sans); min-width: 0; overflow-wrap: anywhere; }
.acct .se-c-name .sub { display: inline; font-weight: 400; }
/* a seat's state: the kit's 6 px square and the word in mono, no capsule, no tint */
.acct .se-st { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); letter-spacing: 0; padding: 0; border-radius: 0; white-space: nowrap; background: none; color: var(--muted); }
.acct .se-st::before { content: ""; flex: none; width: 6px; height: 6px; background: currentColor; }
.acct .se-st-open { background: none; color: var(--green); }
.acct .se-st-yours { background: none; color: var(--brass-ink); }
.acct .se-st-warn { background: none; color: var(--red); }
.acct .se-c-fee { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; padding: 10px 12px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.acct .se-c-fee b { font: 500 21px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--green); }
.acct .se-c-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0; }
.acct .se-c-stats > div { min-width: 0; }
.acct .se-c-stats dt { font-size: 12px; color: var(--muted); }
.acct .se-c-stats dd { margin: 2px 0 0; font: 600 14.5px/1.25 var(--sans); overflow-wrap: anywhere; }
.acct .se-c-stats .warn dd { color: var(--brass); }
.acct .se-c-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.acct .se-c-why { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); text-align: right; }
.acct .se-confirm { display: grid; gap: 10px; padding: 14px; border-radius: 0; background: var(--card); border: 1px solid var(--rule); border-left: 2px solid var(--green); }
.acct .se-confirm .se-c-head { font: 400 15px/1.45 var(--sans); color: var(--ink); }
.acct .se-confirm ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.acct .se-confirm .se-c-risk { color: var(--red); }
.acct .se-confirm .sub { font-size: 12.5px; }
.acct .se-confirm .row { display: flex; flex-wrap: wrap; gap: 8px; }
/* backing a seat from USDG (account-seats.js usdgHtml): the pool's quote, and the panel under an own agent's row */
.acct .se-confirm .se-uq { margin: 0; font: 500 14.5px/1.45 var(--sans); color: var(--ink); }
.acct .se-confirm.se-usdg .se-c-why { text-align: left; margin: 0; color: var(--red); }
.acct #se-mine .se-confirm { margin: 4px 0 12px; }
.acct .se-more { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.acct .se-more .sub { font-size: 13px; }
@media (max-width: 900px) { .acct .se-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .acct .se-figs { grid-template-columns: minmax(0, 1fr); }
  .acct .se-figs > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .acct .se-figs > div .sub { grid-column: 1 / -1; }
  .acct .se-figs > div .label { grid-row: 1; }
  .acct .se-big b { font-size: 32px; }
  .acct .se-you { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; gap: 10px; }
  .acct .se-you b { font-size: 14px; }
  .acct .se-you-act { grid-column: 1 / -1; justify-content: stretch; }
  .acct .se-you-act .btn { flex: 1 1 0; }
  .acct .se-c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct .se-c-acts .btn { flex: 1 1 0; }
  .acct .se-tools .ga-search { max-width: none; flex: 1 1 100%; }
  .acct .se-tools .ag-sort { flex: 1 1 100%; }
  .acct .se-tools .ag-sort select { flex: 1; }
}

/* the Seats list's Rows view (the default; Cards is the toggle's other side) */
.acct .se-view { display: inline-flex; margin-left: auto; padding: 0; border-radius: 0; border: 1px solid var(--rule); background: var(--card); }
.acct .se-view button { border: 0; background: none; color: var(--ink-2); min-height: 32px; padding: 0 12px; border-radius: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.acct .se-view button + button { border-left: 1px solid var(--rule); }
.acct .se-view button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.acct .se-head, .acct .se-row { display: grid; grid-template-columns: minmax(6.5rem, 1fr) 6.6rem 6.2rem 4rem 5.6rem 3.4rem 5.4rem 3.8rem 10.6rem; align-items: center; gap: 8px; }
.acct .se-head { padding: 0 12px 6px; white-space: nowrap; font: 500 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); border-bottom: 1px solid var(--rule-2); }
.acct .se-head > span:nth-child(n+3):nth-child(-n+8):not(:nth-child(7)) { text-align: right; }
.acct .se-head button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; text-align: right; }
.acct .se-head button.on::after { content: ""; position: absolute; width: 10px; height: 10px; margin: 1px 0 0 4px; background: currentColor; -webkit-mask: var(--g-down) center / 10px 10px no-repeat; mask: var(--g-down) center / 10px 10px no-repeat; }
.acct .se-head button:hover, .acct .se-head button.on { color: var(--ink); }
.acct .se-rows { display: grid; margin: 0 0 10px; }
.acct .se-rows > .ga-empty { margin-top: 8px; }
.acct .se-row { position: relative; padding: 10px 12px; border-radius: 0; transition: background .12s; }
.acct .se-row:nth-child(even) { background: color-mix(in srgb, var(--card) 60%, transparent); }
.acct .se-row:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--brass-line); }
.acct .se-row.on { box-shadow: inset 0 0 0 1px var(--ink), inset 2px 0 0 var(--green); }
.acct .se-r-name { min-width: 0; }
.acct .se-r-name b { display: block; font: 600 14.5px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct .se-r-name .sub { display: inline; font-weight: 400; }
.acct .se-r-st .se-st { white-space: normal; display: inline-block; line-height: 1.15; }
.acct .se-r-fee, .acct .se-r-num, .acct .se-r-late { text-align: right; font: 500 14px/1.25 var(--sans); }
.acct .se-r-late { text-align: left; }
.acct .se-rows { overflow-x: clip; }
.acct .se-r-fee b { font: 500 17px/1.1 var(--serif); color: var(--green); white-space: nowrap; }
.acct .se-r-late { font-size: 13px; }
.acct .se-r-late.warn, .acct .se-r-meta .warn { color: var(--brass); }
/* the actions keep to their column (its width fixed, so the header lines up): two buttons that do not fit side by side
   (French "Voir le registre" + "Proposer une place") go one under the other, never over the Line column */
.acct .se-r-acts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; margin-left: 0; white-space: nowrap; }
.acct .se-r-acts .btn.sm { padding: 7px 11px; }
.acct .se-r-meta, .acct .se-r-tog { display: none; }
.acct .se-r-why { display: none; grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); } /* the reason sits on Back's title and in the need line above; a phone shows it in an opened row */
.acct .se-row .se-confirm { grid-column: 1 / -1; margin-top: 6px; }
/* the Rows view's layouts follow the list's own width (the container .se-v4), never the window's: with Go mode's side
   menu the list is about 370px narrower than the window, so the window's 1100px and 640px left the fixed columns wider
   than the list from 641 to 1330px, the actions clipped. Each switch is where its columns stop fitting: nine columns
   need 53.5rem + 8 gaps + the row's padding (944px at 16px), seven need 44.3rem + 6 gaps + padding (781px); the
   thresholds below are in rem, a little above, so they hold with a larger root font too */
.acct .se-v4 { container: se-list / inline-size; }
@container se-list (width < 59.2rem) {
  .acct .se-head, .acct .se-row { grid-template-columns: minmax(6.5rem, 1fr) 6.6rem 6.2rem 4rem 3.4rem 5.4rem 10.6rem; }
  .acct .se-r-hide { display: none; }
}
@media (max-width: 640px) {
  .acct .se-view { margin-left: 0; }
}
@container se-list (width < 49rem) {
  .acct .se-head { display: none; }
  .acct .se-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name st fee" "meta meta meta" "acts acts acts"; gap: 6px 8px; padding: 11px 12px; }
  .acct .se-r-name { grid-area: name; } .acct .se-r-fee { grid-area: fee; }
  .acct .se-r-st { grid-area: st; } .acct .se-r-meta { grid-area: meta; display: block; font-size: 12.5px; color: var(--muted); }
  .acct .se-r-st .se-st { font-size: 10.5px; padding: 4px 7px; }
  .acct .se-r-num, .acct .se-r-late { display: none; }
  .acct .se-r-acts { grid-area: acts; display: none; }
  .acct .se-row.open .se-r-acts { display: flex; margin-left: 0; }
  .acct .se-r-acts .btn { flex: 1 1 0; }
  .acct .se-r-why { text-align: left; }
  .acct .se-row.open .se-r-why { display: block; }
  /* a tap anywhere on the row opens it (its links and buttons above the tap area) */
  .acct .se-r-tog { display: block; position: absolute; inset: 0; z-index: 0; border: 0; background: none; border-radius: 0; cursor: pointer; }
  .acct .se-r-name a, .acct .se-r-acts, .acct .se-row .se-confirm { position: relative; z-index: 1; }
}

/* ---- Go mode fixes (2026-10-03 audit) ---- */
/* Home's quick-action doors: never one card alone on a row. Five doors: one row of five when wide, 3 + 2 in the middle,
   2 + 2 + 1 (the last spanning both) on a phone */
#ga-doors { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#ga-doors > .ga-door { grid-column: span 2; }
#ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1), #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1) ~ .ga-door { grid-column: span 3; }
@media (min-width: 1180px) { #ga-doors { grid-template-columns: repeat(5, minmax(0, 1fr)); } #ga-doors > .ga-door, #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1), #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1) ~ .ga-door { grid-column: auto; } }
@media (max-width: 560px) { #ga-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ga-doors > .ga-door, #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1), #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1) ~ .ga-door { grid-column: auto; } #ga-doors > .ga-door:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Home's Savings card: the rate unread shows "—" in the big slot and this small line under it */
.hm-apy-na { margin: -2px 0 0; font-size: 12.5px; color: var(--muted); }
/* the Seats list: Score v2 not read yet */
.acct .se-ld { color: var(--muted); font-size: 12.5px; }
/* the Seats rows: room for "Offer seat" (was "Back") beside View record */
/* the actions column has a fixed width: as max-content it collapsed to 0 in the header (an empty cell) and every
   heading slid one column right of its figures */
.acct .se-head, .acct .se-row { grid-template-columns: minmax(6.5rem, 1fr) 6.6rem 6.4rem 3.6rem 5.6rem 3.2rem 5.4rem 3.6rem 12.6rem; }
@container se-list (width < 59.2rem) { .acct .se-head, .acct .se-row { grid-template-columns: minmax(6.5rem, 1fr) 6.6rem 6.4rem 3.6rem 3.2rem 5.4rem 12.6rem; } }
@container se-list (width < 49rem) { .acct .se-row { grid-template-columns: minmax(0, 1fr) auto auto; } }

/* [desk] the agent001 Desk, the x402 tab's third pane in Go mode (account-desk.js): only with SITE_DESK=on (scripts/build-site.mjs) */
.acct .ax-tabs:has(#ax-tab-desk) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.dk-k { display: block; font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
/* the header (account-desk.js): one row of the robot, agent001, the agent picker (a pill), then Priors AI's credit (or the
   model connected) and Settings at its end; under it one line, what that agent can do now (#dk-now, account-path.js
   can()'s head), its dot in can()'s tone. A rule closes it */
.dk-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "logo title pick right" "now now now now"; align-items: center; column-gap: 12px; row-gap: 10px; padding: 2px 0 16px; border-bottom: 1px solid var(--card-edge); }
.dk-logo { grid-area: logo; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 0; background: radial-gradient(90% 60% at 50% 0%, var(--case-lamp), transparent 70%), radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); color: var(--case-mint); }
.dk-title { grid-area: title; margin: 0 6px 0 0; font: 500 26px/1 var(--serif); letter-spacing: -.3px; color: var(--ink); }
.dk-pick { grid-area: pick; justify-self: start; display: block; min-width: 0; max-width: 100%; }
.dk-pick select { appearance: none; -webkit-appearance: none; box-sizing: border-box; height: 40px; max-width: min(340px, 100%); padding: 0 36px 0 14px; border: 1px solid var(--rule); border-radius: 0; background-color: var(--paper); font: 500 15px/1.2 var(--sans); color: var(--ink); text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 18px top 52%, right 13px top 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.dk-pick select:hover { background-color: var(--hover); }
.dk-pick select option { background: var(--paper); color: var(--ink); font: 400 15px/1.3 var(--sans); }
.dk-pick select:disabled { cursor: default; color: var(--muted); }
.dk-pick select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* one agent: nothing to pick, so no chevron and no pointer */
.dk-pick select[data-one] { pointer-events: none; padding-right: 14px; background-image: none; }
.dk-head-r { grid-area: right; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dk-modelchip { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; height: 40px; max-width: 280px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 0; background: transparent; font: 500 13px/1 var(--sans); color: var(--muted); white-space: nowrap; cursor: pointer; }
.dk-modelchip.on { color: var(--ink-2); }
.dk-modelchip:hover { background: var(--hover); }
.dk-modelchip .dk-chip-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ink); }
/* the credit under the auto top-up's threshold (desk-ai.js LOW) */
.dk-modelchip.low { background: none; border-color: var(--red); color: var(--red); }
.dk-modelchip.low .dk-chip-v { color: var(--red); }
/* Settings: a pill as tall as the picker and the chip (.acct .btn.sm's padding would make it shorter) */
.dk-head .btn.dk-set { gap: 6px; box-sizing: border-box; height: 40px; padding: 0 14px; }
.dk-set-i { display: inline-flex; }
/* the line flows as text (its link after the sentence, on the next line when it doesn't fit), its dot beside the first
   line: a flex row would drop a long sentence under the dot on a phone */
.dk-now { grid-area: now; position: relative; margin: 0; padding-left: 18px; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); }
.dk-now:empty { display: none; }
.dk-now::before { content: ""; position: absolute; left: 0; top: calc(.725em - 4px); width: 8px; height: 8px; border-radius: 0; background: var(--faint); }
.dk-now > :is(a, button) { margin-left: 6px; white-space: nowrap; }
.dk-now[data-tone="ok"]::before { background: var(--green); }
.dk-now[data-tone="wait"]::before { background: var(--brass); }
.dk-now:is([data-tone="stop"], [data-tone="bad"])::before { background: var(--red); }
.dk-now .ac-link { font-size: 14.5px; }
/* a wide screen: the strip sits right under the header, whose rule is its top (one line, not two) */
@media (min-width: 901px) { .dk-head + .dk-grid .dk-strip { border-top: 0; } }
.dk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "status status" "chat side"; gap: 22px 28px; align-items: start; }
.dk-status { grid-area: status; min-width: 0; }
.dk-status > summary { display: none; }
.dk-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--card-edge); border-bottom: 1px solid var(--card-edge); }
.dk-strip > div { display: grid; gap: 3px; align-content: start; padding: 14px 18px; min-width: 0; }
.dk-strip > div + div { border-left: 1px solid var(--card-edge); }
.dk-strip > div:first-child { padding-left: 0; }
.dk-strip b { font: 500 28px/1.1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.dk-s { font: 400 12.5px/1.35 var(--sans); color: var(--muted); }
.dk-s.g { color: var(--green); }
.dk-s.r { color: var(--red); }
/* an agent one counted loan short of its next step on backing (account-desk.js stepLine): one line under the strip */
.dk-ladder { margin: 10px 0 0; font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
.dk-chat { grid-area: chat; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; padding: 22px 24px 18px; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); }
.dk-chat-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dk-chat-h h3 { margin: 0; font: 500 24px/1.1 var(--serif); }
.dk-chat-h .sub { font-size: 13px; }
.dk-chat-h .ac-link { margin-left: auto; }
.dk-log { position: relative; list-style: none; margin: 0; padding: 18px 2px 4px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); display: flex; flex-direction: column; gap: 14px; min-height: 340px; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
.dk-day { align-self: center; font: 400 12px/1 var(--sans); color: var(--faint); padding: 2px 0 4px; }
.dk-m { max-width: 88%; }
.dk-m p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dk-me { align-self: flex-end; padding: 10px 14px; border-radius: 0; background: var(--ink); color: var(--paper); font: 500 14.5px/1.4 var(--sans); }
.dk-bot { align-self: flex-start; padding: 0 0 0 14px; border-left: 2px solid var(--green); font: 400 17.5px/1.5 var(--serif); color: var(--ink); }
.dk-who { display: block; margin-bottom: 2px; font: 600 11.5px/1.3 var(--sans); color: var(--green); }
.dk-err { align-self: flex-start; font: 400 14px/1.45 var(--sans); color: var(--red); }
.dk-step { align-self: flex-start; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.dk-step::before { content: ""; flex: none; align-self: center; width: 8px; height: 1px; background: var(--faint); }
.dk-step code { font-size: 11.5px; color: var(--faint); }
.dk-card { align-self: flex-start; width: min(100%, 500px); padding: 18px 20px 16px; border-radius: 0; background: var(--paper); border: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dk-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dk-card header b { font: 500 23px/1.15 var(--serif); color: var(--ink); }
.dk-card header span { font: 400 13px/1.2 var(--sans); color: var(--muted); text-align: right; }
.dk-card dl { margin: 0; display: grid; }
.dk-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule-2); }
.dk-card dt { font: 400 13.5px/1.35 var(--sans); color: var(--muted); white-space: nowrap; }
.dk-card dd { margin: 0; font: 500 13.5px/1.35 var(--sans); color: var(--ink); text-align: right; }
.dk-fix { display: grid; gap: 8px; margin: 2px 0 0; }
.dk-fix-i { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dk-fix-n { font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.dk-note { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.dk-warn { margin: 0; padding: 9px 12px; border-radius: 0; background: var(--card); box-shadow: inset 2px 0 0 var(--brass); font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
.dk-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.dk-alt { margin-left: auto; }
.dk-card .dk-st:empty { display: none; }
.dk-card.done { border-color: var(--green); }
.dk-card.off { opacity: .62; }
.dk-card.dk-again { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.dk-pickc { align-self: flex-start; width: min(100%, 500px); }
.dk-pickc ul { list-style: none; margin: 0; padding: 0; border-radius: 0; border: 1px solid var(--rule); background: var(--paper); }
.dk-pickc li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; }
.dk-pickc li + li { border-top: 1px solid var(--rule-2); }
.dk-pick-n { display: grid; gap: 1px; }
.dk-pick-n b { font: 500 16px/1.2 var(--serif); }
.dk-pick-n span { font: 400 12.5px/1.2 var(--sans); color: var(--muted); }
.dk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--card-edge); }
.dk-chip { padding: 9px 13px; border-radius: 0; border: 1px solid var(--card-edge); background: var(--paper); color: var(--ink-2); font: 500 13.5px/1.2 var(--sans); cursor: pointer; white-space: nowrap; }
.dk-chip:hover { border-color: var(--green); color: var(--green); }
.dk-chip:disabled { opacity: .5; cursor: default; }
.dk-more { background: transparent; color: var(--muted); }
.dk-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 0; border: 1px solid var(--field-edge); background: var(--paper); }
.dk-form:focus-within { border-color: var(--green); }
.dk-form textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; padding: 8px 0; font: 400 16px/1.4 var(--sans); color: var(--ink); max-height: 140px; }
.dk-form textarea:focus { outline: none; box-shadow: none; }
.dk-fine { margin: -4px 0 0; font: 400 12px/1.3 var(--sans); color: var(--faint); }
.dk-side { grid-area: side; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.dk-night { border-radius: 0; overflow: hidden; background: var(--night); color: var(--night-ink); }
.dk-scene { position: relative; height: 210px; overflow: hidden; background: radial-gradient(120% 90% at 50% 105%, #1d2a22 0%, #121a15 45%, var(--night) 100%); }
.dk-scene svg { display: block; width: 100%; height: auto; }
.dk-scene .dk-tree { position: absolute; inset: 6px 0 0; width: 100%; height: calc(100% - 6px); display: block; cursor: grab; }
.dk-sky { position: absolute; inset: 0; pointer-events: none; }
.dk-moon { position: absolute; top: 18px; right: 24px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 6px -3px 0 0 #efe6cf; filter: drop-shadow(0 0 6px rgba(239, 230, 207, .35)); }
.dk-stars { position: absolute; top: 0; left: 0; width: 1.5px; height: 1.5px; border-radius: 0; background: transparent;
  box-shadow: 22px 18px #cfc8b4, 58px 40px #9b9788, 96px 12px #e8e2d2, 140px 34px #9b9788, 176px 20px #cfc8b4, 214px 46px #9b9788, 250px 14px #e8e2d2, 30px 70px #9b9788, 120px 64px #cfc8b4, 200px 78px #9b9788, 236px 96px #cfc8b4, 72px 98px #9b9788;
  animation: dk-twinkle 4.2s ease-in-out infinite; }
.dk-stars-2 { transform: translate(11px, 7px); animation-delay: -2.1s; animation-duration: 5.4s; opacity: .7; }
@keyframes dk-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
.dk-fly { position: absolute; bottom: 30px; left: 30%; width: 3px; height: 3px; border-radius: 0; background: #d8f5c8; box-shadow: 0 0 6px 2px rgba(190, 240, 170, .55); opacity: 0; animation: dk-fly 7s ease-in-out infinite; }
.dk-fly:nth-of-type(5) { left: 22%; bottom: 46px; animation-delay: -1.8s; animation-duration: 8.5s; }
.dk-fly:nth-of-type(6) { left: 70%; bottom: 36px; animation-delay: -3.6s; animation-duration: 6.4s; }
.dk-fly:nth-of-type(7) { left: 80%; bottom: 60px; animation-delay: -5.1s; animation-duration: 9s; }
@keyframes dk-fly { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 50% { transform: translate(14px, -22px); opacity: .6; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-6px, -40px); } }
@media (prefers-reduced-motion: reduce) { .dk-stars, .dk-fly { animation: none; } .dk-fly { opacity: .6; } }
/* the page's "needs your attention" line repeats what the Desk shows once its pane is open */
.ga-notice:has(+ #ac-a001.ga-on) { display: none; }
.dk-nfigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--night-rule); }
.dk-nfigs > div { padding: 12px 8px 4px; min-width: 0; }
.dk-nfigs > div:first-child { padding-left: 14px; }
.dk-nfigs > div + div { border-left: 1px solid var(--night-rule); }
.dk-nfigs dt { font: 400 11px/1.2 var(--sans); color: var(--night-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-nfigs dd { margin: 4px 0 0; font: 500 24px/1 var(--serif); color: var(--night-ink); }
.dk-ncap { margin: 0; padding: 4px 14px 12px; font: 400 11.5px/1.3 var(--sans); color: var(--night-muted); }
.dk-feed-h { margin: 6px 0 0; font: 500 20px/1.2 var(--serif); }
.dk-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.dk-fday { padding: 10px 0 4px; font: 500 12px/1.2 var(--sans); color: var(--faint); }
.dk-ev { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule-2); }
.dk-ev time { font: 400 12px/1.5 var(--mono); color: var(--faint); }
.dk-ev p { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--ink); }
.dk-actor { display: block; font: 600 11.5px/1.4 var(--sans); color: var(--green); }
.dk-evl { color: inherit; text-decoration: none; }
.dk-evl:hover { text-decoration: underline; text-underline-offset: 3px; }
.dk-empty { padding: 10px 0; font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.dk-drawer { position: fixed; inset: 0; z-index: 300; }
.dk-veil { position: absolute; inset: 0; background: rgba(15, 20, 17, .38); }
.dk-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); box-shadow: -18px 0 48px var(--shade); padding: 24px 26px 40px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; }
.dk-panel > header { display: flex; justify-content: space-between; align-items: center; }
.dk-panel h3 { margin: 0; font: 500 28px/1.1 var(--serif); }
.dk-x { width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); font: 400 26px/1 var(--sans); cursor: pointer; border-radius: 0; }
.dk-x:hover { background: var(--hover); }
.dk-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; border-top: 1px solid var(--rule-2); }
.dk-sec h4 { margin: 0; font: 500 20px/1.2 var(--serif); }
.dk-p { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.dk-quiet { font-size: 12.5px; color: var(--muted); }
.dk-seg { display: inline-flex; padding: 0; gap: 0; border-radius: 0; background: var(--card); border: 1px solid var(--rule); justify-self: start; }
.dk-seg label + label { border-left: 1px solid var(--rule); }
.dk-seg label { position: relative; }
.dk-seg input { position: absolute; opacity: 0; pointer-events: none; }
.dk-seg span { display: block; padding: 11px 12px; border-radius: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.dk-seg input:checked + span { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dk-seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; }
.dk-rent { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 0; background: var(--card-2); }
.dk-rent > div { display: grid; gap: 3px; flex: 1; }
.dk-rent b { font: 500 15px/1.2 var(--sans); }
.dk-rent span { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.dk-help { font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
.dk-help summary { cursor: pointer; color: var(--ink); font-weight: 500; width: fit-content; }
.dk-help > div { display: grid; gap: 8px; padding: 8px 0 2px; }
.dk-help-s { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.dk-help a { overflow-wrap: anywhere; }
html.dk-cb body { visibility: hidden; }
.dk-linkc { border-style: dashed; }
.dk-keyrow { display: flex; gap: 8px; }
.dk-keyrow input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 0; border: 1px solid var(--field-edge); background: var(--field); color: var(--ink); font: 14px var(--sans); }
.dk-check, .dk-switch { display: flex; gap: 10px; align-items: flex-start; font: 400 13.5px/1.4 var(--sans); color: var(--ink-2); cursor: pointer; }
.dk-check input, .dk-switch input { margin-top: 3px; accent-color: var(--green); }
.dk-switch > span { display: grid; gap: 2px; }
.dk-switch b { font-weight: 500; color: var(--ink); }
.dk-switch > span > span { font-size: 12.5px; color: var(--muted); }
.dk-modelrow { display: grid; gap: 6px; font: 500 13px/1.2 var(--sans); color: var(--muted); }
.dk-modelrow select { height: 42px; border-radius: 0; border: 1px solid var(--field-edge); background: var(--field); color: var(--ink); font: 13.5px var(--mono); padding: 0 10px; max-width: 100%; }
.dk-conn { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 13.5px/1.4 var(--sans); color: var(--ink-2); }
.dk-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.dk-steps li { min-width: 0; }
.dk-code { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 9px 10px; border-radius: 0; background: var(--card-2); }
.dk-code code { flex: 1; min-width: 0; font: 400 12px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.dk-code .btn { flex: none; padding: 7px 10px; font-size: 12.5px; }
html.dk-lock, html.dk-lock body { overflow: hidden; }
@media (max-width: 1100px) { .dk-grid { grid-template-columns: minmax(0, 1fr) 260px; } .dk-strip b { font-size: 24px; } }
@media (max-width: 900px) {
  .dk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chat" "status" "side"; gap: 16px; }
  .dk-status { border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
  .dk-status > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; font: 500 13.5px/1.35 var(--sans); color: var(--ink-2); }
  .dk-status > summary::-webkit-details-marker { display: none; }
  .dk-status > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--muted); -webkit-mask: var(--g-plus) center / 14px 14px no-repeat; mask: var(--g-plus) center / 14px 14px no-repeat; }
  .dk-status[open] > summary::after { transform: rotate(45deg); }
  .dk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; margin: 0 16px; }
  .dk-strip > div, .dk-strip > div:first-child { padding: 12px 12px 12px 0; }
  .dk-strip > div + div { border-left: 0; }
  .dk-strip > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--card-edge); }
  .dk-strip > div:nth-child(n+3) { border-top: 1px solid var(--card-edge); }
  .dk-strip b { font-size: 22px; }
  .dk-ladder { margin: 0 16px 14px; padding-top: 10px; border-top: 1px solid var(--card-edge); }
}
@media (max-width: 640px) {
  .acct .ax-tabs:has(#ax-tab-desk) { gap: 4px; padding: 4px; }
  .acct .ax-tabs:has(#ax-tab-desk) .ax-tab { padding: 10px 8px; text-align: center; }
  .acct .ax-tabs:has(#ax-tab-desk) .ax-tab span { display: none; }
  .acct .ax-tabs:has(#ax-tab-desk) .ax-tab b { font-size: 16px; }
  /* the header on a phone: the top bar already says agent001 (the title stays for a screen reader). One row of the robot,
     the picker (it fills the row: about 184 px at 390), the credit's figure and the gear; the status line under it */
  .dk-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo pick right" "now now now"; column-gap: 8px; padding-bottom: 12px; }
  .dk-title, .dk-chip-k, .dk-set-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dk-logo { width: 36px; height: 36px; border-radius: 0; }
  .dk-pick { justify-self: stretch; }
  .dk-pick select { width: 100%; height: 44px; max-width: none; }
  .dk-modelchip { height: 44px; max-width: 112px; padding: 0 12px; }
  .dk-head .btn.dk-set { width: 44px; height: 44px; padding: 0; }
  .dk-now { font-size: 14px; }
  .dk-chat { padding: 16px 14px 14px; border-radius: 0; }
  .dk-log { min-height: 260px; max-height: 62vh; }
  .dk-m { max-width: 94%; }
  .dk-bot { font-size: 16.5px; }
  .dk-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 12px 14px 2px; }
  .dk-chips::-webkit-scrollbar { display: none; }
  .dk-chips .dk-more { display: none; }
  .dk-chips .dk-more-i[hidden] { display: inline-block !important; }
  .dk-card { padding: 16px 14px 14px; }
  .dk-card header b { font-size: 21px; }
  .dk-panel { padding: 20px 18px 36px; }
  .dk-scene { height: 170px; }
  .dk-scene svg { height: 150px; }
}
/* Go mode launch (2026-10-09, with launch-states.css): the night panel's figures shimmer in its own ink before the first
   read; on a phone the preset chips scroll sideways, snapping, and fade at the edge so the next one shows there is more */
.dk-nfigs .sk.pst-fig { min-width: 2.4em; background: linear-gradient(color-mix(in srgb, var(--night-ink) 30%, transparent) 0 0) 0 100% / 100% 1px no-repeat; }
.dk-strip .sk.pst-fig { min-width: 3.4em; justify-self: start; }
.dk-feed > .pst-li { padding: 6px 0 0; }
@media (max-width: 640px) {
  .dk-chips { padding-right: 44px; scroll-snap-type: x proximity; scroll-padding-inline: 14px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent 100%); }
  .dk-chips > .dk-chip { flex: none; scroll-snap-align: start; }
}
/* agent001, 2026-10-11 (the UI pass): a figure's or a card row's hint (the shared hints of account-page.js: hover, focus,
   tap, Esc), the chips the log offers, Details under a card's one warning, a provider's error with its buttons, Stop; on a
   wide screen the chat fits the screen from where it starts (account-desk.js fitChat) and its log scrolls inside it; on a
   phone the message box stays above the tab bar; a finger gets 44 px targets */
.dk-hint { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.dk-hint:hover, .dk-hint[aria-expanded="true"] { color: var(--green); text-decoration-color: currentColor; }
.dk-hint:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 0; }
.dk-card dt .dk-hint { white-space: normal; }
.dk-pops { display: contents; }
.dk-det { font: 400 13px/1.45 var(--sans); color: var(--muted); }
.dk-det summary { cursor: pointer; width: fit-content; color: var(--ink-2); font-weight: 500; padding: 4px 0; }
.dk-det .dk-note { margin-top: 6px; }
.dk-copyt .dk-note { overflow-wrap: anywhere; user-select: text; } /* the text Copy for my AI copies: its addresses wrap */
.dk-offer-c { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-family: var(--sans); }
.dk-offer-m { display: inline-block; margin-top: 10px; font-size: 13px; }
.dk-next p { font-size: 16px; }
.dk-err-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* an error row's quiet buttons in ink, and in paper on hover like every .btn (its ink background): a plain color here
   would win over .btn:hover (the same weight, later) and leave ink on ink. The primary keeps its own */
.dk-err-a .btn:not(.primary) { color: var(--ink); }
.dk-err-a .btn:not(.primary):hover { color: var(--paper); }
.dk-sum-t { min-width: 0; }
#dk-send.dk-stopb { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dk-side { padding-bottom: 72px; } /* the bell (bottom right) never covers a switch */
@media (min-width: 901px) {
  .dk-chat { position: sticky; top: calc(var(--ga-top, 64px) + 12px); height: min(var(--dk-chat-h, calc(100vh - var(--ga-top, 64px) - 24px)), calc(100vh - var(--ga-top, 64px) - 24px)); min-height: 460px; grid-template-rows: auto minmax(0, 1fr) auto auto auto; align-content: stretch; }
  .dk-log { min-height: 0; max-height: none; }
}
@media (max-width: 900px) {
  .dk-form { position: sticky; bottom: calc(var(--ga-bar-h, 0px) + env(safe-area-inset-bottom) + 8px); z-index: 4; box-shadow: 0 -10px 18px -12px var(--shade); }
  .dk-side { padding-bottom: 0; }
}
@media (pointer: coarse) {
  .dk-pick select { min-height: 44px; }
  .dk .ac-link, .dk-chat-h .ac-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .dk .switch::before { content: ""; position: absolute; inset: -11px -4px; }
  .dk-chip { min-height: 44px; }
  .dk-hint { padding: 6px 0; }
}
/* Automations: the side column's list (account-desk.js paintAuto) and Settings' Repay on time block */
.dk-autos { display: grid; gap: 6px; }
.dk-autos > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dk-autos h4 { margin: 0; font: 500 20px/1.2 var(--serif); }
.dk-autos .dk-fine { margin: 2px 0 0; }
.dk-autol { list-style: none; margin: 0; padding: 0; display: grid; }
.dk-ai { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.dk-ai-t { display: grid; gap: 2px; min-width: 0; }
.dk-ai-t b { font: 500 14.5px/1.3 var(--sans); color: var(--ink); }
.dk-ai-s { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.dk-ai.warn .dk-ai-s { color: var(--brass, #8a6d1f); }
.dk-ai-top { justify-self: start; margin-top: 2px; font-size: 12.5px; }
.dk-ai .switch { margin-top: 2px; }
.switch:disabled { opacity: .45; cursor: not-allowed; }
.dk-ar, .dk-hp { display: grid; gap: 8px; padding: 14px 16px; border-radius: 0; background: var(--card-2); }
.dk-ar-h, .dk-hp-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dk-ar-h b, .dk-hp-h b { font: 500 15px/1.3 var(--sans); color: var(--ink); }
.dk-ar-f { display: grid; gap: 8px; }
.dk-pill { padding: 3px 9px; border-radius: 0; border: 1px solid var(--rule); font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
.dk-pill.on { border-color: var(--green); color: var(--green); }
.dk-fld { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 13.5px/1.3 var(--sans); color: var(--ink-2); }
.dk-in { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 0; border: 1px solid var(--field-edge); background: var(--field); color: var(--muted); font: 14px var(--mono); }
.dk-in input, .dk-in input:focus, .acct .dk-in input:not([type="radio"]):not([type="checkbox"]), .acct .dk-in input:not([type="radio"]):not([type="checkbox"]):focus { width: 90px; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink); font: inherit; outline: none; }
.dk-in:focus-within { border-color: var(--green); }
.dk-in input:disabled { color: var(--faint); }
.dk-ar-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0; }
.dk-ar-figs dt { font: 400 12px/1.2 var(--sans); color: var(--muted); }
.dk-ar-figs dd { margin: 3px 0 0; font: 500 13.5px/1.35 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.dk-ar-act { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-warnl { font-size: 13px; color: var(--brass, #8a6d1f); }
/* Priors AI in Settings (desk-ai.js mount), in the drawer's own parts: the head (its h4, then the credit and today's use
   as two small figures), the trial as a .dk-rent offer, Add credit as one .dk-keyrow (amount, asset, button; on a phone
   the fields share a line and the button takes the next) with its status line under it, the cost note, and the auto
   top-up as a .dk-ar card like Repay on time's (its state in a pill, the cap as a .dk-fld, its buttons in .dk-ar-act and
   their status line under them). A status line takes no room until it says something */
.dk-pai-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.dk-pai-figs { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.dk-pai-fig b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.dk-pai-fig + .dk-pai-fig::before { content: "·"; margin-right: 8px; color: var(--faint); }
.acct .dk-keyrow select { flex: none; height: 42px; max-width: 100%; padding-top: 0; padding-bottom: 0; }
.dk-pai-add .btn { flex: none; }
.dk-pai-buy > .wstat, .dk-pai-foot > .wstat { padding: 8px 0 0; min-height: 0; font-size: 13.5px; }
.dk-pai-buy > .wstat:empty, .dk-pai-foot > .wstat:empty { padding: 0; }
@media (max-width: 640px) {
  .dk-pai-add { flex-wrap: wrap; }
  .dk-pai-add .btn { flex: 1 1 100%; min-height: 42px; }
}
/* Borrow for Priors AI (desk-ai-borrow.js, only with SITE_AI_BORROW=on: scripts/build-site.mjs). In Settings' Priors AI
   section: Borrow for credit as a .dk-ar card (the line to borrow on across its own row, then the amount and the button
   on the next; on a phone the button takes the rest of that row), and the loans that paid for credit as quiet lines
   under the section's head. A status line takes no room until it says something */
.dk-aib-row { flex-wrap: wrap; }
#dk-pai .dk-aib-row > :is(select, .ks) { flex: 1 1 100%; min-width: 0; max-width: none; } /* .ks: the kit's dropdown (kit-select.js) */
#dk-pai .dk-aib-row > input { flex: 0 0 96px; }
#dk-pai .dk-aib-row > .btn { flex: none; }
.dk-aib > .wstat { padding: 0; min-height: 0; font-size: 13.5px; }
.dk-aib > .wstat:empty { display: none; }
.dk-aib-funds { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.dk-aib-funds b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.dk-aib-funds .dk-aib-late { color: var(--red); font-weight: 500; } /* a loan past its date, or a default */
@media (max-width: 640px) {
  #dk-pai .dk-aib-row > .btn { flex: 1 1 auto; min-height: 42px; }
}
/* the Desk on a touch screen, with the rest of Go mode's touch rules (launch-shell.css): 44 px controls (a hint keeps its
   size, with the room around it), 16 px fields (the agent picker too, so iOS never zooms on it), and 12 px figures' labels
   on a phone */
@media (pointer: coarse) {
  html[data-go-page] :is(.dk-modelchip, .dk-x) { min-height: 44px; }
  html[data-go-page] .dk-x { min-width: 44px; }
  html[data-go-page] :is(.dk-keyrow input, .dk-keyrow select, .dk-modelrow select, .dk-in) { height: 44px; }
  html[data-go-page] .dk-seg span { display: flex; align-items: center; min-height: 44px; }
  html[data-go-page] .dk-check { align-items: center; min-height: 44px; }
  html[data-go-page] .dk-check input { margin-top: 0; }
  html[data-go-page] .dk-det > summary { box-sizing: border-box; min-height: 44px; padding-block: 12px; } /* a card's Details: a real 44 px box */
  html[data-go-page] :is(.dk-hint, .dk-help > summary) { position: relative; }
  html[data-go-page] .dk-hint::before, html[data-go-page] .dk-help > summary::after { content: ""; position: absolute; inset: -12px -6px; }
  html[data-go-page] .dk-pick :is(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):not(.tf-code):not(.lc-amt input) { font-size: 16px !important; }
}
@media (max-width: 640px) { body.goapp .dk-nfigs dt { font-size: 12px; } }
/* agent001's launch run (desk-launch.js, SITE_A001_LAUNCH=on): its panel above the chat, a card's lede line */
.dk-lede { margin: -4px 0 0; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.dk-lx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 18px 14px; border-radius: 0; background: var(--paper); border: 1px solid var(--rule); }
.dk-lx[hidden] { display: none; }
.dk-lx-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.dk-lx-ttl { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
.dk-lx-ttl b { font: 500 22px/1.15 var(--serif); color: var(--ink); }
.dk-lx-n { font: 500 12.5px/1.2 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.dk-lx-acts { display: inline-flex; gap: 16px; }
.dk-lx .ac-link:disabled { opacity: .45; cursor: not-allowed; }
.dk-lx-lede { margin: -4px 0 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.dk-lx-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dk-lx-i { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; padding-top: 9px; border-top: 2px solid var(--rule); font: 500 12.5px/1.25 var(--sans); color: var(--muted); min-width: 0; }
.dk-lx-i.done, .dk-lx-i.skip { border-top-color: var(--green); }
.dk-lx-i.now { border-top-color: var(--ink); color: var(--ink); }
.dk-lx-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 0; border: 1px solid var(--card-edge); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.dk-lx-i.done .dk-lx-dot { background: var(--green); border-color: var(--green); color: var(--paper); }
.dk-lx-i.skip .dk-lx-dot { color: var(--faint); }
.dk-lx-i.now .dk-lx-dot { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.dk-lx-l { overflow-wrap: anywhere; }
.dk-lx-key { display: grid; gap: 8px; padding: 12px 14px; border-radius: 0; background: var(--card-2); border: 1px solid var(--card-edge); }
.dk-lx-key[hidden], .dk-lx-body[hidden], .dk-lx-note[hidden] { display: none; }
.dk-lx-note { display: grid; gap: 8px; padding: 10px 14px; border-radius: 0; background: var(--card-2); border: 1px solid var(--card-edge); }
.dk-lx-note.warn { background: var(--card); border-color: var(--rule-2); box-shadow: inset 2px 0 0 var(--brass); }
.dk-lx-note .dk-p { font-size: 13.5px; overflow-wrap: anywhere; }
.dk-lx-key .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dk-lx-key .sub { margin: 0; font: 400 12.5px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.dk-lx-body { display: grid; gap: 10px; min-width: 0; }
.dk-lx-need { color: var(--ink); }
.dk-lx-have { font-weight: 500; }
.dk-lx-add { margin: 0; }
.dk-lx-addr { display: flex; align-items: center; gap: 8px; font: 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.dk-lx-fld { display: grid; gap: 5px; font: 500 12.5px/1.2 var(--sans); color: var(--muted); max-width: 360px; }
.dk-lx-fld > input, .dk-lx-at { height: 40px; padding: 0 12px; border-radius: 0; border: 1px solid var(--field-edge); background: var(--field); color: var(--ink); font: 400 15px/1.2 var(--sans); }
.acct .dk-lx-fld > input { margin: 0; min-height: 40px; }
.dk-lx-at { display: flex; align-items: center; gap: 2px; color: var(--muted); }
.dk-lx-at input, .acct .dk-lx-at input:not([type="radio"]):not([type="checkbox"]) { flex: 1; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink); font: inherit; outline: none; }
.dk-lx-at:focus-within, .dk-lx-fld > input:focus { border-color: var(--green); outline: none; }
.dk-lx-fld .dk-in { justify-self: start; }
.dk-lx-way { display: grid; gap: 8px; }
.dk-lx-way:empty { display: none; }
.dk-lx-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 0; border: 1px solid var(--card-edge); background: var(--card); cursor: pointer; }
.dk-lx-opt:has(input:checked) { border-color: var(--green); }
.dk-lx-opt:has(input:disabled) { opacity: .6; cursor: default; }
.dk-lx-opt input { margin: 3px 0 0; accent-color: var(--green); }
.dk-lx-opt > span { display: grid; gap: 2px; }
.dk-lx-opt b { font: 500 14px/1.3 var(--sans); color: var(--ink); }
.dk-lx-opt span span { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.dk-lx-opt2 { display: grid; gap: 6px; padding: 12px 14px; border-radius: 0; background: var(--card-2); }
.dk-lx-opt2 > b { font: 500 14.5px/1.3 var(--sans); color: var(--ink); }
.dk-lx-opt2 .btn { justify-self: start; }
.dk-lx-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dk-lx-code { padding: 8px 10px; border-radius: 0; background: var(--paper); border: 1px solid var(--rule); font: 12.5px var(--mono); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.dk-lx-post { margin: 0; padding: 10px 14px; border-left: 2px solid var(--green); background: var(--card-2); border-radius: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.dk-lx-big { margin: 0; font: 500 22px/1.2 var(--serif); color: var(--ink); }
.dk-lx-sum { list-style: none; margin: 0; padding: 0; display: grid; }
.dk-lx-sum li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule-2); font: 400 13.5px/1.35 var(--sans); color: var(--muted); }
.dk-lx-sum li b { font-weight: 500; color: var(--ink); text-align: right; }
.dk-lx-s:empty { display: none; }
.dk-lx-paused .btn { justify-self: start; }
.lp-a001 { margin: 4px 0 0; text-align: right; }
.lp-a001 .ac-link { font-size: 13px; }
@media (max-width: 640px) {
  .dk-lx { padding: 14px 14px 12px; }
  .dk-lx-rail { display: flex; gap: 6px; }
  .dk-lx-i { flex: 0 0 auto; grid-template-columns: auto; }
  .dk-lx-i .dk-lx-l { display: none; }
  .dk-lx-i.now { flex: 1 1 auto; grid-template-columns: auto minmax(0, 1fr); }
  .dk-lx-i.now .dk-lx-l { display: block; }
  .dk-lx-sum li { flex-direction: column; gap: 2px; }
  .dk-lx-sum li b { text-align: left; }
}
/* the run's panel shown: a row of its own above the chat's log, on a wide screen (account-desk.js fitChat) */
@media (min-width: 901px) { .dk-chat:has(> .dk-lx:not([hidden])) { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; } }
/* the run's fields on a touch screen: 44 px tall (the rest of the Desk's touch rules are before the run's styles) */
@media (pointer: coarse) { html[data-go-page] :is(.dk-lx-fld > input, .dk-lx-at) { height: 44px; } }
/* [/desk] */

/* [v5] Back agents on the Seats tab (account-v5.js: the totals, the Back / Close card with its agent picker, Your backing, Agents that repay): only with SITE_V5=on (scripts/build-site.mjs) */
.v5 { display: grid; gap: 20px; margin: 4px 0 22px; min-width: 0; }
.v5-hero, .v5-main, .v5-mineCol, .v5-ex { min-width: 0; scroll-margin-top: 84px; }
.v5-h { margin: 0; font: 600 18px/1.25 var(--sans); color: var(--ink); }
.v5-h4 { margin: 0; font: 600 14.5px/1.3 var(--sans); color: var(--ink); }
.v5-unit { font: 500 13px/1 var(--sans); color: var(--muted); letter-spacing: 0; }
.v5-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--rule); color: var(--green); font: 500 14px/1 var(--mono); }
.v5-chip { display: inline-block; padding: 2px 7px; border-radius: 0; background: none; border: 1px solid var(--rule); color: var(--ink-2); font: 500 11.5px/1.3 var(--mono); overflow-wrap: anywhere; }
.v5-chip.ok { background: none; border-color: var(--green); color: var(--green); }
.v5-chip.warn { background: none; border-color: var(--red); color: var(--red); }
/* the totals: four tiles, the line under them */
.v5-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v5-tile { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 96px; box-sizing: border-box; padding: 14px 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
.v5-tile .label { font: 500 12.5px/1.25 var(--sans); color: var(--muted); }
.v5-tile b { justify-self: start; font: 600 26px/1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v5-tile .sub { justify-self: start; font: 400 13px/1.35 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.v5-fine { margin: 10px 2px 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.v5-fine[hidden] { display: none; }
/* the card and Your backing side by side */
.v5-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 20px; align-items: start; }
.v5-main { display: grid; gap: 14px; padding: 18px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); box-shadow: none; }
/* the agent picker */
.v5-pick { position: relative; display: grid; gap: 6px; }
.v5-pick > .label { font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.v5-pick-b, .v5-pick-o { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; box-sizing: border-box; margin: 0; color: inherit; font: inherit; text-align: left; }
.v5-pick-b { padding: 10px 12px; border-radius: 0; background: var(--field); border: 1px solid var(--rule); }
button.v5-pick-b { grid-template-columns: 34px minmax(0, 1fr) auto 14px; cursor: pointer; }
button.v5-pick-b:hover { border-color: var(--field-edge); }
button.v5-pick-b:focus-visible, .v5-pick-o:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.v5-pick-t { display: grid; gap: 2px; min-width: 0; }
.v5-pick-n { overflow-wrap: anywhere; }
.v5-pick-n b { font: 600 15.5px/1.25 var(--sans); color: var(--ink); }
.v5-pick-n .sub { font-size: 13px; }
.v5-pick-rec { font: 400 13px/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.v5-pick-c { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.v5-chev { width: 14px; height: 14px; margin: 0 0 0 2px; background: var(--muted); -webkit-mask: var(--g-caret) center / 14px 14px no-repeat; mask: var(--g-caret) center / 14px 14px no-repeat; }
[aria-expanded="true"] > .v5-chev { scale: 1 -1; }
.v5-pick-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; display: grid; gap: 4px; max-height: 360px; overflow-y: auto; margin: 6px 0 0; padding: 6px; list-style: none; border-radius: 0; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 18px 40px -16px var(--shade), 0 2px 8px var(--shade); }
.v5-pick-list[hidden] { display: none; }
.v5-pick-o { padding: 8px 10px; border: 0; border-radius: 0; background: none; cursor: pointer; }
.v5-pick-o:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--ink); }
.v5-pick-o[aria-pressed="true"] { background: none; box-shadow: inset 2px 0 0 var(--green); }
/* the segmented switches (Back | Close, $PRIORS | USDG, Take it as), as the cockpit's (launch-home.css .lc-seg) */
.v5-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 0; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.v5-seg button { appearance: none; margin: 0; padding: 11px 16px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font: 500 14.5px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.v5-seg button + button { box-shadow: inset 1px 0 0 var(--rule); }
.v5-seg button:hover { color: var(--ink); }
.v5-seg button.on, .v5-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink); }
.v5-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.v5-seg button[aria-disabled="true"] { color: var(--faint); cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.v5-seg button:disabled { color: var(--faint); cursor: not-allowed; }
.v5-side { display: grid; }
.v5-tok button { padding: 8px 12px; font-size: 13.5px; }
/* the amount */
.v5-box { display: grid; gap: 12px; }
.v5-amt-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v5-amt-h label { font: 600 14px/1.2 var(--sans); color: var(--ink); }
.v5-amt { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 0; background: var(--field); border: 1px solid var(--field-edge); }
.v5-amt:focus-within { outline: 2px solid var(--green); outline-offset: -1px; }
#v5 #v5-amount { flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 600 32px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
#v5 #v5-amount:focus { border: 0; box-shadow: none; }
#v5 #v5-amount:focus-visible { outline: none; } /* one ring: .v5-amt:focus-within draws it around the whole field */
#v5 #v5-amount[aria-invalid="true"] { color: var(--red); }
.v5-amt-u { flex: none; font: 600 14px/1 var(--sans); color: var(--muted); }
.v5-body { display: grid; gap: 12px; }
.v5-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v5-chips button, .v5-fchip { position: relative; min-height: 36px; margin: 0; padding: 7px 14px; border-radius: 0; border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); font: 500 13.5px/1.1 var(--sans); cursor: pointer; }
.v5-chips button::before, .v5-stop-b::before, .v5-fchip::before { content: ""; position: absolute; inset: -6px; } /* a 44 px target for a finger */
.v5-chips button:hover, .v5-fchip:hover { border-color: var(--field-edge); color: var(--ink); }
.v5-fchip[aria-pressed="true"] { border-color: var(--ink); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.v5-chips button:focus-visible, .v5-fchip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.v5-bal { margin: -4px 0 0; font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.v5-bal .k { margin-left: 6px; }
.v5-conv { margin: 0; font: 500 14px/1.45 var(--sans); color: var(--ink-2); }
.v5-conv:empty { display: none; }
.v5-conv.warn { color: var(--red); }
/* the open line's two amounts: the least, the full line */
.v5-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v5-fill { display: grid; justify-items: start; gap: 4px; min-width: 0; margin: 0; padding: 12px 14px; border-radius: 0; border: 1px solid var(--rule); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.v5-fill span { font: 500 12.5px/1.3 var(--sans); color: var(--muted); }
.v5-fill b { font: 600 16px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v5-fill:hover { border-color: var(--green); }
.v5-fill:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.v5-open-note { margin: -4px 0 0; font-size: 13px; }
/* the line steps: the line now, what this amount adds (hatched), what the step allows (dashed), a stop a step */
.v5-prev { display: grid; gap: 10px; padding: 14px 14px 12px; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); }
.v5-prev:empty { display: none; }
.v5-prev-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.v5-prev-h .label { font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.v5-prev-h b { font: 600 17px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.v5-lad { position: relative; margin: 12px 16px 0; }
.v5-lad-track { position: relative; height: 8px; border-radius: 0; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.v5-lad-track i { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border-radius: 0; }
.v5-lad-fill { left: 0; background: var(--green); }
.v5-lad-add { box-shadow: inset 0 0 0 1.5px var(--green); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--green) 30%, transparent) 5px 9px); }
.v5-lad-reach { border: 1.5px dashed color-mix(in srgb, var(--green) 45%, transparent); }
.v5-stops { position: relative; height: 40px; margin: 0; padding: 0; list-style: none; }
.v5-stop { position: absolute; top: -10px; left: calc(var(--x) * 1%); translate: -50% 0; display: grid; justify-items: center; gap: 2px; }
.v5-stop::before { content: ""; width: 12px; height: 12px; box-sizing: border-box; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 25%, transparent); }
.v5-stop.after { margin-top: 0; font-size: inherit; } /* a step past the line: not the landing's global .after (margin, 15px) */
.v5-stop.done::before { background: var(--green); box-shadow: 0 0 0 2px var(--card); }
.v5-stop.after::before { box-shadow: inset 0 0 0 3px var(--green); }
.v5-stop.reach::before { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 60%, transparent); }
.v5-stop.l { translate: -6px 0; justify-items: start; }
.v5-stop.r { translate: calc(-100% + 6px) 0; justify-items: end; }
.v5-stop-b { position: relative; min-height: 36px; margin: 0 -6px; padding: 4px 6px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 500 12.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
.v5-stop.done .v5-stop-b, .v5-stop.after .v5-stop-b { color: var(--ink); }
.v5-stop.later .v5-stop-b { color: var(--faint); }
.v5-stop-b:hover, .v5-stop-b[aria-expanded="true"] { color: var(--green); text-decoration-color: var(--green); }
.v5-stop-b:focus-visible { outline: 2px solid var(--green); outline-offset: 0; }
.v5-line, .v5-more, .v5-next { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.v5-line { white-space: pre-line; color: var(--ink); }
.v5-more { color: var(--green); font-weight: 500; }
.v5-next .sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
/* the two plain lines (fees, the burn), How it works, Add fees back, the button */
.v5-two { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.v5-two li { position: relative; padding-left: 18px; }
.v5-two li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 7px; height: 7px; border-radius: 0; background: var(--green); }
.v5-two li + li::before { background: var(--red); }
.v5-two b, .v5-risks b { color: var(--ink); font-weight: 600; }
.v5-how summary, .v5-hist summary { padding: 6px 0; color: var(--ink); font: 600 13.5px/1.3 var(--sans); cursor: pointer; }
.v5-how summary:focus-visible, .v5-hist summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 0; }
.v5-risks { margin: 6px 0 0; padding-left: 20px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.v5-risks li { margin: 4px 0; }
.v5-note { margin: 6px 0 0; font-size: 12.5px; }
.v5-aa { display: grid; gap: 2px; }
.v5-aa .sub { margin: 0 0 0 46px; font-size: 13px; }
.v5-aa .sub[hidden] { display: none; }
.v5-sw { display: inline-flex; align-items: center; justify-self: start; gap: 10px; min-height: 36px; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--ink); font: 500 14px/1.3 var(--sans); text-align: left; cursor: pointer; }
.v5-sw-k { position: relative; flex: none; box-sizing: border-box; width: 30px; height: 16px; border-radius: 0; border: 1px solid var(--field-edge); background: var(--field); }
.v5-sw-k::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 0; background: var(--muted); box-shadow: none; }
.v5-sw[aria-checked="true"] .v5-sw-k { border-color: var(--green); background: var(--field); }
.v5-sw[aria-checked="true"] .v5-sw-k::after { left: 16px; background: var(--green); }
.v5-sw:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.v5-cta { display: grid; }
.v5-main .v5-go { width: 100%; min-height: 48px; font-size: 15.5px; }
@media (pointer: coarse) {
  html[data-go-page] :is(.v5-seg button, .v5-sw) { min-height: 44px; }
  html[data-go-page] :is(.v5-how, .v5-hist) > summary { box-sizing: border-box; min-height: 44px; padding-block: 12px; } /* How it works, the history: real 44 px boxes */
}
.v5-blocked { margin: 0; padding: 12px 14px; border-radius: 0; background: var(--card); box-shadow: inset 2px 0 0 var(--brass); color: var(--ink); font: 500 14px/1.45 var(--sans); }
/* the Back side while backing can take no move (account-v5.js paintHalt): the clock and the title on one line, the words,
   then what opening the line takes once it lifts, set apart; the act and How it works below, with the pane's gaps */
.v5-halt { display: grid; gap: 12px; }
.v5-halt-b { display: grid; gap: 6px; padding: 14px 16px; }
.v5-halt-b p { margin: 0; }
.v5-halt-t { display: flex; align-items: center; gap: 8px; font: 600 15px/1.35 var(--sans); color: var(--ink); }
.v5-halt-t b { font-weight: 600; }
.v5-halt-i { display: inline-flex; flex: none; color: var(--brass); }
.v5-halt-w { font-weight: 400; color: var(--ink-2); }
.v5-halt-b .v5-halt-x { margin-top: 4px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); font-weight: 400; color: var(--ink); }
/* the review and the Leave and Close sheets */
.v5-sheet { display: grid; gap: 10px; margin: 0; padding: 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule); box-shadow: inset 0 1px 0 var(--brass-line); }
.v5-sheet h4 { margin: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.v5-sheet p { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.v5-sheet p b { color: var(--ink); }
.v5-sheet .v5-risks { margin: 0; }
.v5-rv { display: grid; margin: 0; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); }
.v5-rv > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; }
.v5-rv > div + div { border-top: 1px solid var(--card-edge); }
.v5-rv dt { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.v5-rv dd { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.v5-sheet-act { display: flex; flex-wrap: wrap; gap: 8px; }
.v5-takeas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.v5-takeas .v5-seg button { padding: 8px 14px; font-size: 13.5px; }
/* the Close side */
.v5-close { display: grid; gap: 12px; }
.v5-empty { margin: 0; }
.v5-close > .v5-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.v5-opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 12px 14px; border-radius: 0; border: 1px solid var(--card-edge); }
.v5-opt > div { display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; }
.v5-opt p { margin: 0; }
/* figures in a row: the Close side's, a position's */
.v5-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-radius: 0; background: var(--card); border: 1px solid var(--rule-2); }
.v5-figs2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v5-figs > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 14px; }
.v5-figs > div + div { border-left: 1px solid var(--card-edge); }
.v5-figs dt { font: 500 12.5px/1.25 var(--sans); color: var(--muted); }
.v5-figs dd { display: grid; gap: 3px; margin: 0; font: 600 16px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v5-figs dd .sub { font: 400 12.5px/1.35 var(--sans); color: var(--muted); }
.v5-pos .v5-figs > div { padding: 10px 12px; }
.v5-fig { overflow-wrap: anywhere; }
/* Your backing */
.v5-mineCol { display: grid; align-content: start; gap: 12px; }
.v5-mineCol[hidden] { display: none; }
.v5-mine-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.v5-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 6px 6px 14px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2), inset 2px 0 0 var(--green); }
.v5-bar > div { display: grid; gap: 2px; }
.v5-bar .label { font: 500 12px/1.2 var(--sans); color: var(--muted); }
.v5-bar b { font: 600 16px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.v5-pos { display: grid; gap: 12px; min-width: 0; padding: 14px; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); }
.v5-pos-h { display: flex; align-items: center; gap: 12px; }
.v5-pos-who { display: grid; flex: 1 1 auto; gap: 4px; min-width: 0; }
.v5-pos-who .ap-link, .v5-ag-who .ap-link { overflow-wrap: anywhere; }
.v5-chips-row { display: flex; flex-wrap: wrap; gap: 4px; }
.v5-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.v5-acts:empty { display: none; }
.v5-sws { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--card-edge); }
.v5-sws .sub { margin: 0 0 0 46px; font-size: 13px; }
.v5-back-amt { display: grid; justify-items: end; gap: 2px; text-align: right; }
.v5-back-amt b { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.v5-hist-l { margin: 6px 0 0; }
.v5-hist-l li { font-size: 14px; overflow-wrap: anywhere; }
.v5-how-card { padding: 16px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
.v5-how-card ol { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
/* Agents that repay */
.v5-ex { display: grid; gap: 12px; }
.v5-ex-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.v5-ex .st-p { margin: 0; }
.v5-ex-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#v5 #v5-q { flex: 1 1 220px; min-width: 0; max-width: 340px; padding: 10px 14px; border-radius: 0; font-size: 15px; }
.v5-sorts { display: flex; flex-wrap: wrap; gap: 8px; }
.v5-ex-state { display: grid; gap: 8px; }
.v5-ex-state:empty { display: none; }
.v5-ex-state > .btn { justify-self: start; }
.v5-ex-fb { margin: 0; }
.v5-ex-list { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); }
.v5-ex-list:empty { display: none; }
.v5-ag { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) 96px minmax(0, 1fr) 156px; align-items: center; gap: 10px 14px; padding: 12px 14px; }
.v5-ag + .v5-ag { border-top: 1px solid var(--card-edge); }
.v5-ag-meta { display: contents; }
.v5-ag-who { display: grid; gap: 3px; min-width: 0; }
.v5-ag-rec { font: 400 13px/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.v5-ag-line { display: grid; gap: 2px; }
.v5-ag-line .label { font: 500 11.5px/1.2 var(--sans); color: var(--muted); }
.v5-ag-line b { font: 600 15px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.v5-ag-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.v5-ag-act { justify-self: end; }
.v5-ex-none { padding: 16px; color: var(--muted); font-size: 14px; }
.v5-ex-more { display: grid; justify-items: center; }
.v5-ex-more:empty { display: none; }
/* what an action says: kept in view at the bottom while the page scrolls */
.v5-toast { position: sticky; bottom: 16px; z-index: 30; width: 100%; max-width: 560px; box-sizing: border-box; margin: 0 auto; padding: 12px 16px; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 14px 34px -14px var(--shade), 0 2px 8px var(--shade); }
.v5-toast:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .v5-seg button, .v5-chips button, .v5-fchip, .v5-fill, .v5-pick-b, .v5-pick-o, .v5-stop-b { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
  .v5-sw-k, .v5-sw-k::after { transition: background-color .15s, left .15s var(--ease); }
}
@media (max-width: 980px) {
  .v5-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .v5 { gap: 16px; }
  .v5-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v5-tile { min-height: 0; padding: 12px 14px; }
  .v5-tile b { font-size: 20px; }
  .v5-main { padding: 16px; border-radius: 0; }
  .v5-pick-b, .v5-pick-o { grid-template-columns: 34px minmax(0, 1fr); }
  button.v5-pick-b { grid-template-columns: 34px minmax(0, 1fr) 14px; }
  .v5-pick-c { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  button.v5-pick-b .v5-chev { grid-column: 3; grid-row: 1; }
  #v5 #v5-amount { font-size: 26px; }
  .v5-open { grid-template-columns: minmax(0, 1fr); }
  .v5-lad { margin: 12px 8px 0; }
  .v5-prev { padding: 12px; }
  .v5-main .v5-go { min-height: 52px; }
  .v5-figs, .v5-figs2 { grid-template-columns: minmax(0, 1fr); }
  .v5-figs > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 10px 14px; }
  .v5-figs > div + div { border-left: 0; border-top: 1px solid var(--card-edge); }
  .v5-figs dd { justify-items: end; text-align: right; }
  .v5-how-card { display: none; }
  .v5-ag { grid-template-columns: 34px minmax(0, 1fr) minmax(0, max-content); grid-template-areas: "av who who" ". meta act"; gap: 8px 12px; }
  .v5-ag > .v5-av { grid-area: av; }
  .v5-ag-who { grid-area: who; }
  .v5-ag-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
  .v5-ag-line { display: flex; align-items: baseline; gap: 6px; }
  .v5-ag-act { grid-area: act; align-self: center; }
  .v5-ag-act .btn { min-height: 44px; }
  .v5-toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* a backing row's own line, under its buttons (account-v5.js rowSlot, journey audit B1-11) */
.v5-row-s { padding: 0; }
.v5-row-s:empty { display: none; }
/* [/v5] */

/* [hire] the Hire page (hire.html, hire.js): only with SITE_HIRE=on (scripts/build-site.mjs) */
.hire .panel { margin-top: 22px; }
.hire .panel > *:not(header) { margin-top: 12px; }
.hire .hr-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 24px; margin: 0; }
.hire .hr-figs dt, .hire .hr-receipt dt { font: 500 9.5px/1.3 var(--mono); color: var(--brass-ink); text-transform: uppercase; letter-spacing: .18em; }
.hire .hr-figs dd, .hire .hr-receipt dd { margin: 3px 0 0; font: 500 16px/1.35 var(--sans); color: var(--ink); }
.hire .hr-table-wrap { overflow-x: auto; }
.hire .hr-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--sans); }
.hire .hr-table th, .hire .hr-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, rgba(127,127,127,.25)); white-space: nowrap; }
.hire .hr-table th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.hire #hr-form { display: grid; gap: 14px; max-width: 720px; }
.hire .hr-fld { display: grid; gap: 6px; font: 500 14px/1.3 var(--sans); }
.hire .hr-fld input, .hire .hr-fld textarea { font: 400 15px/1.4 var(--sans); padding: 9px 11px; border-radius: 0; border: 1px solid var(--line, rgba(127,127,127,.35)); background: transparent; color: var(--ink); }
.hire .hr-fld input { max-width: 120px; }
.hire .hr-pay { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.hire .hr-pay legend { font: 500 14px/1.3 var(--sans); margin-bottom: 6px; }
.hire .hr-pay label { display: flex; gap: 8px; align-items: baseline; font: 400 15px/1.35 var(--sans); }
.hire .hr-act { display: flex; gap: 10px; flex-wrap: wrap; }
.hire .hr-price { font: 500 15px/1.4 var(--sans); }
.hire .hr-result { white-space: pre-wrap; font: 400 15px/1.5 var(--serif, Georgia, serif); max-height: 420px; overflow: auto; }
.hire .hr-receipt { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 22px; margin: 0; }
/* [/hire] */

/* [builders] Built on Priors (builders.html, builders.js): only with SITE_BUILDERS=on (scripts/build-site.mjs).
   The protocol page's parts (the § sections, doors, steps, defs) with a few of its own: the hero's stack of layers
   (the pool at the bottom, what is built on the record above it), the open builds' cards and the command rows. */
.builders.app-main { gap: 0; }
.builders section.sec:first-of-type { border-top: 1px solid var(--ink); }
.builders .bo-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 22px 0 64px; }
.builders .bo-hero p { max-width: 34em; }
.builders .bo-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* the stack: each layer reads the one below it; the top one, still to build, drawn dashed. The labels that tell a
   reader what is not live yet ("To build", "Imagine") are small text, so they take --brass-ink (4.5:1 or more on the
   paper by day, brass itself by night); brass stays for the large build letters. */
.builders .bo-stack { margin: 0; display: grid; gap: 8px; }
.builders .bo-layer { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 16px 20px 17px; border: 1px solid var(--rule); background: var(--paper); }
.builders .bo-layer .k { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.builders .bo-layer b { display: block; font: 400 21px/1.2 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.builders .bo-layer p { margin-top: 5px; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.builders .bo-layer.next { border: 1px dashed var(--field-edge); background: transparent; }
.builders .bo-layer.next .k { color: var(--brass-ink); }
.builders .bo-layer.next b, .builders .bo-layer.next p { color: var(--muted); }
.builders .bo-layer.live { border-color: var(--green); background: var(--card, var(--paper)); box-shadow: inset 2px 0 0 var(--green); }
.builders .bo-layer.live .k { color: var(--green); }
.builders .bo-layer.record { border-color: var(--ink); background: var(--ink); }
.builders .bo-layer.record .k, .builders .bo-layer.record p { color: var(--paper-3); }
.builders .bo-layer.record b { color: var(--paper); }
.builders .bo-layer.pool { background: var(--paper-2); }
.builders .bo-layer.pool .k { color: var(--ink-2); }
/* § 01: the line people repeat */
.builders .bo-quote { margin: 0 0 44px; padding: 2px 0 2px 26px; border-left: 2px solid var(--green); }
.builders .bo-quote p { font: italic 400 clamp(26px, 3vw, 38px)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); max-width: 22em; }
/* § 02 and § 03: the doors two by two, a rule between the rows */
.builders .bo-doors > .door { display: flex; flex-direction: column; align-items: flex-start; }
.builders .bo-doors > .door:nth-child(odd) { padding-left: 0; }
.builders .bo-doors > .door:nth-child(2n) { padding-left: 28px; border-right: 0; }
.builders .bo-doors > .door:nth-child(n+3) { border-top: 1px solid var(--rule); }
.builders .bo-doors .door b { font-size: 26px; }
.builders .bo-doors .door:hover b { color: var(--ink); }
.builders .bo-doors .door p code { font-size: 13px; }
.builders .bo-doors .door .tag { margin-top: auto; padding-top: 0; }
.builders .bo-how { display: block; margin: 16px 0 18px; padding: 8px 11px; background: var(--paper-2); font: 12.5px/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.builders .bo-host { margin: -4px 0 10px; font-size: 14px; color: var(--muted); }
.builders .bo-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: baseline; gap: 18px; }
.builders .bo-foot .tag { margin-top: 0; }
.builders .bo-foot .link { font-size: 14px; }
.builders .bo-next { margin-top: 48px; }
.builders .bo-next > header { align-items: baseline; }
.builders .bo-next > header span:first-child { color: var(--brass-ink); }
.builders .bo-next ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.builders .bo-next li { padding: 18px 28px 18px 0; border-bottom: 1px solid var(--rule-2); font: 400 18px/1.5 var(--serif); color: var(--ink-2); }
.builders .bo-next li:nth-child(2n) { padding: 18px 0 18px 28px; border-left: 1px solid var(--rule-2); }
.builders .bo-next li em { color: var(--brass-ink); }
.builders .bo-sub { margin: 52px 0 0; font: 400 24px/1.2 var(--serif); letter-spacing: -.01em; }
.builders .bo-sub + .box { margin-top: 14px; }
.builders .bo-list .def .d a { color: var(--green); }
.builders .bo-list code { font-size: 13px; overflow-wrap: anywhere; }
/* § 04: the open builds */
.builders .bo-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.builders .bo-build { display: flex; flex-direction: column; gap: 10px; padding: 26px 32px 30px 0; border-bottom: 1px solid var(--rule); }
.builders .bo-build:nth-child(2n) { padding: 26px 0 30px 32px; border-left: 1px solid var(--rule); }
.builders .bo-build header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.builders .bo-build .n { font: italic 400 26px/1 var(--serif); color: var(--brass); }
.builders .bo-reward { font: 400 26px/1 var(--serif); color: var(--green); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.builders .bo-build h3 { font: 400 26px/1.15 var(--serif); letter-spacing: -.01em; }
.builders .bo-build p { color: var(--ink-2); font-size: 15px; max-width: 36em; }
.builders .bo-build code { font-size: 13px; }
.builders .bo-done { margin-top: 6px; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.builders .bo-build ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.builders .bo-build li { position: relative; padding: 8px 0 8px 24px; border-top: 1px dotted var(--rule); }
.builders .bo-build li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 10px; height: 5px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); }
.builders .bo-claim, .builders .bo-facts { margin-top: 36px; border-top: 1px solid var(--ink); }
.builders .bo-claim > div, .builders .bo-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.builders .bo-claim span, .builders .bo-facts span { font-size: 14px; color: var(--muted); }
.builders .bo-claim p, .builders .bo-facts p { font: 400 18px/1.5 var(--serif); color: var(--ink); }
.builders .bo-claim a, .builders .bo-facts a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.builders .bo-facts code { font-size: 14px; }
/* § 05: commands to copy */
.builders .bo-cmds { border-top: 1px solid var(--ink); }
.builders .bo-cmd { display: grid; grid-template-columns: minmax(0, 20em) minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.builders .bo-cmd .k { font-size: 14px; color: var(--muted); }
.builders .bo-cmd code { min-width: 0; padding: 9px 12px; background: var(--paper-2); font: 13.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.builders .bo-copy { min-width: 84px; }
.builders .bo-cap { margin-top: 28px; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.builders .bo-code { margin-top: 10px; font-size: 12.5px; }
.builders .bo-facts p .bo-copy { margin-left: 10px; vertical-align: middle; }
.builders .bo-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.builders section.sec:last-of-type { padding-bottom: 16px; }
@media (max-width: 1000px) {
  .builders .bo-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 48px; }
  .builders .bo-doors > .door, .builders .bo-doors > .door:nth-child(2n), .builders .bo-doors > .door:nth-child(n+3) { padding-left: 0; border-top: 0; }
  .builders .bo-next ul, .builders .bo-builds { grid-template-columns: minmax(0, 1fr); }
  .builders .bo-next li, .builders .bo-next li:nth-child(2n), .builders .bo-build, .builders .bo-build:nth-child(2n) { padding-left: 0; padding-right: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .builders section.sec { padding-block: 52px; }
  .builders .bo-cmd { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .builders .bo-cmd .k { grid-column: 1 / -1; }
  .builders .bo-claim > div, .builders .bo-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .builders .bo-claim p, .builders .bo-facts p { font-size: 17px; }
  .builders .bo-code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
@media (max-width: 520px) {
  .builders .bo-layer { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px 15px; }
  .builders .bo-quote { padding-left: 18px; }
  .builders .bo-build h3, .builders .bo-doors .door b { font-size: 23px; }
}
/* the kit for agent launchers (launchers.html): the builders page's parts, the invite page's heading, and its list of limits */
.launchers .board-heading { padding: 22px 0 34px; }
.launchers .kit-list { margin: 18px 0 0; padding-left: 1.2em; display: grid; gap: 10px; max-width: 52em; color: var(--ink-2); }
.launchers .bo-facts code { overflow-wrap: anywhere; }
/* [/builders] */

/* Go mode polish (2026-10-07): one style for every small figure (tiles, cards, activity), the serif kept for the hero
   number; the top bar's pool figures hidden on Home, where its pool card shows them */
.acct .sk-figs b { font: 600 18px/1.2 var(--sans); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.acct .ac-ev-amt { font: 600 14.5px/1 var(--sans); }
@media (max-width: 700px) { .acct .sk-figs b { font-size: 16px; } }
html[data-ga-home] .ga-stats { display: none; }
html[data-ga-home] .ga-cash, html[data-ga-home] .ga-add { display: none; } /* Home shows the balance and Add USDG itself */
/* Seats: its tiles and fee figures in the same figure style as the rest of Go mode (the locked-$PRIORS hero keeps
   the serif, like Home's "Available to borrow") */
.acct .se-figs b { font: 600 18px/1.2 var(--sans); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.acct .se-r-fee b { font: 600 14.5px/1.1 var(--sans); }
.acct .se-c-fee b { font: 600 18px/1.1 var(--sans); }
.acct .pt-kv b { font: 600 16px/1.2 var(--sans); font-variant-numeric: lining-nums tabular-nums; }
/* phones: an odd last tile (Home's shortcuts, the figures) takes the whole row instead of sitting alone in half of it */
@media (max-width: 700px) { #ga-doors > .ga-door.ga-door:last-child:nth-child(odd):not(:only-child), .acct .ac-figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* [xlink] an agent's X link and where it runs (account-xlink.js: the agent panel's chip and its Link its X account
   sheet; account-runtime.js: the x402 tab's Where it runs): only with SITE_XLINK=on (scripts/build-site.mjs) */
.xl-mark { width: 13px; height: 13px; flex: none; }
.xchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 10px; border: 1px solid var(--rule); border-radius: 0; background: var(--card); color: var(--ink); font: 500 12.5px/1 var(--sans); text-decoration: none; }
.xchip:hover, .xchip:focus-visible { border-color: var(--ink-2); }
.xchip .xchip-h { font-weight: 600; }
.xchip .xchip-l { color: var(--muted); }
.xchip .xchip-l::before { content: "·"; margin-right: 6px; }
#ap-xl:empty { display: none; }
.xl-line { margin: 12px 0 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
#ap-xls:not([hidden]) { margin: 12px 0 4px; }
.xl-sheet { display: grid; gap: 14px; padding: 18px 18px 16px; border: 1px solid var(--rule); border-radius: 0; background: var(--grain), var(--card); box-shadow: inset 0 1px 0 var(--brass-line); }
.xl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xl-head h3 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 22px/1.15 var(--serif); }
.xl-head h3:focus { outline: none; }
.xl-head .xl-mark { width: 17px; height: 17px; }
.xl-lede { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
#xl-nowbox:empty { display: none; }
.xl-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); font: 400 13.5px/1.4 var(--sans); }
.xl-steps { display: grid; gap: 16px; margin: 0; padding: 0 0 0 20px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.xl-steps > li { min-width: 0; padding-left: 2px; }
.xl-steps > li::marker { font: 600 13px var(--sans); color: var(--muted); }
.xl-steps .sub { display: block; margin-top: 6px; font-size: 12.5px; }
.xl-k { display: block; margin-bottom: 7px; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.xl-at { display: flex; align-items: center; max-width: 320px; border: 1px solid var(--card-edge); border-radius: 0; background: var(--field); }
.xl-at:focus-within { border-color: var(--green); box-shadow: none; outline: 2px solid var(--green); outline-offset: 2px; }
.xl-at > span { padding: 0 2px 0 14px; color: var(--muted); font: 500 16px var(--sans); }
.acct .xl-at input:not([type="radio"]):not([type="checkbox"]) { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; padding-left: 4px; }
.xl-post { margin: 0 0 10px; padding: 12px 14px; border-radius: 0; border: 1px solid var(--card-edge); background: var(--card); font: 400 14.5px/1.5 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.xl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.xl-row > input { flex: 1 1 220px; min-width: 0; }
html[data-go-page] .xl-row > input ~ .btn.sm { align-self: stretch; }
.acct .xl-postx { gap: 8px; }
.acct .xl-postx .xl-mark { width: 12px; height: 12px; }
.xl-sheet .wstat { padding: 8px 0 0; }
.xl-note { margin: 0; font-size: 12.5px; line-height: 1.45; }
.xl-note + .xl-note { margin-top: -8px; }
/* the link where the owner looks (account-xlink.js): the chip after an own agent's name on its card and under Home's
   tree, and Link its X account beside View record (the card, the Launchpad's Grow its record) or Link X under the tree */
.xl-spot { display: inline-flex; min-width: 0; max-width: 100%; }
.xl-spot .xchip { min-width: 0; max-width: 100%; }
.xl-spot .xchip-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .xl-open { display: inline-flex; align-items: center; gap: 8px; }
.acct .xl-open .xl-mark { width: 12px; height: 12px; }
.acct .xl-hero-link { gap: 6px; font: 500 13px/1.2 var(--sans); }
/* under the tree the column is narrow (176 px, less on a phone): the handle whole, "linked" left to the chip's label */
.acct .hm-pic > .xl-spot .xchip { gap: 5px; font-size: 12px; padding: 4px 9px 4px 8px; }
.acct .hm-pic > .xl-spot .xchip-l { display: none; }
@media (max-width: 700px) { .acct .hm-pic > .xl-spot .xchip { font-size: 11px; padding: 3px 7px; } .acct .hm-pic > .xl-spot .xl-mark { width: 11px; height: 11px; } }
.ac-runlink { margin-top: 8px; }
@media (max-width: 700px) {
  .xl-sheet { padding: 16px 14px 14px; }
  .xl-head h3 { font-size: 20px; }
}
/* [/xlink] */
/* [line-ask] Ask for a bigger line (account-line-ask.js): its sheet in Go mode's agent panel and in the agent page's Owner
   actions, and the sentence next to its button there: only with SITE_LINE_ASK=on (scripts/build-site.mjs) */
#ap-las:not([hidden]) { margin: 12px 0 4px; }
.la-sheet { display: grid; gap: 14px; padding: 18px 18px 16px; border: 1px solid var(--rule); border-radius: 0; background: var(--grain), var(--card); box-shadow: inset 0 1px 0 var(--brass-line); }
.la-head h3 { margin: 0; font: 500 22px/1.15 var(--serif); }
.la-head h3:focus { outline: none; }
.la-lede { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.la-now { margin: 0; padding: 10px 12px; border: 1px solid var(--card-edge); background: var(--card); font: 500 13.5px/1.45 var(--sans); color: var(--ink); }
.la-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.la-f { min-width: 0; }
.la-k { display: block; margin-bottom: 6px; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.la-in { display: flex; align-items: center; min-width: 0; border: 1px solid var(--card-edge); border-radius: 0; background: var(--field); }
.la-in:focus-within { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 2px; }
.la-in > input:not([type="radio"]):not([type="checkbox"]), .acct .la-in > input:not([type="radio"]):not([type="checkbox"]) { flex: 1; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 0 10px 0 12px; border: 0; box-shadow: none; background: transparent; color: var(--ink); font: 500 16px/1.2 var(--sans); }
.la-in > input:focus { outline: none; }
.la-u { flex: none; padding: 0 12px 0 2px; color: var(--muted); font: 500 13px/1 var(--sans); white-space: nowrap; }
.la-h { margin: 6px 0 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.la-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.la-sheet .wstat { padding: 0; }
.la-sheet .wstat:empty { display: none; }
.la-note { margin: 0; font-size: 12.5px; line-height: 1.45; }
.la-own .la-why { margin: 8px 0 0; }
.la-own .la-why:empty { display: none; }
.la-own #o-ask-go[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.la-own #o-ask-sheet:not([hidden]) { margin-top: 12px; }
@media (max-width: 700px) {
  .la-sheet { padding: 16px 14px 14px; }
  .la-head h3 { font-size: 20px; }
  .la-fields { grid-template-columns: 1fr; }
}
/* [/line-ask] */
/* [answer-line] Answer a line request (line-answer.js): the agent page's request block (agent.html #p-lr), the offers on
   the account's own request in Go mode's agent panel (#ap-lo) with Take this offer, the request's line under a name in
   the Agents tab, and Owner actions' Offer a line with its sheet: only with SITE_ANSWER_LINE=on (scripts/build-site.mjs) */
.lr-panel { margin: 0 0 28px; }
.lr-req { padding: 14px 0 4px; }
.lr-req + .lr-req { border-top: 1px solid var(--rule-2); }
.lr-line { margin: 0; max-width: 62em; font-weight: 500; font-size: 15.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.lr-offers { list-style: none; counter-reset: lr; margin: 6px 0 0; padding: 0; }
.lr-offer { counter-increment: lr; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 3px 12px; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.lr-offer:last-child { border-bottom: 0; }
.lr-offer::before { content: counter(lr); grid-row: 1 / span 4; font: italic 400 20px/1.25 var(--serif); color: var(--brass); }
.lr-offer > * { grid-column: 2; min-width: 0; }
.lr-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.lr-root { font-weight: 500; font-size: 15px; }
.lr-nm { min-width: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.lr-terms { margin: 0; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.lr-desk { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.lr-note { margin: 0; padding: 10px 0 16px; font-size: 13.5px; line-height: 1.45; }
.lr-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.lr-act .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.lr-why { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
#ap-lo:not([hidden]) { display: block; margin: 12px 0 4px; padding: 14px 16px 0; border: 1px solid var(--rule); border-radius: 0; background: var(--grain), var(--card); }
#ap-lo .lr-h { margin: 0 0 4px; font: 500 19px/1.2 var(--serif); }
#ap-lo .lr-lede { margin: 0; font-size: 13.5px; line-height: 1.45; }
#ap-lo .lr-s { padding: 0 0 12px; }
#ap-lo .lr-s:empty { display: none; }
#ap-lo .lr-note { padding-bottom: 14px; }
.lr-own { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 0 16px; }
.lr-own-t { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.lr-own-s:empty { display: none; }
.ex-ask { display: block; font: 500 12.5px/1.4 var(--sans); color: var(--ink-2); white-space: normal; overflow-wrap: anywhere; }
.lo-own .lo-why { margin: 8px 0 0; }
.lo-own .lo-why:empty { display: none; }
.lo-own #o-offer-go[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.lo-own #o-offer-sheet:not([hidden]) { margin-top: 12px; }
.lo-own .wstat:empty { display: none; }
.lo-roots { display: grid; gap: 6px; }
.lo-root { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 6px 12px; border: 1px solid var(--card-edge); border-radius: 0; background: var(--field); color: var(--ink); font: 500 15px/1.3 var(--sans); overflow-wrap: anywhere; cursor: pointer; }
.lo-root:has(input:checked) { border-color: var(--green); }
.lo-root input { flex: none; margin: 0; }
@media (max-width: 640px) { .lr-offer { grid-template-columns: 20px minmax(0, 1fr); gap: 3px 10px; } }
/* [/answer-line] */
/* the sidebar in groups (goapp.js, SITE_NAV2=on): each group's name over its tabs, set apart from the tabs above */
.ga-group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--card-edge); }
.ga-group-h { padding: 0 12px 6px; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; color: var(--brass-ink); } /* the kit's label in brass mono; sentence case: nav2-wiring reads the group names with innerText */
/* Button placement (2026-10-13): one group, one size, one edge, as the Buy $PRIORS sheet has it.
   - a field's helper (Max, Check, Save beside a name) is as tall as its field;
   - a group of actions (.ga-acts) wraps as one: a stock line's Borrow or repay, Add stock, Close line. On a phone a
     line's group takes the row, its buttons sharing it;
   - several loans: Repay all sits on the right edge, under each loan's own Repay; on a phone it takes the row;
   - Lend's and Savings' Lend or Save, Withdraw, Withdraw all are one size and, on a phone, share their line;
   - the deposit sheet's amount and Max stay on one line; the stock banner's two links share a phone's line;
   - the Tools cards' actions line up at the foot of each card */
html[data-go-page] .row > input ~ .btn.sm { align-self: stretch; }
.ga-acts { flex-wrap: wrap; gap: 8px; }
.ac-loans.ac-loans-each > .row { justify-content: flex-end; }
.ga-sheet-grid label .row { flex-wrap: nowrap; }
.ga-sheet-grid label .row > input { flex: 1 1 auto; min-width: 0; }
.acct .tl-card { display: flex; flex-direction: column; }
.acct .tl-card-acts { margin-top: auto; }
@media (max-width: 640px) {
  .acct .as-form .row + .row > .btn { flex: 1 1 0; }
  .ac-loans.ac-loans-each > .row > .btn { flex: 1 1 100%; }
  .ga-row > .ga-acts { flex: 1 1 100%; }
  .ga-row > .ga-acts > .btn { flex: 1 1 0; }
  .ga-row > .ga-acts > .btn.primary { flex-basis: 100%; } /* the line's main move on its own line, the others sharing the next */
  .ga-banner .row { flex: 1 1 100%; }
  .ga-banner .row > .btn { flex: 1 1 0; }
}
/* [money] */
/* the profile (SITE_MONEY=on: account.html #ac-money, account-money.js), opened from the account menu's first row: the
   account's own, or any other address's, read only. A phone first (390 px: the hero card, the agents' record, the
   parts' control stuck under the top bar, about four rows above the tab bar); one column up to 1279 px (the hero in two
   halves from 641 px, Share under the name); two from 1280 px, the hero and the record in a column that stays in view on a tall enough screen.
   The page is the surface here (no card around the tab): the control stuck at the top has the page's own background */
:root { --mn-backing: #7d9fc6; --mn-agents: #b48ccb; --mn-logo-bg: #fff; }
:root[data-theme="dark"] { --mn-backing: #8fb3d9; --mn-agents: #c9a0dc; --mn-logo-bg: #ebe6da; }
/* the account menu's first row (goapp.js): the tree, the name and "View profile", a chevron; the head under it keeps
   only the address (its name is the row's now). The menu scrolls, so Sign out stays reachable on a short screen */
.ga-me .ga-me-menu a.mn-me[data-act] { min-height: 56px; box-sizing: border-box; gap: 12px; padding: 8px 10px; } /* over the touch rule's 44 px */
.ga-me-menu .mn-me > .me-tree { flex: none; width: 36px; height: 36px; border-radius: 0; }
.mn-me-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mn-me-t > b { font: 600 15px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-me-t > span { font: 400 12.5px/1.2 var(--sans); color: var(--muted); }
.ga-me-menu .mn-me > .px-ico:last-child { margin-left: auto; color: var(--muted); }
.ga-me-menu .mn-me[aria-current="page"] { background: none; box-shadow: inset 2px 0 0 var(--green); }
.ga-me-menu .mn-me ~ .ga-me-head b { display: none; }
.ga-me-menu .mn-me + .ga-me-head { padding-top: 4px; }
.ga-me.open .ga-me-menu { min-width: 264px; max-height: calc(100vh - var(--ga-top, 64px) - 16px); max-height: calc(100dvh - var(--ga-top, 64px) - var(--ga-bar-h, 0px) - env(safe-area-inset-bottom) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.ga-me-btn.mn-on { box-shadow: inset 0 0 0 1px var(--green); border-color: var(--green); }
/* another account's address anywhere in the app: a link to its profile (PriorsMoney.link); the explorer's ↗ beside
   the agent panel's Owner. A finger gets room around both (the Show button beside an address keeps its own) */
a.mn-to { position: relative; color: inherit; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
a.mn-to:hover, a.mn-to:focus-visible { color: var(--green); text-decoration-color: currentColor; }
/* All agents' feed: a lender's row takes a second line, so its address (the way to its profile) is never cut off */
.ex-ev .ex-what:has(a.mn-to) { white-space: normal; text-overflow: clip; }
.mn-ex { position: relative; display: inline-block; margin-left: 4px; color: var(--muted); text-decoration: none; }
.mn-ex:hover, .mn-ex:focus-visible { color: var(--green); }
/* All agents' search with a whole address: the row that opens its profile */
.ex-row.mn-find { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ex-row.mn-find .me-tree { flex: none; width: 28px; height: 28px; border-radius: 0; }
.ex-row.mn-find > :last-child { margin-left: auto; color: var(--muted); }
.mn-find-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mn-find-t > b { font: 600 14.5px/1.25 var(--sans); }
.mn-find-t > span { font: 400 12.5px/1.3 var(--mono); color: var(--muted); }

body.goapp .acct .panel.ac-money { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ac-money [hidden] { display: none !important; }
.ac-money .mn-wrap { display: grid; gap: 14px; }
.ac-money :is(.mn-wrap, .mn-side, .mn-hero, .mn-id, .mn-row, .mn-ag, .mn-ev) > * { min-width: 0; }
.ac-money .mn-side { display: grid; gap: 12px; align-content: start; }
.ac-money .mn-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 -4px -8px; padding: 0 12px 0 8px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font: 500 15px/1 var(--sans); cursor: pointer; }
.ac-money .mn-back > span:first-child { font-size: 24px; line-height: 1; margin-top: -3px; }
/* the hero: who it is, the total, the chips, where the money sits */
.ac-money .mn-hero { display: grid; grid-template-areas: "id" "total" "chips" "bar"; gap: 12px; padding: 14px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); }
.ac-money .mn-id { grid-area: id; display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.ac-money .mn-av { width: 56px; height: 56px; border-radius: 0; display: grid; place-items: center; overflow: hidden; background: var(--card); border: 1px solid var(--card-edge); box-sizing: border-box; }
.ac-money .mn-av svg { width: 44px; height: 44px; }
.ac-money .mn-who { display: flex; flex-direction: column; gap: 4px; }
.ac-money .mn-nl { display: flex; align-items: center; min-width: 0; }
.ac-money #mn-name { min-width: 0; margin: 0; font: 600 17px/1.25 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* another account's address, shown whole once asked (Show): it wraps rather than run off the card */
.ac-money #mn-name.mn-mono { font: 500 17px/1.25 var(--mono); white-space: normal; overflow-wrap: anywhere; }
.ac-money .mn-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
/* Explorer's pixel arrow: its blank first column taken back, so the address and Explorer keep one line on a phone */
.ac-money .mn-x .arr { margin-left: -2px; }
.ac-money .mn-addr code { font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.ac-money :is(.mn-addr, .mn-nl) .addr-tog { flex: none; font-size: 12px; }
.ac-money .mn-x { position: relative; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ac-money .mn-x:hover, .ac-money .mn-x:focus-visible { color: var(--green); }
.ac-money .mn-share { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 1px solid var(--rule); border-radius: 0; background: var(--card); color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; }
.ac-money .mn-share-l { display: none; }
.ac-money .mn-total { grid-area: total; display: flex; flex-direction: column; gap: 2px; }
.ac-money .mn-total > .label { font: 400 12px/1.3 var(--sans); color: var(--muted); }
.ac-money .mn-total > b { font: 500 34px/1.1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.ac-money .mn-priors { font: 500 14px/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* the chips on one line, sliding sideways when they don't fit (a phone), never wrapping inside */
.ac-money .mn-chips { grid-area: chips; display: flex; gap: 8px; margin: 0 -14px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.ac-money .mn-chips::-webkit-scrollbar { display: none; }
.ac-money .mn-chips:not(:has(> .mn-chip:not([hidden]))) { display: none; }
.ac-money .mn-chip { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 0; background: var(--card); border: 1px solid var(--rule); font: 400 13px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
.ac-money .mn-chip b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ac-money .mn-chip.owe b { color: var(--red); }
.ac-money .mn-bar { grid-area: bar; display: flex; gap: 2px; height: 6px; border-radius: 0; overflow: hidden; background: var(--card); }
.ac-money .mn-bar i { display: block; min-width: 4px; }
/* the agents' record (public, like All agents: Hide balances leaves it): a strip under the hero, a card of its own
   beside the parts from 1280 px. Each figure whole, never cut: a cell is at least as wide as its figure (its label
   wraps under it), and when a figure is too wide for a phone's row ($258,213 at 320 px), the last cells take a second line */
.ac-money .mn-rec { display: grid; gap: 6px; padding: 2px 2px 0; }
.ac-money .mn-rec-h { font: 400 12px/1.3 var(--sans); color: var(--muted); }
.ac-money .mn-rec dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ac-money .mn-rec dl > div { flex: 1 1 0; min-width: min-content; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.ac-money .mn-rec dt { font: 400 12px/1.25 var(--sans); color: var(--muted); }
.ac-money .mn-rec dd { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-money .mn-rec .bad dd { color: var(--red); }
.ac-money .mn-ro { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
/* the parts' control: tabs with a green rule under the one open, stuck under the top bar while the part scrolls */
.ac-money .mn-seg { position: sticky; top: var(--ga-top, 64px); z-index: 5; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 0 14px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.ac-money .mn-seg button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 8px; border: 0; background: none; color: var(--ink-2); font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; } /* 12 px: the profile's phone floor */
.ac-money .mn-seg button[aria-selected="true"] { color: var(--ink); }
.ac-money .mn-seg button[aria-selected="true"]::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -1px; height: 2px; border-radius: 0; background: var(--green); }
.ac-money .mn-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; border-radius: 0; }
.ac-money .mn-n { font: 500 12.5px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.ac-money .mn-cap { margin: 0 0 12px; font: 400 13px/1.45 var(--sans); color: var(--muted); }
/* the reads' status (Loading…, a part that couldn't be read): under the control, over whichever part is open. Empty,
   it is collapsed, never display: none, so a screen reader keeps the live region and says what comes into it */
.ac-money #mn-s { margin: -4px 0 10px; padding: 0; font-size: 13.5px; }
.ac-money #mn-s:empty { margin: 0; min-height: 0; }
/* Holdings: each group under its colour, its name and its part of the total */
.ac-money .mn-group, .ac-money .mn-owes { margin: 0 0 16px; }
.ac-money .mn-group h3, .ac-money .mn-owes h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 2px; font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ac-money .mn-dot { flex: none; width: 6px; height: 6px; border-radius: 0; }
.ac-money .mn-pct { margin-left: auto; font: 600 12px/1.2 var(--sans); letter-spacing: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ac-money :is(.mn-group, .mn-owes) ul, .ac-money .mn-agents, .ac-money .mn-feed { margin: 0; padding: 0; list-style: none; border: 1px solid var(--card-edge); border-radius: 0; overflow: hidden; background: var(--card); }
.ac-money :is(.mn-group, .mn-owes) li + li, .ac-money :is(.mn-agents, .mn-feed) > li + li { border-top: 1px solid var(--card-edge); }
.ac-money .mn-feed:empty { display: none; }
.ac-money .mn-row, .ac-money .mn-ag { display: grid; grid-template-columns: 36px minmax(0, 1fr) fit-content(46%); align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 10px 14px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ac-money .mn-row.mn-go, .ac-money .mn-ag { grid-template-columns: 36px minmax(0, 1fr) fit-content(46%) 12px; }
.ac-money .mn-ag { min-height: 64px; }
.ac-money .mn-chev { display: grid; place-items: center; color: var(--muted); }
.ac-money .mn-ic { width: 36px; height: 36px; border-radius: 0; display: grid; place-items: center; overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-2); }
.ac-money .mn-ic.logo { background: var(--mn-logo-bg); }
.ac-money .mn-ic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a stock logo whole, never cropped; one drawn in white on a dark tile (account-money.js) */
.ac-money .mn-ic.logo img { object-fit: contain; padding: 4px; box-sizing: border-box; }
.ac-money .mn-ic.logo.dk { background: #1b1a16; }
.ac-money .mn-nm { display: flex; flex-direction: column; gap: 2px; }
.ac-money .mn-nm > b { font: 600 14.5px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-money .mn-nm > .sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ac-money .mn-v { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.ac-money .mn-v > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-money .mn-v > b { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.ac-money .mn-v > .sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.ac-money .mn-row.up .mn-v > b { color: var(--green); }
.ac-money .mn-owes .mn-v > b { color: var(--red); }
.ac-money :is(a.mn-row, a.mn-ag):active { background: color-mix(in srgb, var(--ink) 6%, var(--card)); }
@media (hover: hover) { .ac-money :is(a.mn-row, a.mn-ag):hover { background: var(--card-2); } }
.ac-money :is(a.mn-row, a.mn-ag):focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.ac-money .mn-empty { margin: 0 0 16px; padding: 16px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--card); color: var(--muted); font: 400 14px/1.45 var(--sans); }
.ac-money .mn-agents > .mn-empty { margin: 0; border: 0; border-radius: 0; }
.ac-money .mn-foot { margin: 4px 0 8px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.ac-money .mn-foot > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--ink-2); font-weight: 500; list-style: none; cursor: pointer; }
.ac-money .mn-foot > summary::-webkit-details-marker { display: none; }
.ac-money .mn-foot > summary::before { content: ""; width: 14px; height: 14px; margin: 0; background: currentColor; -webkit-mask: var(--g-caret) center / 14px 14px no-repeat; mask: var(--g-caret) center / 14px 14px no-repeat; transform: rotate(-90deg); }
.ac-money .mn-foot[open] > summary::before { transform: none; }
.ac-money .mn-foot > p { margin: 4px 0 0; max-width: 62ch; }
/* Activity: what the address did, newest first */
.ac-money .mn-filters { display: flex; gap: 8px; margin: 0 0 12px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.ac-money .mn-filters::-webkit-scrollbar { display: none; }
.ac-money .mn-filters button { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 0; background: var(--card); color: var(--ink-2); font: 500 14px/1.2 var(--sans); white-space: nowrap; cursor: pointer; }
.ac-money .mn-filters button[aria-pressed="true"] { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ac-money .mn-act-s { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; font: 400 14px/1.45 var(--sans); color: var(--muted); }
.ac-money .mn-act-s:empty { margin: 0; } /* collapsed, not hidden: a live region, like the reads' status */
.ac-money .mn-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; box-sizing: border-box; padding: 10px 14px; }
.ac-money .mn-ev-ic { width: 28px; height: 28px; border-radius: 0; display: grid; place-items: center; background: none; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--muted); }
.ac-money .mn-ev.up .mn-ev-ic { color: var(--green); }
.ac-money .mn-ev.down .mn-ev-ic { color: var(--red); }
.ac-money .mn-ev-t { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ac-money .mn-ev-w { max-width: 100%; font: 400 14px/1.35 var(--sans); color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ac-money .mn-ev-when { position: relative; font: 400 12.5px/1.3 var(--sans); color: var(--muted); text-decoration: none; }
.ac-money a.mn-ev-when:hover, .ac-money a.mn-ev-when:focus-visible { color: var(--green); }
.ac-money .mn-ev-a { font: 600 14.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-money .mn-ev.up .mn-ev-a { color: var(--green); }
.ac-money .mn-ev.down .mn-ev-a { color: var(--red); }
.ac-money .mn-more { display: flex; width: 100%; min-height: 44px; margin: 12px 0 0; }
.ac-money .mn-hist { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--green); font: 500 14px/1.2 var(--sans); text-underline-offset: 3px; }
.ac-money .mn-cover { margin: 8px 0 0; max-width: 62ch; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
/* Agents: the agents it owns now */
.ac-money .mn-ag .mn-nm > b { display: flex; align-items: baseline; gap: 6px; }
.ac-money .mn-agn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-money .mn-agid { flex: none; font: 400 12.5px/1.25 var(--mono); color: var(--muted); }
.ac-money .mn-nm > .mn-due { color: var(--red); }
.ac-money .mn-ag .ga-chip { justify-self: end; font-size: 12px; } /* no text under 12 px */
/* a control in a part brought into view by the keyboard (Tab, Shift+Tab) stops clear of the top bar and the parts'
   control stuck under it, and of a phone's tab bar */
.ac-money .mn-pane :is(a, button, summary, [tabindex]) { scroll-margin-top: calc(var(--ga-top, 64px) + 56px); scroll-margin-bottom: calc(var(--ga-bar-h, 0px) + env(safe-area-inset-bottom) + 12px); }
/* Hide balances: the figures (.money), and the bar and the groups' shares, which tell the sizes as well */
html[data-hide-balances] .ac-money :is(.mn-bar, .mn-pct) { filter: blur(7px); user-select: none; }
/* 641 to 1279 px: one column, the hero in two halves (who it is with Share under the name, and the chips; the total),
   the bar under both. Share is a row of the left half, as from 1280 px, so it never covers the total's label and the
   name keeps the half's width (a short address on one line) */
@media (min-width: 641px) and (max-width: 1279px) {
  .ac-money .mn-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "id total" "chips total" "bar bar"; column-gap: 28px; padding: 18px 20px; }
  .ac-money .mn-id { grid-template-columns: 56px minmax(0, 1fr); row-gap: 8px; }
  .ac-money .mn-av { grid-row: span 2; align-self: start; }
  .ac-money .mn-share { grid-column: 2; justify-self: start; width: auto; height: 36px; padding: 0 14px 0 12px; }
  .ac-money .mn-share-l { display: inline; }
  .ac-money .mn-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ac-money .mn-total { align-self: end; align-items: flex-end; text-align: right; }
  .ac-money .mn-total > b { font-size: 42px; }
  .ac-money .mn-bar { height: 8px; }
}
/* 861 px and wider: the control and the rows have the room of a desktop */
@media (min-width: 861px) { .ac-money .mn-seg { margin-bottom: 16px; } }
/* 1280 px and wider: two columns, the hero and the record at the left */
@media (min-width: 1280px) {
  .ac-money .mn-wrap { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
  .ac-money .mn-side { gap: 14px; }
  .ac-money .mn-hero { gap: 16px; padding: 20px; }
  .ac-money .mn-id { grid-template-columns: 72px minmax(0, 1fr); row-gap: 10px; }
  .ac-money .mn-av { grid-row: span 2; align-self: start; width: 72px; height: 72px; border-radius: 0; }
  .ac-money .mn-av svg { width: 58px; height: 58px; }
  .ac-money #mn-name { font: 500 22px/1.2 var(--serif); }
  .ac-money #mn-name.mn-mono { font: 500 18px/1.25 var(--mono); }
  .ac-money .mn-share { grid-column: 2; justify-self: start; width: auto; height: 36px; padding: 0 14px 0 12px; }
  .ac-money .mn-share-l { display: inline; }
  .ac-money .mn-total > b { font-size: 48px; }
  .ac-money .mn-priors { font-size: 15px; }
  .ac-money .mn-chips { flex-direction: column; align-items: flex-start; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ac-money .mn-bar { height: 8px; }
  .ac-money .mn-rec { gap: 8px; padding: 14px 16px; border-radius: 0; background: var(--card); border: 1px solid var(--card-edge); }
  .ac-money .mn-rec dl { gap: 14px 12px; }
  .ac-money .mn-rec dl > div { flex-basis: 40%; } /* two to a row */
  .ac-money .mn-seg button { min-height: 44px; }
}
@media (min-width: 1280px) and (min-height: 760px) { .ac-money .mn-side { position: sticky; top: calc(var(--ga-top, 64px) + 16px); } }
/* a phone (640 px or less): the control from edge to edge, the rows a little tighter */
@media (max-width: 860px) { .ac-money .mn-seg { margin-inline: -16px; padding-inline: 4px; } }
@media (max-width: 640px) {
  .ac-money .mn-row, .ac-money .mn-ag { grid-template-columns: 32px minmax(0, 1fr) fit-content(46%); gap: 10px; padding: 10px 12px; }
  .ac-money .mn-row.mn-go, .ac-money .mn-ag { grid-template-columns: 32px minmax(0, 1fr) fit-content(46%) 12px; }
  .ac-money .mn-ev { gap: 10px; padding: 10px 12px; }
  .ac-money .mn-ic { width: 32px; height: 32px; }
}
/* a touch screen: every control at least 44 px each way, or the room around it */
@media (pointer: coarse) {
  .ac-money :is(.mn-filters button, .mn-seg button, .mn-more) { min-height: 44px; }
  .ac-money .mn-foot > summary { min-height: 44px; }
  .ac-money .mn-share { min-height: 44px; } /* the pill with its word from 641 px (36 px to a mouse) */
  /* Explorer, 44 px tall to a finger; where the line wraps (a phone of 375 px or less) it goes 14 px under the address,
     so its room never reaches over the address (which copies on a tap), nor the address's over it */
  .ac-money .mn-line { row-gap: 14px; }
  .ac-money .mn-x::before { content: ""; position: absolute; inset: -14px -6px; }
  /* a row's sentence whole (no two-line cut: its clip took the room around the agent's link), and the link 42 px tall
     to a finger; the time under it, drawn later, keeps its own taps */
  .ac-money .mn-ev-w { display: block; overflow: visible; -webkit-line-clamp: none; line-clamp: none; }
  .ac-money .mn-ev-w .ap-link { position: relative; }
  .ac-money .mn-ev-w .ap-link::after { content: ""; position: absolute; inset: -12px -4px; }
  /* a row's time: room to the sides and below (to the row's edge) only, so the agent's link in the sentence above keeps
     its own taps */
  .ac-money a.mn-ev-when::before { content: ""; position: absolute; inset: -3px -12px -14px; }
  a.mn-to::before { content: ""; position: absolute; inset: -12px 0; }
  /* the hero's address line: the account's own address (a tap copies it) and Show, each 44 px tall to a finger */
  .ac-money .mn-addr .addr-copy { position: relative; }
  .ac-money .mn-addr .addr-copy::before { content: ""; position: absolute; inset: -14px 0; }
  .ac-money :is(.mn-addr, .mn-nl) .addr-tog::after { inset: -12px -4px; }
  .mn-ex::before { content: ""; position: absolute; inset: -14px -14px -14px 0; } /* none to the left: the Show beside it keeps its taps */
}
@media (prefers-reduced-motion: reduce) { .ac-money *, .mn-me { transition: none !important; animation: none !important; } }
/* [/money] */
/* Go mode's bell (account-notify.js), the kit's square parts with or without Jobs: square, a hairline, no shadow, in the
   right gutter clear of the content column (a phone keeps it in the top bar) */
body.goapp .gn:not(.gn-top) { right: max(8px, env(safe-area-inset-right)); }
body.goapp .gn:not(.gn-top) .gn-bell { width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--rule); box-shadow: none; }
/* [jobs] */
/* Go mode > Jobs (web/account-jobs.js, SITE_JOBS=on): the Jobs tab, right under Tools in the sidebar, and its pane (v3:
   the kinds as tabs, a paged grid of cards, the job in a sheet), in the design kit's parts (2026-10-17): status as a drawn mark and
   its word, glyphs lit in specimen cases, square parts with brass hairlines and corner ticks, paper grain, the pictures
   made for these pages in brass-ticked cases. Tokens only, so the warm dark follows (never black); Garamond for names,
   Schibsted for sentences and buttons, Plex Mono for every count, price, status word and engraved label. The two sheets and their scrim live in the
   page's body (account-jobs.js moves them there, out of any moving ancestor), so their rules name them, not .acct. */
/* Help's Jobs entry: the last child of its data-jobs wrapper, not of Help, so it keeps the rule under it that
   .acct .pt-faq details:last-child takes off Help's own last entry (the value of .pt-faq details) */
.acct .pt-faq #ac-faq-jobs { border-bottom: 1px solid var(--rule-2); }

/* the design kit's tokens for Jobs (design kit section 0, kit.css :root): brass as small text and as a hairline, the
   live leaves lit for a moment, the night inside a specimen case (both themes), the warm scrim, the paper grain and the
   four brass corner ticks. Scoped to the pane and its two sheets; the site's own tokens do the rest */
.jb, .jb-sheet, .jb-fsheet, .jb-scrim {
  --brass-ink: #765c2b; --brass-line: rgba(148, 118, 58, .55); --leaf-lit: #57a07a;
  --case-0: #0c100d; --case-1: #17251d; --case-mint: #9fe0bd; --case-dim: #62736a; --case-lamp: rgba(240, 205, 124, .20); --case-edge: rgba(209, 174, 104, .5);
  --scrim: rgba(52, 38, 20, .30);
  --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");
  --ticks:
    linear-gradient(var(--brass) 0 0) left top / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) left top / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) right top / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) right top / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) left bottom / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) left bottom / 1.25px 8px no-repeat,
    linear-gradient(var(--brass) 0 0) right bottom / 8px 1.25px no-repeat, linear-gradient(var(--brass) 0 0) right bottom / 1.25px 8px no-repeat;
  /* the kit's 7 x 7 caret as a mask: drawn in the text's colour (currentColor), at 14 px */
  --caret-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges' fill='%23000'%3E%3Cpath d='M0 2h1v1H0zM6 2h1v1H6zM1 3h1v1H1zM5 3h1v1H5zM2 4h1v1H2zM4 4h1v1H4zM3 5h1v1H3z'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] :is(.jb, .jb-sheet, .jb-fsheet, .jb-scrim) {
  --brass-ink: #d1ae68; --brass-line: rgba(209, 174, 104, .5); --leaf-lit: #c4f0d7;
  --scrim: rgba(12, 9, 4, .5);
  --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");
}
/* the surface the pane sits on: the page's paper. In Go mode the Jobs section steps back (no card fill, edge or
   shadow; its padding stays, as other tabs' panels have it) */
.jb { --jb-bg: var(--paper); }
body.goapp .acct .panel.ac-jobs { background: transparent; border-color: transparent; box-shadow: none; }
.acct .ac-jobs > .jb { position: relative; display: block; }

/* the drawn marks: glyphs in currentColor, whole cells only */
:is(.jb, .jb-sheet, .jb-fsheet) :is(.jb-px, .jb-px7) { display: block; flex: none; shape-rendering: crispEdges; }
/* a search's match: a brass rule under the words (no tint, no rounded box) */
:is(.jb, .jb-sheet) mark { background: none; color: inherit; text-decoration: underline 2px var(--brass-line); text-underline-offset: 3px; }

/* the status marks: one plant at three ages (design kit 1). The leaves green, the trunk coral, the pot brass; the seed
   in a quiet pot. The live mark's copy of its leaves lights once (jb-glow, below). */
:is(.jb, .jb-sheet, .jb-fsheet) .pm { flex: none; display: inline-block; vertical-align: -3px; shape-rendering: crispEdges; }
:is(.jb, .jb-sheet, .jb-fsheet) .pm .l { fill: var(--green); }
:is(.jb, .jb-sheet, .jb-fsheet) .pm .t { fill: var(--red); }
:is(.jb, .jb-sheet, .jb-fsheet) .pm .p { fill: var(--brass); }
:is(.jb, .jb-sheet, .jb-fsheet) .pm .s { fill: var(--muted); }
:is(.jb, .jb-sheet, .jb-fsheet) .pm-later .p { fill: var(--field-edge); }
:is(.jb, .jb-sheet, .jb-fsheet) .pm-later .s { fill: var(--ink-2); }
:is(.jb, .jb-sheet, .jb-fsheet) .pm-glow { fill: var(--leaf-lit); opacity: 0; }
/* the mark, then the word: no capsule, no tint, no border; the word green for live, ink-2 for next, muted for later */
:is(.jb, .jb-sheet, .jb-fsheet) .jb-st { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); white-space: nowrap; color: var(--ink-2); }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-st.lv { color: var(--green); }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-st.lt { color: var(--muted); }
/* engraved: a label of one to four words, capitals, tracked, brass */
:is(.jb, .jb-sheet, .jb-fsheet) .jb-eng { margin: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
/* the 6 px square: a filter on, a default, something to see */
:is(.jb, .jb-sheet, .jb-fsheet) .jb-sq { display: inline-block; flex: none; width: 6px; height: 6px; background: var(--red); }

/* the specimen case: a square of glasshouse night with the glyph lit inside, a brass hairline edge, the lamp's light
   from its top (both themes; 34, 44 or 64 px) */
:is(.jb, .jb-sheet) .jb-case { --s: 44px; position: relative; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; color: var(--case-mint); background: radial-gradient(90% 60% at 50% 0%, var(--case-lamp), transparent 70%), radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); }
:is(.jb, .jb-sheet) .jb-case.sm { --s: 34px; }
:is(.jb, .jb-sheet) .jb-case.lg { --s: 64px; }

/* buttons: square, a 1 px edge, Schibsted 500. The primary is ink with a brass hairline along its foot; hover brings the
   four brass corner ticks 5 px off it; focus is the site's 2 px green ring. No pill, no gradient, no glow. */
:is(.jb, .jb-sheet, .jb-fsheet) .jb-btn { --h: 42px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); box-sizing: border-box; padding: 0 18px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 500 15px/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
:is(.jb, .jb-sheet, .jb-fsheet) :is(.jb-btn, .jb-ibtn, .jb-xchip)::after { content: ""; position: absolute; inset: -5px; pointer-events: none; background: var(--ticks); opacity: 0; transition: opacity .15s; }
:is(.jb, .jb-sheet, .jb-fsheet) :is(.jb-btn, .jb-ibtn:not(:disabled), .jb-xchip):hover::after { opacity: 1; }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-btn:hover { background: var(--hover); }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--ink), inset 0 -5px 0 var(--brass); }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-btn.primary:hover { background: var(--green); border-color: var(--green); color: var(--paper); box-shadow: inset 0 -4px 0 var(--green), inset 0 -5px 0 var(--brass); }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-btn.quiet { border-color: var(--rule); color: var(--ink-2); }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-btn.quiet:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-btn.sm { --h: 34px; padding: 0 13px; gap: 8px; font-size: 14px; }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-btn.lg { --h: 48px; padding: 0 24px; font-size: 16px; }
/* Copied: the check, the word, in green on the paper, for two seconds */
:is(.jb, .jb-sheet) .jb-btn.jb-done, :is(.jb, .jb-sheet) .jb-btn.jb-done:hover { background: var(--paper); border-color: var(--green); color: var(--green); box-shadow: none; }
:is(.jb, .jb-sheet) .jb-btn.jb-done::after { display: none; }
/* an icon button: a square with a 20 px pixel glyph, always named (aria-label) */
:is(.jb, .jb-sheet, .jb-fsheet) .jb-ibtn { position: relative; width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-ibtn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
:is(.jb, .jb-sheet, .jb-fsheet) .jb-ibtn:disabled { opacity: .4; cursor: default; }
/* a link: green, underlined, a 1 px rule 4 px under the words */
:is(.jb, .jb-sheet) .jb-link { all: unset; cursor: pointer; font: 400 13.5px/1.35 var(--sans); color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:is(.jb, .jb-sheet) .jb-link:hover { color: var(--ink); }
/* a link inside a sentence (a.k): the sentence's size, green (not the account page's .account .k, a figure's label) */
.acct .jb a.k, .jb-sheet a.k { font-size: inherit; color: var(--green); margin: 0; }
/* focus: the site's ring, square */
:is(.jb, .jb-sheet, .jb-fsheet) :is(.jb-btn, .jb-ibtn, .jb-xchip, .jb-chip, .jb-link, .jb-svt, .jb-sib):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* the small arrow on a way forward nudges on hover */
:is(.jb, .jb-sheet) .jb-px7.go { transition: transform .25s var(--ease); }
:is(.jb, .jb-sheet) :is(.jb-btn, .jb-sib):hover .jb-px7.go { transform: translateX(3px); }

/* the agent strip: the agent that pays, on one line; engraved terms over its figures */
.acct .jb-ready { padding: 10px 14px 10px 10px; border: 1px solid var(--rule-2); background: var(--grain), var(--card); }
.acct .jb-ready[hidden] { display: none; }
.acct .jb-ready.jb-none { padding: 0; border: 0; background: none; }
.acct .jb-ready .jb-note { border-radius: 0; border: 1px solid var(--rule-2); background: var(--grain), var(--card); font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.acct .jb-strip { display: flex; align-items: center; gap: 18px; min-width: 0; }
.acct .jb-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* the agent's own mark in a case of night: its tree, or its letter lit */
.acct .jb-av { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex: none; overflow: hidden; color: var(--case-mint); font: 500 20px/1 var(--serif); background: radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); }
.acct .jb-av img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; }
.acct .jb-av.has-tree b { visibility: hidden; }
.acct .jb-payer { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct .jb-payer :is(label, .jb-pl) { font: 500 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.acct .jb-payer .jb-one { font: 600 14.5px/1.25 var(--sans); color: var(--ink); white-space: nowrap; }
.acct .jb-sel { position: relative; display: inline-flex; align-items: center; max-width: 100%; color: var(--ink-2); }
.acct .jb-sel:not(:has(.ks))::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; background: currentColor; -webkit-mask: var(--caret-m) center / 14px 14px no-repeat; mask: var(--caret-m) center / 14px 14px no-repeat; }
.acct .jb-payer select#jb-agent { font: 600 14.5px/1.2 var(--sans); color: var(--ink); background: transparent; border: 0; border-radius: 0; padding: 0 20px 0 0; margin: 0; box-shadow: none; appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 230px; text-overflow: ellipsis; width: auto; field-sizing: content; }
.acct .jb-payer select#jb-agent:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Pays from as the site's dropdown (web/kit-select.js, its bare kind: the words and the caret, no box): the agent's
   name in ink, as the strip's other figures */
.acct .jb-payer .ks { max-width: 100%; }
.acct .jb-payer .ks > .ks-btn { font: 600 14.5px/1.2 var(--sans); color: var(--ink); max-width: 230px; }
.acct .jb-afig { display: flex; gap: 24px; margin: 0; padding-left: 18px; border-left: 1px solid var(--rule-2); flex: 1; min-width: 0; }
.acct .jb-afig > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct .jb-afig dt { font: 500 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); white-space: nowrap; }
.acct .jb-afig dd { margin: 0; font: 500 14px/1.35 var(--mono); color: var(--ink); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.acct .jb-afig dd small { font: 400 11px var(--sans); color: var(--muted); }
.acct .jb-afig dd .jb-link { font: 500 13.5px/1.35 var(--sans); }
.acct .jb-afig .jb-api { font: 500 13.5px/1.35 var(--sans); color: var(--green); }
/* can it borrow now: the 6 px square in its tone (green, brass, coral), never a dot */
.acct .jb-can[data-tone]::before { content: ""; flex: none; width: 6px; height: 6px; }
.acct .jb-can[data-tone="ok"]::before { background: var(--green); }
.acct .jb-can[data-tone="wait"]::before { background: var(--brass); }
.acct .jb-can:is([data-tone="stop"], [data-tone="bad"])::before { background: var(--red); }
.acct .jb-can:not([data-tone="ok"]) { font: 500 13.5px/1.35 var(--sans); }
/* a figure still loading: a ruled line where it goes */
.acct .jb-rl { display: inline-block; width: 64px; height: 1px; margin: 8px 0; background: var(--rule); }
.acct .jb-why-not { margin: 8px 0 0 46px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.acct .jb-why-not[hidden] { display: none; }

/* the head: Jobs and its tally, one line, search and sort on the left; on All the job rail picture to its right, in its
   brass-ticked case (a phone: above the search). Without the picture the same words, in the same places. */
.acct .ac-jobs > .jb { container: jb-pane / inline-size; }
.acct .jb-mhead { --pic: 440px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lede" "tools"; align-items: start; gap: 12px 32px; margin: 26px 0 20px; }
.acct .jb-mhead.has-pic { grid-template-columns: minmax(0, 1fr) var(--pic); grid-template-areas: "title pic" "lede pic" "tools pic"; grid-template-rows: auto auto 1fr; }
@container jb-pane (width < 1000px) { .acct .jb-mhead { --pic: 360px; } }
@container jb-pane (width < 820px) { .acct .jb-mhead { --pic: 280px; } }
.acct .jb-title { grid-area: title; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-width: 0; }
.acct .jb-lede { grid-area: lede; margin: 0; max-width: 60ch; font: 400 17px/1.45 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.acct .jb-hpic { grid-area: pic; min-width: 0; }
.acct .jb-hpic[hidden] { display: none; }
.acct .jb-hpic .jb-art img { aspect-ratio: 2 / 1; object-fit: cover; }
.acct .jb-title h3 { margin: 0; font: 400 34px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); outline: none; }
/* arriving at Jobs from a link (account-page.js flash): a brass hairline frame for a moment, square, no glow */
.acct .jb-title h3.ac-flash { animation: none; border-radius: 0; box-shadow: none; outline: 1px solid var(--brass-line); outline-offset: 6px; }
/* a tally: one mono line, its figures in ink, brass dots between the parts */
:is(.jb, .jb-sheet) .jb-tally { margin: 0; display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font: 400 12.5px/1.6 var(--mono); color: var(--muted); }
:is(.jb, .jb-sheet) .jb-tally[hidden] { display: none; }
:is(.jb, .jb-sheet) .jb-tally > .sep { color: var(--brass); }
:is(.jb, .jb-sheet) .jb-tally b { font-weight: 500; color: var(--ink); }
:is(.jb, .jb-sheet) .jb-on { display: inline-flex; align-items: center; gap: 7px; }
.acct .jb-tools { grid-area: tools; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
/* search: a square field, the pixel lens, the "/" key */
.acct .jb-search { position: relative; display: flex; align-items: center; flex: 0 1 330px; min-width: 200px; height: 42px; box-sizing: border-box; border: 1px solid var(--rule); border-radius: 0; background: var(--field); color: var(--muted); padding: 0 8px 0 11px; gap: 9px; }
.acct .jb-search:focus-within { border-color: var(--ink); outline: 2px solid var(--green); outline-offset: 2px; }
.acct .jb-search input[type="search"] { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; outline: none; font: 400 14.5px var(--sans); color: var(--ink); }
.acct .jb-search input[type="search"]:focus { box-shadow: none; }
.acct .jb-search input::placeholder { color: var(--faint); }
.acct .jb-search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .7; }
.acct .jb-search kbd { font: 500 11px/1 var(--mono); color: var(--muted); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 0; padding: 3px 6px; background: var(--card); }
/* the selects: square, the pixel caret (the site's dropdown, web/kit-select.js, draws its own: the wrapper's is for a
   select it has not taken) */
.acct .jb-sort { position: relative; display: flex; align-items: center; gap: 10px; font: 500 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); white-space: nowrap; }
.acct .jb-cadsel { position: relative; display: inline-flex; }
.acct :is(.jb-sort, .jb-cadsel):not(:has(.ks))::after { content: ""; position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; color: var(--ink-2); background: currentColor; -webkit-mask: var(--caret-m) center / 14px 14px no-repeat; mask: var(--caret-m) center / 14px 14px no-repeat; }
.acct .jb .jb-sort select, .acct .jb .jb-cadsel select { height: 42px; box-sizing: border-box; border: 1px solid var(--rule); border-radius: 0; background: var(--field); color: var(--ink); font: 400 14px var(--sans); letter-spacing: 0; text-transform: none; padding: 0 32px 0 12px; appearance: none; -webkit-appearance: none; cursor: pointer; box-shadow: none; }
.acct .jb .jb-sort select:hover, .acct .jb .jb-cadsel select:hover { border-color: var(--ink); }
.acct .jb .jb-sort select:focus-visible, .acct .jb .jb-cadsel select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* (Sort's engraved label sets mono capitals: the dropdown and its list keep the site's words) */
.acct .jb :is(.jb-sort, .jb-cadsel) .ks { letter-spacing: normal; text-transform: none; }
.acct .jb-filterbtn { display: none; }

/* the kind bar: a specimen case over each name (lit when its tab is open, a 2 px ink rule under it), the 6 px green
   square after the name where the kind has a job live now, the count under it; a brass hairline before Services; it
   stays under Go's top bar. All ten fit from 1280 px; narrower, it scrolls a whole tab at a time, its edges fade into
   the paper and the pixel back and arrow (the kit's icon buttons) page through it, so no name is ever cut */
.acct .jb-kinds { position: sticky; top: var(--ga-top, 64px); z-index: 12; background: var(--jb-bg); --grain-bg: var(--jb-bg); margin: 0 -4px; padding: 0 4px; border-bottom: 1px solid var(--rule); }
.acct .jb-kinds::after, .acct .jb-kinds::before { content: ""; position: absolute; top: 0; bottom: 1px; width: 72px; pointer-events: none; opacity: 0; z-index: 1; }
.acct .jb-kinds::before { left: 0; background: linear-gradient(to right, var(--jb-bg) 45%, color-mix(in srgb, var(--jb-bg) 0%, transparent)); }
.acct .jb-kinds::after { right: 0; background: linear-gradient(to left, var(--jb-bg) 45%, color-mix(in srgb, var(--jb-bg) 0%, transparent)); }
.acct .jb-kinds.l::before, .acct .jb-kinds.r::after { opacity: 1; }
.acct .jb-kinds .jb-kgo { position: absolute; z-index: 2; top: 50%; margin-top: -17px; display: none; background: var(--jb-bg); }
.acct .jb-kinds .jb-kgo.l { left: 4px; }
.acct .jb-kinds .jb-kgo.r { right: 4px; }
.acct .jb-kinds.l .jb-kgo.l, .acct .jb-kinds.r .jb-kgo.r { display: inline-grid; }
.acct .jb-kscroll { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.acct .jb-kscroll::-webkit-scrollbar { display: none; }
.acct .jb-k { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 6px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font: 500 13px/1.2 var(--sans); cursor: pointer; scroll-snap-align: start; min-width: 54px; transition: color .15s; }
.acct .jb-k:hover { color: var(--ink); }
.acct .jb-k:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.acct .jb-k::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--ink); opacity: 0; }
.acct .jb-k.on { color: var(--ink); }
.acct .jb-k.on::after { opacity: 1; }
.acct .jb-k .jb-case { color: var(--case-dim); background: radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); }
.acct .jb-k:hover .jb-case { color: color-mix(in srgb, var(--case-mint) 55%, var(--case-dim)); }
.acct .jb-k.on .jb-case { color: var(--case-mint); background: radial-gradient(90% 60% at 50% 0%, var(--case-lamp), transparent 70%), radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); }
.acct .jb-kname { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.acct .jb-ksq { flex: none; width: 6px; height: 6px; background: var(--green); }
.acct .jb-k > small { margin-top: -3px; font: 400 10.5px/1 var(--mono); color: var(--muted); }
.acct .jb-k.on > small { color: var(--ink-2); }
/* a kind with no job here: the case keeps its night, only its glyph dims; the name muted, the 0 faint */
.acct .jb-k.none:not(.on) { color: var(--muted); }
.acct .jb-k.none .jb-case .jb-px { opacity: .45; }
.acct .jb-k.none > small { color: var(--faint); }
.acct .jb-ksep { flex: none; align-self: center; width: 1px; height: 44px; margin: 0 6px; background: var(--brass-line); }

/* the bar: the status strip (engraved choices in one hairline box, the chosen one boxed in ink), how often, the active
   choices as square chips, the prices' date */
.acct .jb-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 16px 0 22px; }
.acct .jb-vhead:not([hidden]) + .jb-bar { margin-top: 22px; }
.acct .jb-bar.off { display: none; }
.acct .jb-status { display: inline-flex; border: 1px solid var(--rule); background: var(--card); }
.acct .jb-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.acct .jb-chip + .jb-chip { border-left: 1px solid var(--rule); }
.acct .jb-chip small { font: 400 11px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.acct .jb-chip:hover { color: var(--ink); background: var(--hover); }
.acct .jb-chip.on { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper); }
/* a choice with no job here: off (the kit's dashed edge, muted), its reason in its name; the arrows pass it */
.acct .jb-chip.off, .acct .jb-chip.off:hover { color: var(--muted); background: none; outline: 1px dashed var(--field-edge); outline-offset: -4px; cursor: not-allowed; }
.acct .jb-chip.off .pm { opacity: .5; }
.acct .jb-chip:focus-visible { outline-offset: 2px; }
.acct .jb .jb-cadsel select { height: 36px; font-size: 13.5px; }
.acct .jb .jb-cadsel .ks > .ks-btn { height: 36px; font-size: 13.5px; }
.acct .jb-xchips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
/* a removable chip: square, a hairline, its word, the pixel cross */
:is(.jb, .jb-fsheet) .jb-xchip { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px 0 4px; border: 1px solid var(--ink); border-radius: 0; background: var(--card); font: 500 13px/1 var(--sans); color: var(--ink); cursor: pointer; }
:is(.jb, .jb-fsheet) .jb-xchip:not(:has(.jb-logo)) { padding-left: 10px; }
:is(.jb, .jb-fsheet) .jb-xchip .jb-px7 { color: var(--muted); }
:is(.jb, .jb-fsheet) .jb-xchip:hover .jb-px7 { color: var(--ink); }
.acct .jb-xchip.ph { display: none; }
.acct .jb-priced { margin: 0 0 0 auto; font: 400 12px var(--mono); color: var(--muted); }

/* the view's picture, in a brass hairline case with its four corner ticks, to the right of its words (a phone: above
   them): the job rail in the page's head on All, a kind's vignette in its head, the robot at the rail in Services'
   head, the seed plate beside an empty All. A picture is never behind words. */
:is(.jb, .jb-sheet) .jb-art { position: relative; display: block; margin: 0; padding: 0; border: 1px solid var(--case-edge); background: var(--case-0); }
:is(.jb, .jb-sheet) .jb-art img { display: block; width: 100%; height: auto; }
:is(.jb, .jb-sheet) .jb-art::after { content: ""; position: absolute; inset: -6px; pointer-events: none; background: var(--ticks); }

/* the view: a section (Live now, Coming next) under a brass hairline with its engraved head; a kind's head; a search's
   line */
.acct .jb-view { position: relative; }
.acct .jb-list[hidden], .acct .jb-svcs[hidden], .acct .jb-open[hidden], .acct .jb-foot[hidden], .acct .jb-loop[hidden], .acct .jb-vhead[hidden] { display: none; }
.acct .jb-vhead { padding-top: 24px; }
.acct :is(.jb-sec, .jb-band) { padding-top: 14px; border-top: 1px solid var(--brass-line); scroll-margin-top: calc(var(--ga-top, 64px) + 90px); }
.acct .jb-band + .jb-sec { margin-top: 36px; }
.acct .jb-view .jb-error { margin-bottom: 26px; }
.acct .jb-sh { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 16px; }
.acct .jb-eh { margin: 0; display: inline-flex; align-items: center; gap: 9px; font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.acct .jb-eh.lv { color: var(--green); }
.acct .jb-eh small { font: 400 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.acct .jb-sh p { margin: 0; color: var(--muted); font: 400 13.5px/1.45 var(--sans); }
/* a kind's head (and Services'): its words to the left, top-aligned with its picture on the right; name, line, tally,
   then the services its jobs pay, named in mono with brass dots (the way to Services) */
.acct .jb-kh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 32px; }
.acct .jb-kh .jb-vig { width: 320px; }
.acct .jb-kh h4 { margin: 0; font: 400 30px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.acct .jb-khtxt { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.acct .jb-kh .jb-kline { margin: 0; color: var(--ink-2); font: 400 17px/1.45 var(--serif); max-width: 56ch; text-wrap: pretty; }
.acct .jb-kh .jb-ai { color: var(--muted); font: 400 13.5px/1.45 var(--sans); }
.acct .jb-ksvc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 2px 0 0; }
.acct .jb-svl { all: unset; cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 400 12.5px/1.6 var(--mono); color: var(--ink); }
.acct .jb-svl > span { text-decoration: underline 1px var(--brass-line); text-underline-offset: 4px; }
.acct .jb-svl > i { font-style: normal; color: var(--brass); }
.acct .jb-svl:hover { color: var(--green); }
.acct .jb-svl:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.acct .jb-why { margin: 0 0 16px; color: var(--muted); font: 400 13.5px/1.45 var(--sans); }
.acct .jb-sh .jb-why { margin: 0; }
.acct .jb-rline { display: flex; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; margin: 0 0 16px; font: 400 13.5px/1.45 var(--sans); color: var(--muted); }
.acct .jb-rline b { font: 500 13px var(--mono); color: var(--ink); }

/* the grid of cards: card paper with grain, a hairline, square; hover frames the card in brass with its four ticks; the
   title is the card's one button and opens the job */
.acct .jb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px; }
.acct .jb-grid-x { margin-top: 14px; }
.acct .jb-c { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 16px 12px; border: 1px solid var(--rule-2); border-radius: 0; background: var(--grain), var(--card); cursor: pointer; transition: border-color .15s; }
.acct .jb-c::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ticks); opacity: 0; transition: opacity .15s; }
.acct .jb-c:hover { border-color: var(--brass-line); }
.acct .jb-c:hover::after { opacity: 1; }
.acct .jb-c:has(.jb-cbtn:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.acct .jb-ctop { display: flex; gap: 14px; align-items: flex-start; }
.acct .jb-chead { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
:is(.jb, .jb-sheet) .jb-cad { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 10px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
:is(.jb, .jb-sheet) .jb-cad > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .jb-c h5 { margin: 0; font: 500 20px/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
.acct .jb-cbtn { all: unset; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acct .jb-cbtn::after { content: ""; position: absolute; inset: 0; }
/* the job's line: up to three lines on a computer (a phone shows it whole) */
.acct .jb-gets { margin: 0; font: 400 14px/1.45 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; text-wrap: pretty; }
.acct .jb-hit { margin: 0; font: 400 12px/1.3 var(--mono); color: var(--muted); }
.acct .jb-cfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule-2); min-height: 32px; box-sizing: border-box; }
:is(.jb, .jb-sheet) .jb-stack { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.acct .jb-price { margin-left: auto; font: 400 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.acct .jb-price b { font: 500 15px/1 var(--mono); color: var(--ink); }
.acct .jb-price small { font-size: 10.5px; }
.acct .jb-plus { margin-left: -2px; font: 400 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
/* the extra card (Hire help for the job) */
.acct .jb-work { cursor: default; }
.acct .jb-work h5 { margin: 6px 0 0; font: 500 20px/1.15 var(--serif); }
.acct .jb-wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
.acct .jb-wlist li { display: flex; justify-content: space-between; gap: 10px; }
.acct .jb-work .jb-btn { align-self: flex-start; }

/* a service's mark: its owner's file as published, inside our frame (a square of card paper, a hairline); Priors' own
   the pixel bonsai and any other service the socket glyph, each in a specimen case (night, a brass edge). Side by
   side, never overlapping; no letter avatars */
:is(.jb, .jb-sheet) .jb-logo { --s: 24px; position: relative; width: var(--s); height: var(--s); flex: none; box-sizing: border-box; border-radius: 0; display: inline-grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--case-mint); }
:is(.jb, .jb-sheet) .jb-logo img { position: absolute; inset: calc(var(--s) / 8); width: calc(100% - var(--s) / 4); height: calc(100% - var(--s) / 4); object-fit: contain; }
:is(.jb, .jb-sheet) .jb-logo > .jb-px { display: none; }
:is(.jb, .jb-sheet) :is(.jb-own, .jb-none, .jb-logo.noimg) { background: radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); }
:is(.jb, .jb-sheet) :is(.jb-none, .jb-logo.noimg) > .jb-px { display: block; }
:is(.jb, .jb-sheet) .jb-logo.noimg img { display: none; }
:is(.jb, .jb-sheet) .jb-tree { display: block; shape-rendering: crispEdges; }
:is(.jb, .jb-sheet) .jb-tree .m { fill: var(--case-mint); }
:is(.jb, .jb-sheet) .jb-tree .c { fill: #e0876d; }
:is(.jb, .jb-sheet) .jb-tree .b { fill: #d1ae68; }

/* How a job works, told with a live job's own figures: a ledger (the step's number, the step, a dotted brass leader,
   the figure; no numbered circles) */
.acct .jb-how { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 16px 14px; border: 1px solid var(--rule-2); background: transparent; }
.acct .jb-how h4 { margin: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
:is(.jb, .jb-sheet) .jb-flow { list-style: none; margin: 0; padding: 0; }
:is(.jb, .jb-sheet) .jb-flow li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; padding: 6px 0; }
:is(.jb, .jb-sheet) .jb-n { flex: none; width: 2ch; font: 400 11px var(--mono); color: var(--brass-ink); }
:is(.jb, .jb-sheet) .jb-flow b { font: 400 14px/1.3 var(--sans); color: var(--ink); white-space: nowrap; }
:is(.jb, .jb-sheet) .jb-flow i { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--brass-line); transform: translateY(-4px); }
:is(.jb, .jb-sheet) .jb-fig { font: 500 13px/1.3 var(--mono); color: var(--ink); white-space: nowrap; text-align: right; }
/* wide (two cells or more of its row): its head, the ledger in two columns, the link under the ledger */
.acct .jb-how.wide { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px 28px; }
.acct .jb-how.wide .jb-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.acct .jb-how.wide > .jb-link { grid-column: 2; justify-self: end; margin-top: 0; }
.acct .jb-how > .jb-link { align-self: flex-start; margin-top: auto; font-size: 13px; }

/* Services: one tile each, with its own mark; a card's paper, hairline and hover ticks */
.acct .jb-svcs { margin-top: 24px; }
.acct .jb-svgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
/* a tile: its marks, then its name and host across the tile's width (whole, never cut), then its foot, level with the
   other tiles' feet */
.acct .jb-svt { all: unset; position: relative; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 16px; border: 1px solid var(--rule-2); background: var(--grain), var(--card); transition: border-color .15s; }
.acct .jb-svt::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ticks); opacity: 0; transition: opacity .15s; }
.acct .jb-svt:hover { border-color: var(--brass-line); }
.acct .jb-svt:hover::after { opacity: 1; }
.acct .jb-svn { min-width: 0; }
.acct .jb-svn b { display: block; font: 500 18px/1.2 var(--serif); color: var(--ink); overflow-wrap: break-word; }
.acct .jb-svn small { display: block; margin-top: 2px; font: 400 11.5px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.acct .jb-svf { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 10px; border-top: 1px solid var(--rule-2); font: 400 12px var(--mono); color: var(--muted); }
.acct .jb-svn-n { white-space: nowrap; }

/* show more, Open jobs, empty, error, footnotes, loading */
.acct .jb-more { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.acct .jb-more span { font: 400 12px var(--mono); color: var(--muted); }
.acct .jb-open { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--brass-line); }
.acct .jb-open h4 { margin: 0 0 6px; font: 400 21px/1.2 var(--serif); color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.acct .jb-open p { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); max-width: 820px; }
/* nothing to show: the words (the kind engraved, one Garamond sentence, one plain line, one way out), the seed plate
   beside them when no other picture is in the view */
.acct .jb-empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px; border: 1px solid var(--rule-2); background: var(--grain), var(--card); }
.acct .jb-empty.art { grid-template-columns: minmax(0, 1fr) 220px; }
.acct .jb-empty h4 { margin: 6px 0 6px; font: 400 23px/1.15 var(--serif); color: var(--ink); }
.acct .jb-empty p:not(.jb-eng) { margin: 0 0 12px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); max-width: 52ch; }
.acct .jb-empty .jb-link { font-size: 14px; }
/* an error: a coral edge and square, what is wrong and what to do, Try again */
.acct .jb-error { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--rule-2); border-left: 2px solid var(--red); background: var(--grain), var(--card); font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.acct .jb-error p { margin: 0; flex: 1; min-width: 220px; }
.acct .jb-error b { font-weight: 500; color: var(--ink); }
.acct .jb-foot { margin: 24px 0 0; font: 400 12.5px/1.5 var(--sans); color: var(--muted); max-width: 760px; }
.acct .jb-foot + .jb-foot { margin-top: 8px; }
/* loading: the sapling grows a row at a time, the words in mono; a card to come is ruled lines and a dashed case */
.acct .jb-loading { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 400 12.5px var(--mono); color: var(--muted); }
.acct .jb-skel { min-height: 168px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--rule-2); background: var(--card); }
.acct .jb-skel .c { width: 44px; height: 44px; box-sizing: border-box; border: 1px dashed var(--brass-line); }
.acct .jb-skel i { display: block; height: 1px; background: var(--rule); width: 85%; }
.acct .jb-skel i:nth-of-type(2) { width: 62%; }
.acct .jb-skel i:last-child { width: 38%; margin-top: auto; }

/* the sheet: paper with grain over the warm scrim, a hairline left edge, square; a brass rule under its top row (the
   kind's lit case and engraved name, the job's name once scrolled, previous, next, close); Copy for my AI at its foot.
   A side sheet on a computer; from the bottom on a phone (below). */
.jb-scrim { position: fixed; inset: 0; z-index: 70; background: var(--scrim); opacity: 0; transition: opacity .25s; }
.jb-scrim.in { opacity: 1; }
.jb-scrim[hidden], .jb-sheet[hidden], .jb-fsheet[hidden] { display: none; }
body.jb-lock { overflow: hidden; }
.jb-sheet { position: fixed; z-index: 71; top: 0; right: 0; bottom: 0; width: min(470px, 100%); box-sizing: border-box; background: var(--grain), var(--paper); color: var(--ink); border-left: 1px solid var(--rule); box-shadow: -24px 0 48px -24px var(--shade); display: flex; flex-direction: column; overflow: hidden; transform: translateX(104%); transition: transform .26s var(--ease); font: 400 15px/1.5 var(--sans); }
.jb-sheet.in { transform: none; }
.jb-sheet:focus, .jb-sheet h2:focus { outline: none; }
:is(.jb-sheet, .jb-fsheet) .jb-grab { display: none; }
.jb-sheet .jb-stop { flex: none; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px 0 22px; border-bottom: 1px solid var(--brass-line); }
.jb-sheet .jb-crumb { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); white-space: nowrap; }
/* the job's name joins the row once its heading scrolls away (the kind's word steps aside for it): whole, on two lines
   at most */
.jb-sheet .jb-minit { flex: 1; min-width: 0; font: 500 15px/1.15 var(--serif); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; opacity: 0; transition: opacity .18s; }
.jb-sheet .jb-stop.t .jb-minit { opacity: 1; }
.jb-sheet .jb-stop.t .jb-crumb > span:last-child { display: none; }
.jb-sheet .jb-pn { display: inline-flex; gap: 6px; margin-left: auto; flex: none; }
.jb-sheet .jb-sin { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 28px; }
.jb-sheet .jb-shead { display: flex; gap: 16px; align-items: flex-start; padding: 0 0 18px; }
.jb-sheet .jb-shtxt { min-width: 0; flex: 1; }
.jb-sheet .jb-shead h2 { margin: 6px 0 8px; font: 400 30px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.jb-sheet .jb-sgets { margin: 0 0 10px; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); }
.jb-sheet .jb-shmeta { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
/* the state line: the mark at 3 px a cell, then the words; a brass hairline over it, nothing tinted */
.jb-sheet .jb-states { display: grid; gap: 10px; margin: 0 0 18px; }
.jb-sheet .jb-states:empty { display: none; }
.jb-sheet .jb-state { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 0; border-top: 1px solid var(--brass-line); border-bottom: 1px solid var(--rule-2); font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.jb-sheet .jb-state .pm { vertical-align: 0; margin-top: -2px; }
.jb-sheet .jb-state > span { text-wrap: pretty; }
.jb-sheet .jb-state b { font-weight: 500; color: var(--ink); }
.jb-sheet .jb-sline { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.jb-sheet .jb-sline.warn { color: var(--red); }
/* the figures: engraved terms, mono figures, hairlines between (no box) */
.jb-sheet .jb-figs { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--rule-2); }
.jb-sheet .jb-figs > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 11px 0; border-bottom: 1px solid var(--rule-2); }
.jb-sheet .jb-figs > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule-2); }
.jb-sheet .jb-figs dt { font: 500 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.jb-sheet .jb-figs dt label { font: inherit; color: inherit; letter-spacing: inherit; }
.jb-sheet .jb-figs dd { margin: 0; font: 500 18px/1.25 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.jb-sheet .jb-figs dd small { font: 400 12px var(--sans); color: var(--muted); }
.jb-sheet .jb-figs dd.sub { font: 400 12px/1.45 var(--sans); color: var(--muted); }
.jb-sheet .jb-figs dd .neg { color: var(--red); }
.jb-sheet .jb-figs dd .warn { display: block; color: var(--red); }
.jb-sheet .jb-figs .jb-link { font-size: 12.5px; }
.jb-sheet .jb-pricein { display: inline-flex; align-items: baseline; gap: 6px; }
.jb-sheet .jb-pricein input { width: 92px; height: 34px; box-sizing: border-box; margin: 0; border: 1px solid var(--field-edge); border-radius: 0; background: var(--field); color: var(--ink); font: 500 16px var(--mono); padding: 0 8px; box-shadow: none; }
.jb-sheet .jb-pricein input:focus { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--ink); box-shadow: none; }
.jb-sheet .jb-score { margin: 12px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.jb-sheet .jb-score[hidden] { display: none; }
.jb-sheet .jb-ss { margin-top: 26px; }
.jb-sheet .jb-ss h5 { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.jb-sheet .jb-ss h5 small { font: 400 11px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.jb-sheet .jb-ss > p { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.jb-sheet .jb-ss[data-part="paid"] > * + * { margin-top: 10px; }
.jb-sheet .jb-ss[data-part="paid"] > .jb-small + .jb-small { margin-top: 6px; }
/* How it runs: the ledger, what each step means under it */
.jb-sheet .jb-runs .jb-flow li { padding: 9px 0; border-bottom: 1px solid var(--rule-2); }
.jb-sheet .jb-runs .jb-flow li:first-child { border-top: 1px solid var(--rule-2); }
.jb-sheet .jb-runs .jb-flow b { font-size: 14.5px; font-weight: 500; }
.jb-sheet .jb-runs .jb-fig { font-size: 13.5px; }
.jb-sheet .jb-p { flex: 0 0 100%; box-sizing: border-box; padding: 3px 0 0 calc(2ch + 8px); font: 400 13px/1.45 var(--sans); color: var(--muted); }
.jb-sheet .jb-uses { list-style: none; margin: 0; padding: 0; }
.jb-sheet .jb-uses li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.jb-sheet .jb-uses li:first-child { border-top: 1px solid var(--rule-2); }
.jb-sheet .jb-ul { min-width: 0; display: flex; flex-direction: column; }
.jb-sheet .jb-ul b { font: 500 14.5px/1.35 var(--sans); color: var(--ink); }
.jb-sheet .jb-ul small { font: 400 11.5px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.jb-sheet .jb-up { font: 500 13px var(--mono); white-space: nowrap; text-align: right; color: var(--ink); }
.jb-sheet .jb-up small { font: 400 11px var(--sans); color: var(--muted); }
.jb-sheet .jb-us { font: 400 12.5px var(--mono); color: var(--muted); min-width: 44px; text-align: right; }
.jb-sheet .jb-free { color: var(--green); }
.jb-sheet .jb-total { display: flex; justify-content: space-between; margin: 0; padding: 12px 0 10px; font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.jb-sheet .jb-total b { font: 500 15px var(--mono); color: var(--ink); }
.jb-sheet .jb-small { margin: 0; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.jb-sheet .jb-ss > p.jb-small { font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.jb-sheet .jb-total + .jb-small { margin-top: 2px; }
.jb-sheet .jb-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.jb-sheet .jb-facts > div { display: flex; align-items: baseline; gap: 8px; }
.jb-sheet .jb-facts dt { font: 500 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.jb-sheet .jb-facts dd { margin: 0; font: 500 14px/1.35 var(--mono); color: var(--ink); }
.jb-sheet .jb-facts dd small { font: 400 11.5px var(--sans); color: var(--muted); }
.jb-sheet .jb-why > summary { cursor: pointer; padding: 4px 0; font: 500 14px/1.3 var(--sans); color: var(--ink); display: flex; align-items: center; min-height: 32px; }
.jb-sheet .jb-why > .jb-small { margin-top: 6px; }
.jb-sheet .jb-why ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 4px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.jb-sheet .jb-why ul + .jb-small { margin-top: 8px; }
/* the disclosures (What your AI gets, Details for developers, When it counts): no browser marker; the pixel caret after
   the words, turned over when open */
:is(.jb, .jb-sheet) :is(.jb-det, .jb-why) > summary { list-style: none; gap: 8px; }
:is(.jb, .jb-sheet) :is(.jb-det, .jb-why) > summary::-webkit-details-marker { display: none; }
:is(.jb, .jb-sheet) :is(.jb-det, .jb-why) > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--caret-m) center / 14px 14px no-repeat; mask: var(--caret-m) center / 14px 14px no-repeat; }
:is(.jb, .jb-sheet) :is(.jb-det, .jb-why)[open] > summary::after { transform: scaleY(-1); }
:is(.jb, .jb-sheet) .jb-det { margin-top: 18px; border-top: 1px solid var(--rule-2); padding-top: 12px; }
:is(.jb, .jb-sheet) .jb-det[hidden] { display: none; }
:is(.jb, .jb-sheet) .jb-det + .jb-det { margin-top: 0; }
:is(.jb, .jb-sheet) .jb-det summary { cursor: pointer; font: 500 14px var(--sans); color: var(--ink-2); min-height: 32px; display: flex; align-items: center; }
:is(.jb, .jb-sheet) :is(.jb-det, .jb-why) > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
:is(.jb, .jb-sheet) .jb-det pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 var(--mono); max-height: 240px; overflow: auto; margin: 8px 0 0; background: var(--card); padding: 12px; border: 1px solid var(--rule-2); border-radius: 0; color: var(--ink-2); }
.jb-sheet .jb-devs ul { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule-2); }
.jb-sheet .jb-devs li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--rule-2); font: 400 12px/1.45 var(--sans); color: var(--muted); }
.jb-sheet .jb-devs code { font: 12px/1.45 var(--mono); color: var(--ink-2); word-break: break-all; }
.jb-sheet .jb-addr { font-family: var(--mono); }
/* More of its kind: three rows, each its case, its name, its status and price, the pixel arrow */
.jb-sheet .jb-sibs { display: grid; gap: 8px; }
.jb-sheet .jb-sib { all: unset; position: relative; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rule-2); background: var(--grain), var(--card); color: var(--muted); transition: border-color .15s; }
.jb-sheet .jb-sib::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ticks); opacity: 0; transition: opacity .15s; }
.jb-sheet .jb-sib:hover { border-color: var(--brass-line); color: var(--ink); }
.jb-sheet .jb-sib:hover::after { opacity: 1; }
.jb-sheet .jb-sib > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.jb-sheet .jb-sib b { font: 500 16.5px/1.2 var(--serif); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-sheet .jb-sib small { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font: 400 11.5px var(--mono); color: var(--muted); }
.jb-sheet .jb-sib .jb-st { font-size: 11.5px; }
/* the foot: the job's cost on two mono lines, then the one Copy for my AI */
.jb-sheet .jb-sfoot { flex: none; padding: 14px 22px 16px; border-top: 1px solid var(--rule); background: var(--grain), var(--paper); }
.jb-sheet .jb-sfrow { display: flex; align-items: center; gap: 14px; }
.jb-sheet .jb-sfsum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.jb-sheet .jb-sfsum .sep { display: none; }
.jb-sheet .jb-sfsum b { font: 500 15px var(--mono); color: var(--ink); }
.jb-sheet .jb-nopay { font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
/* Copied: the note under the foot's row of figures, a green square before it (no tinted box) */
:is(.jb, .jb-sheet) .jb-copied { display: flex; gap: 9px; align-items: baseline; margin: 0 0 12px; font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
:is(.jb, .jb-sheet) .jb-copied::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--green); transform: translateY(-2px); }
:is(.jb, .jb-sheet) .jb-copied b { font-weight: 500; color: var(--ink); }
:is(.jb, .jb-sheet) .jb-copied[hidden] { display: none; }

/* a phone: Show, How often and Sort, in one small sheet from the bottom, square, a brass grab bar; its button says how
   many jobs it shows. One choice a group (radios, their dots hidden): Show as the kit's engraved choices in one
   hairline box with their counts, the chosen one boxed in ink; How often and Sort as rows, the chosen one with the
   green square before its word and an ink edge (the kit's chip that is on). Each engraved head has room above it. */
.jb-fsheet { position: fixed; z-index: 72; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh; background: var(--grain), var(--paper); color: var(--ink); border-top: 1px solid var(--rule); border-radius: 0; box-shadow: 0 -20px 40px -20px var(--shade); transform: translateY(104%); transition: transform .22s var(--ease); font: 400 15px/1.5 var(--sans); }
.jb-fsheet.in { transform: none; }
.jb-fsheet:focus { outline: none; }
.jb-fsheet .jb-fin { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
.jb-fsheet .jb-fg { margin: 0; padding: 0; border: 0; min-width: 0; }
.jb-fsheet .jb-fg + .jb-fg { margin-top: 24px; }
.jb-fsheet .jb-fg legend { margin: 0 0 10px; padding: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.jb-fsheet .jb-fg:first-child { margin-top: 14px; }
.jb-fsheet .jb-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; cursor: pointer; }
/* the radio itself, see-through, over its whole row: a tap anywhere on the row picks it */
.jb-fsheet .jb-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.jb-fsheet .jb-opt:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; z-index: 1; }
.jb-fsheet .jb-opt span { display: inline-flex; align-items: center; gap: 8px; }
.jb-fsheet .jb-opt small { margin-left: auto; font: 400 12.5px var(--mono); color: var(--muted); }
.jb-fsheet .jb-fg:not(.seg) .jb-fo { display: grid; gap: 6px; }
.jb-fsheet .jb-fg:not(.seg) .jb-opt { padding: 0 14px; border: 1px solid var(--rule-2); background: var(--card); font: 400 16px/1.3 var(--sans); color: var(--ink-2); }
.jb-fsheet .jb-fg:not(.seg) .jb-opt::before { content: ""; flex: none; width: 6px; height: 6px; }
.jb-fsheet .jb-fg:not(.seg) .jb-opt:has(input:checked) { border-color: var(--ink); color: var(--ink); }
.jb-fsheet .jb-fg:not(.seg) .jb-opt:has(input:checked)::before { background: var(--green); }
.jb-fsheet .seg .jb-fo { display: flex; border: 1px solid var(--rule); background: var(--card); }
.jb-fsheet .seg .jb-opt { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 6px; text-align: center; font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.jb-fsheet .seg .jb-opt + .jb-opt { border-left: 1px solid var(--rule); }
.jb-fsheet .seg .jb-opt span { gap: 6px; }
.jb-fsheet .seg .jb-opt small { margin: 0; font: 400 11.5px/1 var(--mono); letter-spacing: .02em; }
.jb-fsheet .seg .jb-opt:has(input:checked) { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.jb-fsheet .jb-ffoot { flex: none; display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.jb-fsheet .jb-ffoot .jb-btn.primary { flex: 1; }

/* motion (opacity only, never with reduced motion or Calm motion; design kit 1 and 3):
   - the live marks' leaves light once and settle (jb-glow, 1.6 s): account-jobs.js sets pm-play the first time the
     jobs show in a page load, and again when a job goes live; never on a timer;
   - the loading sapling grows its canopy a row at a time while the jobs load (the one loop, every 6 s, and only while
     the loader shows; with reduced motion the whole tree stands still). */
@keyframes jb-glow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jb-r2 { 0%, 11.9% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes jb-r1 { 0%, 29.9% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes jb-r0 { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.jb, .jb-sheet, .jb-fsheet) .pm-play .pm-glow { animation: jb-glow 1.6s var(--ease) 1 both; }
  .acct .jb-loading .pm .r2 { animation: jb-r2 6s linear infinite; }
  .acct .jb-loading .pm .r1 { animation: jb-r1 6s linear infinite; }
  .acct .jb-loading .pm .r0 { animation: jb-r0 6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .jb-sheet, .jb-scrim, .jb-fsheet, .jb-sheet .jb-minit, :is(.jb, .jb-sheet, .jb-fsheet) :is(.jb-btn, .jb-btn::after, .jb-ibtn::after, .jb-xchip::after, .jb-px7.go, .jb-c, .jb-c::after, .jb-svt, .jb-svt::after, .jb-sib, .jb-sib::after, .jb-k) { transition: none; } }

/* a narrower desk: the strip drops its last figures, a kind's picture narrows */
@media (max-width: 1100px) { .acct .jb-afig .jb-dk2 { display: none; } .acct .jb-kh .jb-vig { width: 260px; } }
@media (max-width: 960px) { .acct .jb-afig :is(.jb-dk1, .jb-dk2) { display: none; } }

/* a phone (390 px, a 16 px gutter): nothing sideways, every control 44 px tall, inputs at 16 px */
@media (max-width: 640px) {
  .acct .jb-ready { padding: 10px 12px; }
  .acct .jb-strip { flex-wrap: wrap; gap: 8px 14px; }
  .acct .jb-who { flex: 1 1 100%; }
  .acct .jb-payer { flex: 1; align-items: flex-start; }
  .acct .jb-payer select#jb-agent { font-size: 16px; height: 44px; margin: -12px 0 -13px; max-width: 100%; }
  .acct .jb-payer .ks { margin: -12px 0 -13px; }
  .acct .jb-payer .ks > .ks-btn { font-size: 16px; height: 44px; max-width: 100%; }
  .acct .jb-afig { padding-left: 46px; border-left: 0; gap: 22px; }
  .acct .jb-afig dd { font-size: 13.5px; }
  .acct .jb-why-not { margin-left: 0; }
  /* the head: Jobs and its tally, its line, All's picture at 2:1 (180 px at most), then search and Filter */
  .acct .jb-mhead, .acct .jb-mhead.has-pic { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lede" "pic" "tools"; grid-template-rows: none; gap: 10px; margin: 18px 0 10px; }
  .acct .jb-lede { font-size: 16px; }
  .acct .jb-hpic { margin: 6px 0 4px; }
  .acct .jb-hpic .jb-art img { max-height: 180px; }
  .acct .jb-title h3 { font-size: 30px; }
  .acct .jb-mhead .jb-tally { font-size: 12px; gap: 4px 9px; }
  .acct .jb-tools { margin: 0; gap: 8px; flex-wrap: nowrap; }
  .acct .jb-search { width: auto; flex: 1; min-width: 0; height: 46px; }
  .acct .jb-search input[type="search"] { font-size: 16px; }
  .acct .jb-search kbd, .acct .jb-sort { display: none; }
  /* Filter: a square button, the pixel funnel, the green square while a filter or a sort is on */
  .acct .jb-filterbtn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--rule); border-radius: 0; background: var(--field); color: var(--ink); font: 500 15px var(--sans); cursor: pointer; }
  .acct .jb-filterbtn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
  .acct .jb-filterbtn i { width: 6px; height: 6px; background: var(--green); flex: none; }
  .acct .jb-filterbtn i[hidden] { display: none; }
  /* the kind bar: one row, the case beside the name and count */
  .acct .jb-kinds { margin: 0 -16px; padding: 0 10px; }
  .acct .jb-kinds::before, .acct .jb-kinds::after { width: 44px; }
  .acct .jb-kinds .jb-kgo { display: none !important; }
  .acct .jb-kscroll { scroll-snap-type: x proximity; }
  .acct .jb-k { flex: none; flex-direction: row; gap: 9px; min-width: 0; min-height: 50px; padding: 8px 12px 8px 6px; font-size: 14px; }
  .acct .jb-k > small { margin: 0; font-size: 11px; }
  .acct .jb-k::after { left: 6px; right: 8px; }
  .acct .jb-ksep { height: 28px; margin: 0 4px; }
  .acct .jb-bar { margin: 12px 0 0; }
  .acct .jb-bar:not(.has-pill) { display: none; }
  .acct .jb-status, .acct .jb-cadsel, .acct .jb-priced { display: none; }
  .acct .jb-xchip, .acct .jb-xchip.ph { display: inline-flex; height: 44px; }
  .acct .jb-view { padding-top: 16px; }
  .acct .jb-vhead { padding-top: 4px; }
  /* a kind's head stacks: its picture across the column at 2:1, its words under it */
  .acct .jb-kh { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .acct .jb-kh .jb-vig { order: -1; width: 100%; }
  .acct .jb-kh .jb-vig img { aspect-ratio: 2 / 1; object-fit: cover; max-height: 180px; }
  .acct .jb-kh h4 { font-size: 26px; }
  .acct .jb-kh .jb-kline { font-size: 16px; }
  .acct .jb-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .acct .jb-c { padding: 14px 14px 12px; gap: 9px; }
  .acct .jb-c h5 { font-size: 19px; }
  .acct :is(.jb-gets, .jb-cbtn) { display: block; -webkit-line-clamp: none; overflow: visible; min-height: 0; }
  .acct .jb-band + .jb-sec { margin-top: 28px; }
  .acct .jb-btn { min-height: 44px; }
  .acct .jb-how .jb-flow, .acct .jb-how.wide .jb-flow { display: block; }
  .acct .jb-link { min-height: 44px; display: inline-flex; align-items: center; }
  .acct .jb-afig dd .jb-link { min-height: 0; }
  .acct .jb-svgrid { grid-template-columns: minmax(0, 1fr); }
  .acct .jb-empty.art { grid-template-columns: minmax(0, 1fr); }
  .acct .jb-empty.art .jb-art { width: min(220px, 100%); order: -1; }
  /* the sheet comes up from the bottom, square, a brass grab bar; Copy for my AI and the job's cost stay at its foot */
  .jb-sheet { top: auto; left: 0; width: 100%; max-height: 92vh; max-height: 92dvh; border-left: 0; border-top: 1px solid var(--rule); transform: translateY(104%); box-shadow: 0 -24px 48px -24px var(--shade); }
  :is(.jb-sheet, .jb-fsheet) .jb-grab { display: block; width: 24px; height: 3px; background: var(--brass-line); margin: 8px auto 0; flex: none; }
  .jb-sheet .jb-stop { height: 58px; padding: 0 10px 0 16px; gap: 8px; }
  .jb-sheet .jb-crumb > span:last-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .jb-sheet .jb-stop.t .jb-crumb > span:last-child { display: none; }
  .jb-sheet .jb-ibtn { width: 44px; height: 44px; }
  .jb-sheet .jb-sin { padding: 16px 16px 20px; }
  .jb-sheet .jb-shead { gap: 13px; }
  .jb-sheet .jb-shead .jb-case.lg { --s: 64px; }
  .jb-sheet .jb-shead h2 { font-size: 26px; }
  .jb-sheet .jb-figs dd { font-size: 16.5px; }
  .jb-sheet .jb-pricein input { font-size: 16px; height: 44px; width: 84px; }
  .jb-sheet .jb-uses li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .jb-sheet .jb-us { display: none; }
  .jb-sheet :is(.jb-det, .jb-why) > summary { min-height: 44px; display: flex; align-items: center; }
  .jb-sheet .jb-link { min-height: 44px; display: inline-flex; align-items: center; }
  .jb-sheet .jb-sib { min-height: 58px; }
  .jb-sheet .jb-sfoot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .jb-sheet .jb-sfrow { gap: 10px; }
  .jb-sheet .jb-sfoot .jb-btn.lg { padding: 0 16px; }
}
/* Let it pay's jobs setup checkbox (account-connect.js, after the owner's go D2): a line of its own under step 2 */
.acct .tl-jobset { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 0; border: 1px solid var(--rule-2); background: var(--card); cursor: pointer; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.acct .tl-jobset input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.acct .tl-jobset > span { display: grid; gap: 2px; }
.acct .tl-jobset b { color: var(--ink); }
.acct .tl-jobset small { font-size: 13px; color: var(--muted); }
/* a narrow phone (320 px wide: an iPhone SE, or any iPhone with Display Zoom): each word of a label whole in its cell */
@media (max-width: 360px) {
  .acct .jb-afig { padding-left: 0; gap: 16px; }
}
/* a touch screen: the small summaries and links, 44 px tall (launch-shell.css's rule for the Go pages' small summaries
   and chips) */
@media (pointer: coarse) {
  html[data-go-page] :is(.acct .jb, .jb-sheet) :is(.jb-det, .jb-why) > summary { box-sizing: border-box; min-height: 44px; padding-block: 12px; }
  html[data-go-page] :is(.acct .jb, .jb-sheet) .jb-link { min-height: 44px; display: inline-flex; align-items: center; }
  html[data-go-page] .acct .jb-afig dd .jb-link { min-height: 0; }
  :is(.jb, .jb-sheet, .jb-fsheet) :is(.jb-btn, .jb-ibtn) { min-height: 44px; min-width: 44px; }
}
/* [/jobs] */
/* [sellers] */
/* ---- Sellers in Go mode (web/account-sellers.js, SITE_SELLERS=on): a tool or a job under review wears a dashed edge
   and its badge; the opt-in, the tools' own setup, the sellers' jobs, the Sell pane's review and Add a job ---- */
.acct .tl-rv, .acct .jb-sj { border-style: dashed; }
.tl-rv-badge { display: inline-block; margin: 4px 0 0; padding: 1px 8px; font: 600 11px/1.6 var(--mono, ui-monospace, monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border: 1px dashed var(--rule); }
.acct .tl-rv-try { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.acct .tl-rv-try input { width: 18px; height: 18px; margin: 0; }
.acct .tl-rv-setup { grid-column: 1 / -1; }
.acct .tl-rv-setup .sub { margin: 6px 0 0; }
.acct .tl-rv-pre { margin: 4px 0; padding: 10px 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--rule-2); background: var(--card); white-space: pre; }
.acct .jb-sj .jb-chead { display: grid; gap: 4px; }
.acct .jb-sj-calls { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.acct .jb-sj-calls li { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.acct .jb-sj-calls code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .jb-sj-total { margin: 0; font-weight: 600; }
.acct .jb-sj-note { margin: 0; font-size: 13px; color: var(--muted); }
.acct .ax-sl { margin-top: 18px; }
.acct .ax-sl-calls { display: grid; gap: 8px; margin: 10px 0; }
.acct .ax-sl-call { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; gap: 8px; }
@media (pointer: coarse) { .acct .tl-rv-try { min-height: 44px; } }
/* [/sellers] */
/* ---- Buy a stock with USDG (web/account-zap.js, SITE_ZAP=on): the picker, the buy drawer in the agent panel's frame
   (.ap), its result, and the buttons it adds beside the stock lists (Backing, Home's Stocks card, Your money) ---- */
html.zp-lock, html.zp-lock body { overflow: hidden; }
.zp-gone { display: none !important; }
#ac-bk-stocks.zp-on :is(.st-head, .st-row) { grid-template-columns: minmax(0, 1.6fr) minmax(100px, .7fr) minmax(100px, .7fr) 13rem; }
/* French, Spanish and Portuguese say Deposit and Buy {symbol} in more letters: the actions get the room (the same in
   every row, so the columns still line up); anything longer wraps in its cell rather than run over the balance */
@media (min-width: 861px) { #ac-bk-stocks.zp-on:is(:lang(fr), :lang(es), :lang(pt)) :is(.st-head, .st-row) { grid-template-columns: minmax(0, 1.6fr) minmax(100px, .7fr) minmax(100px, .7fr) 15.5rem; } }
#ac-bk-stocks.zp-on .st-acts { flex-wrap: wrap; row-gap: 6px; }
.st-acts .zp-buy { white-space: nowrap; }
.ga-banner .zp-buy { order: -1; }
.acct #as-have .zp-more-btn { margin-left: 6px; padding: 2px 0; border: 0; background: none; color: var(--green); font: 600 13px/1.2 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.acct #as-have .zp-more-btn:hover { color: var(--green-2); }
/* Home's Stocks card: each row, then its "+" */
#hm-stocks.zp-on { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; align-items: stretch; }
#hm-stocks.zp-on > .hm-row + .zp-plus + .hm-row, #hm-stocks.zp-on > .zp-plus + .hm-row + .zp-plus { border-top: 1px solid var(--rule-2); }
/* the row's separator runs on under the + (no rounded end in the middle of the line) */
#hm-stocks.zp-on > .hm-row { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.zp-plus { display: grid; place-items: center; width: 40px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--green); -webkit-tap-highlight-color: transparent; }
.zp-plus > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 0; border: 1px solid var(--green); background: var(--card); font: 500 17px/1 var(--mono); transition: background .15s steps(2), color .15s steps(2); }
.zp-plus:hover > span, .zp-plus:focus-visible > span { background: var(--green); border-color: var(--green); color: var(--paper); }
.zp-plus:focus-visible { outline: none; }
.zp-plus:focus-visible > span { outline: 2px solid var(--green); outline-offset: 2px; }
/* Your money: Buy stocks on USDG, Buy more on a stock token, beside the row */
/* Your money: on a computer one column for the buttons through the whole holdings pane (each list and row a subgrid of
   it), so every value and chevron lines up, with a button or not; on a phone the button goes under its row's name */
/* (by ids and elements only: the profile's own class names belong to its switch's trace) */
@media (min-width: 641px) {
  #mn-p-hold.zp-on:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #mn-p-hold.zp-on > *, #mn-p-hold.zp-on :is(#mn-list > div, #mn-owes) > * { grid-column: 1 / -1; min-width: 0; }
  #mn-p-hold.zp-on :is(#mn-list, #mn-list > div, #mn-owes:not([hidden]), #mn-list > div > ul, #mn-owes-list, #mn-list > div > ul > li, #mn-owes-list > li) { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  #mn-p-hold.zp-on :is(#mn-list > div > ul, #mn-owes-list) > li { align-items: center; }
  #mn-p-hold.zp-on :is(#mn-list > div > ul, #mn-owes-list) > li > :not(.zp-mn) { grid-column: 1; min-width: 0; }
  #mn-p-hold.zp-on li > .zp-mn { grid-column: 2; justify-self: end; margin-right: 12px; }
}
@media (max-width: 640px) { #mn-list li.zp-li > .zp-mn { margin: -4px 12px 12px 54px; } }

/* the drawer */
.zp .ap-top { gap: 8px; }
.zp-back { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink-2); font-size: 0; cursor: pointer; }
.zp-back::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--g-arrow) center / 14px 14px no-repeat; mask: var(--g-arrow) center / 14px 14px no-repeat; transform: scaleX(-1); }
.zp-back:hover { color: var(--ink); border-color: var(--ink); }
.zp-back[hidden] { display: none; }
.zp-lead { margin: 10px 0 0; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
/* the picker */
.zp .zp-q { width: 100%; max-width: none; margin: 18px 0 10px; box-sizing: border-box; }
.zp-list { display: grid; gap: 6px; }
.zp-tok { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "logo nm px" "logo nm own"; align-items: center; column-gap: 12px; row-gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 0; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s steps(2), box-shadow .15s steps(2); }
.zp-tok:hover, .zp-tok:focus-visible { border-color: var(--brass-line); box-shadow: inset 2px 0 0 var(--green); } /* focus keeps the site's 2 px green ring */
.zp-tok > .sk-logo { grid-area: logo; }
.zp-nm { grid-area: nm; display: flex; flex-direction: column; min-width: 0; }
.zp-nm b { font: 600 15px/1.2 var(--sans); }
.zp-nm .sub, .zp-px .sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-px { grid-area: px; display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.zp-px b { font: 500 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.zp-own { grid-area: own; justify-self: end; font: 500 12.5px/1.3 var(--sans); color: var(--green); font-variant-numeric: tabular-nums; }
.zp-own:empty { display: none; }
.zp-none { margin: 12px 0 0; padding: 14px; border: 1px dashed var(--card-edge); border-radius: 0; color: var(--muted); font: 400 14px/1.45 var(--sans); }
.zp-none[hidden] { display: none; }
.zp-thin { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--card-edge); }
.zp-thin p { margin: 0 0 10px; font: 400 13.5px/1.45 var(--sans); color: var(--muted); }
.zp-thin-row { display: flex; flex-wrap: wrap; gap: 8px; }
.acct .zp-thin-row .btn.sm { gap: 8px; padding: 6px 12px 6px 6px; }
.zp-thin-row .sk-logo { width: 22px; height: 22px; }
.zp-thin-row .sk-logo::before { font-size: 9px; }
.zp-thin-row b { font: 600 13px/1 var(--sans); }
.zp-thin-row span:last-child { font-weight: 400; color: var(--muted); }
/* the buy: the token, the reference, the balances */
.zp-head { display: flex; align-items: center; gap: 14px; }
.zp-logo .sk-logo { width: 52px; height: 52px; }
.zp-logo .sk-logo::before { font-size: 15px; }
.zp-id { display: flex; flex-direction: column; min-width: 0; }
.zp-id .ap-t { font-size: 34px; }
.zp-name { font: 400 14px/1.3 var(--sans); color: var(--muted); }
.zp-ref { margin: 14px 0 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.zp-ref:empty { display: none; }
.zp-ref.amber { color: var(--brass-ink, var(--brass)); }
.zp-ref .zp-stale { display: block; margin-top: 4px; color: var(--brass-ink, var(--brass)); }
.zp-buy-s .zp-lead { margin-top: 6px; }
.zp-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0 0; border: 1px solid var(--card-edge); border-radius: 0; overflow: hidden; background: var(--card-edge); }
.zp-figs > div { display: grid; gap: 4px; min-width: 0; padding: 11px 14px; background: var(--card); }
.zp-figs .label { font: 500 12px/1.2 var(--sans); color: var(--muted); }
.zp-figs b { font: 600 15.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* the amount: one big figure, then the chips */
.zp-form { display: grid; gap: 10px; margin-top: 22px; }
.zp-form > .label { font: 600 13px/1.2 var(--sans); color: var(--ink-2); }
.zp-amt-row { position: relative; }
/* the amount: one big figure (ids: over the account page's own field rule, .acct input:not(…):not(…)) */
#zp #zp-amt { width: 100%; box-sizing: border-box; padding: 14px 76px 14px 18px; border-radius: 0; font: 400 40px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.3px; }
.zp-unit { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 600 14px/1 var(--sans); color: var(--muted); pointer-events: none; }
.zp-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } /* one row of five, even */
.zp-chips button { min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 0; background: var(--card); color: var(--ink); font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s steps(2), background .15s steps(2); }
.zp-chips button:hover:not(:disabled), .zp-chips button:focus-visible { border-color: var(--ink); box-shadow: none; } /* focus keeps the site's 2 px green ring */
.zp-chips button.on { border-color: var(--ink); background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.zp-chips button:disabled { opacity: .45; cursor: not-allowed; }
/* the quote: what you get, large; then the ledger of it */
.zp-quote:empty { display: none; }
.zp-quote.on { padding: 16px 16px 12px; border: 1px solid var(--rule-2); border-left: 2px solid var(--green); border-radius: 0; background: var(--grain), var(--card); }
.zp-get { display: grid; gap: 4px; }
.zp-get .label { font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.zp-get b { font: 400 40px/1.05 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.3px; overflow-wrap: anywhere; }
.zp-get b span { font: 600 16px/1 var(--sans); letter-spacing: 0; }
.zp-rows { display: grid; gap: 0; margin: 12px 0 0; }
.zp-rows > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--card-edge); }
.zp-rows dt { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.zp-rows dd { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font: 500 14px/1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.zp-rows dd .sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.zp-rows .amber, .zp-rows dd .sub.amber { color: var(--brass-ink, var(--brass)); }
.zp-rows .zp-free { color: var(--green); }
.zp-block { margin: 8px 0 0; font: 400 12px/1.4 var(--sans); color: var(--muted); }
.zp-wait { margin: 2px 0 0; font: 400 14px/1.45 var(--sans); color: var(--muted); }
.zp-why { margin: 0; font: 400 14px/1.45 var(--sans); }
.zp-why:empty { display: none; }
.zp-why.stop { color: var(--red); }
.zp-why.warn { color: var(--brass-ink, var(--brass)); }
.zp-why .btn { margin-left: 6px; vertical-align: middle; }
.zp-slip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
.acct .zp-slip select { width: auto; padding: 7px 30px 7px 12px; border-radius: 0; font-size: 14px; }
.zp-slip .sub { flex-basis: 100%; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.zp-ok { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; }
.zp-ok[hidden] { display: none; }
/* ticked for this page load: one line, its box still there to untick */
.zp-ok.zp-short #zp-ok-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
/* the foot: the status line and the one button, always in sight at the bottom of the drawer */
.zp-foot { position: sticky; bottom: -1px; z-index: 1; display: grid; gap: 8px; margin: 4px -24px 0; padding: 12px 24px 15px; padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 1px); background: var(--card); border-top: 1px solid var(--card-edge); } /* 1 px past the edge: no sliver of what scrolls under it */
.zp-foot .wstat { padding: 0; min-height: 0; }
.zp-foot .wstat:empty { display: none; }
.zp-tick { margin: -2px 0 0; font: 400 13px/1.4 var(--sans); color: var(--muted); text-align: center; }
.zp-tick[hidden] { display: none; }
/* the result: a check, what came in, the next step first */
.zp-done { text-align: center; padding-top: 8px; }
.zp-check { width: 64px; height: 64px; margin: 6px auto 14px; border-radius: 0; background: var(--green); position: relative; animation: zp-pop .32s var(--ease) both; }
.zp-check::after { content: ""; position: absolute; inset: 17px; background: var(--paper); -webkit-mask: var(--g-check) center / 30px 30px no-repeat; mask: var(--g-check) center / 30px 30px no-repeat; }
.zp-done .ap-t { font-size: 34px; }
.zp-done .ap-t .money { color: var(--green); }
.zp-for { margin: 8px 0 0; font: 500 15px/1.45 var(--sans); color: var(--ink-2); }
.zp-hold { margin: 12px auto 0; max-width: 34ch; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.zp-x { margin: 10px 0 0; font-size: 14px; }
.zp-x:empty, .zp-for:empty, .zp-hold:empty { display: none; }
.zp-done-acts { display: grid; gap: 10px; margin-top: 24px; }
.zp-done-acts .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@keyframes zp-pop { from { transform: scale(.6); opacity: 0; } }
@media (max-width: 860px) {
  #ac-bk-stocks.zp-on .st-row { grid-template-columns: minmax(0, 1fr) auto; }
  #zp #zp-amt { font-size: 34px; }
  .zp-get b { font-size: 34px; }
  .zp-foot { margin-inline: -16px; padding-inline: 16px; }
}
@media (max-width: 640px) { #ac-bk-stocks.zp-on .st-head { grid-template-columns: minmax(0, 1fr) auto; } }
/* Home on a phone: the + takes its column from the row's name, so the day's change goes under the price */
@media (max-width: 560px) {
  #hm-stocks.zp-on > .hm-row { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 3px; }
  #hm-stocks.zp-on > .hm-row > :is(.sk-logo, .hm-nm) { grid-row: 1 / span 2; }
  #hm-stocks.zp-on > .hm-row > .hm-px { grid-column: 3; grid-row: 1; align-self: end; }
  #hm-stocks.zp-on > .hm-row > .hm-ch { grid-column: 3; grid-row: 2; align-self: start; }
}
/* a touch screen: every control a finger can hit, 44 px each way, or the room around it (launch-shell.css) */
@media (pointer: coarse) {
  html[data-go-page] #zp #zp-amt { font-size: 34px !important; } /* 16 px and up: no zoom; its own size kept */
  .zp-chips button { min-height: 44px; }
  .zp-plus { width: 44px; }
  .zp-back { width: 44px; height: 44px; }
  .acct #as-have .zp-more-btn, .zp-x a { position: relative; }
  .acct #as-have .zp-more-btn::before, .zp-x a::before { content: ""; position: absolute; inset: -13px -6px; }
}
@media (prefers-reduced-motion: reduce) { .zp-check { animation: none; } }
/* Savings' "Earned since you saved" (web/savings-earned.js, SITE_EARNED=on): beside Saved, in the ink of the other
   figures; its line under it small, like the rate's; a loss in the vault in red; "—" while reading, muted. On a phone the
   figures sit two by two, so the rate keeps its own cell when the box shows (it spans the row only when it is alone). */
.as-earn .sub { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.as-earn b.neg { color: var(--red); }
.as-earn b.na { font-size: 15px; color: var(--muted); }
@media (max-width: 760px) {
  .acct #as-earned-box:not([hidden]) ~ #as-ready-box[hidden] ~ .as-apy { grid-column: auto; }
  .acct #as-earned-box:not([hidden]) ~ #as-ready-box:not([hidden]) ~ .as-apy { grid-column: 1 / -1; }
}