/* 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: #978f7e;
  --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);
}

/* 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: #756f62;
  --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(0, 0, 0, .35);
  --night: #0c100d;
  color-scheme: dark;
}
: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; }
.links { display: flex; gap: 24px; font-size: 15px; }
.links a { color: var(--ink-2); padding: 4px 0; border-bottom: 1px solid transparent; }
.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: 20px; }
.nav .sub { display: none; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.status.live { color: var(--ink-2); } .status.live .dot { background: var(--green-2); }
.status.snapshot { color: var(--brass); } .status.snapshot .dot { background: var(--brass); }
.status.error { color: var(--red); } .status.error .dot { background: var(--red); }
.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: rectangles of ink, or quiet outlines */
.btn { 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:hover { background: var(--ink); color: var(--paper); }
.btn.primary, .btn.ink { background: var(--ink); color: var(--paper); }
.btn.primary:hover, .btn.ink:hover { background: var(--green); border-color: var(--green); color: var(--paper); }
.btn.sm { padding: 9px 14px; font-size: 14px; }
.btn .arr { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn:disabled { opacity: 1; cursor: not-allowed; color: var(--muted); border-color: var(--field-edge); background: transparent; }
.btn.primary:disabled { background: var(--paper-3); border-color: var(--field-edge); color: var(--ink-2); }
.btn.on { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.agentbtn { background: var(--ink); color: var(--paper); }
.agentbtn:hover, .agentbtn.on { background: var(--green); border-color: var(--green); color: var(--paper); }
.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; }

/* ------------------------------------------------------------------ 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); }
th.sortable.on::after { content: " ↓"; }
th.sortable.on[aria-sort="ascending"]::after { content: " ↑"; }
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(--brass-soft); border-color: var(--brass); color: var(--brass); }
.agent .av.dead { background: var(--red-soft); 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(--muted); 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; }
.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; }

/* 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; }
.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; }
.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; }
.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; }
.sfx-toggle { color: var(--muted); border-color: var(--rule); }
.sfx-toggle.off { opacity: .6; text-decoration: line-through; }
.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: 16px; max-width: 1280px; }
.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); }
.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; }

/* ------------------------------------------------------------------ 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 */
@keyframes skShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk { color: transparent !important; background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: skShimmer 1.5s linear infinite; display: inline-block; min-width: 3.4em; vertical-align: middle; }
.night .sk { background: linear-gradient(90deg, var(--night-2) 25%, var(--night-rule) 50%, var(--night-2) 75%); background-size: 200% 100%; }
.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; }
}
@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; }
  .dateline .wrap > span:first-child { display: none; }
  .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: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.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; }
.switch { position: relative; width: 38px; height: 22px; border-radius: 11px; border: 1px solid var(--field-edge); background: var(--paper-3); padding: 0; cursor: pointer; transition: background .2s, border-color .2s; flex: none; }
.switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform .2s var(--ease), background .2s; }
.switch[aria-checked="true"] { background: var(--green); border-color: var(--green); }
.switch[aria-checked="true"] i { transform: translateX(16px); background: var(--paper); }
.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; }
  .prefs-btn { width: 30px; height: 30px; }
}

/* 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: "✓"; font: 500 15px var(--sans); } .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; }