/* MIT License. Copyright (c) 2026 Decentralized Science Labs LLC. */
/* ---- portal (merged from parts/portal.css) ---- */
/* COLLAB 2.2: portal rules (merged into app.css by tools/merge_css.py at release).
   The portal's own pages: the home hub, the directory (/daos) and votes across DAOs (/votes).
   Classes are prefixed pt-; the shell itself (sidebar, top bar, search, footer) is in app.css. */

/* ================================================================== /votes: open proposals across DAOs */
.pt-votes { margin: 0; padding: 0; list-style: none; }
.pt-vote { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(190px, 250px) minmax(170px, 230px); gap: 8px 20px; align-items: center; padding: 15px 18px; }
.pt-vote + .pt-vote { border-top: 1px solid var(--ring); }
.pt-vote:hover { background: var(--surface-2); }
.pt-vote:first-child { border-radius: var(--r-window) var(--r-window) 0 0; }
.pt-vote:last-child { border-radius: 0 0 var(--r-window) var(--r-window); }
.pt-vote-dao { display: block; align-self: start; }
.pt-vote-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pt-vote-title { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: var(--fs-15); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pt-vote-title:hover { color: var(--primary); }
.pt-vote-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; font-size: var(--fs-13); }
.pt-vote-meta > a { color: var(--ink-2); font-weight: 500; }
.pt-vote-meta > a:hover { color: var(--primary); }
.pt-vote-state { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.pt-vote-measure { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pt-vote-mine { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: var(--fs-12); font-weight: 550; }
.pt-vote-mine .ic { width: 13px; height: 13px; }
.pt-vote-mine.todo { color: var(--primary); }
.progress.pt-deposit > span { background: var(--st-deposit-ink); }
.select.pt-dao-select { width: auto; min-width: 200px; max-width: 280px; min-height: 36px; padding-block: 6px; font-size: var(--fs-13); }
@media (max-width: 1099px) {
  .pt-vote { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; }
  .pt-vote-state, .pt-vote-measure { grid-column: 2; }
  .pt-vote-state { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .pt-vote-measure { max-width: 360px; }
}
@media (max-width: 480px) { .pt-vote { padding: 14px; } .select.pt-dao-select { min-width: 0; max-width: 100%; } }

/* ================================================================== home: the hub */
/* the hero sits on genesisl1.com's soft blue band; Figure 1's white window is the page's one bold element */
.band.ld-hero-band { background: var(--band); border-bottom: 1px solid var(--band-line); }
.ld-hero-band .ld-net-win { background: var(--surface); }
.band.pt-now { padding-top: clamp(40px, 5vw, 64px); }

/* DeSciFi's way in: its market pair marks the band */
.pt-market { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pt-market-intro { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 6px; }
.pt-market-intro h2 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-24); letter-spacing: -0.02em; }
.pt-market-intro h2::before { content: ""; flex: none; width: 6px; height: 28px; border-radius: 3px; background: linear-gradient(var(--buy) 0 50%, var(--sell) 50% 100%); }
.pt-market-intro p { max-width: 52ch; margin: 0; font-size: var(--fs-15); line-height: 1.6; }
.pt-market-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.btn.pt-buy { border-color: var(--buy); background: var(--buy); color: #fff; font-weight: 600; }
.btn.pt-buy:hover { border-color: color-mix(in srgb, var(--buy) 85%, #000); background: color-mix(in srgb, var(--buy) 85%, #000); color: #fff; }
:root[data-theme="dark"] .btn.pt-buy { color: #052e1f; }
:root[data-theme="dark"] .btn.pt-buy:hover { background: color-mix(in srgb, var(--buy) 85%, #fff); border-color: color-mix(in srgb, var(--buy) 85%, #fff); color: #052e1f; }
.pt-top { overflow: hidden; }
.pt-top-note { margin: 0; padding: 18px; color: var(--muted); font-size: var(--fs-14); }
table.t.pt-top-table td { padding-block: 10px; }
table.t.pt-top-table th:first-child, table.t.pt-top-table td:first-child { padding-left: 18px; }
table.t.pt-top-table th:last-child, table.t.pt-top-table td:last-child { padding-right: 18px; }
.pt-tok { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.pt-tok:hover { color: var(--primary); text-decoration: none; }
.pt-tok-sym { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--ring); border-radius: 50%; background: var(--surface-2);
  color: var(--ink-2); font: 600 10.5px/1 var(--mono); }
.pt-tok-name { display: flex; flex-direction: column; min-width: 0; }
.pt-tok-name b { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.pt-tok-name .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
/* the issuing DAO by its slug: shown whole (wrapping if it must), since it is what tells a DAO from a copycat */
.pt-tok-name .pt-issuer { overflow: visible; white-space: normal; overflow-wrap: anywhere; max-width: 30ch; }
.pt-top-table .money .num { white-space: nowrap; }
.pt-verified { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.pt-verified .ic { width: 10px; height: 10px; }
td.pt-up { color: var(--buy); }
td.pt-down { color: var(--sell); }
@media (max-width: 1180px) { .pt-market { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { table.t .pt-hide-md, table.t.pt-top-table th.pt-hide-md { display: none; } }
@media (max-width: 560px) { table.t .pt-hide-sm, table.t.pt-top-table th.pt-hide-sm { display: none; } }

/* ================================================================== /daos */
.pt-hidden-note { margin: 4px 2px 0; }

/* ---- dex (merged from parts/dex.css) ---- */
/* COLLAB 2.2: DeSciFi, the market (W-DEX). Merged into app.css by tools/merge_css.py at release.
   The exchange inside the portal: /tokens, /tokens/<address>, /swap, /pools, one pool, add
   liquidity and locks. Every class is prefixed dx-; a shared class is only adjusted together with a
   dx- class (parts load before app.css, so equal specificity loses).

   Its own identity, in four rules:
   - green (--buy) and rose (--sell) mean buying and selling, up and down, and nothing else; blue
     stays for links and every action that is not a trade;
   - figures are tabular with a slashed zero, so columns line up and 0 never reads as O;
   - the market's mark is the sidebar's green and rose bar: it underlines the active section;
   - the ticket's edge, its side switch and its main button take the colour of the side you are on. */

/* ================================================================== tokens of the market layer */
:root { --dx-on-buy: #ffffff; --dx-on-sell: #ffffff; --dx-tick: color-mix(in srgb, var(--ink) 9%, transparent); }
:root[data-theme="dark"] { --dx-on-buy: #04261a; --dx-on-sell: #3a0a14; }

/* ================================================================== scope: figures */
.dx-page { font-variant-numeric: tabular-nums; }
.dx-page :is(.num, .money, table.t td, .dx-px, .dx-mh-px, .dx-quote-px) { font-feature-settings: "tnum" 1, "zero" 1; }
.dx-page input.amt.num { font-feature-settings: "tnum" 1; } /* an empty amount shows a plain 0 */
/* DeSciFi tables set their figures in Inter, like the rest of the market (the shared table rule uses mono) */
table.t:is(.dx-tt, .dx-tpools, .dx-ptable) td :is(.num, .money > .num), table.t:is(.dx-tt, .dx-tpools, .dx-ptable) td.num { font-family: var(--sans); font-size: inherit; letter-spacing: 0; }
.dx-break { overflow-wrap: anywhere; word-break: break-all; }

/* ================================================================== masthead: crumbs, h1, lede, the section bar */
.band-head.dx-mast { padding-block: 20px 0; }
.dx-mast .crumbs ol { margin-bottom: 10px; }
.dx-mast .page-head { align-items: flex-end; gap: 14px 28px; }
.dx-title-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dx-mast h1 { min-width: 0; font-size: clamp(26px, 2.4vw, 32px); overflow-wrap: anywhere; }
.dx-title-icon { display: inline-flex; flex: none; }
.dx-title-icon .dx-pair .dx-tk + .dx-tk { box-shadow: 0 0 0 2px var(--band); }
.dx-mast .page-head-text { gap: 8px; max-width: 96ch; }
.dx-mast .lede { font-size: var(--fs-15); line-height: 1.55; max-width: 92ch; color: var(--ink-2); }
.dx-mast .page-head-actions:empty, .dx-mast .page-head-actions[hidden] { display: none; }
.tabs.dx-tabs { margin-top: 14px; border-bottom: 0; }
.tabs.dx-tabs a { position: relative; margin-right: 18px; padding: 10px 2px 12px; }
/* the market's mark, the sidebar's green and rose bar, under the section you are in */
.tabs.dx-tabs a[aria-current="page"] { border-bottom-color: transparent; color: var(--ink); font-weight: 600; }
.tabs.dx-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--buy) 0 50%, var(--sell) 50% 100%); }
.band.dx-band { padding-top: 22px; }
.dx-band > .frame { container: dx / inline-size; }
.dx-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dx-slot:empty { display: none; }

/* ================================================================== token marks, DAO pills, trust */
.dx-tk { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--bg-2); }
.dx-tk svg { width: 100%; height: 100%; }
.dx-tk-empty { border: 1px dashed var(--ring-2); }
.dx-coin { fill: var(--primary); }
.dx-coin-ring { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 1.5; }
.dx-coin-t { font: 700 8.6px var(--sans); fill: #fff; letter-spacing: -.02em; }
.dx-coin-tw { font-size: 6.8px; fill: var(--primary-hover); }
:root[data-theme="dark"] .dx-coin-t { fill: #08142b; }
:root[data-theme="dark"] .dx-coin-tw { fill: var(--primary-hover); }
.dx-pair { display: inline-flex; align-items: center; flex: none; }
.dx-pair > .dx-tk + .dx-tk { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface); }
.dx-sym { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.dx-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
.dx-tight { gap: 2px; min-width: 0; }

/* a DAO: its logo or molecule glyph, then its name */
.pill.dx-dao { gap: 6px; padding: 2px 9px 2px 3px; max-width: 100%; border-color: var(--science-line); background: var(--science-soft); color: var(--ink); }
.pill.dx-dao:hover { border-color: var(--science); color: var(--ink); }
.pill.dx-dao.dx-dao-plain { padding-left: 9px; }
.dx-dao .avatar { width: 18px; height: 18px; border-radius: 6px; border: 0; }
/* a DAO's name is not unique, its web address is (review WB22-2): the address is never cut; where the
   line is short it moves under the name, and the name gives way */
.pill.dx-dao { flex-wrap: wrap; row-gap: 0; border-radius: 12px; }
.pill.dx-dao .dx-ellipsis { flex: 0 1 auto; min-width: 2.5em; }
.pill.dx-dao .dx-dao-head { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pill.dx-dao .dx-dao-head .dx-ellipsis { min-width: 0; }
.pill.dx-dao .dx-slug { flex: 0 1 auto; max-width: 100%; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.pill.dx-dao .dx-twin { display: inline-flex; flex: none; color: var(--warn); }
/* a warning's facts, one per line: who issued the token, its contract */
.dx-note-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 7px; }
.dx-note-k { color: var(--muted); font-size: var(--fs-13); }
.pill.dx-dao .dx-twin .ic { width: 13px; height: 13px; }
.dx-daotag { display: inline-flex; min-width: 0; max-width: 100%; }
.dx-daotag:empty { display: none; }
.dx-issuer { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 100%; }
.dx-dv .dx-issuer { align-items: flex-end; }
.dx-admin:empty { display: none; }
.dx-admin-moved { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dx-folded { padding-top: 12px; border-top: 1px solid var(--ring); }
.pill.dx-you { padding: 1px 8px; color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
/* who vouches for a token: the site's operator (blue check), nobody (amber) */
.pill.dx-pill-ok { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.pill.dx-pill-warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.dx-trust { display: inline-flex; flex: none; align-items: center; gap: 3px; padding: 0 7px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; line-height: 1.7; }
.dx-trust svg { width: 11px; height: 11px; }
.dx-trust.ok { color: var(--primary); background: var(--primary-soft); }
.dx-trust.warn { color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.dx-verified { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.dx-verified svg { width: 10px; height: 10px; stroke-width: 3; }

/* ================================================================== up and down, small price lines */
.dx-chg { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.dx-chg.up { color: var(--buy); }
.dx-chg.down { color: var(--sell); }
.dx-chg.up::before, .dx-chg.down::before { content: ""; width: 0; height: 0; border-inline: 4px solid transparent; }
.dx-chg.up::before { border-bottom: 5px solid currentColor; }
.dx-chg.down::before { border-top: 5px solid currentColor; }
.dx-spark { display: block; overflow: visible; }
.dx-spark .dx-spark-line { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.dx-spark .dx-spark-area { fill: color-mix(in srgb, var(--muted) 10%, transparent); stroke: none; }
.dx-spark .dx-spark-dot { fill: var(--muted); }
.dx-spark.up .dx-spark-line { stroke: var(--buy); }
.dx-spark.up .dx-spark-area { fill: color-mix(in srgb, var(--buy) 13%, transparent); }
.dx-spark.up .dx-spark-dot { fill: var(--buy); }
.dx-spark.down .dx-spark-line { stroke: var(--sell); }
.dx-spark.down .dx-spark-area { fill: color-mix(in srgb, var(--sell) 12%, transparent); }
.dx-spark.down .dx-spark-dot { fill: var(--sell); }
.dx-spark-none { color: var(--faint); }

/* a price that moved since the last block: a short tint in its direction */
@media (prefers-reduced-motion: no-preference) {
  tr.dx-flash-up > * { animation: dx-flash-up 1.4s ease-out; }
  tr.dx-flash-down > * { animation: dx-flash-down 1.4s ease-out; }
}
@keyframes dx-flash-up { from { background-color: var(--buy-soft); } }
@keyframes dx-flash-down { from { background-color: var(--sell-soft); } }

/* buy and sell actions: outlined in a list, filled where they are the page's main act */
.btn.dx-buy { color: var(--buy); border-color: var(--buy-line); }
.btn.dx-buy:hover { background: var(--buy-soft); border-color: var(--buy); color: var(--buy); }
.btn.dx-sell { color: var(--sell); border-color: var(--sell-line); }
.btn.dx-sell:hover { background: var(--sell-soft); border-color: var(--sell); color: var(--sell); }
.btn.dx-buy-solid, .btn.dx-sell-solid { min-height: 42px; padding: 0 18px; border: 0; font-weight: 600; }
.btn.dx-buy-solid { background: var(--buy); color: var(--dx-on-buy); }
.btn.dx-sell-solid { background: var(--sell); color: var(--dx-on-sell); }
.btn.dx-buy-solid:hover { background: color-mix(in srgb, var(--buy) 86%, var(--ink)); color: var(--dx-on-buy); }
.btn.dx-sell-solid:hover { background: color-mix(in srgb, var(--sell) 86%, var(--ink)); color: var(--dx-on-sell); }
:root[data-theme="dark"] .btn.dx-buy-solid:hover { background: color-mix(in srgb, var(--buy) 86%, #fff); }
:root[data-theme="dark"] .btn.dx-sell-solid:hover { background: color-mix(in srgb, var(--sell) 86%, #fff); }

/* ================================================================== the quote board: the market at a glance (/tokens) */
.dx-board { display: flex; flex-wrap: wrap; gap: 14px 0; padding: 2px 0 18px; border-bottom: 1px solid var(--ring); }
.dx-board:empty { display: none; }
.dx-board-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 28px 0 0; margin-right: 28px; border-right: 1px solid var(--ring); }
.dx-board-item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.dx-board-l { color: var(--muted); font-size: var(--fs-12); }
.dx-board-item > b, .dx-board-item > .money > .num { color: var(--ink); font-size: var(--fs-17); font-weight: 620; letter-spacing: -0.01em; }
.dx-board-item > b.muted { color: var(--muted); font-weight: 500; font-size: var(--fs-15); }
.dx-board-item .money { gap: 0 8px; align-items: baseline; }
.dx-board-note { color: var(--muted); font-size: var(--fs-12); }
@media (max-width: 640px) {
  .dx-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .dx-board-item { padding: 0; margin: 0; border: 0; }
}

/* ================================================================== the token table (/tokens) */
.dx-tokens .toolbar.dx-toolbar { margin-bottom: 0; }
.select.dx-sortsel { width: auto; min-width: 200px; }
.card.dx-tt-card { overflow: hidden; }
table.t.dx-tt th { padding-block: 9px; }
table.t.dx-tt td, table.t.dx-tt tbody th { padding: 12px 14px; vertical-align: middle; }
table.t.dx-tt tbody th { border-bottom: 1px solid var(--ring); background: transparent; color: var(--ink); font-size: var(--fs-14); font-weight: 400; white-space: normal; text-align: left; }
table.t.dx-tt tbody tr:last-child th { border-bottom: 0; }
table.t.dx-tt tbody tr:hover > * { background: var(--surface-2); }
table.t.dx-tt .dx-c-token { min-width: 220px; }
table.t.dx-tt .dx-c-price .dx-two { align-items: flex-end; }
table.t.dx-tt .dx-c-spark { width: 112px; }
table.t.dx-tt .dx-c-dao { max-width: 240px; }
table.t.dx-tt .dx-c-act { width: 1%; }
.dx-sortbtn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.dx-sortbtn:hover, .dx-sortbtn.on { color: var(--ink); }
.dx-sortmark { width: 0; height: 0; border-inline: 4px solid transparent; border-top: 5px solid var(--faint); opacity: 0; }
.dx-sortbtn:hover .dx-sortmark { opacity: .7; }
th[aria-sort] .dx-sortmark { opacity: 1; border-top-color: var(--ink); }
th[aria-sort="ascending"] .dx-sortmark { border-top: 0; border-bottom: 5px solid var(--ink); }
.dx-tok { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.dx-tok:hover { color: var(--ink); text-decoration: none; }
.dx-tok:hover .dx-sym { text-decoration: underline; text-underline-offset: 3px; }
.dx-tok-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dx-tok-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dx-tok .dx-sym { font-size: var(--fs-15); font-weight: 650; letter-spacing: -0.01em; }
.dx-tok-name { overflow: hidden; color: var(--muted); font-size: var(--fs-13); text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }
.dx-px { color: var(--ink); font-weight: 560; white-space: nowrap; }
.dx-fx { color: var(--muted); font-size: var(--fs-12); white-space: nowrap; }
.dx-fx:empty { display: none; }
.dx-tt .money { flex-direction: column; align-items: flex-end; gap: 0; }
.dx-tt .money > .num { color: var(--ink); white-space: nowrap; }
.dx-tt .money .fiat { font-size: var(--fs-12); }
.dx-tt-foot { align-items: flex-start; }
.dx-tt-foot .dx-tfoot { flex: 1 1 420px; margin: 0; }
table.t.dx-tt :is(td, tbody th, thead th) { padding-inline: 10px; }
table.t.dx-tt :is(td, th):first-child { padding-left: 16px; }
table.t.dx-tt :is(td, th):last-child { padding-right: 16px; }
/* the tokens list: the name over the web address */
table.t.dx-tt .dx-c-dao .pill.dx-dao { flex-wrap: wrap; row-gap: 0; max-width: 240px; border-radius: 10px; padding-block: 3px; }
table.t.dx-tt .dx-c-dao .pill.dx-dao .dx-slug { flex-basis: 100%; padding-left: 24px; }
table.t.dx-tt .dx-c-dao .pill.dx-dao.dx-dao-plain .dx-slug { padding-left: 0; }
@container dx (max-width: 1240px) { table.t.dx-tt .dx-c-act { display: none; } }
@container dx (max-width: 1020px) { table.t.dx-tt .dx-c-dao { display: none; } }
/* just above that width the issuer column is narrower, so its web address wraps under the name */
@container dx (min-width: 1021px) and (max-width: 1120px) {
  table.t.dx-tt .dx-c-dao, table.t.dx-tt .dx-c-dao .pill.dx-dao { max-width: 204px; }
}
@container dx (max-width: 900px) { table.t.dx-tt .dx-c-spark { display: none; } }
@container dx (max-width: 820px) { table.t.dx-tt .dx-c-mcap { display: none; } table.t.dx-tt .dx-c-token { min-width: 180px; } }
/* phones: each token a compact three-line row (the token page has every figure) */
@container dx (max-width: 680px) {
  table.t.dx-tt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t.dx-tt, table.t.dx-tt tbody { display: block; }
  table.t.dx-tt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tok px" "liq ch" "cap hold"; gap: 6px 14px; padding: 13px 16px;
    border-bottom: 1px solid var(--ring); }
  table.t.dx-tt tr:last-child { border-bottom: 0; }
  table.t.dx-tt td, table.t.dx-tt tbody th { display: block; padding: 0; border: 0; min-width: 0; }
  table.t.dx-tt .dx-c-token { grid-area: tok; min-width: 0; }
  table.t.dx-tt .dx-c-price { grid-area: px; }
  table.t.dx-tt .dx-c-change { grid-area: ch; text-align: right; }
  table.t.dx-tt :is(.dx-c-liquidity, .dx-c-mcap) { display: flex; align-items: baseline; gap: 6px; text-align: left; }
  table.t.dx-tt .dx-c-liquidity { grid-area: liq; }
  table.t.dx-tt .dx-c-mcap { grid-area: cap; font-size: var(--fs-13); }
  table.t.dx-tt :is(.dx-c-liquidity, .dx-c-mcap, .dx-c-holders)::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-12); white-space: nowrap; }
  table.t.dx-tt :is(.dx-c-liquidity, .dx-c-mcap) .money { flex-direction: row; gap: 0 6px; }
  table.t.dx-tt .dx-c-mcap .fiat { display: none; }
  table.t.dx-tt .dx-c-holders { grid-area: hold; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font-size: var(--fs-13); }
  table.t.dx-tt .dx-c-spark, table.t.dx-tt .dx-c-dao, table.t.dx-tt .dx-c-act { display: none; }
  table.t.dx-tt tbody tr:hover > * { background: transparent; }
  .dx-tok-name { max-width: 18ch; }
}

/* ================================================================== one token (/tokens/<address>) */
.dx-mast .lede:has(.dx-quote) { display: flex; flex-direction: column; gap: 10px; }
.dx-quote-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink-2); font-size: var(--fs-15); }
.dx-quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.dx-quote-px { color: var(--ink); font-size: clamp(26px, 2.6vw, 34px); font-weight: 640; letter-spacing: -0.025em; line-height: 1.1; }
.dx-quote-fx { color: var(--muted); font-size: var(--fs-15); }
.dx-quote-fx:empty { display: none; }
.dx-quote .dx-chg { font-size: var(--fs-15); }
.dx-mast .page-head-actions .btn { min-width: 130px; }
.dx-token .dx-tgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.dx-tmain, .dx-tside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@container dx (max-width: 1000px) { .dx-token .dx-tgrid { grid-template-columns: minmax(0, 1fr); } }
/* one column on a tablet: the market facts and the issuer side by side under the pools */
@container dx (min-width: 640px) and (max-width: 1000px) { .dx-token .dx-tside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.dx-facts-card .dx-dr { padding-block: 9px; }
.dx-facts-card .dx-dv .money { justify-content: flex-end; }
.dx-sub { display: block; color: var(--muted); font-size: var(--fs-12); }
.dx-ext { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }
.dx-tmain { container: dxmain / inline-size; }
table.t.dx-tpools td { vertical-align: middle; }
table.t.dx-tpools .money { flex-direction: column; align-items: flex-end; gap: 0; }
@container dxmain (max-width: 760px) {
  table.t.dx-tpools thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t.dx-tpools, table.t.dx-tpools tbody { display: block; }
  table.t.dx-tpools tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; padding: 14px 16px; border-bottom: 1px solid var(--ring); }
  table.t.dx-tpools tr:last-child { border-bottom: 0; }
  table.t.dx-tpools td, table.t.dx-tpools td.r { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  table.t.dx-tpools td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font: 500 var(--fs-12) var(--sans); }
  /* each pool a card: the pair and its actions on the first line, three figures under them */
  table.t.dx-tpools td:first-child { grid-column: 1 / 3; }
  table.t.dx-tpools td:first-child::before { content: none; }
  table.t.dx-tpools td.dx-c-act { grid-column: 3; grid-row: 1; align-self: center; }
  table.t.dx-tpools .money { align-items: flex-start; }
}
@container dxmain (max-width: 440px) {
  table.t.dx-tpools tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.t.dx-tpools td:first-child, table.t.dx-tpools td.dx-c-act { grid-column: 1 / -1; grid-row: auto; }
  table.t.dx-tpools .dx-actions { justify-content: flex-start; }
}

/* ================================================================== the swap desk: the market head, the chart, the ticket, the facts */
.dx-desk { display: grid; gap: 20px 24px; grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  grid-template-areas: "head head" "chart ticket" "info ticket"; align-items: start; }
.dx-desk-head { grid-area: head; min-width: 0; }
.dx-desk-ticket { grid-area: ticket; position: sticky; top: calc(var(--topbar) + 16px); min-width: 0; }
.dx-desk-chart { grid-area: chart; min-width: 0; }
.dx-desk-info { grid-area: info; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.dx-desk-info > * { min-width: 0; }
.dx-desk-info > .dx-explain { grid-column: 1 / -1; }
.dx-desk-info > .dx-slot:empty + .dx-slot:not(:empty) { grid-column: 1 / -1; }
.dx-desk-chart:has(> .dx-slot:empty) { display: none; }
/* a tablet keeps the ticket beside the chart, at a fixed width; a phone stacks them, the ticket first */
@container dx (max-width: 959px) { .dx-desk { grid-template-columns: minmax(0, 1fr) 340px; } }
@container dx (max-width: 699px) {
  .dx-desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "ticket" "chart" "info"; }
  .dx-desk-ticket { position: static; width: 100%; }
}
/* the route and the tokens side by side only where each gets about 360px */
@container dx (min-width: 1200px) { .dx-desk-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the market head: the token bought or sold, as a quote line (flat, no window) */
.dx-mh { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 2px 0 18px; border-bottom: 1px solid var(--ring); }
.dx-mh-id { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.dx-mh-id:hover { color: var(--ink); text-decoration: none; }
.dx-mh-id:hover .dx-mh-sym { text-decoration: underline; text-underline-offset: 3px; }
.dx-mh-names { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dx-mh-sym { font-size: var(--fs-20); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.dx-mh-name { overflow: hidden; color: var(--muted); font-size: var(--fs-13); text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.dx-mh-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.dx-mh-px { color: var(--ink); font-size: var(--fs-24); font-weight: 640; letter-spacing: -0.02em; }
.dx-mh-fx { color: var(--muted); font-size: var(--fs-13); }
.dx-mh-fx:empty { display: none; }
.dx-mh-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.dx-mh-stat { display: flex; flex-direction: column; gap: 1px; }
.dx-mh-stat dt { color: var(--muted); font-size: var(--fs-12); }
.dx-mh-stat dd { margin: 0; color: var(--ink); font-size: var(--fs-14); font-weight: 560; }
.dx-mh-stat .money { gap: 0 6px; }
.dx-mh-stat .money .fiat { font-weight: 400; }
.dx-mh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; margin-left: auto; }
.dx-mh-none { margin: 0; color: var(--muted); }
@container dx (max-width: 720px) { .dx-mh { gap: 12px 20px; } .dx-mh-tags { margin-left: 0; } }

/* the ticket */
.swap.dx-swap { --dx-side: var(--ring-2); position: relative; max-width: none; margin: 0; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.swap.dx-swap::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--dx-side); }
.swap.dx-swap[data-side="buy"] { --dx-side: var(--buy); }
.swap.dx-swap[data-side="sell"] { --dx-side: var(--sell); }
.dx-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--ring); border-radius: 12px; background: var(--bg-2); }
.dx-side-btn { height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: var(--fs-15); font-weight: 600; cursor: pointer;
  transition: background-color .15s, color .15s; }
.dx-side-btn:hover { color: var(--ink); }
.dx-side-btn.buy[aria-pressed="true"] { background: var(--buy); color: var(--dx-on-buy); }
.dx-side-btn.sell[aria-pressed="true"] { background: var(--sell); color: var(--dx-on-sell); }
.dx-swap[data-side="neutral"] .dx-side-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--ring-2); }
.dx-swap-head { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.dx-swap-head h2 { min-width: 0; font-size: var(--fs-17); overflow-wrap: anywhere; }
.chip.dx-slip { height: 32px; font-weight: 500; }
.swap-field.dx-field { gap: 6px; padding: 13px 15px 11px; border-radius: var(--r-row); }
.dx-field:focus-within { border-color: color-mix(in srgb, var(--dx-side) 55%, var(--ring)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dx-side) 14%, transparent); }
.dx-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.dx-fr { display: flex; align-items: center; gap: 12px; }
.swap-field.dx-field .amt { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: var(--fs-30); font-weight: 580; letter-spacing: -0.025em; line-height: 1.25; }
.swap-field.dx-field .amt::placeholder { color: var(--faint); }
.swap-field.dx-field .amt.is-est { color: var(--muted); }
@media (max-width: 480px) { .swap-field.dx-field .amt { font-size: var(--fs-24); } .swap.dx-swap { padding: 14px 14px 16px; } .token-btn.dx-tbtn { max-width: 150px; } }
.dx-fr .amt[readonly] { cursor: default; }
.dx-fr .amt[aria-invalid="true"] { color: var(--danger); }
.dx-fs { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; min-height: 22px; min-width: 0; }
.dx-fval { min-width: 0; color: var(--muted); font-size: var(--fs-13); }
.dx-fval .money { gap: 0 6px; }
.dx-fval .money > .num { color: var(--muted); }
.dx-fid { min-width: 0; max-width: 100%; display: flex; justify-content: flex-end; margin-left: auto; }
.dx-fid .pill.dx-dao { font-size: var(--fs-12); }
.dx-fid .dx-daotag, .dx-fid-in, .dx-issuer .dx-daotag { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.dx-fid-in { flex-wrap: wrap; justify-content: flex-end; }
.dx-val { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.dx-tslot { flex: none; }
.token-btn.dx-tbtn { max-width: 200px; min-height: 40px; padding: 4px 12px 4px 5px; font-size: var(--fs-15); }
.dx-tbtn:hover { background: var(--bg-3); }
.dx-tbtn .dx-chev { width: 15px; height: 15px; color: var(--muted); }
.btn.dx-max { min-height: 26px; padding: 0 8px; color: var(--primary); font-weight: 600; }
.swap-flip.dx-flip { color: var(--ink-2); }
.swap-flip.dx-flip:hover { background: var(--bg-3); }
.swap-flip.dx-flip svg { width: 18px; height: 18px; }
.btn.dx-go { min-height: 52px; font-size: var(--fs-16, 16px); }
.btn.primary.dx-go[data-act="buy"] { background: var(--buy); border-color: var(--buy); color: var(--dx-on-buy); box-shadow: none; }
.btn.primary.dx-go[data-act="sell"] { background: var(--sell); border-color: var(--sell); color: var(--dx-on-sell); box-shadow: none; }
.btn.primary.dx-go[data-act="buy"]:not(:disabled):hover { background: color-mix(in srgb, var(--buy) 86%, var(--ink)); }
.btn.primary.dx-go[data-act="sell"]:not(:disabled):hover { background: color-mix(in srgb, var(--sell) 86%, var(--ink)); }
:root[data-theme="dark"] .btn.primary.dx-go[data-act="buy"]:not(:disabled):hover { background: color-mix(in srgb, var(--buy) 86%, #fff); }
:root[data-theme="dark"] .btn.primary.dx-go[data-act="sell"]:not(:disabled):hover { background: color-mix(in srgb, var(--sell) 86%, #fff); }

/* the terms of the trade, one per hairline row */
.dx-terms { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--ring); border-radius: var(--r-row); font-size: var(--fs-13); }
.dx-term { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 4px 16px; padding: 9px 14px; }
.dx-term + .dx-term { border-top: 1px solid var(--ring); }
.dx-term dt { color: var(--muted); }
.dx-term dd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.dx-note { color: var(--muted); font-size: var(--fs-12); }
/* price impact: the figure, a word for it and a bar that fills at 15% (where the swap asks to confirm) */
.dx-impact { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 100%; }
.dx-impact-v { display: inline-flex; align-items: baseline; gap: 8px; }
.dx-impact-v b { font-weight: 650; }
.dx-meter { position: relative; display: block; width: min(150px, 100%); height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-3);
  background-image: linear-gradient(90deg, transparent calc(6.67% - .5px), var(--dx-tick) calc(6.67% - .5px) calc(6.67% + .5px), transparent calc(6.67% + .5px) calc(33.3% - .5px), var(--dx-tick) calc(33.3% - .5px) calc(33.3% + .5px), transparent calc(33.3% + .5px)); }
.dx-meter > i { position: absolute; inset: 0 auto 0 0; min-width: 3px; border-radius: inherit; background: var(--ok); }
.dx-impact.low b { color: var(--ok); }
.dx-impact.some b { color: var(--warn); }
.dx-impact.some .dx-meter > i { background: var(--warn); }
.dx-impact.high b, .dx-impact.very b { color: var(--danger); }
.dx-impact.high .dx-meter > i, .dx-impact.very .dx-meter > i { background: var(--danger); }
.dx-minout { font-weight: 600; }
.dx-feelist { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dx-feeline { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dx-feeline .dx-dest { justify-content: flex-end; }
.dx-pfee { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.dx-pfee .dx-dest { display: contents; }
.dx-dest { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: inherit; gap: 4px; min-width: 0; }
.dx-promise { display: flex; gap: 10px; margin: 0; padding: 2px 2px 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.dx-promise[hidden] { display: none; }
.dx-link { padding: 0; border: 0; background: transparent; color: var(--primary); font: inherit; text-align: right; cursor: pointer; }
.dx-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.dx-route { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.dx-hop { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.dx-via { display: inline-flex; align-items: center; padding: 0 7px; border: 1px solid var(--ring); border-radius: var(--r-pill); background: var(--bg-2); color: var(--muted); font-size: var(--fs-12); white-space: nowrap; }
.dx-via:hover { border-color: var(--ring-2); color: var(--ink); text-decoration: none; }
.dx-sep { display: inline-grid; color: var(--faint); }
.dx-sep svg { width: 12px; height: 12px; }
.dx-approve { padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-row); background: var(--warn-soft); }
.dx-approve[hidden] { display: none; }
.dx-err { margin: 0; }
.dx-err:empty { display: none; }
.dx-notes:empty { display: none; }
.dx-m0 { margin: 0; }
.dx-spin { width: 14px; height: 14px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }

/* the market beside the ticket */
.dx-headval { color: var(--ink); font-size: var(--fs-15); font-weight: 600; white-space: nowrap; }
.dx-pricecard .card-body { padding-top: 14px; }
.dx-hist { max-height: 320px; touch-action: pan-y; }
.dx-hist .dx-hist-dot { fill: var(--primary); }
/* the price figures of the market take the market colours: up over the period in green, down in rose */
.chart.dx-hist .series { stroke: var(--primary); }
.chart.dx-hist.up .series { stroke: var(--buy); }
.chart.dx-hist.down .series { stroke: var(--sell); }
.chart.dx-hist .dx-hist-area { fill: color-mix(in srgb, var(--primary) 8%, transparent); }
.chart.dx-hist.up .dx-hist-area { fill: color-mix(in srgb, var(--buy) 11%, transparent); }
.chart.dx-hist.down .dx-hist-area { fill: color-mix(in srgb, var(--sell) 10%, transparent); }
.chart.dx-hist.up .marker { fill: var(--buy); }
.chart.dx-hist.down .marker { fill: var(--sell); }
.dx-rt { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dx-rt-tok { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.dx-rt-tok .grow { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dx-rt-tok b { font-size: var(--fs-15); overflow-wrap: anywhere; }
.dx-rt-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 13px; padding: 10px 0 10px 25px; border-left: 2px solid var(--science-line); }
.dx-rt-name { color: var(--ink); font-weight: 600; font-size: var(--fs-14); }
.dx-rt-fee { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; flex-basis: 100%; }
.dx-rt-note { margin-top: 12px; }
.dx-tokfacts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dx-tokhead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kv.dx-kv { gap: 6px 14px; font-size: var(--fs-13); }
.dx-pitem { align-items: center; padding: 12px 18px; }
.dx-pval { flex: none; text-align: right; font-size: var(--fs-13); }
.dx-pval .money { flex-direction: column; align-items: flex-end; }
.card.dx-explain { background: var(--bg-2); }
.dx-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 28px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.55; }
.dx-points b { color: var(--ink); font-weight: 600; }

/* ================================================================== token picker */
.dx-picker .dx-tlist { display: flex; flex-direction: column; gap: 2px; max-height: min(56vh, 460px); overflow-y: auto; margin: 0 -8px; padding: 0 2px; }
/* a grid whose middle track may shrink to nothing, so a long issuer name never widens the dialog */
.dx-trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r-row); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.dx-trow-main .row-tight { min-width: 0; }
.dx-trow .dx-daotag { display: inline-flex; min-width: 0; max-width: 100%; }
.dx-trow .pill.dx-dao { max-width: 100%; min-width: 0; }
.dx-picker, .dx-found { min-width: 0; }
.dx-found .kv dd { min-width: 0; }
.dx-trow:hover { background: var(--bg-3); }
.dx-trow[aria-pressed="true"] { border-color: var(--primary-line); background: var(--primary-soft); }
.dx-trow-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.dx-trow-side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 1px; font-size: var(--fs-14); }
.dx-pad { padding: 10px; }
.dx-found:empty { display: none; }
.dx-w-custom { max-width: 170px; }

/* ================================================================== stats strip window */
.card.stats.dx-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dx-stats .stat .v { font-size: var(--fs-20); }
.dx-stats .stat .v .money { display: flex; flex-direction: column; gap: 0; }
.dx-stats .stat .v .fiat { font-size: var(--fs-13); }
.dx-stats .stat .l { display: block; }
@media (max-width: 640px) {
  .card.stats.dx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.stats.dx-stats > .stat { padding: 12px 14px; border-top: 1px solid var(--ring); border-left: 0; }
  .card.stats.dx-stats > .stat:nth-child(-n + 2) { border-top: 0; }
  .card.stats.dx-stats > .stat:nth-child(even) { border-left: 1px solid var(--ring); }
  .card.stats.dx-stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ================================================================== pools list */
.toolbar.dx-toolbar { margin-bottom: 14px; }
.dx-count { color: var(--muted); font-size: var(--fs-13); white-space: nowrap; }
.dx-twrap { position: relative; } /* keeps the visually hidden header inside the scroll box */
table.t.dx-ptable td { vertical-align: middle; }
table.t.dx-ptable td.dx-c-pool { min-width: 210px; }
.dx-pname { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.dx-pname:hover { color: var(--ink); text-decoration: none; }
.dx-pname:hover b { text-decoration: underline; text-underline-offset: 3px; }
.dx-pname b { white-space: nowrap; font-size: var(--fs-15); }
.dx-pname .stack-sm { gap: 4px; }
.dx-two { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.dx-fee { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 150px; font-size: var(--fs-12); color: var(--muted); }
.dx-fee .dx-dest { justify-content: flex-start; }
.dx-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.dx-tfoot { color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }
@container dx (max-width: 1180px) { table.t.dx-ptable .dx-c-price { display: none; } }
/* tablets and phones: every row becomes a small window of its own */
@container dx (max-width: 860px) {
  table.t.dx-ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t.dx-ptable, table.t.dx-ptable tbody { display: block; }
  table.t.dx-ptable tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px 16px; border-bottom: 1px solid var(--ring); }
  table.t.dx-ptable tr:last-child { border-bottom: 0; }
  table.t.dx-ptable td, table.t.dx-ptable td.r { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  table.t.dx-ptable td.dx-c-val .money { justify-content: flex-start; }
  table.t.dx-ptable td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font: 500 var(--fs-12) var(--sans); }
  table.t.dx-ptable td.dx-c-pool, table.t.dx-ptable td.dx-c-act { grid-column: 1 / -1; }
  table.t.dx-ptable td.dx-c-price { display: none; }
  table.t.dx-ptable td.dx-c-share:not(.dx-has) { display: none; }
  table.t.dx-ptable tbody tr:hover td { background: transparent; }
  table.t.dx-ptable .dx-actions { justify-content: flex-start; }
  table.t.dx-ptable .dx-actions .btn { flex: 1 1 0; }
  .dx-fee { min-width: 0; }
}

/* ================================================================== one pool */
.dx-pool { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.dx-pool-main, .dx-pool-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* one column: the price first, then your position and what you can do, then the details */
@media (max-width: 1100px) {
  .dx-pool { grid-template-columns: minmax(0, 1fr); }
  .dx-pool-main, .dx-pool-side { display: contents; }
  .dx-pool > * > * { min-width: 0; }
  .dx-o-price { order: 1; } .dx-o-pos { order: 2; } .dx-o-manage { order: 3; } .dx-o-earn { order: 4; }
  .dx-o-locks { order: 5; } .dx-o-launch { order: 6; } .dx-o-facts { order: 7; }
}
.dx-h-sm { font-size: var(--fs-15); }
.dx-mast .lede .dx-facts { display: flex; margin-bottom: 10px; }
.dx-lede-text { display: block; }
.dx-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.dx-headline b { font-size: var(--fs-24); font-weight: 640; letter-spacing: -0.02em; }
.dx-statfees { font-size: var(--fs-15); }
.dx-manage-sw { border-bottom: 1px solid var(--ring); }
.row-card.dx-lockrow { display: flex; flex-direction: column; gap: 12px; }
.skel.dx-skel-line { width: 130px; height: 12px; }
.select.dx-sort { width: auto; min-width: 180px; }
.dx-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
@media (max-width: 1360px) { .dx-figs { grid-template-columns: minmax(0, 1fr); } }
.dx-curve .chart { max-height: 300px; }
.dx-legend-floor { background: var(--warn); }
.dx-legend-now { background: var(--science); }
.dx-earners { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dx-earner { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; font-size: var(--fs-14); }
.dx-earner + .dx-earner { border-top: 1px solid var(--ring); }
.dx-earner > i { width: 10px; height: 10px; border-radius: 3px; }
.dx-earner .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.dx-earner .num { text-align: right; white-space: nowrap; }
.dx-earner .tiny { grid-column: 2 / -1; }
@media (max-width: 560px) { .dx-earner { grid-template-columns: 12px minmax(0, 1fr); } .dx-earner > .num { grid-column: 2; text-align: left; } }
.dx-sw-daod { background: var(--science); }
.dx-sw-daol { background: color-mix(in srgb, var(--science) 55%, var(--surface)); }
.dx-sw-lock { background: var(--d3); }
.dx-sw-burn { background: var(--faint); }
.dx-sw-other { background: color-mix(in srgb, var(--d1) 45%, var(--surface)); }
.dx-sw-you { background: var(--primary); }
.dx-range { width: 100%; height: 28px; accent-color: var(--primary); }
.dx-pct { font-size: var(--fs-30); font-weight: 620; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dx-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.dx-out { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); }
.dx-out-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dx-out-row > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.dx-fees { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.dx-feetile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-row); }
.dx-feetile b { font-size: var(--fs-17); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dx-manage .seg { width: 100%; }
.dx-manage .seg button { flex: 1 1 0; }
.dx-dl { display: flex; flex-direction: column; margin: 0; }
.dx-dr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 7px 0; font-size: var(--fs-14); }
.dx-dr + .dx-dr { border-top: 1px solid var(--ring); }
.dx-dr > .muted { flex: none; max-width: 55%; }
.dx-dv { flex: 1 1 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.dx-dv > .row-tight { justify-content: flex-end; }
.dx-dv > .dx-two { align-items: flex-end; }
.dx-who { justify-content: flex-end; }

/* ================================================================== add liquidity */
.dx-add { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.dx-add-side { position: sticky; top: calc(var(--topbar) + 20px); display: flex; flex-direction: column; gap: 16px; }
@container dx (max-width: 980px) { .dx-add { grid-template-columns: minmax(0, 1fr); } .dx-add-side { position: static; } }
.dx-sec { display: flex; flex-direction: column; gap: 12px; }
.dx-sec + .dx-sec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ring); }
.dx-sec h3 { font-size: var(--fs-15); }
.dx-pickrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.dx-pickrow .token-btn.dx-tbtn { width: 100%; max-width: none; justify-content: flex-start; min-height: 48px; padding: 6px 14px 6px 6px; border-radius: var(--r-ctl); }
.dx-pickrow .dx-tbtn .dx-chev { margin-left: auto; }
.dx-plus { width: 18px; height: 18px; color: var(--faint); }
.dx-amts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .dx-amts { grid-template-columns: minmax(0, 1fr); } }
.dx-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dx-tier { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.dx-tier:hover { border-color: var(--ring-2); background: var(--surface-2); }
.dx-tier[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.dx-tier b { font-size: var(--fs-17); }
@media (max-width: 560px) { .dx-tiers { grid-template-columns: minmax(0, 1fr); } }
.dx-steps { display: flex; flex-direction: column; gap: 8px; counter-reset: dxstep; }
.dx-step { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); }
.dx-step::before { counter-increment: dxstep; content: counter(dxstep); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--ring); border-radius: 50%; background: var(--bg-2); color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.dx-step.done::before { content: "✓"; border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.dx-step.now { border-color: var(--primary-line); }
.dx-step.now::before { border-color: var(--primary); color: var(--primary); }
.dx-step .grow { display: flex; flex-direction: column; gap: 1px; }
.dx-preview .card-body { display: flex; flex-direction: column; gap: 16px; }
.dx-bigprice { display: flex; flex-direction: column; gap: 2px; }
.dx-bigprice b { font-size: var(--fs-24); font-weight: 640; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dx-sharebar { position: relative; height: 9px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-3); }
.dx-sharebar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.dx-sharebar .was { background: color-mix(in srgb, var(--primary) 45%, var(--surface)); }
.dx-sharebar .add { background: var(--primary); }

/* ================================================================== locks: a time line */
.dx-lookup { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
.dx-lookup .input { flex: 1 1 320px; max-width: 560px; }
.dx-tl { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dx-tl::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 189px; border-left: 1px solid var(--ring-2); }
.dx-tl > li { position: relative; display: grid; grid-template-columns: 172px 34px minmax(0, 1fr); align-items: start; }
.dx-tl > li + li { margin-top: 16px; }
.dx-tl-when { display: flex; flex-direction: column; gap: 1px; padding-top: 12px; text-align: right; font-size: var(--fs-13); color: var(--muted); }
.dx-tl-when b { color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
.dx-tl-dot { position: relative; z-index: 1; display: grid; place-items: center; justify-self: center; width: 13px; height: 13px; margin-top: 15px; border: 2px solid var(--ring-2); border-radius: 50%; background: var(--surface); color: var(--science); }
.dx-tl-item.future .dx-tl-dot { border-color: var(--primary); }
.dx-tl-item.past .dx-tl-dot { border-color: var(--ok); background: var(--ok-soft); }
.dx-tl-item.forever .dx-tl-dot { width: 24px; height: 24px; margin-top: 10px; border: 1px solid var(--science-line); background: var(--science-soft); }
.dx-tl-item.forever .dx-tl-dot svg { width: 13px; height: 13px; }
.dx-tl-now .dx-tl-dot { width: 15px; height: 15px; margin-top: 3px; border: 3px solid var(--primary); }
.dx-tl-now .dx-tl-when { padding-top: 0; }
.dx-tl-now .dx-tl-when b { color: var(--primary); }
.dx-tl-rule { align-self: center; height: 0; margin-top: -10px; border-top: 1px dashed var(--primary-line); }
.dx-tl-body { min-width: 0; }
@container dx (max-width: 720px) {
  .dx-tl::before { left: 11px; }
  .dx-tl > li { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "dot when" "dot body"; column-gap: 10px; }
  .dx-tl-when { grid-area: when; flex-direction: row; flex-wrap: wrap; gap: 0 8px; padding: 10px 0 6px; text-align: left; }
  .dx-tl-dot { grid-area: dot; margin-top: 14px; }
  .dx-tl-body { grid-area: body; }
  .dx-tl-now .dx-tl-when { padding: 0; }
  .dx-tl-now .dx-tl-dot { margin-top: 2px; }
  .dx-tl-rule { display: none; }
}
.card.dx-lock { display: flex; flex-direction: column; }
.dx-lock .card-head { flex-wrap: wrap; }
.dx-lock .card-body { display: flex; flex-direction: column; gap: 12px; }
.dx-lock .card-foot { justify-content: flex-start; }
.dx-lockgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 20px; margin: 0; }
.dx-lockgrid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dx-lockgrid dt { color: var(--muted); font-size: var(--fs-12); }
.dx-lockgrid dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; min-width: 0; font-size: var(--fs-14); overflow-wrap: anywhere; }
.dx-lockrun { display: flex; flex-direction: column; gap: 6px; }
.dx-lockrun .progress > span { background: var(--science); }
.badge.dx-badge-lock { border-color: var(--science-line); background: var(--science-soft); color: var(--science); }
.badge.dx-badge-open { border-color: var(--st-passed-line); background: var(--st-passed); color: var(--st-passed-ink); }
.dx-badge-lock svg, .dx-badge-open svg { width: 12px; height: 12px; }
.dx-verify-slot:empty { display: none; }
.dx-verify { padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-row); background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface)); }
.dx-verify .notice.warn { padding: 0; border: 0; background: transparent; }
.dx-verify-addr { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dx-verify-addr .addr { align-items: flex-start; min-width: 0; }
.dx-verify-addr .addr a, .dx-verify-addr .addr > span { overflow-wrap: anywhere; word-break: break-all; }
.check.dx-verify-check { align-items: flex-start; font-weight: 600; }
.check.dx-verify-check input { margin-top: 2px; }
.dx-role { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-role:empty { display: none; }
.dx-foot-note { margin-left: auto; }
@media (max-width: 640px) { .dx-foot-note { flex-basis: 100%; margin-left: 0; } }
.dx-earn .legend { display: none; } /* the list under the bar names every part */

/* ================================================================== the server's static copy (prerendered /tokens pages, before the app mounts) */
.dx-pre { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.dx-pre table.t { border: 1px solid var(--ring); border-radius: var(--r-window); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.dx-pre table.t caption { padding: 0 0 8px; color: var(--muted); font-size: var(--fs-13); text-align: left; }
.dx-pre table.t tbody th { background: transparent; color: var(--ink); font-size: var(--fs-14); font-weight: 400; }
.dx-pre table.t tbody th span { color: var(--muted); }
.dx-pre dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin: 0; }
.dx-pre dl > div { display: flex; flex-direction: column; gap: 2px; }
.dx-pre dt { color: var(--muted); font-size: var(--fs-12); }
.dx-pre dd { margin: 0; overflow-wrap: anywhere; }
.dx-pre h2 { font-size: var(--fs-17); }
.dx-pre ul { margin: 0; padding-left: 1.2em; }
.dx-pre p { display: flex; gap: 16px; margin: 0; }

/* ---- dao (merged from parts/dao.css) ---- */
/* COLLAB 2.2: dao rules (merged into app.css by tools/merge_css.py at release). */
/* The DAO areas' rules of 2.1 (governance, models, sealed data, creation, treasury, the DAO frame and its
   tokens views), moved here from app.css for 2.2 in their original order; W-DAO owns them. They come
   before app.css's design system, as they did there. */

/* ---- governance (merged from parts/governance.css) ---- */
/* 2.1 additions for the governance area, imported at the top of app.css; tools/merge_css.py folds this file
   into app.css at release. Existing rules of the area stay in app.css and are changed there. */

/* minimum Yes on the thresholds figure (rules builder) */
.gv-scale.minyes .gv-fill { background: color-mix(in srgb, var(--yes) 55%, var(--bg-3)); }

/* integrations builder: the entry, its addresses and the outside admin powers */
.gv-int-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gv-int-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
.gv-int-site { color: var(--muted); font-size: var(--fs-12); }
.gv-int-addrs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: var(--fs-12); }
.gv-int-addrs dt { color: var(--muted); }
.gv-int-addrs dd { min-width: 0; margin: 0; }
.badge.gv-unlisted { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.gv-powers { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--fs-13); }
.gv-powers li + li { margin-top: 4px; }
.gv-power-what { color: var(--ink); font-weight: 500; }
.gv-power { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--ring); }
.gv-power-head { color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; overflow-wrap: anywhere; }
.gv-powers.gv-cannot { color: var(--muted); }

/* ---- models (merged from parts/models.css) ---- */
/* 2.1 additions for the models area, imported at the top of app.css; tools/merge_css.py folds this file
   into app.css at release. Existing rules of the area stay in app.css and are changed there.
   GL1F collections: the register has one card per collection the DAO uses, named in its head; a
   collection this deployment does not list carries the warn-coloured "Unlisted" badge (as unchecked
   tokens and integrations do elsewhere) and its card a warn hairline. */

/* ------------------------------------------------------------------ the register, per collection */
.card-head.md-reg-top { flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.md-reg-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.md-reg-top .md-reg-h { font-size: var(--fs-17); font-weight: 650; letter-spacing: -0.01em; }
.md-reg-name a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.md-reg-name a:hover { color: var(--ink); }
.md-reg-name a .ic { width: 13px; height: 13px; }
.md-reg-count { margin-left: auto; color: var(--muted); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.md-reg-count:empty { display: none; }
.card.md-reg-x { border-color: var(--warn-line); }
.md-reg-note { padding: 14px 18px 2px; }
.md-reg-empty { display: flex; flex-direction: column; gap: 12px; }

/* collection names: listed ones are pills, unlisted ones a warning badge with their registry */
.badge.md-unlisted { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.badge.md-unlisted .ic { width: 13px; height: 13px; }
.row-tight.md-coll-x { gap: 4px 8px; }
.item.md-which { align-items: center; }

/* side cards: donations name the collection, more collections can be proposed */
.md-donate-c { display: block; margin-top: 1px; }
.row.md-more-row { gap: 10px; padding: 10px 0; }

/* ------------------------------------------------------------------ datasheet */
.md-kv-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ------------------------------------------------------------------ builders: a change the contract would refuse */
table.t.md-delta-table tr.md-d-blocked td.md-d-after { background: var(--danger-soft); color: var(--danger); font-weight: 600; box-shadow: inset 2px 0 0 var(--danger); }

/* ---- sealed (merged from parts/sealed.css) ---- */
/* 2.1 additions for the sealed area, imported at the top of app.css; tools/merge_css.py folds this file
   into app.css at release. Existing rules of the area stay in app.css and are changed there. */

/* records grouped by CIPNFT contract when the DAO uses several: a hairline, then the contract's name,
   address, listing state and count, then its records */
.sl-group { border-top: 1px solid var(--ring); }
.sl-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 18px; background: var(--bg-2); border-bottom: 1px solid var(--ring); }
.sl-group-head h4 { margin: 0; color: var(--ink); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0; }
.sl-group-count { margin-left: auto; }
.sl-group-empty { margin: 0; padding: 14px 18px; }

/* where the active DAO key is registered, one line per contract */
.sl-reglist { display: flex; flex-direction: column; gap: 4px; }
.sl-reglist li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; align-items: start; }
.sl-reglist .ic { width: 14px; height: 14px; margin-top: 2px; color: var(--science); }
.sl-reglist .ic.warn-t { color: var(--warn); }

/* a small badge after text in a list line */
.sl-inline-badge { margin-left: 6px; vertical-align: 1px; }

/* ---- create (merged from parts/create.css) ---- */
/* 2.1 additions for the create area, imported at the top of app.css; tools/merge_css.py folds this file
   into app.css at release. Existing rules of the area stay in app.css and are changed there. */

/* ------------------------------------------------------------------ integrations (people step) */
.cr-int-list { display: flex; flex-direction: column; gap: 8px; }
.cr-int { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); }
.cr-int:has(.cr-int-pick:hover) { border-color: var(--ring-2); }
.cr-int.is-off { background: var(--bg-2); }
.cr-int.is-off .cr-int-text b { color: var(--muted); }
.cr-int-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.check.cr-int-pick { flex: 1 1 260px; align-items: flex-start; min-width: 0; }
.check.cr-int-pick input { margin-top: 3px; flex: none; }
.stack-sm.cr-int-text { flex: 1 1 auto; gap: 2px; min-width: 0; }
.cr-int-text b { color: var(--ink); font-weight: 600; }
.cr-int-text .mono { overflow-wrap: anywhere; }
.cr-int-site { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cr-int-site .ic { width: 12px; height: 12px; }
.cr-int-powers { padding-left: 24px; }
.cr-int-own .cr-int-powers { padding-left: 0; }
.cr-int-powers > summary { width: fit-content; cursor: pointer; color: var(--primary-ink); }
.stack-sm.cr-int-powers-body { gap: 10px; margin-top: 8px; padding: 10px 12px; border-left: 2px solid var(--ring-2); background: var(--bg-2); }
.stack-sm.cr-int-key { gap: 3px; }
.cr-int-can { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.cr-int.cr-int-own { gap: 8px; border-style: dashed; border-color: var(--ring-2); background: var(--bg-2); }
.cr-int-add > summary { width: fit-content; cursor: pointer; color: var(--primary-ink); }
.cr-int-form { min-width: 0; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); }
.cr-int-form > legend { padding: 0 6px; margin-left: -6px; }
@media (max-width: 560px) {
  .cr-int-top > .cr-int-site { padding-left: 24px; }
}
/* the review's integrations card */
.kv.cr-int-kv { gap: 2px 14px; font-size: var(--fs-13); }
.kv.cr-int-kv dd, .mono.cr-int-addr { font-family: var(--mono); font-size: var(--fs-12); color: var(--ink-2); }

/* ---- treasury (merged from parts/treasury.css) ---- */
/* 2.1 additions for the treasury area, imported at the top of app.css; tools/merge_css.py folds this file
   into app.css at release. Existing rules of the area stay in app.css and are changed there. */

/* ------------------------------------------------------------------ settings: integrations */
/* One block per GL1F collection or CIPNFT contract: what it is and what the treasury holds there on the
   left, the dependency panel (outside admin keys, dashed like everything outside the DAO) on the right. */
.tr-integs { display: flex; flex-direction: column; }
.tr-integ { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px 26px; align-items: start; padding: 18px 0; border-top: 1px solid var(--ring); }
.tr-integs > .tr-integ:first-child { border-top: 0; padding-top: 2px; }
.tr-integ-main { min-width: 0; }
.tr-integ-title { flex-wrap: wrap; }
.tr-integ-title h4 { margin: 0; font-size: var(--fs-17); font-weight: 600; letter-spacing: -0.01em; }
.badge.tr-unlisted-badge { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.tr-integ-check { display: flex; flex-wrap: nowrap; gap: 6px; align-items: flex-start; }
.tr-integ-check > span { min-width: 0; }
.tr-integ-check .ic { flex: none; margin-top: 2px; }
.tr-integ-check.ok .ic { color: var(--ok); }
.tr-integ-check.warn { color: var(--warn); }
.tr-integ-addrs { margin: 2px 0 0; }
.tr-integ-pending { gap: 6px; flex-wrap: wrap; }
.tr-integ-actions { align-items: center; }
.tr-deps { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px; border: 1px dashed var(--ring-2); border-radius: var(--r-row); background: var(--surface-2); }
.tr-integ.tr-unlisted .tr-deps { border-color: var(--warn-line); }
.tr-deps h5 { margin: 0; font-size: var(--fs-14); font-weight: 600; }
.tr-dep { min-width: 0; }
.tr-dep + .tr-dep { padding-top: 12px; border-top: 1px dashed var(--ring-2); }
.tr-dep-head { gap: 8px 12px; flex-wrap: wrap; }
.tr-deps .tr-can li::marker { color: var(--warn); }
.tr-deps .tr-cannot { color: var(--muted); }
.tr-deps .tr-cannot li::marker { content: "\2013  "; color: var(--muted); }
.tr-integ-add { padding-top: 16px; border-top: 1px solid var(--ring); }
.tr-integ-add h4 { margin: 0; font-size: var(--fs-15); }
/* an integration's name can be long ("CIPNFT Lab (local second contract)"): its buttons wrap on a phone */
.tr-integ-add .btn, .tr-integ-actions .btn { max-width: 100%; white-space: normal; text-align: left; padding-top: 6px; padding-bottom: 6px; }
@container ws-main (max-width: 860px) {
  .tr-integ { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ members: open freeze votes */
.tr-row-link.tr-fv { text-decoration: none; }
.tr-row-link.tr-fv a { color: inherit; text-decoration: underline; text-decoration-color: var(--ring-2); text-underline-offset: 3px; }
.tr-row-link.tr-fv a:hover { color: var(--primary); text-decoration-color: currentColor; }

/* ---- dao (merged from parts/dao.css) ---- */
/* 2.1 additions for the dao area, imported at the top of app.css; tools/merge_css.py folds this file
   into app.css at release. Existing rules of the area stay in app.css and are changed there. */

/* ------------------------------------------------------------------ the smallest Yes that passes */
/* Under the rules figure: one sentence per rule set, marked with the figure's dashed lines. */
.dao-yes-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dao-yes-list > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dao-yes-list dt { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; }
.dao-yes-list dt i { flex: none; width: 16px; height: 0; border-top: 1.5px dashed var(--ink-2); }
.dao-yes-list dt i.c { border-top-color: var(--veto); }
:root[data-theme="dark"] .dao-yes-list dt i.c { border-top-color: color-mix(in srgb, var(--veto) 55%, #ffffff); }
.dao-yes-list dd { margin: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }

/* the picker's rule sets: the smallest passing Yes under each summary */
.dao-rulesline-yes { display: block; margin-top: 5px; color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }

/* ---- governance (merged from parts/governance.css) ---- */
/* Governance proposal builders (web/js/views/new/*). Every builder is a form of hairline groups beside
   a live "What changes" panel that opens with the rules deciding the proposal and shows quantities
   now and after, with figures where a picture helps (thresholds, dilution, the holding window).
   Prefix gv-; shared classes are combined, never restyled. Merged into app.css at release. */

/* ------------------------------------------------------------------ layout: the form beside "What changes" */
.gv-layout { container: gv-block / inline-size; min-width: 0; }
.gv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 26px; align-items: start; }
.gv-main { min-width: 0; }
@container gv-block (min-width: 700px) {
  .gv-layout:not(.wide) > .gv-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 292px); }
  .gv-layout:not(.wide) > .gv-grid > .gv-effect { position: sticky; top: calc(var(--topbar) + 20px); }
}
/* a wide form keeps the panel under it; there the panel's quantities flow in columns */
@container gv-block (min-width: 620px) {
  .gv-layout.wide .gv-deltas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); column-gap: 28px; }
  .gv-layout.wide .gv-delta:nth-child(-n + 3) { padding-top: 0; border-top: 0; }
}

/* the form: groups of related fields under plain labels, separated by hairlines */
.gv-form { container: gv-form / inline-size; display: flex; flex-direction: column; min-width: 0; }
/* each group opens with a hairline; its legend sits on the line, like a section rule in a lab notebook */
.gv-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--ring); }
.gv-group + .gv-group { margin-top: 22px; }
.gv-group > legend { padding: 0 12px 0 0; margin: 0 0 2px; color: var(--ink); font-size: var(--fs-14); font-weight: 600; letter-spacing: -0.005em; }
.gv-group > p { color: var(--ink-2); }

/* ------------------------------------------------------------------ the "What changes" panel */
.gv-effect { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface-2); }
.gv-effect-title { font-size: var(--fs-14); font-weight: 600; letter-spacing: -0.005em; }
.gv-effect-stance { padding-bottom: 12px; border-bottom: 1px solid var(--ring); }
@container gv-block (max-width: 480px) { .gv-effect { padding: 12px 12px 14px; } }
.gv-effect-stance:empty { display: none; }
.gv-effect-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gv-effect-empty { margin: 0; color: var(--muted); font-size: var(--fs-13); line-height: 1.5; }
.gv-notes { display: flex; flex-direction: column; gap: 6px; }
.gv-notes > p { margin: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.gv-effect .notice { font-size: var(--fs-13); }
.gv-effect .fig { gap: 10px; }

/* the rules that decide the proposal */
.gv-stance { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.gv-stance > .badge { flex: none; margin-top: 1px; }
.gv-stance-why { color: var(--ink); font-weight: 500; }

/* quantities now and after */
.gv-deltas { display: flex; flex-direction: column; margin: 0; }
.gv-delta { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--ring); }
.gv-delta:first-child { padding-top: 0; border-top: 0; }
.gv-delta dt { color: var(--muted); font-size: var(--fs-12); line-height: 1.4; }
.gv-delta dd { margin: 0; min-width: 0; }
.gv-vals { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; font-family: var(--mono); font-size: var(--fs-13); letter-spacing: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gv-vals.text { font-family: var(--sans); font-size: var(--fs-14); letter-spacing: -0.006em; }
.gv-vals.text .gv-is { font-weight: 500; }
.gv-was { color: var(--muted); }
.gv-is { color: var(--ink); font-weight: 600; }
.gv-delta.bad .gv-is { color: var(--danger); }
.gv-delta.warn .gv-is { color: var(--warn); }
.gv-delta.good .gv-is { color: var(--ok); }
.gv-vals .money { gap: 0 6px; }
.gv-arrow { width: 16px; height: 10px; flex: none; color: var(--faint); }
.gv-delta-note { color: var(--muted); font-size: var(--fs-12); line-height: 1.45; }

/* share of a treasury holding that leaves */
.gv-leaving { display: flex; flex-direction: column; gap: 6px; }
.gv-leaving .progress > span.gv-over { background: var(--danger); }

/* figure: percentages now (dashed line) and proposed (fill) on 0-100% tracks */
.gv-scales { display: flex; flex-direction: column; gap: 14px; }
.gv-scale-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--ink-2); font-size: var(--fs-12); }
.gv-scale-head .gv-vals { font-size: var(--fs-12); justify-content: flex-end; }
.gv-track { position: relative; height: 9px; margin-top: 7px; border-radius: var(--r-pill); background: var(--bg-3); }
.gv-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink-2); }
.gv-scale.quorum .gv-fill { background: var(--d2); }
.gv-scale.pass .gv-fill { background: var(--yes); }
.gv-scale.veto .gv-fill { background: var(--veto); }
.gv-scale.initial .gv-fill { background: var(--d4); }
.gv-now { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 1.5px dashed var(--ink); }
.gv-ticks { display: flex; justify-content: space-between; margin-top: -4px; color: var(--faint); font: 500 10px/1 var(--mono); }

/* figure columns (standard and critical rules side by side) */
.gv-figcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px 30px; }
.gv-figcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gv-figcol-head { color: var(--ink); font-size: var(--fs-13); font-weight: 600; }

/* figure: voting power now and after (dilution), one stacked bar each */
.gv-bars { display: flex; flex-direction: column; gap: 8px; }
.gv-bar-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; }
.gv-bar-name { color: var(--muted); font-size: var(--fs-12); }
.gv-bar { display: flex; height: 12px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-3); }
.gv-bar > span { height: 100%; background: var(--c, var(--d6)); }
.gv-bar > span + span { box-shadow: inset 1.5px 0 0 var(--surface-2); }
.gv-bar > span.fresh, .gv-legend i.fresh { background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 40%, transparent) 3px 6px); }
.gv-legend { gap: 4px 14px; margin-top: 4px; font-size: var(--fs-12); }
.gv-legend > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.gv-legend i { margin-right: 2px; background: var(--c, var(--d6)); }
.gv-legend .gv-arrow { width: 12px; height: 8px; }

/* figure: the holding window (two snapshot blocks and the span between them) */
.gv-window { display: flex; flex-direction: column; gap: 8px; }
.gv-window-track { position: relative; height: 26px; }
.gv-window-track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; border-top: 1px solid var(--ring-2); }
.gv-window-band { position: absolute; top: 6px; height: 13px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--science) 18%, transparent); border: 1px solid var(--science-line); }
.gv-window-mark { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 1.5px solid var(--ink-2); }
.gv-window-mark.dashed { border-left-style: dashed; }
.gv-window-band { left: 16%; right: 8%; }
.gv-window-mark.start { left: 16%; }
.gv-window-mark.end { right: 8%; }
.gv-window-labels { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: var(--fs-12); line-height: 1.4; }
.gv-window-labels b { display: block; color: var(--ink); font: 600 var(--fs-12)/1.4 var(--mono); }
.gv-window-labels > :last-child { text-align: right; }

/* ------------------------------------------------------------------ address book and member picker */
.gv-addr { position: relative; min-width: 0; }
.gv-book-btn { position: absolute; top: 1px; right: 0; display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--primary);
  font-size: var(--fs-12); font-weight: 500; line-height: 1.4; cursor: pointer; }
.gv-book-btn svg { width: 14px; height: 14px; }
.gv-book-btn:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.gv-addr > .field > label { padding-right: 104px; }
.pop.gv-book { width: min(360px, calc(100vw - 24px)); }
.gv-book-list { max-height: 340px; margin: 0 -8px; padding: 0 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.gv-book-group + .gv-book-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ring); }
.gv-book-head { display: block; padding: 4px 6px; color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.gv-book-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 6px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.gv-book-row:hover { background: var(--bg-3); }
.gv-book-row .avatar { border-radius: 7px; }
.gv-book-main { display: flex; flex-direction: column; min-width: 0; }
.gv-book-main .mono { font-size: var(--fs-13); }
.gv-book-main .strong { font-size: var(--fs-13); }
.gv-book-meta { overflow: hidden; color: var(--muted); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }
.gv-pick input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--primary); }

/* recipients */
.gv-recipients .list-row + .list-row { padding-top: 10px; border-top: 1px dashed var(--ring); }

/* NFTs the treasury holds */
.gv-nfts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.gv-nft { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.gv-nft:hover { border-color: var(--ring-2); background: var(--surface-2); }
.gv-nft[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.gv-nft .avatar { border-radius: 10px; }
.gv-nft-text { display: flex; flex-direction: column; min-width: 0; }
.gv-nft-name { display: -webkit-box; overflow: hidden; font-size: var(--fs-13); font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.gv-nft-id { color: var(--muted); font: 500 var(--fs-12)/1.4 var(--mono); }

/* claims preview */
.gv-claims .addr { font-size: var(--fs-12); }

/* two controls side by side (address + amount, contract + id), stacked when the form is narrow */
.gv-pair { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 10px 12px; align-items: start; }
.gv-pair.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@container gv-form (max-width: 430px) { .gv-pair, .gv-pair.even { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .gv-pair, .gv-pair.even { grid-template-columns: minmax(0, 1fr); } }

/* totals under a list of payments */
.gv-sum { display: flex; flex-direction: column; gap: 4px; }

/* collapsible helpers (paste a list, current policy) */
.gv-details > summary { width: fit-content; color: var(--primary); font-size: var(--fs-13); font-weight: 500; cursor: pointer; }
.gv-details > summary:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.gv-details[open] > summary { margin-bottom: 4px; }

/* plain list inside notices */
.gv-plain { margin: 6px 0 0; padding-left: 1.1em; }
.gv-plain li { margin: 2px 0; }

/* grouped fields (deposit rules, standard and critical columns, checkbox groups) */
.gv-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); }
.gv-col > legend { margin-left: -6px; padding: 0 6px; color: var(--ink); font-size: var(--fs-13); font-weight: 600; }
.gv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@container gv-form (max-width: 560px) { .gv-cols { grid-template-columns: minmax(0, 1fr); } }

/* duration: number + unit */
.gv-dur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, auto); gap: 6px; }

/* checkbox with a label and a hint underneath */
.gv-check { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: var(--fs-14); font-weight: 400; cursor: pointer; }
.gv-check input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--primary); }
.gv-check-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gv-check-text .hint { color: var(--muted); font-size: var(--fs-12); }
.gv-check.locked { cursor: default; }
.gv-check.locked .gv-check-text > span:first-child { color: var(--ink-2); }

/* compact tables inside forms */
.gv-table td, .gv-table th { padding: 8px 10px; }
.gv-table td.gv-fn, .gv-fn { overflow-wrap: anywhere; font-size: var(--fs-12); }
.gv-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--ring); border-radius: var(--r-ctl); }
.gv-diff td:first-child { color: var(--ink-2); }
.gv-inline { min-width: 180px; }

/* constitution editor and line diff */
.gv-editor { min-height: 380px; }
.gv-diff-wrap { max-height: 560px; overflow: auto; border-radius: var(--r-row); }
.gv-diff-lines .gv-gap { padding: 3px 14px; background: var(--bg-2); color: var(--muted); font-family: var(--sans); font-size: var(--fs-12); text-align: center; }
.gv-status { overflow-wrap: anywhere; }

/* who gains or loses which permission (representatives) */
.gv-matrix th, .gv-matrix td { white-space: nowrap; }
.gv-matrix .gv-cell { width: 1%; text-align: center; }
.gv-matrix thead .gv-cell { padding-inline: 8px; }
.gv-who { display: inline-flex; align-items: center; gap: 8px; }
.gv-who .avatar { border-radius: 7px; }
.gv-who-text { display: flex; flex-direction: column; line-height: 1.3; }
.gv-who-text .mono { color: var(--ink); font-weight: 500; }
.gv-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill); font: 600 13px/1 var(--mono); }
.gv-mark.keep { color: var(--ink-2); }
.gv-mark.add { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary-line); }
.gv-mark.drop { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line); }
.gv-matrix tr.gv-rep-removed .gv-who-text .mono { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.gv-matrix tr.gv-rep-unchanged .gv-who-text .tiny { color: var(--faint); }

/* logo now and after */
.gv-logo { display: inline-flex; align-items: center; gap: 8px; }

/* representative rows */
.gv-rep { contain: inline-size; padding: 12px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); }
.gv-perms { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.gv-perms > legend { margin-bottom: 6px; padding: 0; color: var(--ink-2); }
.gv-perm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.gv-perm { font-size: var(--fs-13); }
.gv-perm-op { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .gv-perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gv-perm-grid { grid-template-columns: minmax(0, 1fr); } }

/* hashes and signed payloads */
.gv-hash { overflow-wrap: anywhere; word-break: break-all; }
.gv-pre { max-height: 220px; white-space: pre-wrap; }
.gv-hashbox { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gv-hashbox-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--muted); font-size: var(--fs-12); line-height: 1.4; }
.gv-hashbox .gv-hash { color: var(--ink); font-size: var(--fs-13); line-height: 1.5; }
.gv-copy { padding: 0; border: 0; background: none; color: var(--primary); font-size: var(--fs-12); font-weight: 500; cursor: pointer; }
.gv-copy:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }

/* the calls of a raw transaction, decoded, in the order they run */
.gv-calls { margin: 0; padding-left: 1.4em; }
.gv-calls > li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ring); }
.gv-calls > li::marker { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.gv-call > * + * { margin-top: 5px; }
.gv-call-title { display: block; color: var(--ink); font-size: var(--fs-14); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.gv-call-lines { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--fs-13); }
.gv-call-raw { display: block; color: var(--muted); font: 400 var(--fs-12)/1.5 var(--mono); overflow-wrap: anywhere; }
.gv-call-raw > span { display: block; }

/* constitution: the changes under the version figures */
.gv-diff-head { flex-wrap: wrap; gap: 4px 12px; }

/* ---- tokens (merged from parts/tokens.css) ---- */
/* tokens: the token issuance, token admin and DeSciFi builders, the Tokens and Liquidity tabs.
   Prefix every class (see web/DEVELOPING.md); shared classes are only adjusted in combination with a
   tk- class. Colours come from the design tokens: allocations use the data palette (--d1 … --d6) and
   "not allocated" is a hatch of the strong hairline colour. Merged into app.css at release. */

:root {
  --tk-free: repeating-linear-gradient(135deg, var(--ring-2) 0 2px, transparent 2px 5px);
}

/* ------------------------------------------------------------------ proposal builders */
.tk-group { padding-top: 18px; border-top: 1px solid var(--ring); }
.tk-group:first-child { padding-top: 0; border-top: 0; }
.tk-group h4 { font-size: var(--fs-15); }
.tk-h5 { margin: 0; color: var(--ink); font-size: var(--fs-13); font-weight: 600; letter-spacing: -0.005em; }
.tk-fields { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: start; }
/* Pool rows always fill their row of the shared list field, so the remove button sits beside them. */
.tk-pool-row { width: 4000px; max-width: 100%; padding: 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface-2); }
.tk-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tk-fieldset > legend { margin-bottom: 6px; padding: 0; color: var(--ink-2); }
.tk-caps { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.tk-cap { display: flex; gap: 10px; align-items: flex-start; height: 100%; padding: 11px 12px; border: 1px solid var(--ring); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; }
.tk-cap:hover { border-color: var(--ring-2); }
.tk-cap:has(input:checked) { border-color: var(--primary-line); background: var(--primary-soft); }
.tk-cap input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); flex: none; }
.tk-cap-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-check { align-items: flex-start; }
.tk-check input { margin-top: 3px; }
.tk-swatch { display: inline-block; flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 3px; }
.tk-addr { min-width: 0; color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-13); overflow-wrap: anywhere; word-break: break-all; }
.tk-routes { gap: 6px; }
.tk-route { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; }
.tk-route:hover { border-color: var(--ring-2); }
.tk-route:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.tk-route input { margin-top: 3px; accent-color: var(--primary); }
.tk-state { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); }
.tk-result { padding: 10px 12px; border-top: 1px dashed var(--ring-2); gap: 6px 16px; }
.tk-result dd { color: var(--ink); }
.tk-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 1.1em; }
.tk-list li::marker { color: var(--faint); }

/* The allocation meter: it stays under the top bar (and under the section bar on narrow screens)
   while the allocations are edited, like the readout of an instrument. */
.tk-meter { position: sticky; top: calc(var(--topbar) + 10px); z-index: 5; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px;
  border: 1px solid var(--ring); border-radius: var(--r-row); background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tk-meter-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.tk-meter-top > span:last-child { font-variant-numeric: tabular-nums; }
.tk-meter-ok { color: var(--ok); font-weight: 600; }
.tk-meter-short { color: var(--warn); font-weight: 500; }
.tk-meter-over { color: var(--danger); font-weight: 600; }
.tk-meter-empty { color: var(--muted); }
.mini-ballot.tk-meter-bar { height: 10px; }

/* The launch summary: a ledger of where every token goes. */
.tk-summary { padding: 18px; border: 1px solid var(--ring); border-top: 3px solid var(--science); border-radius: var(--r-row); background: var(--bg-2); }
.tk-summary .table-wrap { border: 1px solid var(--ring); border-radius: var(--r-ctl); background: var(--surface); }
table.t.tk-ledger th[scope="row"] { padding: 10px 14px; border-bottom: 1px solid var(--ring); background: transparent; color: var(--ink); font-size: var(--fs-14); font-weight: 400; text-align: left; white-space: normal; }
table.t.tk-ledger tr:last-child th[scope="row"] { border-bottom: 0; }
table.t.tk-ledger tfoot th[scope="row"], table.t.tk-ledger tfoot td { border-top: 1px solid var(--ring-2); border-bottom: 0; background: var(--bg-2); font-weight: 600; }
table.t.tk-ledger td { white-space: nowrap; }
.tk-ledger-what { display: flex; gap: 10px; align-items: flex-start; min-width: 220px; }
.tk-ledger-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tk-ledger-free th[scope="row"] .strong { color: var(--warn); }
.grid.tk-summary-cols { gap: 18px; }

/* "If this proposal passes": the before and after of a token admin action */
.tk-effects { padding: 14px; border: 1px solid var(--ring); border-left: 3px solid var(--primary); border-radius: var(--r-row); background: var(--bg-2); }
.tk-effects .table-wrap { border: 1px solid var(--ring); border-radius: var(--r-ctl); background: var(--surface); }
table.t.tk-effects-t thead th:first-child { width: 34%; }
table.t.tk-effects-t tbody th { color: var(--muted); }
table.t.tk-effects-t td.num { font-family: var(--sans); font-size: var(--fs-13); }
.kv.tk-outcome { gap: 6px 18px; }
.kv.tk-outcome dd { color: var(--ink); }

/* ------------------------------------------------------------------ Tokens and Liquidity tabs */
/* .ws-main is a style container, which scopes CSS counters: without a reset here every figure in
   the workspace would read "Figure 1". */
.tk-view, .tk-launch { counter-reset: fig; }
.tk-head .page-head-text { flex: 1 1 420px; }
.tk-head .lede { max-width: 72ch; }
.tk-center { justify-content: center; }
.tk-wrap { flex-wrap: wrap; }
.tk-sub { min-width: 0; color: var(--muted); font-size: var(--fs-12); line-height: 1.45; overflow-wrap: anywhere; }
.tk-sub .money { font-size: var(--fs-12); }
/* stat strips inside windows: smaller values that may wrap */
.stats.tk-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); border: 1px solid var(--ring); border-radius: var(--r-row); }
.stats.tk-stats > .stat { gap: 3px; padding: 12px 14px; }
.stats.tk-stats .stat .v { overflow: visible; font-size: var(--fs-17); font-weight: 600; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.stats.tk-stats .stat .v .money { gap: 0 6px; }
.stats.tk-stats .stat .v .fiat { font-size: var(--fs-13); }
.card.stats.tk-summary-stats { border-radius: var(--r-window); }
.card.stats.tk-summary-stats .stat .v { font-size: var(--fs-20); }
.tk-cell-lines { display: flex; flex-direction: column; gap: 1px; }

/* a token window */
.card-head.tk-token-head { align-items: flex-start; flex-wrap: wrap; padding-block: 16px; }
.tk-token-id { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 320px; min-width: 0; }
.tk-name { font-size: var(--fs-17); overflow-wrap: anywhere; }
.tk-token-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container ws-main (min-width: 1080px) {
  .tk-token-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.fig.tk-fig { gap: 10px; }
.tk-dist { display: flex; flex-direction: column; gap: 14px; }
.tk-dist-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; }
.tk-dist-k { padding-top: 0; color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; line-height: 9px; }
table.t.tk-pools-t td, table.t.tk-pools-t th { padding: 10px 12px; }
table.t.tk-pools-t td { vertical-align: top; }
table.t.tk-pools-t td.num { white-space: nowrap; }
.tk-pool-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-drops > .tk-drop { padding: 12px 0; }
.tk-drops > .tk-drop:first-child { padding-top: 4px; }
.tk-drops > .tk-drop:last-child { padding-bottom: 0; }
.card-foot.tk-manage { justify-content: flex-start; gap: 10px 14px; }
.tk-more > summary { list-style: none; cursor: pointer; }
.tk-more > summary::-webkit-details-marker { display: none; }
.tk-more[open] > summary svg { transform: rotate(180deg); }
.tk-links { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kv.tk-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.kv.tk-kv dt { margin-top: 6px; color: var(--ink-2); font-weight: 600; }
.kv.tk-kv dt:first-child { margin-top: 0; }
.kv.tk-kv dd { color: var(--muted); }

/* a pool window and the lock list */
.tk-collected { color: var(--ink-2); }
.tk-locks > .tk-lock { padding: 14px 0; }
.tk-locks > .tk-lock:first-child { padding-top: 0; }
.tk-locks > .tk-lock:last-child { padding-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .tk-more > summary svg { transition: transform .15s; }
}
@media (max-width: 1023px) {
  /* the DAO's section bar sticks under the top bar here */
  .tk-meter { top: calc(var(--topbar) + 54px); }
}
@media (max-width: 640px) {
  .tk-state { flex-direction: column; }
  /* the ledger keeps two columns on a phone; the shares are in the figure's legend */
  .tk-ledger .tk-col-share { display: none; }
  .tk-ledger-what { min-width: 0; }
  table.t.tk-ledger th[scope="row"], table.t.tk-ledger td { padding: 9px 10px; }
  .kv.tk-result { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .kv.tk-result dd { margin-bottom: 6px; }
  /* before and after: each row becomes a block, the two values side by side under its label */
  table.t.tk-effects-t thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t.tk-effects-t, table.t.tk-effects-t tbody { display: block; }
  table.t.tk-effects-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 9px 12px; border-bottom: 1px solid var(--ring); }
  table.t.tk-effects-t tbody tr:last-child { border-bottom: 0; }
  table.t.tk-effects-t.t-compact tbody th, table.t.tk-effects-t tbody td { display: block; padding: 0; border: 0; }
  table.t.tk-effects-t tbody th { grid-column: 1 / -1; }
  table.t.tk-effects-t td[data-label]::before { content: attr(data-label); display: block; color: var(--faint); font: 500 var(--fs-12) / 1.4 var(--sans); }
  /* pools of a token: each row becomes a block with labelled values */
  table.t.tk-pools-t thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t.tk-pools-t, table.t.tk-pools-t tbody { display: block; }
  table.t.tk-pools-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--ring); }
  table.t.tk-pools-t tbody tr:last-child { border-bottom: 0; }
  table.t.tk-pools-t tbody td, table.t.tk-pools-t tbody td.r, table.t.tk-pools-t tbody td.num { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.t.tk-pools-t tbody tr:hover td { background: transparent; }
  table.t.tk-pools-t tbody td:nth-child(5) { grid-column: 2; grid-row: 1; }
  table.t.tk-pools-t tbody td:nth-child(2), table.t.tk-pools-t tbody td:nth-child(3), table.t.tk-pools-t tbody td:nth-child(4) { grid-column: 1 / -1; }
  table.t.tk-pools-t td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font: 500 var(--fs-12) / 1.4 var(--sans); }
  .tk-pool-row { padding: 12px; }
  .tk-summary { padding: 14px; }
  .tk-token-id { flex-wrap: wrap; }
  .tk-dist-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .stats.tk-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stats.tk-stats > .stat { border-left: 0; border-top: 1px solid var(--ring); }
  .stats.tk-stats > .stat:nth-child(-n + 2) { border-top: 0; }
  .stats.tk-stats > .stat:nth-child(2n) { border-left: 1px solid var(--ring); }
}
@media (max-width: 340px) {
  .stats.tk-stats { grid-template-columns: minmax(0, 1fr); }
  .stats.tk-stats > .stat:nth-child(2) { border-top: 1px solid var(--ring); }
  .stats.tk-stats > .stat:nth-child(2n) { border-left: 0; }
}

/* ---- create (merged from parts/create.css) ---- */
/* create — styles for this feature area. Prefix every class (see web/DEVELOPING.md); never restyle shared classes here. Merged into app.css at release. */

/* Categorical slots for the share distribution (fixed order: founders by size, then "other founders"). */
:root {
  --cr-cat-1: #2563eb;
  --cr-cat-2: #0d9488;
  --cr-cat-3: #7c3aed;
  --cr-cat-4: #d97706;
  --cr-cat-5: #db2777;
}
:root[data-theme="dark"] {
  --cr-cat-1: #60a5fa;
  --cr-cat-2: #2dd4bf;
  --cr-cat-3: #a78bfa;
  --cr-cat-4: #fbbf24;
  --cr-cat-5: #f472b6;
}

/* ------------------------------------------------------------------ page head: three facts */
.cr-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--fs-14); }
.cr-facts li { display: flex; align-items: flex-start; gap: 10px; max-width: 46ch; line-height: 1.5; }
.cr-facts .ic { margin-top: 1px; color: var(--science); }
.cr-facts b { color: var(--ink); font-weight: 600; }
.cr-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cr-parts li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ring); font-size: var(--fs-13); }
.cr-parts li:last-child { border-bottom: 0; }
.cr-parts b { font-weight: 600; }
.cr-parts span { color: var(--muted); }

/* ------------------------------------------------------------------ wizard frame: progress, steps, panel and summary */
.band.cr-band { padding-top: clamp(24px, 3vw, 32px); }
.cr-wizard { display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 80px; }
.cr-top { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.cr-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cr-progress-text { color: var(--muted); font-size: var(--fs-13); }
.cr-progress-text b { margin-right: 6px; color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
.progress.cr-progress-bar { flex: 1 0 100%; order: 3; }
.progress.cr-progress-bar > span { transition: width .2s ease-out; }
.steps.cr-steps { scroll-margin-top: 80px; }
.steps.cr-steps button:disabled { cursor: not-allowed; opacity: .6; }
.cr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.cr-layout.cr-full { grid-template-columns: minmax(0, 1fr); }
.cr-layout.cr-full > .cr-sum { display: none; }
.cr-panel { min-width: 0; }
.cr-panel > .stack-sm h2 { font-size: var(--fs-24); }
.cr-panel h2:focus { outline: none; }
.cr-panel h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.cr-measure { max-width: 72ch; }
.cr-nav { padding-top: 4px; }
.cr-nav .btn.primary svg { order: 2; }
.cr-offer { max-width: 680px; }
@media (max-width: 1239px) { .cr-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; } }
@media (max-width: 1079px) { .cr-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .steps.cr-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-inline: var(--gutter); }
  .steps.cr-steps button { flex: 0 0 auto; min-width: 118px; }
  .cr-nav .btn { flex: 1 1 auto; }
  .cr-facts { gap: 10px; }
}

/* the summary: sticky beside the steps when it fits, under them otherwise */
.card.cr-sum { position: sticky; top: calc(var(--topbar) + 20px); max-height: calc(100vh - var(--topbar) - 40px); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.cr-sum .card-head h2 { font-size: var(--fs-15); }
.cr-sum .dao-card.cr-preview-card { gap: 12px; padding: 14px; }
.cr-sum .dao-card .facts { padding-top: 10px; }
.cr-draft-note { text-align: right; }
.cr-sum-body { display: flex; flex-direction: column; }
.cr-sum-body > div:first-child { padding: 14px 16px; }
.cr-sum-part { display: flex; flex-direction: column; gap: 7px; padding: 12px 16px 14px; border-top: 1px solid var(--ring); }
.cr-sum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cr-sum-head h3 { color: var(--ink); font-size: var(--fs-13); font-weight: 600; }
.cr-sum-head .link-btn { color: var(--primary); text-decoration: none; }
.cr-sum-head .link-btn:hover { text-decoration: underline; }
.cr-sum-list { display: flex; flex-direction: column; gap: 5px; margin: 0; padding-left: 1.05em; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.cr-sum-list li::marker { color: var(--faint); }
/* the opening of the constitution, set like the first page of a paper */
.cr-sum-doc { max-height: 164px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
.cr-sum-doc .doc.compact { font-size: 15px; line-height: 1.55; }
.cr-sum-doc .doc h4, .cr-sum-doc .doc h5, .cr-sum-doc .doc h6 { font-size: 1.05em; }
.cr-sum-doc .doc > :first-child { font-size: 1.15em; }
@media (max-width: 1079px) { .card.cr-sum { position: static; max-height: none; overflow: visible; } }

/* ------------------------------------------------------------------ identity */
.dao-card.cr-preview-card { height: auto; }
.dao-card.cr-preview-card:hover { border-color: var(--ring); }
.cr-logo-now { padding: 8px 10px; border: 1px solid var(--ring); border-radius: 12px; background: var(--sunken); }

/* ------------------------------------------------------------------ constitution */
.kinds.cr-templates { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cr-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.cr-editor-pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-pane-label { font-weight: 500; }
.textarea.prose.cr-editor-text { height: 560px; min-height: 260px; resize: vertical; font-size: .98rem; }
.cr-editor-preview { height: 560px; overflow: auto; border: 1px solid var(--ring); border-radius: var(--r-ctl); background: var(--card); padding: 14px 18px; }
.cr-editor-preview .doc { font-size: .98rem; }
@media (max-width: 900px) {
  .cr-editor { grid-template-columns: minmax(0, 1fr); }
  .textarea.prose.cr-editor-text { height: 380px; }
  .cr-editor-preview { height: 320px; }
}

/* ------------------------------------------------------------------ members */
.kinds.cr-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .kinds.cr-choice { grid-template-columns: minmax(0, 1fr); } }
.cr-founder { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.cr-founder .hint:empty, .cr-founder .err:empty, .cr-founders .err:empty { display: none; }
.cr-founder-head { font-size: .8rem; color: var(--muted); font-weight: 500; padding-right: 46px; }
.cr-founders .field > .stack-sm > .row { align-items: flex-start !important; }
.cr-paste summary { cursor: pointer; color: var(--primary-ink); }
.grid.cr-dist-stats { gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-power { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 120px; }
.cr-power-bar { display: inline-block; height: 6px; border-radius: 999px; background: var(--cr-cat-1); max-width: 64px; min-width: 2px; flex: none; }
@media (max-width: 640px) {
  .cr-founder { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cr-founder-head { display: none; }
  .cr-power { min-width: 0; }
  .cr-dist-stats .stat .v { font-size: 1.05rem; }
  .cr-power-bar { display: none; }
}

/* ------------------------------------------------------------------ governance */
.kinds.cr-presets { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kind .cr-preset-facts { font-size: .78rem; color: var(--ink-2); margin-top: 2px; }
.cr-dur-unit { width: 120px; flex: none; }
.check.cr-flag, .check.cr-kind, .check.cr-perm { align-items: flex-start; }
.cr-flag input, .cr-kind input, .cr-perm input { margin-top: 3px; flex: none; }
.stack-sm.cr-flag-text { gap: 1px; }
.cr-flag-text .ic { width: 15px; height: 15px; color: var(--muted); }
.grid.cr-kinds { gap: 10px 18px; }
.cr-locked { cursor: default; }
.cr-locked input { opacity: .7; }
.cr-flag-text .ic.cr-lock { width: 13px; height: 13px; color: var(--faint); }
.cr-words { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; color: var(--ink-2); max-width: 78ch; }
@media (max-width: 480px) { .cr-dur-unit { width: 104px; } }

/* ------------------------------------------------------------------ people */
.cr-person { border: 1px solid var(--ring); border-radius: 12px; padding: 12px 14px; background: var(--sunken); }
.cr-rep-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.cr-perms { border: 0; margin: 0; padding: 0; min-width: 0; }
.cr-perms legend { padding: 0; margin-bottom: 6px; }
.grid.cr-perm-grid { gap: 6px 16px; }
.cr-people .field > .stack-sm > .row { flex-wrap: nowrap; align-items: flex-start !important; }
.cr-people .field > .stack-sm > .row > .icon-btn { margin-top: 26px; }
@media (max-width: 760px) { .cr-rep-top { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ review */
.cr-review-name { font-size: 1.2rem; }
.cr-review-doc { padding: 18px 22px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); }
.cr-review-doc.cr-cut { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.cr-doc-box { border: 1px solid var(--ring); border-radius: 12px; padding: 12px 16px; background: var(--card); }
.cr-doc-scroll { max-height: 460px; overflow: auto; }
.cr-more summary { cursor: pointer; color: var(--primary-ink); }
.cr-list-row { padding: 10px 0; }
.cr-addr .addr { word-break: break-all; white-space: normal; font-size: .8rem; }
.cr-plan { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ring); border-radius: 12px; overflow: hidden; }
.cr-plan-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.cr-plan-row + .cr-plan-row { border-top: 1px solid var(--ring); }
.cr-plan-mark { width: 22px; height: 22px; display: grid; place-items: center; flex: none; color: var(--muted); }
.cr-plan-mark .ic { width: 16px; height: 16px; }
.stack-sm.cr-plan-text { gap: 0; }
.cr-plan-status { color: var(--ink-2); text-align: right; white-space: nowrap; }
.cr-skip .cr-plan-status, .cr-skip .cr-plan-text { color: var(--muted); }
.cr-done .cr-plan-mark { color: var(--ok); }
.cr-done .cr-plan-status { color: var(--ok); font-weight: 600; }
.cr-busy { background: var(--primary-soft); }
.cr-fail .cr-plan-mark, .cr-fail .cr-plan-status { color: var(--danger); }
@media (max-width: 400px) { .cr-plan-status { white-space: normal; max-width: 42%; } }

/* ---- treasury (merged from parts/treasury.css) ---- */
/* treasury: the Treasury, Members, Constitution and Settings tabs of a DAO. Every class is prefixed
   tr-; shared classes are only combined with a tr- modifier, never restyled. Merged into app.css at
   release. Layout decisions follow the DAO workspace: the main column is a size container (ws-main),
   so tables and figures respond to the room they get, not to the window. */

/* ------------------------------------------------------------------ shared bits */
.tr-clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row { padding: 10px 0; }
.tr-flush > * + * { border-top: 1px solid var(--ring); }
.tr-lines { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 2px; }
.tr-details > summary { cursor: pointer; font-size: var(--fs-13); color: var(--primary); font-weight: 500; padding: 2px 0; }
.tr-details[open] > summary { margin-bottom: 8px; }
.tr-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tr-sig { overflow-wrap: anywhere; word-break: break-all; }
.tr-mono-break { font-family: var(--mono); font-size: var(--fs-12); overflow-wrap: anywhere; word-break: break-all; color: var(--ink-2); }
.tr-block { display: block; }
.tr-swatch { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 3px; }

/* the section head: h2, a one-line lede and the section's actions */
.page-head.tr-head { align-items: flex-end; gap: 14px 32px; }
.tr-head h2 { font-size: var(--fs-30); font-weight: 650; line-height: 1.12; letter-spacing: -0.02em; }
.tr-head .lede { font-size: var(--fs-15); line-height: 1.55; max-width: 76ch; }
.card-head .tr-head-note { text-align: right; }
/* on this page: jump links of a long section */
.tr-jump ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tr-jump a.pill { color: var(--ink-2); }
.tr-jump a.pill:hover { color: var(--primary); }
.stack-lg.tr-page > .tr-jump { margin-top: -14px; }
.tr-page .card[id] { scroll-margin-top: calc(var(--topbar) + 16px); }
@container ws-main (max-width: 640px) {
  .tr-head h2 { font-size: var(--fs-24); }
  .tr-head .page-head-actions { width: 100%; }
  .tr-head .page-head-actions > * { flex: 1 1 auto; }
  .card-head .tr-head-note { display: none; }
}

/* marks for assets: the native coin, a glyph, or an icon tile */
.tr-coin { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 700 10px/1 var(--sans); letter-spacing: -.02em; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--primary-line); }
.tr-mark { margin-top: 1px; }
.tr-ic { width: 24px; height: 24px; flex: none; border-radius: 7px; display: inline-grid; place-items: center; background: var(--bg-2); border: 1px solid var(--ring); color: var(--muted); }
.tr-ic svg { width: 14px; height: 14px; }
.tr-ic.tr-ic-sci { background: var(--science-soft); border-color: var(--science-line); color: var(--science); }

/* data tables of this area: hairline rows, mono numbers, stacked into cards when the column is narrow */
table.t.tr-table td { vertical-align: top; }
table.t.tr-table td.r .stack-sm { align-items: flex-end; }
.tr-num-cell { gap: 2px; }
tbody.tr-group tr.tr-group-row th { padding: 8px 14px; background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; border-bottom: 1px solid var(--ring); }
tbody.tr-group + tbody.tr-group tr.tr-group-row th { border-top: 1px solid var(--ring); }
tr.tr-group-row .count { margin-left: 8px; padding: 0 7px; border: 1px solid var(--ring); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font: 500 11px/1.6 var(--mono); }
table.t.tr-table tbody tr.tr-group-row:hover th { background: var(--surface-2); }
table.t.tr-table tr.tr-zero td { color: var(--muted); }
/* lock boxes of other owners: listed for the fees they pay, not counted as the treasury's */
tbody.tr-group.tr-paying tr.tr-group-row th { background: transparent; border-top-style: dashed; }
table.t.tr-table tbody.tr-paying tr:not(.tr-group-row) td { color: var(--ink-2); }
/* actions wrap under each other rather than push the table wider than its card */
.row-tight.tr-actions { justify-content: flex-end; flex-wrap: wrap; }
@container ws-main (max-width: 1100px) { .tr-col-price { display: none; } }
/* narrow columns: each row becomes a small grid card; data labels caption the numbers */
@container ws-main (max-width: 820px) {
  table.t.tr-stack thead { display: none; }
  table.t.tr-stack, table.t.tr-stack tbody, table.t.tr-stack tr, table.t.tr-stack th, table.t.tr-stack td { display: block; width: 100%; }
  table.t.tr-stack tbody tr { padding: 14px 16px; border-bottom: 1px solid var(--ring); }
  table.t.tr-stack tbody tr:last-child { border-bottom: 0; }
  table.t.tr-stack tbody tr.tr-group-row { padding: 0; }
  table.t.tr-stack td, table.t.tr-stack td.r { padding: 0; border: 0; text-align: left; }
  table.t.tr-stack tbody tr:hover td { background: transparent; }
  table.t.tr-stack td.r .stack-sm { align-items: flex-start; }
  table.t.tr-stack td[data-cap]::before { content: attr(data-cap); display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-12); }
  .row-tight.tr-actions { justify-content: flex-start; flex-wrap: wrap; }
  /* holdings: asset | holding and value side by side | actions */
  table.t.tr-htable tbody tr:not(.tr-group-row) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-areas: "asset asset" "hold val" "hold share" "act act"; gap: 6px 18px; }
  table.t.tr-htable td[data-label="Asset"] { grid-area: asset; padding-bottom: 4px; }
  table.t.tr-htable td[data-label="Holding"] { grid-area: hold; }
  table.t.tr-htable td.r[data-label="Value"] { grid-area: val; text-align: right; }
  table.t.tr-htable td[data-label="Value"] .tr-val { align-items: flex-end; }
  table.t.tr-htable td.r[data-label="Share"] { grid-area: share; text-align: right; }
  table.t.tr-htable td[data-label="Actions"] { grid-area: act; padding-top: 4px; }
  table.t.tr-htable td.tr-col-price, table.t.tr-htable td[data-label="Actions"]:has(.tr-actions:empty) { display: none; }
  /* flows: direction, amount and time; then counterparty and cause */
  table.t.tr-ftable tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dir amt when" "party party cause"; gap: 6px 12px; align-items: center; }
  table.t.tr-stack.tr-ftable td { white-space: normal; }
  table.t.tr-stack.tr-ftable td[data-label="Amount"] .num { overflow-wrap: anywhere; }
  table.t.tr-ftable td[data-label="When"] { grid-area: when; text-align: right; }
  table.t.tr-ftable td.r[data-label="Amount"] .stack-sm { align-items: flex-start; }
  table.t.tr-ftable td[data-label="Flow"] { grid-area: dir; }
  table.t.tr-ftable td[data-label="Amount"] { grid-area: amt; }
  table.t.tr-ftable td[data-label="Counterparty"] { grid-area: party; }
  table.t.tr-ftable td[data-label="Cause"] { grid-area: cause; text-align: right; }
  /* infrastructure accounts */
  table.t.tr-itable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "acct acct" "held since" "act act"; gap: 6px 12px; }
  table.t.tr-itable td[data-label="Account"] { grid-area: acct; }
  table.t.tr-itable td[data-label="Shares held"] { grid-area: held; }
  table.t.tr-itable td[data-label="Excluded since"] { grid-area: since; align-self: end; text-align: right; }
  table.t.tr-itable td[data-label="Actions"] { grid-area: act; }
}

/* ------------------------------------------------------------------ treasury */
.split.tr-top { align-items: stretch; }
.tr-total { display: flex; flex-direction: column; gap: 4px; }
.tr-total-l { color: var(--muted); font-size: var(--fs-13); }
.tr-total-v { font-size: var(--fs-38); font-weight: 650; line-height: 1.08; letter-spacing: -0.025em; }
.tr-total-v .money { gap: 2px 14px; }
.tr-total-v .fiat { font-size: var(--fs-20); font-weight: 500; letter-spacing: -0.01em; }
.tr-fig { gap: 14px; padding-top: 16px; border-top: 1px solid var(--ring); }
.tr-fig-empty { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 0; border-top: 1px solid var(--ring); }
/* allocation figure: label | bar on a 0-100% axis | share */
.tr-alloc { display: grid; grid-template-columns: minmax(96px, 200px) minmax(0, 1fr) max-content; gap: 8px 14px; align-items: center; }
.tr-alloc-row { display: contents; }
.tr-alloc-label { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font-size: var(--fs-13); }
.tr-alloc-track { position: relative; height: 16px; border-right: 1px solid var(--ring);
  background-image: repeating-linear-gradient(to right, var(--ring) 0, var(--ring) 1px, transparent 1px, transparent 25%); }
.tr-alloc-bar { position: absolute; inset: 2px auto 2px 0; border-radius: 0 3px 3px 0; }
.tr-alloc-val { display: flex; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.3; }
.tr-alloc-val b { font: 600 var(--fs-13) var(--mono); color: var(--ink); }
.tr-alloc-val .money { justify-content: flex-end; }
.tr-alloc-val .money .num { font-family: var(--sans); }
.tr-alloc-axis > .tr-ticks { margin-top: -2px; }
.tr-ticks { position: relative; height: 18px; border-top: 1px solid var(--ring-2); }
.tr-tick { position: absolute; top: 5px; transform: translateX(-50%); color: var(--faint); font: 10px/1 var(--mono); white-space: nowrap; }
.tr-tick::before { content: ""; position: absolute; top: -6px; left: 50%; width: 1px; height: 4px; background: var(--ring-2); }
.tr-tick.start { transform: none; }
.tr-tick.start::before { left: 0; }
.tr-tick.end { transform: translateX(-100%); }
.tr-tick.end::before { left: auto; right: 0; }
@container ws-main (max-width: 560px) {
  .tr-alloc { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .tr-alloc-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 4px 10px; align-items: center; }
  .tr-alloc-track { grid-column: 1 / -1; grid-row: 2; }
  .tr-alloc-axis > span:first-child, .tr-alloc-axis > span:last-child { display: none; }
  .tr-alloc-axis .tr-ticks { grid-column: 1 / -1; }
  .tr-alloc-val { flex-direction: row; align-items: baseline; gap: 8px; }
  .tr-total-v { font-size: var(--fs-30); }
}
.kv.tr-facts { gap: 8px 14px; font-size: var(--fs-13); }
.tr-do { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.tr-do-list > .tr-do:first-child { padding-top: 0; }
.tr-do > .btn { flex: none; }
.stack-sm.tr-claim { padding: 12px 14px; border-radius: var(--r-row); background: var(--primary-soft); border: 1px solid var(--primary-line); align-items: flex-start; }
.notice.tr-claimbar { align-items: center; }
.notice.tr-claimbar > .btn { flex: none; }
@container ws-main (max-width: 640px) { .notice.tr-claimbar { flex-wrap: wrap; } }
/* holdings */
.tr-asset { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.tr-asset-main { min-width: 0; gap: 4px; }
.row-tight.tr-sub { gap: 2px 10px; }
.tr-asset .badge svg { width: 11px; height: 11px; }
.tr-val { display: inline-flex; flex-direction: column; align-items: flex-end; }
.tr-val .money { justify-content: flex-end; }
.tr-val .money .num, .tr-alloc-val .money .num { white-space: nowrap; }
.tr-share { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-13); }
.tr-note { margin-top: 8px; max-width: 64ch; }
/* flows */
.tr-dir { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 7px; border: 1px solid var(--ring); border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
.tr-dir svg { width: 12px; height: 12px; }
.tr-dir.tr-in { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.tr-dir.tr-out svg { transform: rotate(180deg); }
.tr-amt-in { color: var(--ok); }
table.t.tr-ftable td { white-space: nowrap; }
table.t.tr-ftable td:last-child { white-space: normal; }
/* airdrops, executed proposals */
.progress.tr-meter > span { background: var(--science); }
.tr-camps > * + * { border-top: 1px solid var(--ring); padding-top: 16px; }
.tr-camp-token .addr { font-weight: 400; vertical-align: 1px; }
.tr-foreign-group > summary { color: var(--warn); }
.tr-foreign-group[open] { padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-row); }
.tr-stance { margin-top: 8px; padding: 8px 12px; border-left: 2px solid var(--veto); background: var(--bg-2); border-radius: 0 var(--r-chip) var(--r-chip) 0; }
.item.tr-feed { align-items: flex-start; }
.tr-feed .tr-lines { overflow-wrap: anywhere; }
.tr-feed-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-grid; place-items: center; background: var(--bg-2); border: 1px solid var(--ring); color: var(--ink-2); }
.tr-feed-ic svg { width: 15px; height: 15px; }
.tr-perm .row-tight { gap: 2px 12px; }
.grid.g2.tr-grid { align-items: start; }
@container ws-main (max-width: 900px) { .grid.g2.tr-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ members */
.tr-wrap-head { flex-wrap: wrap; }
.tr-wrap-head .input { width: min(300px, 100%); }
.tr-filterbar { border-bottom: 1px solid var(--ring); }
.row-tight.tr-member { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
table.t.tr-mtable td:first-child { min-width: 190px; }
.tr-num-cell .tiny { white-space: nowrap; }
.tr-row-link { color: var(--muted); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--ring-2); text-underline-offset: 3px; }
.tr-row-link:hover { color: var(--primary); text-decoration-color: currentColor; }
.tr-inline { display: none; margin: 6px 0 0 32px; }
.badge.tr-you { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
.badge.tr-rep { background: var(--violet-soft); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 25%, transparent); }
.badge.tr-rep.tr-off { background: var(--bg-2); color: var(--muted); border-color: var(--ring); }
.badge.tr-steward { background: var(--science-soft); color: var(--science); border-color: var(--science-line); }
.badge.tr-locked { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.badge.tr-infra-badge { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); white-space: normal; }
.tr-status .badge svg, .tr-roles .badge svg { width: 11px; height: 11px; }
.tr-keyreg { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--muted); }
.tr-keyreg svg { width: 12px; height: 12px; }
.stack-sm.tr-roles { gap: 4px; align-items: flex-start; }
.tr-status { gap: 4px; max-width: 30ch; }
.tr-nowrap, .tr-nowrap .addr { white-space: nowrap; }
table.t.tr-mtable tr.tr-me td { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.tr-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.tr-sort:hover { color: var(--ink); }
.tr-sort .ic { width: 13px; height: 13px; }
.tr-sort .ic.tr-up { transform: rotate(180deg); }
th[aria-sort="ascending"] .tr-sort, th[aria-sort="descending"] .tr-sort { color: var(--ink); }
@container ws-main (max-width: 1080px) {
  table.t.tr-mtable .tr-col-role { display: none; }
  .tr-inline.tr-i-role { display: block; }
}
@container ws-main (max-width: 820px) {
  table.t.tr-mtable .tr-col-deleg, table.t.tr-mtable .tr-col-status { display: none; }
  .tr-inline.tr-i-deleg, .tr-inline.tr-i-status { display: block; }
  .tr-inline .tr-status { max-width: 40ch; }
}
@container ws-main (max-width: 560px) {
  table.t.tr-mtable thead { display: none; }
  table.t.tr-mtable, table.t.tr-mtable tbody, table.t.tr-mtable td { display: block; width: 100%; }
  table.t.tr-mtable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "member member" "shares votes" "act act"; gap: 8px 16px; padding: 14px 16px; border-bottom: 1px solid var(--ring); }
  table.t.tr-mtable tbody tr:last-child { border-bottom: 0; }
  table.t.tr-mtable td { padding: 0; border: 0; }
  table.t.tr-mtable td[data-label="Member"] { grid-area: member; }
  table.t.tr-mtable td[data-label="Shares"] { grid-area: shares; text-align: left; }
  table.t.tr-mtable td[data-label="Shares"] .stack-sm { align-items: flex-start; }
  table.t.tr-mtable td[data-label="Voting power"] { grid-area: votes; }
  table.t.tr-mtable td[data-label="Actions"] { grid-area: act; }
  table.t.tr-mtable td[data-label="Shares"]::before, table.t.tr-mtable td[data-label="Voting power"]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-12); }
  table.t.tr-mtable .row-tight.tr-actions { justify-content: flex-start; }
  table.t.tr-mtable tbody tr:hover td, table.t.tr-mtable tr.tr-me td { background: transparent; }
  table.t.tr-mtable tbody tr.tr-me { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
  .tr-inline { margin-left: 0; }
}
/* at a glance */
.kv.tr-glance { gap: 9px 16px; font-size: var(--fs-13); }
@container ws-main (min-width: 561px) and (max-width: 900px) { .kv.tr-glance { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 18px; } }
.kv.tr-glance dd { text-align: right; font-weight: 500; }
.tr-you { padding-top: 14px; border-top: 1px solid var(--ring); }
.tr-you h4 { margin-bottom: 8px; font-size: var(--fs-13); }
.tr-you-box { align-items: flex-start; }
/* the distribution figure: bars per holder, the cumulative line, dashed reference lines */
.tr-insight { color: var(--ink-2); }
.tr-pareto { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: 210px auto; column-gap: 8px; }
.tr-py { position: relative; grid-row: 1; grid-column: 1; }
.tr-py span { position: absolute; right: 0; transform: translateY(50%); color: var(--faint); font: 10px/1 var(--mono); }
.tr-plot { position: relative; grid-row: 1; grid-column: 2; border-left: 1px solid var(--ring-2); border-bottom: 1px solid var(--ring-2); }
.tr-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--ring); }
.tr-plot-in { position: absolute; inset: 0 auto 0 0; }
.tr-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; padding: 0 3px; }
.tr-bar { flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--science) 72%, var(--surface)); }
.tr-bar:hover { background: var(--science); }
.tr-bar.tr-mine { background: var(--primary); }
.tr-bar.tr-others { background: var(--abstain); }
.tr-cum { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tr-cum polyline { stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.tr-ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ink-2); pointer-events: none; }
.tr-ref-label { position: absolute; right: 6px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink-2); font-size: 11px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.tr-ref.below .tr-ref-label { bottom: auto; top: 3px; }
.tr-px { grid-row: 2; grid-column: 2; }
.tr-px-in { display: flex; gap: 3px; padding: 5px 3px 0; }
.tr-px span { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--faint); font: 10px/1 var(--mono); text-align: center; }
/* infrastructure accounts: shown apart, on a dashed window */
.card.tr-infra { border-style: dashed; border-color: var(--ring-2); background: var(--surface-2); }
.card.tr-infra table.t th { background: transparent; }

/* ------------------------------------------------------------------ constitution: a journal page */
.tr-journal { display: grid; grid-template-columns: minmax(0, 880px) minmax(250px, 320px); gap: 28px; align-items: start; }
.tr-paper-in { padding: 40px 56px 48px; }
.tr-doc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--ring); }
.tr-doc-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-13); }
.tr-doc-meta b { color: var(--ink-2); font-weight: 600; }
.tr-paper-in > .notice { margin-bottom: 20px; }
.doc.tr-doc { max-width: 68ch; }
.doc.tr-doc .tr-doc-title { margin: 0 0 .9em; font-size: 2.05em; line-height: 1.14; letter-spacing: -0.012em; text-wrap: balance; }
.doc.tr-doc h4 { margin-top: 1.7em; font-size: 1.28em; }
.doc.tr-doc h5 { font-size: 1.08em; }
.doc.tr-doc :is(h3, h4, h5, h6) { scroll-margin-top: calc(var(--topbar) + 24px); }
.doc.tr-doc :is(h3, h4, h5, h6):focus { outline: none; }
.doc.tr-doc.tr-numbered { counter-reset: art; }
.doc.tr-doc.tr-numbered h4.tr-art::before { counter-increment: art; content: counter(art) ". "; color: var(--muted); font-variant-numeric: lining-nums; }
/* revision marks: a bar in the margin and a note beside the heading of each new or changed article */
.doc.tr-doc .tr-marked { position: relative; }
.doc.tr-doc .tr-marked::after { content: ""; position: absolute; left: -26px; top: .18em; bottom: .18em; width: 3px; border-radius: 2px; background: var(--science); }
.tr-mark-note { display: inline-block; margin-left: 10px; padding: 1px 8px; border: 1px solid var(--science-line); border-radius: var(--r-pill); background: var(--science-soft); color: var(--science); font: 500 12px/1.5 var(--sans); vertical-align: 3px; white-space: nowrap; }
/* the margin rail */
.tr-margin { position: sticky; top: calc(var(--topbar) + 20px); display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - var(--topbar) - 40px); overflow-y: auto; padding: 2px 4px 2px 0; scrollbar-width: thin; }
.tr-margin .doc-note { margin: 0; }
.tr-version-note { font-size: var(--fs-14); color: var(--ink-2); }
.tr-verify { display: flex; align-items: flex-start; gap: 7px; }
.tr-verify svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--science); }
.tr-margin-sec { padding-top: 14px; border-top: 1px solid var(--ring); }
.tr-margin > .tr-margin-sec:first-child { padding-top: 0; border-top: 0; }
.tr-margin-sec h3 { margin-bottom: 8px; font-size: var(--fs-13); font-weight: 600; }
.tr-toc ol { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.tr-toc-link { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: var(--fs-13)/1.4 var(--sans); text-align: left; cursor: pointer; }
.tr-toc-link:hover { background: var(--bg-3); color: var(--ink); }
.tr-toc-d1 .tr-toc-link { padding-left: 24px; color: var(--muted); font-size: var(--fs-12); }
.tr-toc-n { flex: none; min-width: 1.6em; color: var(--muted); font: 11px/1.6 var(--mono); }
.tr-dot { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--science); }
.tr-versions { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tr-version { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r-ctl); }
.tr-version.tr-here { background: var(--primary-soft); border-color: var(--primary-line); }
.tr-pick .select { font-size: var(--fs-13); }
.diff.tr-diff { font-size: 16px; }
.tr-diff .l { min-height: 1.6em; }
.tr-diff-gap { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 14px; border: 0; border-top: 1px dashed var(--ring); border-bottom: 1px dashed var(--ring); background: var(--bg-2); color: var(--muted); font: 500 var(--fs-12) var(--sans); text-align: left; cursor: pointer; }
.tr-diff-gap:hover { background: var(--bg-3); color: var(--ink); }
.tr-diff-gap svg { width: 14px; height: 14px; }
.legend i.tr-key-add { background: color-mix(in srgb, var(--ok) 35%, var(--surface)); }
.legend i.tr-key-del { background: color-mix(in srgb, var(--danger) 30%, var(--surface)); }
.tr-print-only { display: none; }
@container ws-main (max-width: 980px) {
  .tr-journal { grid-template-columns: minmax(0, 1fr); }
  .tr-margin { position: static; max-height: none; overflow: visible; }
}
@container ws-main (max-width: 640px) {
  .tr-paper-in { padding: 22px 18px 26px; }
  .doc.tr-doc .tr-doc-title { font-size: 1.6em; }
  .doc.tr-doc .tr-marked::after { left: -12px; }
  .tr-mark-note { display: table; margin: 6px 0 0; }
}
@media print {
  .tr-noprint, .tr-page > .tr-head { display: none !important; }
  .tr-journal { display: block; }
  .card.tr-paper { border: 0; }
  .tr-paper-in { padding: 0; }
  .tr-print-only { display: block; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #999; color: #333; font: 10pt var(--sans); }
  .tr-print-only p { margin: 0 0 4px; }
  .doc.tr-doc { max-width: none; font-size: 11.5pt; }
  .doc.tr-doc .tr-marked::after { display: none; }
  .tr-diff .l.same { color: #555; }
}

/* ------------------------------------------------------------------ settings */
/* before/after-ready tables: the value in force, and under it what a live proposal would set */
table.t.tr-rules tbody th { padding: 11px 14px; border-bottom: 1px solid var(--ring); background: transparent; color: var(--ink); font-size: var(--fs-14); font-weight: 500; text-align: left; white-space: normal; }
table.t.tr-rules tbody tr:last-child th { border-bottom: 0; }
table.t.tr-rules td { white-space: nowrap; vertical-align: top; }
table.t.tr-rules tbody tr:hover th { background: var(--surface-2); }
.tr-next { color: var(--primary); font-size: var(--fs-12); font-weight: 600; }
.kv.tr-terms { gap: 10px 16px; font-size: var(--fs-13); }
.kv.tr-terms dt { padding-top: 1px; }
.kv.tr-words { gap: 10px 18px; font-size: var(--fs-13); }
@container ws-main (max-width: 640px) {
  .kv.tr-words, .kv.tr-terms { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv.tr-words dd, .kv.tr-terms dd { margin-bottom: 10px; }
}
.notice.tr-pending .tr-lines { margin-top: 2px; }
/* the thresholds figure: name | 0-100% track with dashed lines per rule set | values */
.tr-rf { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) max-content; gap: 22px 18px; align-items: center; padding-top: 18px; }
.tr-rf-row { display: contents; }
.tr-rf-name { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-13); line-height: 1.35; }
.tr-rf-track { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--bg-3); }
.tr-rf-track > i { position: absolute; top: -7px; bottom: -7px; width: 0; border-left: 1.5px dashed var(--ink-2); }
.tr-rf-track > i.c { border-left-color: var(--veto); }
.tr-rf-track > i.ps, .tr-rf-track > i.pc { top: -9px; bottom: -9px; border-left: 2px dotted var(--primary); }
:root[data-theme="dark"] .tr-rf-track > i.c { border-left-color: color-mix(in srgb, var(--veto) 55%, #ffffff); }
.tr-guide { position: absolute; top: -15px; bottom: -15px; width: 0; border-left: 1px dotted var(--faint); }
.tr-guide b { position: absolute; bottom: calc(100% + 2px); left: 0; transform: translateX(-50%); color: var(--muted); font: 500 10px/1 var(--sans); white-space: nowrap; }
.tr-rf-vals { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font: var(--fs-12)/1.45 var(--mono); white-space: nowrap; }
.tr-rf-vals .s { color: var(--ink-2); }
.tr-rf-vals .c { color: var(--veto); }
.tr-rf-vals .p { color: var(--primary); }
:root[data-theme="dark"] .tr-rf-vals .c { color: color-mix(in srgb, var(--veto) 55%, #ffffff); }
.tr-rf-axisrow > .tr-ticks { margin-top: -10px; }
.legend.tr-rf-legend { gap: 6px 18px; font-size: var(--fs-12); }
.legend.tr-rf-legend i { width: 16px; height: 0; margin-right: 7px; border-top: 1.5px dashed var(--ink-2); border-radius: 0; background: none; vertical-align: middle; }
.legend.tr-rf-legend i.c { border-top-color: var(--veto); }
.legend.tr-rf-legend i.p { border-top: 2px dotted var(--primary); }
:root[data-theme="dark"] .legend.tr-rf-legend i.c { border-top-color: color-mix(in srgb, var(--veto) 55%, #ffffff); }
@container ws-main (max-width: 560px) {
  table.t.tr-rules thead { display: none; }
  table.t.tr-rules, table.t.tr-rules tbody { display: block; }
  table.t.tr-rules tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "rule rule" "std crit"; gap: 4px 16px; padding: 12px 14px; border-bottom: 1px solid var(--ring); }
  table.t.tr-rules tbody tr:last-child { border-bottom: 0; }
  table.t.tr-rules tbody th, table.t.tr-rules td { display: block; padding: 0; border: 0; }
  table.t.tr-rules tbody th { grid-area: rule; margin-bottom: 4px; }
  table.t.tr-rules td.r { text-align: left; }
  table.t.tr-rules td .stack-sm { align-items: flex-start; }
  table.t.tr-rules td[data-cap]::before { content: attr(data-cap); display: block; margin-bottom: 1px; color: var(--muted); font: var(--fs-12) var(--sans); }
  table.t.tr-rules tbody tr:hover th { background: transparent; }
}
@container ws-main (max-width: 640px) {
  .tr-rf { grid-template-columns: minmax(0, 1fr) max-content; gap: 8px 12px; }
  .tr-rf-row:first-child .tr-rf-track { margin-top: 30px; }
  .tr-rf-track { grid-column: 1 / -1; grid-row: auto; order: 3; margin: 14px 0 6px; }
  .tr-rf-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-column: 1 / -1; gap: 6px 12px; }
  .tr-rf-row .tr-rf-name { order: 1; }
  .tr-rf-row .tr-rf-vals { order: 2; }
  .tr-rf-axisrow > span { display: none; }
  .tr-rf-axisrow > .tr-ticks { grid-column: 1 / -1; margin-top: 0; }
}
/* the call policy */
.tr-kinds { overflow: hidden; border: 1px solid var(--ring); border-radius: var(--r-row); }
.tr-kind + .tr-kind { border-top: 1px solid var(--ring); }
.tr-kind > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; }
.tr-kind > summary::-webkit-details-marker { display: none; }
.tr-kind > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 4px 0 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.tr-kind[open] > summary::after { margin-top: 3px; transform: rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .tr-kind > summary::after { transition: none; } }
.tr-kind > summary:hover { background: var(--surface-2); }
.tr-kind > summary .ic { width: 16px; height: 16px; color: var(--primary); }
.tr-kind-body { padding: 4px 14px 14px; }
table.t.tr-policy td { padding: 8px 10px; vertical-align: top; }
table.t.tr-policy th { padding: 8px 10px; }
.tr-end { justify-content: flex-end; }
.tr-checked svg { width: 14px; height: 14px; color: var(--science); }
.tr-homes h4 { margin-top: 4px; font-size: var(--fs-14); }
/* representative tools */
.card.tr-reptools { border-color: color-mix(in srgb, var(--violet) 35%, var(--ring)); }
.tr-reptools > .card-head { border-radius: var(--r-window) var(--r-window) 0 0; background: var(--violet-soft); }
.stack.tr-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tr-tools > .tr-tool { padding: 16px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); }
.tr-tools > .tr-tool.tr-wide { grid-column: 1 / -1; }
@container ws-main (max-width: 900px) { .stack.tr-tools { grid-template-columns: minmax(0, 1fr); } }
.tr-tool h4 { font-size: var(--fs-14); }
.row.tr-logo-row { align-items: flex-start; }
.grid.tr-links { gap: 10px 14px; }
.tr-opcall { padding: 12px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); }
.grid.g3.tr-grid { align-items: start; }
@container ws-main (max-width: 1000px) { .grid.g3.tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ws-main (max-width: 640px) { .grid.g3.tr-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- sealed (merged from parts/sealed.css) ---- */
/* Sealed data: the DAO's research data room. Records carry a molecule mark drawn from their
   commitment on the science tile; who can read an asset is a ladder (stewards, members, everyone);
   key custody is a matrix of stewards and key epochs. Every crypto action carries a how-line.
   Classes are prefixed sl- (see web/DEVELOPING.md); merged into app.css at release. */

/* ------------------------------------------------------------------ page */
.sl-head h2 { font-size: var(--fs-24); font-weight: 650; letter-spacing: -0.02em; }
.sl-head .lede { font-size: var(--fs-15); line-height: 1.6; max-width: 76ch; }
.sl-back { width: fit-content; }

/* what you can do here: one line each */
.sl-you-box { display: flex; flex-direction: column; gap: 8px; }
.sl-you-box:empty { display: none; }
.sl-you { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); color: var(--ink-2); font-size: var(--fs-14); line-height: 1.45; }
.sl-you > svg { width: 18px; height: 18px; color: var(--science); }
.sl-you b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .sl-you { grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
  .sl-you > svg { margin-top: 1px; }
  .sl-you > .btn { grid-column: 2; justify-self: start; }
}

/* lists inside windows carry no bullets; links that start a proposal */
.sl-ul { margin: 0; padding: 0; list-style: none; }
.sl-link { font-size: var(--fs-13); font-weight: 500; }
.addr.sl-hash { align-items: flex-start; font-size: var(--fs-12); }
.addr.sl-hash > .break { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.addr.sl-hash > button { flex: none; margin-top: -1px; }

/* how-lines: what a click does, said before the click */
.sl-how { margin: 0; color: var(--muted); font-size: var(--fs-13); line-height: 1.5; }
.sl-act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sl-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: sl-step; }
.sl-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.5; counter-increment: sl-step; }
.sl-steps li::before { content: counter(sl-step); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--science-line); border-radius: 50%; background: var(--science-soft); color: var(--science); font: 600 11px/1 var(--mono); }
.sl-plain { margin: 0; padding-left: 1.1em; }
.sl-plain li { margin: 2px 0; overflow-wrap: anywhere; }
.sl-scroll { max-height: 180px; overflow-y: auto; }
.sl-summary { cursor: pointer; padding: 2px 0; width: fit-content; }
.sl-summary:hover { color: var(--ink); }
.kv.sl-kv { gap: 6px 16px; font-size: var(--fs-13); }
.sl-fp { letter-spacing: .02em; overflow-wrap: anywhere; }
.sl-block { display: block; margin-top: 2px; }
.sl-ver { max-width: 120px; }
.sl-ver-row { align-items: flex-end; }

/* ------------------------------------------------------------------ the record mark */
.sl-mark { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid var(--science-line); border-radius: var(--r-row); background: var(--science-soft); color: var(--science); }
.sl-mark > svg { width: 38px; height: 38px; }
.sl-mark > .ic, .sl-mark > svg:only-child { width: 20px; height: 20px; }
.sl-mark.lg { width: 76px; height: 76px; border-radius: var(--r-window); }
.sl-mark.lg > svg.glyph { width: 60px; height: 60px; }
.sl-mark-chip { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--science-line); border-radius: 50%; background: var(--surface); color: var(--science); }
.sl-mark-chip svg { width: 11px; height: 11px; }
.sl-mark.lg .sl-mark-chip { width: 26px; height: 26px; right: -7px; bottom: -7px; }
.sl-mark.lg .sl-mark-chip svg { width: 14px; height: 14px; }
.sl-mark.stewards .sl-mark-chip { border-color: var(--ring-2); color: var(--ink-2); }
.sl-mark.public .sl-mark-chip { border-color: var(--primary-line); color: var(--primary); }

/* ------------------------------------------------------------------ records */
.item.sl-rec { align-items: center; gap: 16px; }
.sl-rec-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.sl-rec-title { color: var(--ink); font-size: var(--fs-15); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
a.item.sl-rec:hover .sl-rec-title { color: var(--primary); }
.sl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; color: var(--muted); font-size: var(--fs-13); }
.sl-meta .mono { color: var(--ink-2); font-size: var(--fs-12); }
.sl-rec-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 0 1 auto; max-width: 48%; }
.sl-rec > .btn { flex: none; }
@media (max-width: 640px) {
  .item.sl-rec { flex-wrap: wrap; }
  .sl-rec-main { flex-basis: calc(100% - 64px); }
  .sl-rec-tags { justify-content: flex-start; max-width: none; margin-left: 64px; }
  .sl-rec > .btn { margin-left: 64px; }
}

/* the share of assets at each access level */
.fig.sl-fig { gap: 10px; }
.mini-ballot.sl-bar { height: 9px; gap: 2px; background: transparent; }
.mini-ballot.sl-bar > span { border-radius: var(--r-pill); }
.sl-fig .legend b { color: var(--ink); font-weight: 600; margin-left: 2px; }

/* ------------------------------------------------------------------ steward tasks */
.item.sl-task { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; }
.sl-task > .ic { align-self: start; margin-top: 2px; color: var(--science); }
.sl-task-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sl-task-text > p.small { margin: 0; color: var(--ink); }
@media (max-width: 640px) {
  .item.sl-task { grid-template-columns: 18px minmax(0, 1fr); }
  .sl-task > .btn { grid-column: 2; justify-self: start; }
}

/* ------------------------------------------------------------------ purchases and sales */
.sl-deal { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.sl-deal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.sl-deal-name { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.sl-deal-name .strong { overflow-wrap: anywhere; }
.timeline.sl-tl { margin: 0; padding: 0; list-style: none; }
/* in a narrow column the four steps sit two by two; phones get the shared vertical timeline */
.sl-deal { container-type: inline-size; }
@media (min-width: 721px) {
  @container (max-width: 480px) { .timeline.sl-tl { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } }
}
.timeline.sl-tl .s { padding-top: 10px; }
.timeline.sl-tl .s span { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ keys: epochs and custody */
.sl-epochs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sl-epoch { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); }
.sl-epoch.active { border-color: var(--science-line); background: color-mix(in srgb, var(--science-soft) 60%, var(--surface)); }
.sl-epoch-top { gap: 8px; }
.sl-epoch-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.sl-epoch-sub .addr { font-size: var(--fs-12); }
.sl-custody-wrap { border-top: 1px solid var(--ring); border-bottom: 1px solid var(--ring); }
table.t.sl-custody th:first-child, table.t.sl-custody td:first-child { padding-left: 18px; }
table.t.sl-custody th:last-child, table.t.sl-custody td:last-child { padding-right: 18px; }
table.t.sl-custody th.c, table.t.sl-custody td.c { text-align: center; white-space: nowrap; }
table.t.sl-custody tbody th { vertical-align: middle; }
.sl-th-sub { display: block; color: var(--faint); font-size: 11px; font-weight: 500; }
.sl-custody tr.sl-frozen th .addr { color: var(--muted); }
.sl-who { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.sl-cell { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ring); border-radius: 8px; background: var(--bg-2); color: var(--faint); }
.sl-cell svg { width: 14px; height: 14px; }
.sl-cell.held { border-color: var(--science-line); background: var(--science-soft); color: var(--science); }
.sl-cell.old { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.sl-cell.none { border-style: dashed; background: transparent; }

/* who can read what: the access legend */
.sl-legend { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sl-legend li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.sl-legend b { color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
.sl-legend p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }

/* ------------------------------------------------------------------ the access ladder */
.sl-node { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px dashed var(--ring-2); border-radius: 50%; background: var(--surface); color: var(--faint); }
.sl-node svg { width: 16px; height: 16px; }
.sl-node.sm { width: 28px; height: 28px; border-style: solid; border-color: var(--science-line); background: var(--science-soft); color: var(--science); }
.sl-node.sm svg { width: 14px; height: 14px; }
.sl-ladder { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sl-rung { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.sl-rung:last-child { padding-bottom: 0; }
.sl-rung::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--ring); }
.sl-rung:last-child::before { display: none; }
.sl-rung.link::before { background: var(--science-line); }
.sl-rung.on .sl-node { border: 1px solid var(--science-line); background: var(--science-soft); color: var(--science); }
.sl-rung.wait .sl-node { border: 1px solid var(--st-voting-line); background: var(--st-voting); color: var(--st-voting-ink); }
.sl-rung-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 5px; }
.sl-rung-body b { color: var(--ink); font-size: var(--fs-15); font-weight: 600; }
.sl-rung:not(.on) .sl-rung-body b { color: var(--ink-2); }
.sl-rung-body p { margin: 0; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.5; }

/* ------------------------------------------------------------------ one asset */
.sl-rechead { display: flex; align-items: center; gap: 22px; }
.sl-rechead-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sl-rechead h2 { font-size: var(--fs-30); font-weight: 650; line-height: 1.12; letter-spacing: -0.02em; overflow-wrap: anywhere; }
@media (max-width: 640px) { .sl-rechead { align-items: flex-start; gap: 16px; } .sl-rechead h2 { font-size: var(--fs-24); } .sl-rechead .sl-mark.lg { width: 60px; height: 60px; } .sl-rechead .sl-mark.lg > svg.glyph { width: 48px; height: 48px; } }
.sl-methods { gap: 14px; }
.sl-history { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sl-history li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.sl-history-top { gap: 4px 12px; }
.sl-history b { color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
.sl-history p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.kv.sl-facts { grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); }
.sl-propose { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sl-propose li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* decrypted content */
.sl-preview { margin: 0; max-height: 420px; padding: 12px 14px; overflow: auto; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-13); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.sl-img { align-self: flex-start; max-width: 100%; max-height: 360px; width: auto; height: auto; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); }

/* builders: the chosen asset as a small record, and what happens after the vote */
.sl-mini { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface-2); }
.sl-what { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); }
.sl-what h4 { color: var(--ink); font-size: var(--fs-13); font-weight: 600; letter-spacing: 0; }
.sl-what .sl-steps li { font-size: var(--fs-13); }
/* one plain line when the treasury-spend rule makes a proposal critical */
.sl-rule { color: var(--ink-2); line-height: 1.6; }
.sl-rule .badge { margin-right: 8px; vertical-align: 1px; }
/* short bulleted notes, such as the steward check */
.sl-bullets { margin: 0; padding-left: 1.1em; }

/* CIPNFT terms text in the accept-terms builder */
.sl-tos { max-height: 220px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

/* buttons inside an .empty state keep their normal icon size */
.sl-actions .btn svg { width: 16px; height: 16px; }

/* ---- models (merged from parts/models.css) ---- */
/* models: the Models section (views/dao-models.js) and the GL1F proposal builders (views/new/gl1f.js).
   A model is presented like a laboratory instrument: a register of the DAO's models, a datasheet per
   model (masthead with a specification strip, inputs in order, construction and provenance), a bench
   with a readout, and the treasury's earnings as a figure. Classes use the md- prefix; shared classes
   are only combined with md- modifiers, never restyled. Layouts follow their own width through
   container queries, so they hold in the wide workspace column and at 360px alike. */

/* ------------------------------------------------------------------ page rhythm */
.stack.md-page { gap: 20px; }
.page-head.md-sec-head { align-items: flex-end; }
.md-sec-h { font-size: var(--fs-24); font-weight: 650; letter-spacing: -0.02em; }
.lede.md-lede { font-size: var(--fs-15); line-height: 1.6; max-width: 72ch; }
.md-back { display: inline-flex; align-items: center; gap: 6px; width: max-content; color: var(--muted); }
.md-back:hover { color: var(--ink); }
.md-back .ic { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ model icon (on-chain PNG or molecule glyph) */
.md-icon { flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--ring); border-radius: 12px; background: var(--surface-2); }
.md-icon.s48 { width: 48px; height: 48px; }
.md-icon.s72 { width: 72px; height: 72px; border-radius: 18px; }
.md-icon img, .md-icon svg { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ the register */
.card.md-reg { overflow: hidden; container-type: inline-size; --md-cols: minmax(0, 1fr) 168px 56px 96px 150px; }
.md-reg-head { display: none; }
.md-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 18px; }
.md-reg-rows > .md-row + .md-row { border-top: 1px solid var(--ring); }
.md-row:hover { background: var(--surface-2); }
.md-row:has(.md-row-title a:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.md-row-id { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.md-row-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.md-row-title { font-size: var(--fs-15); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.md-row-title a { color: var(--ink); }
.md-row-title a:hover { color: var(--primary); text-decoration: none; }
.md-row-title a:focus-visible { outline: none; }
/* the title link covers its row; the fee warning's own link stays on top */
.md-row-title a::after { content: ""; position: absolute; inset: 0; }
.md-row-no { color: var(--muted); font: 500 var(--fs-12)/1.4 var(--mono); }
.md-row-more { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-left: 62px; }
.md-row-abs { max-width: 90ch; margin: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.md-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding-left: 62px; }
.md-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.md-fact dt { color: var(--muted); font-size: var(--fs-12); }
.md-fact dd { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0; }
.md-fact-v { color: var(--ink); font-size: var(--fs-14); font-weight: 500; overflow-wrap: anywhere; }
.md-fact-s { color: var(--muted); font-size: var(--fs-12); line-height: 1.4; overflow-wrap: anywhere; }
.md-fact .money { font-variant-numeric: tabular-nums; }
.md-row-warn { position: relative; z-index: 1; display: flex; gap: 8px; align-items: flex-start; margin: 0; padding-left: 62px; color: var(--ink-2); font-size: var(--fs-13); }
.md-row-warn .ic { width: 16px; height: 16px; margin-top: 2px; }
.md-row-warn a { position: relative; z-index: 1; }
.md-empty-actions { justify-content: center; }
@container (min-width: 760px) {
  .md-reg-head { display: grid; grid-template-columns: var(--md-cols); gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--ring); background: var(--bg-2); color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
  .md-row { grid-template-columns: var(--md-cols); gap: 8px 16px; align-items: start; }
  .md-row-more { grid-row: 2; grid-column: 1 / -1; }
  .md-facts { display: contents; }
  .md-fact { padding-top: 2px; }
  .md-fact dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .md-row-warn { grid-column: 1 / -1; }
}
@container (max-width: 420px) {
  .md-row { padding: 14px; }
  .md-facts, .md-row-warn, .md-row-more { padding-left: 0; }
}

/* ------------------------------------------------------------------ side cards of the register */
.md-donate, .md-sale { padding: 10px 0; }
.md-sale { display: flex; flex-direction: column; gap: 4px; }
.md-sale-t { overflow-wrap: anywhere; }
.md-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 1.3em; color: var(--ink-2); }
.md-steps li::marker { color: var(--muted); font-family: var(--mono); font-size: var(--fs-12); }
.md-list { margin: 0; padding-left: 1.2em; }

/* ------------------------------------------------------------------ masthead and specification strip */
.card.md-mast { overflow: hidden; container-type: inline-size; }
.md-mast-top { display: flex; gap: 18px; align-items: flex-start; padding: 22px 22px 16px; }
.md-mast-id { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; }
.md-name { font-size: var(--fs-30); font-weight: 650; line-height: 1.12; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.md-mast-actions { display: flex; flex: none; gap: 8px; }
.doc.md-abstract { max-width: none; padding: 0 22px 20px 112px; color: var(--ink-2); }
.doc.md-abstract p { max-width: 70ch; white-space: pre-line; }
.md-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border-top: 1px solid var(--ring); background: var(--ring); }
.md-spec-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 18px 14px; background: var(--surface); }
.md-spec-c dt { color: var(--muted); font-size: var(--fs-12); }
.md-spec-c dd { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0; }
.md-spec-v { color: var(--ink); font-size: var(--fs-15); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.md-spec-v .money { font-variant-numeric: tabular-nums; }
.md-spec-s { color: var(--muted); font-size: var(--fs-12); line-height: 1.4; overflow-wrap: anywhere; }
@container (min-width: 640px) { .md-spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 560px) {
  .md-mast-top { flex-wrap: wrap; gap: 14px; padding: 18px 16px 14px; }
  .md-mast-top > .md-icon { width: 56px; height: 56px; border-radius: 15px; }
  .md-mast-id { flex: 1 1 0; }
  .md-name { font-size: var(--fs-24); }
  .md-mast-actions { width: 100%; }
  .doc.md-abstract { padding: 0 16px 16px; }
  .md-spec-c { padding: 11px 14px 12px; }
}
/* beside the aside (1440px and wider) the governance card is in view: no need to jump to it */
@media (min-width: 1440px) { .btn.md-to-govern { display: none; } }

/* ------------------------------------------------------------------ the bench: inputs and readout */
.card.md-bench { container-type: inline-size; }
.md-bench-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.md-bench-in { min-width: 0; }
.md-bench-out { min-width: 0; align-self: start; }
@container (min-width: 720px) {
  .md-bench-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
  .md-bench-out { position: sticky; top: calc(var(--topbar) + 20px); }
}
.md-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px 14px; }
.md-in-l { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.md-pin { flex: none; min-width: 1.7em; color: var(--faint); font: 500 var(--fs-12)/1.4 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.md-in-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-controls { padding-top: 14px; border-top: 1px solid var(--ring); }
.md-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.md-tip { max-width: 360px; }
.md-summary { cursor: pointer; }
.md-summary:hover { color: var(--ink); }
.md-cost .money { display: inline-flex; }

.md-ro { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 16px 20px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); }
:root[data-theme="dark"] .md-ro { background: var(--surface-2); }
/* the instrument's readout rule: teal once a result is shown */
.md-ro::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: -1px; width: 3px; border-radius: 0 3px 3px 0; background: var(--science); }
.md-ro-empty::before, .md-ro-busy::before { background: var(--ring-2); }
.md-ro-h { color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; }
.md-ro-what { margin: 0; color: var(--ink); font-size: var(--fs-15); line-height: 1.5; }
.md-ro-main { display: flex; flex-direction: column; gap: 4px; }
.md-value { color: var(--ink); font: 600 var(--fs-38)/1.08 var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.md-value.text { font-family: var(--sans); letter-spacing: -0.02em; }
.md-ro-sub { margin: 0; color: var(--muted); font-size: var(--fs-13); }
.kv.md-ro-kv { gap: 6px 16px; font-size: var(--fs-13); }
.md-ro-src { line-height: 1.5; }
.md-ro .fig { gap: 10px; }
@container (max-width: 420px) { .md-value { font-size: var(--fs-30); } }

/* probability bars with the 50% decision threshold */
.md-meter { position: relative; height: 9px; border-radius: var(--r-pill); background: var(--bg-3); }
.md-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.md-meter > i { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 0; border-left: 1.5px dashed var(--ink-2); }
.md-meter.marked { margin-top: 18px; }
.md-meter.marked > i::after { content: "50%"; position: absolute; bottom: calc(100% + 2px); left: 0; transform: translateX(-50%); color: var(--ink-2); font: 500 11px var(--mono); }
.md-labs { display: flex; flex-direction: column; gap: 10px; }
.md-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 62px; gap: 10px; align-items: center; font-size: var(--fs-13); }
.md-lab-name { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.md-lab.on .md-lab-name { color: var(--ink); font-weight: 600; }
.md-lab:not(.on) .md-meter > span { background: var(--faint); }
.md-lab-pct { font-family: var(--mono); font-size: var(--fs-12); text-align: right; }
@container (max-width: 420px) {
  .md-lab { grid-template-columns: minmax(0, 1fr) 62px; }
  .md-lab .md-meter { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------------------ API access, earnings */
.md-plans table.t td { vertical-align: top; }
.md-plans .money { white-space: nowrap; }
.md-holders { padding-top: 10px; border-top: 1px solid var(--ring); }
.md-keyrow { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; }
.stats.md-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ring); border-radius: var(--r-row); }
.stats.md-stats > .stat { padding: 12px 16px; border-top: 0; border-left: 1px solid var(--ring); }
.stats.md-stats > .stat:first-child { border-left: 0; }
.stats.md-stats .stat .v { font-size: var(--fs-20); white-space: normal; }
.fig.md-fig { padding: 4px 0 0; }
.card.md-earn { container-type: inline-size; }
@container (max-width: 560px) { .md-pay .md-c-from, .md-pay .md-c-time { display: none; } }
.chart.md-chart .series { stroke-width: 1.75; }
.chart.md-chart .ref { stroke: var(--science); opacity: .8; }
.chart.md-chart .ref-label { fill: var(--science); font-family: var(--mono); font-size: 10.5px; }
@media (max-width: 560px) {
  .stats.md-stats > .stat { padding: 10px 12px; }
  .stats.md-stats .stat .v { font-size: var(--fs-17); }
  .stats.md-stats .stat .l { font-size: var(--fs-12); }
}

/* ------------------------------------------------------------------ the datasheet */
.card.md-sheet { container-type: inline-size; }
.md-sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 36px; }
@container (min-width: 700px) { .md-sheet-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.md-sheet-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.md-sheet-h { color: var(--ink); font-size: var(--fs-13); font-weight: 600; letter-spacing: 0; }
.md-sheet-col > .md-sheet-h:not(:first-child) { margin-top: 12px; }
.md-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); column-gap: 18px; margin: 0; padding: 0; list-style: none; }
.md-pins li { display: flex; gap: 10px; align-items: baseline; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--ring); color: var(--ink-2); font-size: var(--fs-13); }
.md-pin-n { min-width: 0; overflow-wrap: anywhere; }
.md-pins.md-classes { grid-template-columns: minmax(0, 1fr); }
.md-pins.md-classes li { padding: 3px 0; border-bottom: 0; }
.kv.md-kv { grid-template-columns: 112px minmax(0, 1fr); gap: 7px 16px; font-size: var(--fs-13); }
.card-foot.md-verify { align-items: flex-start; gap: 12px 18px; }
.md-verify-text { display: flex; flex: 1 1 320px; flex-direction: column; gap: 4px; min-width: 0; }
.md-verify-out { flex: 1 1 100%; min-width: 0; }
.md-verify-out:empty { display: none; }

/* ------------------------------------------------------------------ aside: change this model */
.card.md-govern { overflow: hidden; }
.md-govern .card-body { padding-bottom: 14px; }
.md-acts { border-top: 1px solid var(--ring); }
.item.md-act { align-items: center; gap: 12px; padding: 11px 18px; color: var(--ink); }
.item.md-act:hover { text-decoration: none; }
.md-act > .ic { width: 17px; height: 17px; color: var(--muted); }
.md-act-t { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
.md-act-l { font-size: var(--fs-14); font-weight: 600; }
.md-act-d { color: var(--muted); font-size: var(--fs-12); line-height: 1.4; }
.md-act > .md-act-go { width: 16px; height: 16px; color: var(--faint); }
.item.md-act:hover .md-act-go { color: var(--ink-2); }
.md-act-danger .md-act-l, .md-act-danger > .ic:first-child { color: var(--danger); }
.kv.md-buy-kv { gap: 6px 16px; }

/* ------------------------------------------------------------------ builders: "What changes" */
.md-delta { overflow: hidden; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); }
.md-delta-t { padding: 10px 14px; border-bottom: 1px solid var(--ring); background: var(--bg-2); color: var(--ink); font-size: var(--fs-13); font-weight: 600; letter-spacing: 0; }
:root[data-theme="dark"] .md-delta-t { background: var(--surface-2); }
table.t.md-delta-table thead th { padding: 7px 14px; background: transparent; }
table.t.md-delta-table tbody th, table.t.md-delta-table tbody td { padding: 9px 14px; vertical-align: top; overflow-wrap: anywhere; }
table.t.md-delta-table tbody th { width: 30%; color: var(--muted); font-weight: 500; white-space: normal; }
table.t.md-delta-table tr.md-d-diff td.md-d-after { background: var(--primary-soft); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--primary); }
.md-delta-note { margin: 0; padding: 10px 14px; border-top: 1px solid var(--ring); color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }
.md-amt { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
/* "This is a critical proposal in this DAO": the shield in the veto rose of the critical badge */
.md-crit { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.md-crit .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--veto); }

/* ---- dao (merged from parts/dao.css) ---- */
/* dao: the DAO workspace frame (masthead, rail, aside) and its core sections: overview, proposals,
   one proposal and the composer. Classes are prefixed dao-; shared classes are only adjusted in
   combination with a dao- class. The workspace grid (.ws, rail, aside) comes from app.css: the
   masthead sits above it in its own band (.band-head), so the grid areas are restated here. */

/* ================================================================== page and masthead */
.dao-page { display: flex; flex-direction: column; }
/* the static summary the prerender writes for crawlers (the app removes it) */
.dao-page > #prerender { width: 100%; max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 8px; }
.dao-page > #prerender h1 { margin: 10px 0 8px; }
.dao-page > #prerender dl, .dao-page > #prerender ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; }
.dao-page > #prerender dd { margin: 0; }
.dao-page > #prerender nav ol { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }

.dao-mast { padding-block: 20px 26px; }
/* the masthead lays out by its own width (the portal's sidebar takes 256px from 1024px up) */
.dao-mast > .frame { container: dao-mast / inline-size; }
.dao-mast .crumbs ol { margin-bottom: 18px; }
.dao-mast .crumbs [aria-current="page"] { max-width: 60ch; }

/* identity: mark | name, summary and meta | facts and actions */
.dao-id { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark text side"; gap: 16px 24px; align-items: start; }
.dao-id-mark { grid-area: mark; }
.dao-id .dao-id-mark .avatar { width: 88px; height: 88px; border-radius: 20px; background: var(--surface); }
.dao-id-text { grid-area: text; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 2px; }
.dao-id h1 { font-size: var(--fs-38); font-weight: 650; line-height: 1.08; letter-spacing: -0.025em; overflow-wrap: anywhere; text-wrap: balance; }
/* the one-line summary: the start of the DAO's description */
.dao-id-sum { max-width: 100%; margin: 0; overflow: hidden; color: var(--ink-2); font-family: var(--serif); font-size: var(--fs-17); line-height: 1.5; letter-spacing: 0;
  white-space: nowrap; text-overflow: ellipsis; }
.dao-id-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dao-id-meta .addr { padding: 2px 4px 2px 8px; border: 1px solid var(--ring); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-12); }
.dao-id-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 0; }
.dao-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); margin: 0; border: 1px solid var(--ring); border-radius: var(--r-window); background: var(--surface); }
.dao-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 11px 18px 12px; }
.dao-fact + .dao-fact { border-left: 1px solid var(--ring); }
.dao-fact dt { color: var(--muted); font-size: var(--fs-12); font-weight: 500; white-space: nowrap; }
.dao-fact dd { margin: 0; color: var(--ink); font-size: var(--fs-20); font-weight: 620; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dao-fact .money { display: flex; flex-direction: column; gap: 1px; }
.dao-fact .money .fiat { color: var(--muted); font-size: var(--fs-12); font-weight: 500; letter-spacing: 0; }
.dao-fact-sub { color: var(--muted); font-size: var(--fs-12); white-space: nowrap; }
.dao-fact-sub:empty { display: none; }
a.dao-fact-link { color: inherit; }
a.dao-fact-link:hover { color: var(--primary); }
.dao-id-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
/* on a proposal and in the composer the section's own button (vote, execute, submit) is the primary one */
.dao-page[data-view="proposal"] .dao-id-actions .btn.primary, .dao-page[data-view="new"] .dao-id-actions .btn.primary {
  border-color: var(--ring); background: var(--surface); color: var(--ink); box-shadow: none; font-weight: 500; }
.dao-page[data-view="proposal"] .dao-id-actions .btn.primary:hover, .dao-page[data-view="new"] .dao-id-actions .btn.primary:hover {
  border-color: var(--ring-2); background: var(--bg-2); color: var(--ink); }
.dao-skel-mark { width: 88px; height: 88px; border-radius: 20px; }
.dao-skel-name { width: min(440px, 80%); height: 36px; margin-bottom: 4px; border-radius: 10px; }
.dao-skel-line { display: block; width: min(600px, 92%); height: 16px; margin: 4px 0; }
.dao-skel-num { display: inline-block; width: 2em; height: 22px; vertical-align: middle; }

@container dao-mast (max-width: 1199px) {
  .dao-id { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark text" "side side"; }
  .dao-id-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  /* the facts fill the row beside the actions, and the whole row when the actions wrap below */
  .dao-facts { flex: 1 1 460px; grid-auto-columns: minmax(0, 1fr); }
  .dao-id-actions { margin-left: auto; }
  /* inside a section the masthead keeps the mark, the name and the actions; the overview has the rest */
  .dao-page:not([data-view="overview"]) .dao-id { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark text side"; align-items: center; }
  .dao-page:not([data-view="overview"]) .dao-id-sum, .dao-page:not([data-view="overview"]) .dao-id-meta,
  .dao-page:not([data-view="overview"]) .dao-facts { display: none; }
  .dao-page:not([data-view="overview"]) .dao-id .dao-id-mark .avatar { width: 52px; height: 52px; border-radius: 14px; }
  .dao-page:not([data-view="overview"]) .dao-id h1 { font-size: var(--fs-24); }
}
@media (max-width: 1439px) { .dao-page:not([data-view="overview"]) .dao-mast { padding-bottom: 20px; } }
@media (max-width: 759px) {
  .dao-mast { padding-block: 14px 18px; }
  .dao-mast .crumbs ol { margin-bottom: 12px; }
}
@container dao-mast (max-width: 719px) {
  .dao-id { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark name" "sum sum" "meta meta" "side side"; gap: 12px 14px; align-items: center; }
  .dao-id-text { display: contents; }
  .dao-id h1 { grid-area: name; font-size: var(--fs-24); }
  .dao-id-sum { grid-area: sum; font-size: var(--fs-15); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .dao-id-meta { grid-area: meta; }
  .dao-id .dao-id-mark .avatar, .dao-skel-mark { width: 56px; height: 56px; border-radius: 14px; }
  .dao-id-side { flex-direction: column; align-items: stretch; }
  .dao-facts { flex: none; grid-auto-columns: minmax(0, 1fr); }
  .dao-id-actions { margin-left: 0; }
  .dao-fact { padding: 9px 12px 10px; }
  .dao-fact dd { font-size: var(--fs-17); }
  .dao-fact-sub { white-space: normal; }
  .dao-id-actions { justify-content: stretch; }
  .dao-id-actions .btn { flex: 1 1 0; }
  .dao-page:not([data-view="overview"]) .dao-id { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark name" "side side"; }
  .dao-page:not([data-view="overview"]) .dao-id .dao-id-mark .avatar { width: 44px; height: 44px; border-radius: 12px; }
  .dao-page:not([data-view="overview"]) .dao-id h1 { font-size: var(--fs-20); }
}
@container dao-mast (max-width: 420px) {
  .dao-fact .money .fiat { display: none; }
  .dao-fact-sub { display: none; }
}

/* ================================================================== workspace grid with the masthead above it
   2.2 portal: the section bar sits right under the masthead (app.css .ws-nav), on the masthead's band */
.ws.dao-ws { padding-top: 0; }
.ws.dao-ws[data-state="empty"] { display: none; }
.dao-ws .ws-nav { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); border-bottom-color: var(--band-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dao-page .dao-mast { border-bottom: 0; padding-bottom: 14px; }
.ws.dao-ws .ws-main { padding-top: 6px; }
/* your membership: under the view, or above the aside where the aside shows it (1440px and wider) */
.ws.dao-ws[data-view="overview"] .ws-me:not(:empty) { display: flex; }
.ws-me .ws-mine dd .muted { font-weight: 400; }
.dao-ws .dao-me-card { display: none; }
@media (min-width: 1440px) {
  .ws.dao-ws[data-me="aside"] .dao-me-card { display: block; }
  .ws.dao-ws[data-me="aside"] .ws-rail .ws-me { display: none; }
  .ws.dao-ws[data-aside="on"][data-aside-fit="tall"] .ws-aside { position: static; }
}

/* ================================================================== aside: how decisions are made */
.dao-rules .card-body { gap: 18px; }
.dao-rf { gap: 12px; }
.dao-rf-rows { display: flex; flex-direction: column; gap: 14px; }
.dao-rf-row { display: flex; flex-direction: column; gap: 8px; }
.dao-rf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--fs-13); }
.dao-rf-name { color: var(--ink-2); font-weight: 550; }
.dao-rf-vals { display: inline-flex; gap: 12px; font-family: var(--mono); font-size: var(--fs-12); letter-spacing: 0; white-space: nowrap; }
.dao-rf-vals .s { color: var(--ink-2); }
.dao-rf-vals .c { color: var(--veto); }
:root[data-theme="dark"] .dao-rf-vals .c { color: color-mix(in srgb, var(--veto) 55%, #ffffff); }
.dao-rf-track { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--bg-3); }
.dao-rf-track i { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 1.5px dashed var(--ink-2); }
.dao-rf-track i.c { border-left-color: var(--veto); }
:root[data-theme="dark"] .dao-rf-track i.c { border-left-color: color-mix(in srgb, var(--veto) 55%, #ffffff); }
.dao-rf-axis { position: relative; height: 16px; border-top: 1px solid var(--ring-2); }
.dao-rf-axis span { position: absolute; top: 5px; transform: translateX(-50%); color: var(--faint); font: 10px/1 var(--mono); letter-spacing: 0; }
.dao-rf-axis span::before { content: ""; position: absolute; top: -5px; left: 50%; height: 4px; border-left: 1px solid var(--ring-2); }
.dao-rf-axis span:first-child { transform: none; }
.dao-rf-axis span:first-child::before { left: 0; }
.dao-rf-axis span:last-child { transform: translateX(-100%); }
.dao-rf-axis span:last-child::before { left: auto; right: 0; }
.legend.dao-rf-legend { gap: 6px 18px; font-size: var(--fs-12); }
/* a reference diagram beside the section: unnumbered, so it never repeats a figure number of the main column */
.fig-cap.dao-rf-cap b { color: var(--ink-2); font-weight: 600; }
.legend.dao-rf-legend i { width: 16px; height: 0; margin-right: 7px; border-top: 1.5px dashed var(--ink-2); border-radius: 0; background: none; vertical-align: middle; }
.legend.dao-rf-legend i.c { border-top-color: var(--veto); }
:root[data-theme="dark"] .legend.dao-rf-legend i.c { border-top-color: color-mix(in srgb, var(--veto) 55%, #ffffff); }
table.t.dao-rules-t th:not(.r) { width: 40%; }
.kv.dao-rules-kv { gap: 6px 14px; }

/* ================================================================== view headers */
.dao-vhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.dao-vhead-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 76ch; }
.dao-vhead h2 { font-size: var(--fs-24); font-weight: 650; letter-spacing: -0.02em; }
.lede.dao-lede { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2); }
.dao-back { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--muted); font-size: var(--fs-13); }
.dao-back svg { width: 15px; height: 15px; }
.dao-back:hover { color: var(--ink); }

/* ================================================================== proposals: filters and rows */
.dao-ptools { display: flex; flex-direction: column; gap: 12px; }
.dao-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.dao-fpill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 6px 0 12px; border: 1px solid var(--ring); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-13); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.dao-fpill:hover { border-color: var(--ring-2); color: var(--ink); }
.dao-fpill > i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--faint); }
.dao-fpill .count { min-width: 22px; padding: 0 6px; border: 1px solid var(--ring); border-radius: var(--r-pill); background: var(--bg-2); color: var(--muted); font: 500 11px/1.6 var(--mono); text-align: center; }
.dao-fpill.open > i { background: var(--primary); }
.dao-fpill.voting > i { background: var(--st-voting-ink); }
.dao-fpill.deposit > i { background: var(--st-deposit-ink); }
.dao-fpill.passed > i { background: var(--st-passed-ink); }
.dao-fpill.rejected > i { background: var(--st-rejected-ink); }
.dao-fpill.failed > i { background: var(--st-failed-ink); }
.dao-fpill[aria-pressed="true"] { border-color: var(--ring-2); background: var(--bg-3); color: var(--ink); font-weight: 600; }
.dao-fpill.open[aria-pressed="true"] { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.dao-fpill.voting[aria-pressed="true"] { border-color: color-mix(in srgb, var(--st-voting-ink) 30%, var(--st-voting-line)); background: var(--st-voting); color: var(--st-voting-ink); }
.dao-fpill.deposit[aria-pressed="true"] { border-color: color-mix(in srgb, var(--st-deposit-ink) 30%, var(--st-deposit-line)); background: var(--st-deposit); color: var(--st-deposit-ink); }
.dao-fpill.passed[aria-pressed="true"] { border-color: color-mix(in srgb, var(--st-passed-ink) 30%, var(--st-passed-line)); background: var(--st-passed); color: var(--st-passed-ink); }
.dao-fpill.rejected[aria-pressed="true"] { border-color: color-mix(in srgb, var(--st-rejected-ink) 30%, var(--st-rejected-line)); background: var(--st-rejected); color: var(--st-rejected-ink); }
.dao-fpill.failed[aria-pressed="true"] { border-color: color-mix(in srgb, var(--st-failed-ink) 30%, var(--st-failed-line)); background: var(--st-failed); color: var(--st-failed-ink); }
.dao-fpill[aria-pressed="true"] .count { border-color: transparent; background: var(--surface); color: inherit; }
.dao-ptools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.dao-ptools-row .toolbar-search { flex: 1 1 280px; max-width: 520px; }
.select.dao-kindsel { width: auto; min-width: 210px; max-width: 100%; }
@media (max-width: 640px) {
  .dao-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
  .dao-filters::-webkit-scrollbar { display: none; }
  .dao-fpill { flex: none; }
  .select.dao-kindsel { flex: 1 1 100%; }
}

.dao-plist { container: dao-plist / inline-size; }
.item.dao-prow { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "id state" "id title" "id meta" "id tally"; gap: 7px 12px; align-items: start; padding: 15px 18px; }
.dao-prow-id { grid-area: id; padding-top: 2px; color: var(--muted); font-family: var(--mono); font-size: var(--fs-13); font-weight: 500; letter-spacing: 0; }
.dao-prow-title { grid-area: title; color: var(--ink); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
a.dao-prow:hover .dao-prow-title { color: var(--primary); }
.dao-prow-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.dao-prow-time { color: var(--muted); font-size: var(--fs-13); }
.dao-prow-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dao-prow-tally { grid-area: tally; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dao-prow-note { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.dao-minitally { position: relative; display: block; }
.dao-minitally > i { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1.5px dashed var(--ink-2); }
.dao-bar { display: block; height: 7px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-3); }
.dao-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.dao-bar.dao-bar-deposit > span { background: var(--st-deposit-ink); }
.dao-myvote { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-12); font-weight: 500; white-space: nowrap; }
.dao-myvote > i { width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.dao-myvote.yes > i { background: var(--yes); }
.dao-myvote.no > i { background: var(--no); }
.dao-myvote.veto > i { background: var(--veto); }
.dao-myvote.abstain > i { background: var(--abstain); }
.dao-myvote.open { color: var(--primary); font-weight: 600; }
.dao-myvote.open > i { border-radius: 50%; }
@container dao-plist (min-width: 680px) {
  .item.dao-prow { grid-template-columns: 48px minmax(0, 1fr) 190px; grid-template-areas: "id title state" "id meta tally"; gap: 8px 20px; }
  .dao-prow-state { justify-content: flex-start; }
}
@container dao-plist (min-width: 980px) {
  .item.dao-prow { grid-template-columns: 52px minmax(0, 1fr) 170px 210px; grid-template-areas: "id title state tally" "id meta state tally"; align-items: center; }
  .dao-prow-id { align-self: start; }
  .dao-prow-state { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* decided proposals, one line each */
.item.dao-drow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "id title end"; gap: 4px 12px; align-items: start; padding: 12px 18px; }
.dao-drow-title { grid-area: title; display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ink); font-size: var(--fs-14); font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
a.dao-drow:hover .dao-drow-title { color: var(--primary); }
.dao-drow-kind { color: var(--muted); font-size: var(--fs-12); font-weight: 400; }
.dao-drow-end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dao-drow-when { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ================================================================== overview */
.dao-ov-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container ws-main (min-width: 760px) { .dao-ov-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dao-ov-pair > .card { height: 100%; }
.dao-card-note { margin: 0; padding: 12px 18px 0; }
/* what you can do */
.dao-do-card .card-body { padding-block: 4px; }
.dao-do { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dao-do-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 13px 0; }
.dao-do-row + .dao-do-row { border-top: 1px solid var(--ring); }
.dao-do-ic { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--primary-line); border-radius: var(--r-ctl); background: var(--primary-soft); color: var(--primary); }
.dao-do-ic svg { width: 18px; height: 18px; }
.dao-do-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dao-do-text b { color: var(--ink); font-size: var(--fs-15); font-weight: 600; overflow-wrap: anywhere; }
.dao-do-text span { color: var(--muted); font-size: var(--fs-13); line-height: 1.45; overflow-wrap: anywhere; }
.dao-do-act { display: flex; justify-content: flex-end; }
.dao-do-row.warn .dao-do-ic { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.dao-do-row.done .dao-do-ic { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.dao-do-row.note .dao-do-ic { border-color: var(--ring); background: var(--bg-2); color: var(--muted); }
.dao-escalation { color: var(--ink-2); }
@container ws-main (max-width: 560px) {
  .dao-do-row { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
  .dao-do-act { grid-column: 2; justify-content: flex-start; }
}
/* about: the DAO's own text as a document, with margin notes */
.dao-about { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px 36px; padding: 22px 22px 24px; }
.dao-about-doc { min-width: 0; }
.dao-about-notes { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--ring); }
.dao-about-notes h3 { color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; }
.dao-about-notes h3:not(:first-child) { margin-top: 10px; }
.dao-about-notes .doc-note { margin: 0; }
.dao-about-notes .addr { font-size: var(--fs-12); }
.dao-verified { display: flex; align-items: center; gap: 6px; margin: 18px 0 0; color: var(--science); font-size: var(--fs-12); }
.dao-verified svg { width: 14px; height: 14px; flex: none; }
@container ws-main (max-width: 720px) {
  .dao-about { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .dao-about-notes { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--ring); }
}
/* treasury snapshot */
.dao-tre-l1 { display: flex; flex-direction: column; gap: 2px; }
.dao-tre-l1 > b { color: var(--ink); font-size: var(--fs-24); font-weight: 620; letter-spacing: -0.02em; }
.dao-tre-l1 .money .fiat { font-size: var(--fs-14); letter-spacing: 0; }
table.t.dao-tre-t tbody th { font-weight: 500; color: var(--ink); }
table.t.dao-tre-t td, table.t.dao-tre-t th { padding-inline: 0; }
/* representatives, announcements, contracts */
.dao-rep { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; }
.dao-ann { display: flex; flex-direction: column; gap: 8px; }
.dao-ann + .dao-ann { padding-top: 16px; border-top: 1px solid var(--ring); }
.dao-ann-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.dao-ann-head h3 { font-size: var(--fs-15); overflow-wrap: anywhere; }
.kv.dao-con { gap: 7px 16px; }

/* ================================================================== one proposal */
.dao-wrap, .dao-wrap * { overflow-wrap: anywhere; word-break: break-word; }
.dao-wrap { min-width: 0; }
.dao-ph { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dao-ph-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dao-pid { color: var(--muted); font-family: var(--mono); font-size: var(--fs-13); font-weight: 500; letter-spacing: 0; }
.dao-ph-title { max-width: 32ch; font-size: var(--fs-30); font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.dao-ph-by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; color: var(--muted); font-size: var(--fs-14); }
@media (max-width: 640px) { .dao-ph-title { font-size: var(--fs-24); } }

/* the lifecycle, like a paper's history: submitted, deposit, voting, timelock, execution */
.dao-life { padding: 18px 20px 16px; container: dao-life / inline-size; }
.dao-tl { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; list-style: none; }
.dao-tl > li { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 24px 14px 0 0; }
.dao-tl > li::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--ring-2); }
.dao-tl > li:last-child::before { right: auto; width: 14px; }
.dao-tl > li.done::before, .dao-tl > li.now::before { background: var(--primary); }
.dao-tl > li.now::before { background: linear-gradient(to right, var(--primary) 14px, var(--ring-2) 14px); }
.dao-tl > li.fail::before { background: var(--danger); }
.dao-tl-dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border: 2px solid var(--ring-2); border-radius: 50%; background: var(--surface); }
.dao-tl > li.done .dao-tl-dot { border-color: var(--primary); background: var(--primary); }
.dao-tl > li.now .dao-tl-dot { border: 3px solid var(--primary); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.dao-tl > li.fail .dao-tl-dot { border-color: var(--danger); background: var(--danger); }
.dao-tl > li.skip .dao-tl-dot { border-style: dashed; }
.dao-tl-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); font-size: var(--fs-13); font-weight: 600; }
.dao-tl > li:not(.done):not(.now):not(.fail) .dao-tl-t { color: var(--ink-2); font-weight: 500; }
.dao-tl-now { padding: 0 7px; border: 1px solid var(--primary-line); border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 600; line-height: 1.6; }
.dao-tl-s { color: var(--muted); font-size: var(--fs-12); line-height: 1.45; overflow-wrap: anywhere; }
@container dao-life (max-width: 620px) {
  .dao-tl { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .dao-tl > li { padding: 0 0 14px 28px; }
  .dao-tl > li:last-child { padding-bottom: 0; }
  .dao-tl > li::before { top: 16px; bottom: -2px; left: 6px; right: auto; width: 2px; height: auto; }
  .dao-tl > li:last-child::before { display: none; }
  .dao-tl > li.now::before { background: var(--ring-2); }
}

/* main column and the side column with the tally and the panels that act */
.dao-prop { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.dao-prop-main, .dao-prop-side { min-width: 0; }
/* the side panels carry their order (set by the view for the proposal's state); in one column
   they fall between the actions and the votes */
.dao-desc-card { order: 1; } .dao-acts-card { order: 2; } .dao-votes-card { order: 99; }
@container ws-main (max-width: 900px) {
  .dao-prop { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dao-prop > .dao-prop-main, .dao-prop > .dao-prop-side { display: contents; }
}
.dao-desc-card .card-body { padding: 20px 22px 22px; }
.dao-desc .doc { max-width: 68ch; }
/* decoded actions */
.dao-acts { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dao-act { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.dao-act:first-child { padding-top: 2px; }
.dao-act + .dao-act { border-top: 1px solid var(--ring); }
.dao-act-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ring-2); border-radius: 50%; color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-12); }
.dao-act-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dao-act-body > .strong { color: var(--ink); line-height: 1.45; }
.dao-act-lines { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: var(--fs-13); }
.dao-act-lines li + li { margin-top: 2px; }
.dao-raw > summary { width: fit-content; color: var(--muted); font-size: var(--fs-13); cursor: pointer; }
.dao-raw > summary:hover { color: var(--ink); }
.dao-raw[open] > summary { margin-bottom: 10px; }
.dao-raw .kv { padding: 12px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface-2); }
.dao-raw .code-block { max-height: 180px; }
/* tally, vote, deposit */
.dao-ballot-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dao-ballot-btns .btn { justify-content: flex-start; }
.dao-opt { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--abstain); }
.btn.yes .dao-opt { background: var(--yes); }
.btn.no .dao-opt { background: var(--no); }
.btn.veto .dao-opt { background: var(--veto); }
.dao-effect { color: var(--ink-2); }
.progress.dao-deposit-bar > span { background: var(--st-deposit-ink); }
table.t.dao-votes-t td { padding-block: 9px; }

/* ================================================================== composer */
.dao-new .dao-vhead-text { max-width: 92ch; }
.dao-kind-title { font-size: var(--fs-24); }
.dao-kind-title > svg { width: 22px; height: 22px; color: var(--primary); }
.dao-rules-now { margin: 4px 0 0; padding: 10px 14px; border: 1px solid var(--ring); border-left: 3px solid var(--primary-line); border-radius: var(--r-row);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.dao-rules-now.crit { border-left-color: color-mix(in srgb, var(--veto) 55%, var(--ring)); }
/* the type picker */
.dao-rulesline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; margin: 0; }
.dao-rulesline > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--ring); border-left: 3px solid var(--primary-line); border-radius: var(--r-row); background: var(--surface); }
.dao-rulesline > div.crit { border-left-color: color-mix(in srgb, var(--veto) 55%, var(--ring)); }
.dao-rulesline dt { color: var(--ink); font-size: var(--fs-13); font-weight: 600; }
.dao-rulesline dd { margin: 0; color: var(--muted); font-size: var(--fs-13); }
/* the groups side by side, each a column of its types */
.dao-kgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 26px 16px; align-items: start; }
.dao-kgroup { display: flex; flex-direction: column; gap: 10px; }
.dao-kgroup > h3 { color: var(--ink-2); font-size: var(--fs-14); font-weight: 600; }
.kinds.dao-kinds { grid-template-columns: minmax(0, 1fr); }
.kind.dao-kind { gap: 6px; padding: 14px 16px; }
.kind.dao-kind .k-top { align-items: flex-start; }
.kind.dao-kind .k-top svg { margin-top: 2px; }
.kind.dao-kind p { flex: 1 1 auto; }
.dao-kind-rules { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--ring); color: var(--muted); font-size: var(--fs-12); }
.dao-kind-rules.crit { color: var(--veto); }
:root[data-theme="dark"] .dao-kind-rules.crit { color: color-mix(in srgb, var(--veto) 55%, #ffffff); }
.dao-footnote { max-width: 92ch; margin: 0; }
/* steps */
.dao-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; margin-right: 10px; border: 1px solid var(--primary-line); border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); font: 600 12px/1 var(--mono); letter-spacing: 0; vertical-align: 1px; }
.dao-step-title { display: flex; flex-direction: column; gap: 4px; }
.dao-step-title h3 { display: flex; align-items: center; font-size: var(--fs-17); }
.dao-step-sub { margin: 0; color: var(--muted); font-size: var(--fs-13); line-height: 1.45; }
.dao-step-title .dao-step-sub { padding-left: 32px; }
.card-head.dao-step-head { flex-wrap: wrap; gap: 4px 12px; }
.card-head.dao-step-head h3 { display: flex; align-items: center; }
.card-head.dao-step-head .dao-step-sub { flex-basis: 100%; padding-left: 32px; }
.dao-step-actions { display: flex; flex-direction: column; gap: 14px; }
.dao-builders { display: flex; flex-wrap: wrap; gap: 8px; }
.dao-builder { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px; border: 1px solid var(--ring); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-14); font-weight: 500; transition: border-color .15s, background-color .15s, color .15s; }
.dao-builder svg { width: 16px; height: 16px; color: var(--muted); }
.dao-builder:hover { border-color: var(--ring-2); color: var(--ink); text-decoration: none; }
.dao-builder[aria-current="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.dao-builder[aria-current="true"] svg { color: var(--primary); }
.dao-block .card-head h4 { font-size: var(--fs-15); font-weight: 600; letter-spacing: -0.01em; }
.dao-block .card-head h4 svg { width: 17px; height: 17px; color: var(--primary); }
.dao-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--ring-2); border-radius: var(--r-row); }
.dao-addbar:empty { display: none; }
/* review and submit */
.dao-review-side { max-height: calc(100vh - var(--topbar) - 36px); margin: -2px -6px -2px -2px; padding: 2px 6px 2px 2px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
@media (max-width: 1080px) { .dao-review-side { max-height: none; margin: 0; padding: 0; overflow: visible; } }
@container ws-main (max-width: 900px) { .dao-review-side { max-height: none; margin: 0; padding: 0; overflow: visible; } }
.dao-check { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dao-check > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-13); line-height: 1.4; }
.dao-check > li b { display: block; color: var(--ink); font-weight: 600; }
.dao-check > li > span:last-child > span { display: block; color: var(--muted); overflow-wrap: anywhere; }
.dao-check-ic { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ring-2); border-radius: 50%; color: var(--faint); }
.dao-check-ic svg { width: 12px; height: 12px; }
.dao-check > li.done .dao-check-ic { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.dao-check > li.warn .dao-check-ic { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.dao-review { padding-top: 14px; border-top: 1px solid var(--ring); }
.dao-review-h { color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; }
.dao-acts.dao-acts-review .dao-act { padding: 10px 0; }
.dao-acts.dao-acts-review .dao-act:first-child { padding-top: 0; }
.dao-review .kv { font-size: var(--fs-13); }
.dao-share { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 12px; border-top: 1px solid var(--ring); }
.dao-share .btn { margin-left: -10px; }

/* ================================================================== print: the DAO's name and the section, no controls */
@media print {
  .dao-mast { padding: 0 0 12px; background: none; border-bottom: 1px solid #999; }
  .dao-mast .crumbs, .dao-id-actions, .dao-id-meta .addr button { display: none !important; }
  .dao-id-sum { white-space: normal; }
  .dao-prop { display: block; }
  .dao-prop-side { margin-top: 16px; }
}

/* ================================================================== COLLAB 2.2: profile on chain
   The logo and description editors (views/profile-editors.js), shared by the wizard, the profile
   builders and the representatives' tools; the permanent-name and in-place notes; the wizard's web
   address; the hidden-DAO note in the masthead. */

/* ---- notes: replaced in place, the name is permanent, hidden on this site */
.dao-inplace, .dao-permanent { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-row);
  background: var(--bg-2); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.dao-inplace .ic, .dao-permanent .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--muted); }
.dao-inplace b, .dao-permanent b { color: var(--ink); font-weight: 600; }
.dao-permanent .ic { color: var(--primary); }
.dao-hidden-note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; padding: 9px 12px; border: 1px solid var(--warn-line);
  border-radius: var(--r-row); background: var(--warn-soft); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.dao-hidden-note .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--warn); }
.dao-hidden-note b { color: var(--ink); font-weight: 600; }
/* a name another DAO also has: this one's web address and the others' */
.dao-samename { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; padding: 9px 12px; border: 1px solid var(--warn-line);
  border-radius: var(--r-row); background: var(--warn-soft); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; overflow-wrap: anywhere; }
.dao-samename .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--warn); }
.dao-samename b { color: var(--ink); font-weight: 600; }
.dao-samename .mono { font-size: var(--fs-12); }
.pill.dao-slug-pill { font-size: var(--fs-12); color: var(--ink-2); }
/* on cards and in the directory: "Name shared" */
.badge.dao-samebadge { background: var(--warn-soft); color: var(--ink-2); border-color: var(--warn-line); font-weight: 500; }
.badge.dao-samebadge .ic { width: 12px; height: 12px; color: var(--warn); }
.dao-card-slug { overflow: hidden; color: var(--muted); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }

/* ---- stored size against the contract's limit */
.dao-bytes { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dao-bytes-text { gap: 10px; }
.progress.dao-bytes-bar { height: 6px; }
.progress.dao-bytes-bar > span { min-width: 0; transition: width .15s ease-out; }
.progress.dao-bytes-bar.over > span { background: var(--danger); }
.progress.dao-desc-bar { margin-top: -2px; }

/* ---- the logo editor: the crop stage, the result at its actual size, the drop zone */
.dao-logo-ed { min-width: 0; }
.dao-logo-grid { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.dao-logo-grid.editing { grid-template-columns: auto minmax(0, 1fr); }
.dao-logo-cur { display: contents; }
.dao-logo-cur > p { grid-column: 2; grid-row: 1; align-self: end; }
.dao-logo-now { grid-row: 1 / span 3; }
.dao-logo-actual { position: relative; display: grid; place-items: center; width: 128px; height: 128px; overflow: hidden; border: 1px solid var(--ring);
  border-radius: 28px; background: var(--surface-2); }
/* a checkerboard only behind a real image: it shows which pixels are transparent */
.dao-logo-actual:has(img) { background: repeating-conic-gradient(var(--bg-3) 0 25%, var(--surface) 0 50%) 50% / 16px 16px; }
.dao-logo-actual svg, .dao-logo-actual img { display: block; width: 128px; height: 128px; }
.dao-logo-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
.dao-logo-uses { display: flex; align-items: center; gap: 10px; }
.dao-logo-uses .avatar { background: repeating-conic-gradient(var(--bg-3) 0 25%, var(--surface) 0 50%) 50% / 8px 8px; }
.dao-logo-side { min-width: 0; }
.dao-logo-result { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dao-logo-status:empty { display: none; }
.drop.dao-logo-drop { padding: 16px 18px; }
.drop.dao-logo-drop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.dao-logo-crop { display: flex; flex-direction: column; gap: 10px; width: 224px; }
.dao-logo-stage { position: relative; width: 224px; height: 224px; overflow: hidden; border: 1px solid var(--ring-2); border-radius: var(--r-ctl);
  background: repeating-conic-gradient(var(--bg-3) 0 25%, var(--surface) 0 50%) 50% / 16px 16px; cursor: grab; touch-action: none; user-select: none; }
.dao-logo-stage.dragging { cursor: grabbing; }
.dao-logo-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dao-logo-canvas { display: block; width: 100%; height: 100%; }
/* the avatar's rounded square over the stage: what lists and cards cut off at the corners */
.dao-logo-mask { position: absolute; inset: 0; border-radius: 23%; box-shadow: 0 0 0 999px color-mix(in srgb, var(--surface) 55%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: -1px; pointer-events: none; }
.dao-logo-tools { display: flex; align-items: center; gap: 6px; }
.dao-logo-tools .icon-btn { width: 32px; height: 32px; }
.dao-logo-zoom { flex: 1 1 auto; min-width: 0; accent-color: var(--primary); }
.dao-logo-fit { flex-wrap: wrap; }
@media (max-width: 560px) {
  .dao-logo-grid, .dao-logo-grid.editing { grid-template-columns: minmax(0, 1fr); }
  .dao-logo-cur > p { grid-column: 1; grid-row: auto; }
  .dao-logo-now { grid-row: auto; }
  .dao-logo-crop { width: 100%; max-width: 320px; margin-inline: auto; }
  .dao-logo-stage { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ---- the wizard: the web address (slug), permanence */
/* the address before the field is an addon on the left (app.css draws addons on the right) */
.input-group.cr-slug-group { min-width: 0; }
.input-group.cr-slug-group .addon { flex: none; max-width: 58%; overflow: hidden; padding: 0 2px 0 12px; border: 1px solid var(--ring-2); border-right: 0;
  border-radius: var(--r-ctl) 0 0 var(--r-ctl); text-overflow: ellipsis; }
.input-group.cr-slug-group .input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.cr-slug-host { overflow: hidden; text-overflow: ellipsis; }
.cr-slug-state { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--muted); font-size: var(--fs-13); line-height: 1.45; }
.cr-slug-state:empty { display: none; }
.cr-slug-state .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.cr-slug-state .spinner { flex: none; margin-top: 2px; }
.cr-slug-state.ok { color: var(--ink-2); }
.cr-slug-state.ok .ic { color: var(--ok); }
.cr-slug-state.bad { color: var(--danger); }
.cr-slug-state b { color: var(--ink); font-weight: 600; }
.pill.cr-permanent { gap: 5px; }
.pill.cr-permanent .ic { width: 12px; height: 12px; }
.cr-review-slug { color: var(--muted); font-size: var(--fs-13); }
.cr-review-slug b { color: var(--ink); font-weight: 600; }
.cr-permanent-note { color: var(--ink-2); }
.cr-fee { padding-top: 2px; }
.kv.cr-fee-kv { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.kv.cr-fee-kv dd { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin: 0; text-align: right; }
@media (max-width: 559px) { .cr-slug-host { display: none; } }

/* ---- settings: the two editors take the full width of the representative tools */
.tr-tool.tr-edit { grid-column: 1 / -1; }

/* ---- the section bar: a fade where more sections are out of view (pages/dao.js sets data-more) */
.dao-ws .ws-nav[data-more="end"] ul { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.dao-ws .ws-nav[data-more="start"] ul { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.dao-ws .ws-nav[data-more="both"] ul { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }

/* ---- admin (merged from parts/admin.css) ---- */
/* COLLAB 2.2: admin rules (merged into app.css by tools/merge_css.py at release).
   The operator's admin (/admin, admin.html): the masthead with the session and four facts, a tab
   bar that sticks under the top bar, and the tabs' windows. Every class starts with ad-; shared
   classes are only combined with ad- ones. Colours come from the design tokens, so the dark theme
   follows. The deploy flow inside the Deploy and Check tabs keeps its own dp- rules (deploy.css). */

/* ================================================================== masthead */
.ad-mast { padding-bottom: 24px; }
.ad-head { align-items: flex-start; }
.ad-session { align-items: center; min-height: 38px; }
.ad-state { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--ring); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.ad-state.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.ad-state.warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.ad-state.bad { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.ad-state .dot { width: 7px; height: 7px; }

/* four facts about this site, one strip */
.ad-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 0; overflow: hidden; border: 1px solid var(--band-line); border-radius: var(--r-window);
  background: var(--surface); }
.ad-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 18px 14px; box-shadow: -1px 0 0 var(--ring); }
.ad-fact dt { color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.ad-fact dd { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.ad-fact dd b { display: flex; align-items: center; gap: 8px; overflow: hidden; color: var(--ink); font-size: var(--fs-15); font-weight: 620; letter-spacing: -0.01em;
  text-overflow: ellipsis; white-space: nowrap; }
.ad-fact dd span { overflow: hidden; color: var(--muted); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }
.ad-fact.ok dd b::before, .ad-fact.warn dd b::before, .ad-fact.bad dd b::before, .ad-fact.busy dd b::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 20%, transparent); }
.ad-fact.warn dd b::before { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.ad-fact.bad dd b::before { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.ad-fact.busy dd b::before { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
@media (prefers-reduced-motion: no-preference) { .ad-fact.busy dd b::before { animation: pulse 1.4s ease-in-out infinite; } }
@media (max-width: 1100px) {
  .ad-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-fact { box-shadow: -1px 0 0 var(--ring), 0 -1px 0 var(--ring); }
}

/* ================================================================== the tab bar */
.ad-tabbar { position: sticky; top: var(--topbar); z-index: 30; border-bottom: 1px solid var(--ring); background: color-mix(in srgb, var(--chrome) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.tabs.ad-tabs { border-bottom: 0; }
/* padding and size are app.css's .tabs a, which comes after the parts in the cascade: overrides say .tabs.ad-tabs */
.ad-tabs a { display: inline-flex; align-items: center; gap: 8px; }
.ad-tabs a .ic { width: 16px; height: 16px; color: var(--faint); }
.ad-tabs a:hover .ic { color: var(--muted); }
.ad-tabs a[aria-current="page"] .ic { color: var(--primary); }
.ad-body { padding-block: 28px 80px; }
.ad-sitenote:not(:empty) { margin-bottom: 18px; }
.ad-panel { min-width: 0; container: ad-panel / inline-size; }
.ad-tab-body { min-width: 0; }

/* ================================================================== windows */
.ad-card { min-width: 0; container: ad-card / inline-size; }
.ad-card-body > .seg, .ad-sub > .seg, .ad-set-form .seg { align-self: flex-start; }
.ad-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 54px; padding: 12px 20px;
  border-bottom: 1px solid var(--ring); }
.ad-card-head h2 { font-size: var(--fs-17); font-weight: 620; letter-spacing: -0.012em; }
.ad-card-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 20px 20px; }
.ad-card-body > p { margin: 0; }
.ad-big { color: var(--ink); font-size: var(--fs-17); font-weight: 620; letter-spacing: -0.012em; }
.ad-h3 { margin: 0; font-size: var(--fs-15); font-weight: 620; }
.ad-plain { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ad-low { color: var(--warn); }
.dp-facts.ad-facts-list { border: 0; border-radius: 0; background: transparent; }
.ad-facts-list .dp-fact { grid-template-columns: 136px minmax(0, 1fr); padding: 8px 0; border-top-color: var(--ring); }
.ad-facts-list .dp-fact:first-child { padding-top: 0; }
.ad-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@container ad-card (max-width: 440px) { .ad-facts-list .dp-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media (max-width: 720px) { .ad-pair { grid-template-columns: minmax(0, 1fr); } .ad-facts-list .dp-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* code and logs */
.ad-code { max-height: 360px; margin: 0; overflow: auto; padding: 12px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2);
  color: var(--ink-2); font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; overscroll-behavior: contain; }
.ad-code:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ad-code-wrap { position: relative; }
.ad-code-wrap .ad-copy { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; background: var(--surface); }
.ad-more, .ad-log { border-top: 1px solid var(--ring); padding-top: 10px; }
.ad-more > summary, .ad-log > summary { width: fit-content; color: var(--ink-2); font-size: var(--fs-14); font-weight: 500; cursor: pointer; }
.ad-more[open] > summary, .ad-log[open] > summary { margin-bottom: 10px; }
.ad-more > * + *, .ad-log > * + * { margin-top: 10px; }

/* ================================================================== sign-in */
.ad-gate { min-width: 0; }
.ad-signin { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 540px; margin: 12px auto 0; padding: 34px clamp(20px, 5vw, 40px) 28px; text-align: center; }
.ad-signin-mark { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--primary-line); border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.ad-signin-mark .ic { width: 24px; height: 24px; }
.ad-signin h2 { font-size: var(--fs-24); letter-spacing: -0.02em; }
.ad-signin-lead { max-width: 46ch; margin: 0; color: var(--ink-2); }
.ad-signin .notice { width: 100%; text-align: left; }
.ad-signin-form { display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left; }
.ad-signin-form .btn.lg { width: 100%; }
.ad-signin-form.compact { max-width: 520px; }
.ad-signin-form.compact .ad-signin-btn { align-self: flex-start; }
.ad-token-row { display: flex; align-items: stretch; gap: 8px; }
.ad-token-row .input { flex: 1 1 auto; min-width: 0; font-size: var(--fs-14); letter-spacing: 0.02em; }
.ad-reveal { flex: none; min-height: 40px; }
.ad-reveal[aria-pressed="true"] { background: var(--bg-3); }
.ad-signin-err:empty { display: none; }
.ad-signin-foot { max-width: 46ch; margin: 2px 0 0; }

/* a host without the admin service */
.ad-absent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: start; padding: 26px 28px; }
.ad-absent-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--band-line); border-radius: 14px; background: var(--band); color: var(--primary); }
.ad-absent-mark .ic { width: 24px; height: 24px; }
.ad-absent-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ad-absent-text h2 { font-size: var(--fs-20); }
.ad-absent-text p { margin: 0; max-width: 72ch; color: var(--ink-2); }
@media (max-width: 560px) { .ad-absent { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

/* ================================================================== status */
.ad-status { display: flex; flex-direction: column; gap: 14px; container: ad-status / inline-size; }
.ad-status-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ad-status-head p { margin: 0; }
.ad-status-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ad-status-grid > .ad-deployment { grid-column: span 7; }
.ad-status-grid > .ad-prerender { grid-column: span 5; }
.ad-status-grid > .ad-certificate, .ad-status-grid > .ad-policy, .ad-status-grid > .ad-server { grid-column: span 4; }
.ad-status-grid > .ad-configjs { grid-column: 1 / -1; }
@container ad-status (max-width: 1020px) {
  .ad-status-grid > .ad-deployment, .ad-status-grid > .ad-prerender { grid-column: 1 / -1; }
  .ad-status-grid > .ad-certificate, .ad-status-grid > .ad-policy { grid-column: span 6; }
  .ad-status-grid > .ad-server { grid-column: 1 / -1; }
}
@container ad-status (max-width: 640px) {
  .ad-status-grid > .ad-certificate, .ad-status-grid > .ad-policy { grid-column: 1 / -1; }
}
.ad-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ad-step; }
.ad-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; counter-increment: ad-step; }
.ad-steps li::before { content: counter(ad-step); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--primary-line); border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); font: 600 12px/1 var(--mono); }
.ad-steps b { color: var(--ink); font-weight: 600; }
.ad-steps span { color: var(--ink-2); font-size: var(--fs-14); }
.ad-disk { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ring); }
.ad-disk-meter.low .dp-meter-fill { background: var(--danger); }
.ad-certificate td.ad-low { font-weight: 600; }
.ad-certificate td.ad-host { overflow-wrap: break-word; }

/* the prerender's progress */
.ad-track { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ad-track-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ad-track-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--muted); font-size: var(--fs-13); }
.ad-track-step::before { content: ""; position: absolute; top: 11px; left: 26px; right: 4px; height: 2px; border-radius: 1px; background: var(--ring); }
.ad-track-step:last-child::before { display: none; }
.ad-track-step.done::before { background: color-mix(in srgb, var(--ok) 55%, var(--ring)); }
.ad-track-dot { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ring-2); border-radius: 50%; background: var(--surface); color: var(--on-primary); }
.ad-track-dot .ic { width: 13px; height: 13px; }
.ad-track-step.done .ad-track-dot { border-color: var(--ok); background: var(--ok); }
.ad-track-step.now { color: var(--ink); font-weight: 600; }
.ad-track-step.now .ad-track-dot { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
@media (prefers-reduced-motion: no-preference) { .ad-track-step.now .ad-track-dot { animation: pulse 1.4s ease-in-out infinite; } }
.ad-track-step.bad { color: var(--danger); font-weight: 600; }
.ad-track-step.bad .ad-track-dot { border-color: var(--danger); background: var(--danger); }
.ad-track-step.warn { color: var(--ink); font-weight: 600; }
.ad-track-step.warn .ad-track-dot { border-color: var(--warn); background: var(--warn); }
.ad-track-note { margin: 0; color: var(--ink-2); }
.ad-track-err { margin: 0; color: var(--danger); font-family: var(--mono); overflow-wrap: anywhere; }
/* the prerender's warning lines (state.prerender.warnings): text from the server, one per line */
.ad-warnings { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 9px 12px 9px 28px; border: 1px solid var(--warn-line);
  border-radius: var(--r-row); background: var(--warn-soft); color: var(--ink-2); font: 500 var(--fs-12)/1.5 var(--mono); overflow-wrap: anywhere; }

/* after a publish */
.ad-published { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ad-published-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.ad-published-part { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface-2); }
.ad-published-part p { margin: 0; }
.ad-wrote { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-14); }
.ad-wrote li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.ad-wrote li > .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--ok); }
@media (max-width: 860px) { .ad-published-grid { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== publish */
.ad-publish { display: flex; flex-direction: column; gap: 18px; }
.ad-source { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ad-chain-out { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ad-chain-out:empty { display: none; }
.ad-found { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 16px; list-style: none; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface-2); font-size: var(--fs-14); }
.ad-found li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.ad-found li > .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--ok); }
.ad-found li > .ic:has(use[href$="#info"]) { color: var(--primary); }
.ad-entries { display: flex; flex-direction: column; gap: 12px; }
.ad-entry { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface-2); }
.ad-entry-head { margin: 0; overflow-wrap: anywhere; }
.ad-entry-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
@media (max-width: 720px) { .ad-entry-fields { grid-template-columns: minmax(0, 1fr); } }
.ad-candidate:empty, .ad-result:empty, .ad-check-area:empty { display: none; }
.ad-check-area { min-width: 0; }

/* ================================================================== site settings */
.ad-site { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ad-site-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; container: ad-set / inline-size; }
.ad-site-aside { position: sticky; top: calc(var(--topbar) + 66px); min-width: 0; }
.ad-set { scroll-margin-top: calc(var(--topbar) + 72px); }
.ad-set-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); }
.ad-set-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 20px 20px; }
.ad-set-intro { margin: 0; color: var(--muted); font-size: var(--fs-14); max-width: 68ch; }
.ad-sub { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--ring); }
.ad-sec-badges { display: inline-flex; gap: 6px; }
@container ad-set (max-width: 860px) {
  .ad-set-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-prev { border-left: 0; border-top: 1px solid var(--ring); border-radius: 0 0 var(--r-window) var(--r-window); }
}

/* fields with a character count beside the label */
.field.ad-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: baseline; }
.field.ad-field > * { grid-column: 1 / -1; }
.field.ad-field > label { grid-column: 1; }
.field.ad-field > .ad-count { grid-column: 2; grid-row: 1; }
.ad-count { color: var(--faint); font: 500 11.5px/1.4 var(--mono); }
.ad-count.over { color: var(--danger); font-weight: 600; }
.ad-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
@container ad-set (max-width: 560px) { .ad-links { grid-template-columns: minmax(0, 1fr); } }

/* lists of DAOs and tokens */
.ad-list-editor { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ad-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.ad-add { display: flex; flex-direction: column; gap: 6px; }
.ad-add-row { display: flex; gap: 8px; }
.ad-add-row .input { flex: 1 1 auto; min-width: 0; }
.ad-add-row .btn { flex: none; min-height: 40px; }
.ad-add .err:empty { display: none; }
.ad-list { display: flex; flex-direction: column; max-height: 420px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--ring); border-radius: var(--r-row);
  background: var(--surface); overscroll-behavior: contain; }
.ad-list > li + li { border-top: 1px solid var(--ring); }
.ad-list-empty { padding: 12px 14px; color: var(--muted); font-size: var(--fs-13); }
.ad-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px 9px 12px; }
.ad-row.ad-bad { box-shadow: inset 3px 0 0 var(--danger); background: var(--danger-soft); }
.ad-row-lead { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted); }
.ad-row-lead svg { width: 28px; height: 28px; }
.ad-row-lead > .ic { width: 18px; height: 18px; }
.ad-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ad-row-main > b, .ad-row-title { overflow: hidden; color: var(--ink); font-size: var(--fs-14); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ad-row-title:hover { color: var(--primary); }
.ad-row-note { overflow: hidden; color: var(--muted); font-size: var(--fs-12); text-overflow: ellipsis; }
.ad-row .err:empty { display: none; }
.ad-row-tools { display: inline-flex; align-items: center; gap: 4px; }
.ad-row-tools .icon-btn { width: 32px; height: 32px; }
.ad-row-tools .icon-btn svg { width: 16px; height: 16px; }
.ad-row-tools .icon-btn:disabled { opacity: .35; cursor: default; }
.ad-row-tools .icon-btn:disabled:hover { background: var(--surface); border-color: var(--ring); }
.ad-up svg { transform: rotate(180deg); }
.ad-sym { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ring); border-radius: 50%; background: var(--surface-2); color: var(--ink-2);
  font: 600 9.5px/1 var(--mono); letter-spacing: 0; overflow: hidden; }

/* RPC endpoints */
.ad-rpcs { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ad-rpcs:empty { display: none; }
.ad-rpc { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 10px 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-row);
  background: var(--surface-2); }
.ad-rpc-n { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 8px; border: 1px solid var(--ring); border-radius: 50%; background: var(--surface);
  color: var(--muted); font: 600 11px/1 var(--mono); }
.ad-rpc-fields { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 6px 10px; min-width: 0; }
.ad-rpc-fields .err:empty { display: none; }
.ad-rpc-name, .ad-rpc-url { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ad-rpc-status { grid-column: 1 / -1; min-width: 0; }
.ad-rpc-status:empty { display: none; }
.ad-rpc .ad-row-tools { margin-top: 4px; }
.ad-test { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: var(--fs-12); overflow-wrap: anywhere; }
.ad-test .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ad-test.ok { color: var(--ok); }
.ad-test.bad { color: var(--danger); }
@container ad-set (max-width: 620px) {
  .ad-rpc { grid-template-columns: minmax(0, 1fr); }
  .ad-rpc-n { display: none; }
  .ad-rpc-fields { grid-template-columns: minmax(0, 1fr); }
}

/* the previews: the site as it will look */
.ad-prev { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 16px 18px 18px; border-left: 1px solid var(--ring); border-radius: 0 var(--r-window) var(--r-window) 0;
  background: var(--bg-2); }
.ad-prev-cap { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.ad-prev-cap .ic { width: 14px; height: 14px; }
.ad-prev > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ad-prev-label { margin: 0; color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.ad-prev-note { margin: 0; color: var(--ink-2); font-size: var(--fs-13); overflow-wrap: anywhere; }
.ad-prev-off { margin: 0; padding: 10px 12px; border: 1px dashed var(--ring-2); border-radius: 10px; color: var(--muted); font-size: var(--fs-13); }
.ad-prev-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.ad-prev-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; padding: 7px 10px; border-radius: 9px; background: var(--strip-bg);
  color: var(--strip-ink); font-size: 11.5px; line-height: 1.45; text-align: center; }
.ad-prev-strip .alpha-tag { height: 18px; font-size: 10.5px; }
.ad-prev-strip .ad-prev-link { color: var(--strip-link); }
.ad-prev-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ring); border-radius: 9px; background: var(--chrome); }
.ad-prev-search { flex: 1 1 auto; height: 14px; border-radius: 7px; background: var(--bg-3); }
.ad-prev-btn { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--ring); border-radius: 7px; background: var(--surface);
  color: var(--ink-2); font-size: 11px; font-weight: 600; }
span.ad-prev-btn:empty { width: 46px; border-color: var(--wallet-ring); background: var(--wallet); }
.ad-prev-btn.primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.ad-prev-announce { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--primary-line); border-radius: 9px; background: var(--primary-soft);
  color: var(--ink-2); font-size: var(--fs-13); overflow-wrap: anywhere; }
.ad-prev-announce .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--primary); }
.ad-prev-announce.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.ad-prev-announce.warn .ic { color: var(--warn); }
.ad-prev-cards { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: ad-prev; }
.ad-prev-cards li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px; border: 1px solid var(--ring); border-radius: 10px; background: var(--surface);
  font-size: var(--fs-13); font-weight: 600; counter-increment: ad-prev; }
.ad-prev-cards li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-prev-cards li::after { content: counter(ad-prev); margin-left: auto; color: var(--faint); font: 500 11px/1 var(--mono); }
.ad-prev-cards svg { width: 26px; height: 26px; flex: none; }
.ad-prev-dot { width: 26px; height: 26px; flex: none; border: 1px dashed var(--ring-2); border-radius: 50%; }
.ad-prev-token { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--ring); border-radius: 10px; background: var(--surface); }
.ad-prev-token-name { display: flex; flex-direction: column; min-width: 0; margin-right: auto; font-size: var(--fs-13); font-weight: 600; }
.ad-prev-token-name small { overflow: hidden; color: var(--muted); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.ad-prev-token .badge .ic { width: 12px; height: 12px; }
.ad-serp { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--ring); border-radius: 10px; background: var(--surface); }
.ad-serp-site { display: flex; align-items: center; gap: 8px; }
.ad-serp-site > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.ad-serp-site b { color: var(--ink); font-size: 12px; font-weight: 600; }
.ad-serp-site small { color: var(--muted); font-size: 11px; }
.ad-serp-icon { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--primary-soft) url("/assets/img/logo.svg?v=851bc5eec3e6") center / 14px 14px no-repeat; border: 1px solid var(--ring); }
.ad-serp-title { color: var(--primary-hover); font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.ad-serp-desc { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ad-prev-social { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ad-prev-social li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--ring); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink-2); font-size: var(--fs-12); font-weight: 500; }
.ad-prev-social .ic { width: 11px; height: 11px; color: var(--faint); }
.ad-prev-cookie { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--ring); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-pop); font-size: var(--fs-12); }
.ad-prev-cookie p { margin: 0; color: var(--ink-2); }
.ad-prev-cookie-btns { display: flex; gap: 6px; }
.ad-prev-rpcs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ad-prev-rpcs li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--ring); border-radius: 10px; background: var(--surface); }
.ad-prev-rpcs li.on { border-color: var(--primary-line); background: var(--primary-soft); }
.ad-prev-rpcs li > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-13); }
.ad-prev-rpcs small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ad-prev-radio { width: 14px; height: 14px; flex: none; margin-top: 3px; border: 1.5px solid var(--ring-2); border-radius: 50%; background: var(--surface); }
.ad-prev-rpcs li.on .ad-prev-radio { border: 4px solid var(--primary); }

/* the save window: beside the settings, a bar at the bottom on narrow screens */
.ad-save { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.ad-save-title { font-size: var(--fs-15); font-weight: 620; }
.ad-save-state { display: flex; flex-direction: column; gap: 10px; }
.ad-save-line { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: var(--fs-13); }
.ad-save-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--live); }
.ad-save-line.dirty { color: var(--ink); font-weight: 600; }
.ad-save-line.dirty .ad-save-dot { background: var(--warn); }
.ad-save-line.bad { color: var(--danger); font-weight: 600; }
.ad-save-line.bad .ad-save-dot { background: var(--danger); }
.ad-save-btns { display: flex; flex-direction: column; gap: 8px; }
.ad-save-out:empty { display: none; }
.ad-toc-nav { padding-top: 12px; border-top: 1px solid var(--ring); }
.ad-toc { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ad-toc a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; color: var(--ink-2); font-size: var(--fs-13); }
.ad-toc a::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ring-2); }
.ad-toc a:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }
.ad-toc li.changed a { color: var(--ink); font-weight: 600; }
.ad-toc li.changed a::before { background: var(--warn); }
.ad-toc li.bad a { color: var(--danger); font-weight: 600; }
.ad-toc li.bad a::before { background: var(--danger); }
.ad-save-foot { margin: 0; }
@media (max-width: 1279px) {
  .ad-site { grid-template-columns: minmax(0, 1fr); }
  .ad-site-aside { position: sticky; top: auto; bottom: 0; z-index: 25; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent, var(--bg) 18px); }
  .ad-save { flex-flow: row wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; box-shadow: var(--shadow-pop); }
  .ad-save-title, .ad-toc-nav, .ad-save-foot { display: none; }
  .ad-save-state { flex: 1 1 260px; min-width: 0; }
  .ad-save-btns { flex-direction: row-reverse; flex: none; }
  .ad-save-btns .btn.block { width: auto; }
  .ad-save-out { flex: 1 1 100%; }
}

/* ================================================================== phones */
@media (max-width: 640px) {
  .ad-mast { padding-bottom: 18px; }
  .ad-facts { margin-top: 16px; }
  .ad-fact { padding: 11px 14px 12px; }
  .tabs.ad-tabs a { gap: 6px; padding: 11px; font-size: var(--fs-13); }
  .ad-body { padding-block: 18px 64px; }
  .ad-card-head { padding: 10px 14px; min-height: 48px; }
  .ad-card-body, .ad-set-form { padding: 14px 14px 16px; }
  .ad-prev { padding: 14px; }
  .ad-signin { padding: 26px 18px 22px; }
  .ad-save-btns { flex: 1 1 100%; }
  .ad-save-btns .btn.block { flex: 1 1 0; }
}
.ad-tab-short { display: none; }
/* five tabs in one row down to 360 px: no icons, tighter sides, "Settings" for "Site settings" */
@media (max-width: 420px) {
  .tabs.ad-tabs a { padding-inline: 8px; }
  .ad-tabs a .ic, .ad-tab-long { display: none; }
  .ad-tab-short { display: inline; }
}

/* COLLAB design system.
   Lineage: genesisl1.com/gov.html (white windows with 1px hairlines and 14px corners, GenesisL1 blue,
   the gov.html pills and status badges), made wide (a 1600px frame) and given a scientific identity in
   three places only: molecule glyphs, charts drawn as figures, documents set like a journal.
   Type: Inter for the interface, Source Serif 4 for documents, JetBrains Mono for addresses, hashes and
   numbers. Every font and image is served from this origin.
   Feature areas keep their rules in parts/<area>.css (prefixed classes), imported first: a shared rule
   below wins over a part rule of equal specificity. tools/merge_css.py folds the parts in at release. */
/* ---- core (merged from parts/core.css) ---- */
/* 2.1 additions for the core area, imported at the top of app.css; tools/merge_css.py folds this file
   into app.css at release. Existing rules of the area stay in app.css and are changed there. */

/* ---- docs ---- */
/* docs: the documentation (/docs and /docs/<slug>, pages written by tools/build_docs.py from docs/*.md)
   and the not-found page (404.html). Every class starts with dc-; shared classes are only combined
   with a dc- class. A page is one reading column at about 70 characters of Source Serif, with its
   contents on the right from 1280px (the site's sidebar stays the only rail on the left) and, below
   that, a compact bar under the top bar with the part's pages and "On this page". Pages are static:
   pages/docs.js adds the scroll-spy, copy buttons and the search, and nothing moves when it runs,
   except live figures (![Caption](live:KEY)), which stay hidden until it has drawn them. */

/* ================================================================== page */
html.dc-page { scroll-padding-top: calc(var(--topbar) + 20px); }
@media (prefers-reduced-motion: no-preference) { html.dc-page { scroll-behavior: smooth; } }
@media (max-width: 1279px) { html.dc-page { scroll-padding-top: calc(var(--topbar) + 72px); } }

.dc-main { padding-block: clamp(18px, 2.6vw, 34px) clamp(56px, 7vw, 104px); }
.dc-grid { --dc-measure: 690px; --dc-side: 244px; --dc-gap: clamp(44px, 4.4vw, 88px);
  display: grid; grid-template-columns: minmax(0, var(--dc-measure)) var(--dc-side); column-gap: var(--dc-gap); justify-content: center; align-items: start; }
.dc-article { min-width: 0; }
@media (min-width: 1800px) { .dc-grid { --dc-measure: 720px; --dc-side: 264px; } }
@media (max-width: 1279px) {
  /* one column; the bar sticks through the whole article */
  .dc-grid { display: block; max-width: var(--dc-measure); margin-inline: auto; }
  .dc-side { display: none; }
}

/* ------------------------------------------------------------------ the page's head */
.dc-head { margin-bottom: clamp(26px, 3vw, 38px); padding-bottom: 22px; border-bottom: 1px solid var(--ring); }
.dc-head .crumbs ol { margin-bottom: clamp(14px, 2vw, 22px); }
.dc-h1 { font-family: var(--serif); font-size: clamp(32px, 3.3vw, 46px); font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; }
.dc-lede { margin: 16px 0 0; max-width: 66ch; color: var(--ink-2); font-family: var(--serif); font-size: clamp(17px, 1.32vw, 19.5px); line-height: 1.58; text-wrap: pretty; }
.dc-lede a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.dc-lede a:hover { text-decoration-color: currentColor; }
.dc-lede code { padding: .04em .32em; border: 1px solid var(--ring); border-radius: var(--r-chip); background: var(--bg-2); font-size: .8em; }
.dc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 22px; }
.dc-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.dc-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-facts dt { color: var(--muted); font-size: var(--fs-12); font-weight: 500; }
.dc-facts dd { margin: 0; color: var(--ink); font-size: var(--fs-14); font-weight: 500; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .dc-facts { gap: 8px 20px; } .dc-facts > div:nth-child(4) { display: none; } }

/* ------------------------------------------------------------------ contents on the right (1280px and wider) */
.dc-side { position: sticky; top: calc(var(--topbar) + 26px); max-height: calc(100vh - var(--topbar) - 44px); overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 4px 24px 0; scrollbar-width: thin; font-family: var(--sans); }
.dc-side-h { margin: 0 0 10px; color: var(--ink); font-size: var(--fs-13); font-weight: 600; letter-spacing: 0; }
.dc-side > nav + nav { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ring); }
.dc-toc-list, .dc-toc-list ol, .dc-part-list { margin: 0; padding: 0; list-style: none; }
.dc-toc-list { border-left: 1px solid var(--ring); }
.dc-toc-list a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; color: var(--muted); font-size: var(--fs-13); line-height: 1.38; }
.dc-toc-list ol a { padding-left: 26px; font-size: 12.5px; }
.dc-toc-list a:hover { color: var(--ink); text-decoration: none; }
.dc-toc-list a[aria-current] { border-left-color: var(--primary); color: var(--primary); font-weight: 600; }
.dc-toc-list code, .dc-part-list code, .dc-pop-now code { font-size: .92em; }
.dc-part-list { display: flex; flex-direction: column; gap: 1px; }
.dc-part-list a { display: block; padding: 6px 10px; margin-inline: -10px 0; border-radius: 8px; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.38; }
.dc-part-list a:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }
.dc-part-list a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.dc-part-list .dc-draft a:not([aria-current]) { color: var(--faint); }

/* ------------------------------------------------------------------ the compact bar (narrower than 1280px) */
.dc-bar { display: none; }
@media (max-width: 1279px) {
  .dc-bar { position: sticky; top: var(--topbar); z-index: 30; display: flex; gap: 8px; margin: -14px calc(var(--gutter) * -1) 28px; padding: 8px var(--gutter);
    border-block: 1px solid var(--ring); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--sans); }
}
@media (max-width: 1279px) and (min-width: 760px) { .dc-bar { margin-inline: 0; padding-inline: 0; border-inline: 0; } }
.dc-pop { position: static; min-width: 0; }
.dc-pop-part { flex: 0 1 auto; max-width: 46%; }
.dc-pop-toc { flex: 1 1 auto; }
.dc-pop > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--ring-2); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink); font-size: var(--fs-14); line-height: 1.2; cursor: pointer; list-style: none; user-select: none; }
.dc-pop > summary::-webkit-details-marker { display: none; }
.dc-pop > summary:hover { border-color: var(--primary-line); }
.dc-pop > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dc-pop[open] > summary { border-color: var(--primary-line); background: var(--primary-soft); }
.dc-pop-k { flex: 0 1 auto; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dc-pop-toc .dc-pop-k { flex: none; }
.dc-pop-now { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.dc-pop-now:empty { display: none; }
.dc-pop-lead { flex: none; width: 16px; height: 16px; color: var(--primary); }
.dc-pop-ic { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--muted); transition: transform .15s; }
.dc-pop[open] .dc-pop-ic { transform: rotate(180deg); }
.dc-pop-panel { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 6px); max-height: min(68vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 14px 12px; border: 1px solid var(--ring); border-radius: var(--r-window); background: var(--surface); box-shadow: var(--shadow-pop); }
@media (min-width: 760px) { .dc-pop-panel { left: 0; right: 0; } }
.dc-pop-h { margin: 2px 0 6px; color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.dc-pop-panel .dc-part-list a { margin-inline: 0; padding: 9px 10px; font-size: var(--fs-14); }
.dc-pop-panel .dc-toc-list a { padding-block: 8px; font-size: var(--fs-14); }
.dc-pop-panel .dc-toc-list ol a { font-size: var(--fs-13); }
.dc-pop-short { display: none; }
@media (max-width: 560px) { .dc-pop-part .dc-pop-k { display: none; } .dc-pop-short { display: inline; font-weight: 600; } }
@media (max-width: 420px) { .dc-pop > summary { padding: 0 10px; gap: 6px; } .dc-pop-toc summary:has(.dc-pop-now:not(:empty)) .dc-pop-k { display: none; } }
@media (prefers-reduced-motion: reduce) { .dc-pop-ic { transition: none; } }

/* ================================================================== the text */
.doc.dc-doc { max-width: none; font-size: 18px; line-height: 1.68; counter-reset: dc-fig; }
.dc-doc > :first-child { margin-top: 0; }
.dc-doc h2 { margin: 2.15em 0 .55em; font-size: clamp(25px, 2.1vw, 29px); line-height: 1.18; letter-spacing: -0.014em; }
.dc-doc h3 { margin: 1.75em 0 .45em; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.28; }
.dc-doc h4 { margin: 1.6em 0 .35em; font-family: var(--sans); font-size: var(--fs-15); font-weight: 650; letter-spacing: -0.006em; }
.dc-doc h2 + h3, .dc-doc h3 + h4 { margin-top: .8em; }
/* headings link to themselves; a mark shows on hover and focus */
.dc-hl, .dc-hl:hover, .doc .dc-hl, .doc .dc-hl:hover { color: inherit; text-decoration: none; }
.dc-hl::after { content: "#"; content: "#" / ""; margin-left: .32em; color: var(--faint); font-family: var(--sans); font-weight: 400; opacity: 0; transition: opacity .15s; }
:is(h2, h3, h4):hover > .dc-hl::after, .dc-hl:focus-visible::after { opacity: 1; }
.dc-hl:focus-visible { outline-offset: 3px; border-radius: 4px; }
@media (hover: none) { .dc-hl::after { content: none; } }
.dc-doc li > ul, .dc-doc li > ol { margin: .3em 0 .35em; }
.dc-doc li > p { margin-bottom: .5em; }
.dc-doc code { overflow-wrap: anywhere; }
.dc-doc strong { color: var(--ink); }
.dc-doc hr { margin: 2.2em 0; }
.dc-doc > p:last-child, .dc-doc > ul:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .doc.dc-doc { font-size: 17px; line-height: 1.64; } }

/* ------------------------------------------------------------------ code */
.dc-code { position: relative; margin: 1.3em 0 1.55em; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); }
.dc-code::before { content: attr(data-lang); display: block; min-height: 34px; padding: 9px 48px 0 16px; border-bottom: 1px solid var(--ring); color: var(--muted);
  font: 500 var(--fs-12)/1.3 var(--sans); letter-spacing: 0; }
.doc .dc-code pre { margin: 0; padding: 13px 16px 15px; overflow-x: auto; border: 0; border-radius: 0 0 var(--r-row) var(--r-row); background: none; color: var(--ink);
  font-size: 13.5px; line-height: 1.62; tab-size: 4; font-variant-ligatures: none; }
.doc .dc-code pre code { overflow-wrap: normal; white-space: pre; }
.dc-copy { position: absolute; top: 3px; right: 4px; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; }
.dc-copy:hover { border-color: var(--ring-2); background: var(--surface); color: var(--ink); }
.dc-copy .ic { width: 15px; height: 15px; }
.dc-copy.done { color: var(--ok); }
@media (max-width: 640px) { .doc .dc-code pre { padding: 12px 14px 14px; font-size: 12.5px; } .dc-code { margin-inline: calc(var(--gutter) * -1); border-inline: 0; border-radius: 0; }
  .doc .dc-code pre { border-radius: 0; } }

/* ------------------------------------------------------------------ tables */
.dc-table { margin: 1.4em 0 1.7em; overflow-x: auto; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); scrollbar-width: thin; }
.doc.dc-doc .dc-table table { display: table; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font: 400 var(--fs-14)/1.55 var(--sans);
  letter-spacing: -0.003em; font-variant-numeric: tabular-nums; }
.doc.dc-doc .dc-table th { padding: 9px 14px; border-bottom: 1px solid var(--ring); background: var(--bg-2); color: var(--muted); font-size: var(--fs-12); font-weight: 600;
  line-height: 1.4; text-align: left; vertical-align: bottom; }
.doc.dc-doc .dc-table td { padding: 10px 14px; border-bottom: 1px solid var(--ring); color: var(--ink-2); vertical-align: top; }
.doc.dc-doc .dc-table tbody tr:last-child td { border-bottom: 0; }
.doc.dc-doc .dc-table td:first-child { color: var(--ink); }
.doc.dc-doc .dc-table code { font-size: 12.5px; overflow-wrap: break-word; }  /* a name breaks only when it cannot fit: the frame scrolls instead */
.doc.dc-doc .dc-table :is(th, td).ta-r { text-align: right; }
.doc.dc-doc .dc-table :is(th, td).ta-c { text-align: center; }
.dc-table:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 640px) {
  .dc-table { margin-inline: calc(var(--gutter) * -1); border-inline: 0; border-radius: 0; }
  .doc.dc-doc .dc-table table { font-size: var(--fs-13); }
  .doc.dc-doc .dc-table :is(th, td) { padding-inline: 12px; }
  .doc.dc-doc .dc-table :is(th, td):first-child { padding-left: var(--gutter); }
  .doc.dc-doc .dc-table td { min-width: 9em; }
}

/* ------------------------------------------------------------------ callouts: > **Note.**, **Warning.**, **Tip.** */
.dc-callout { margin: 1.4em 0 1.55em; padding: 13px 18px 14px 16px; border: 1px solid var(--primary-line); border-left: 3px solid var(--primary); border-radius: var(--r-row);
  background: var(--primary-soft); color: var(--ink-2); font-family: var(--sans); font-size: var(--fs-15); line-height: 1.62; font-variant-numeric: normal; }
.dc-callout.warning { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-soft); }
.dc-callout.tip { border-color: var(--science-line); border-left-color: var(--science); background: var(--science-soft); }
.dc-callout > :last-child { margin-bottom: 0; }
.dc-callout p { margin-bottom: .6em; }
.dc-callout > p:first-child > strong:first-child { color: var(--ink); }
.dc-callout code { font-size: .86em; }
.dc-callout ul, .dc-callout ol { margin-bottom: .4em; }

/* ------------------------------------------------------------------ figures: screenshots of the site */
.dc-fig { margin: 1.9em 0 2.1em; counter-increment: dc-fig; }
.dc-shot { overflow: hidden; border: 1px solid var(--ring-2); border-radius: var(--r-row); background: var(--bg-2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 32px -18px rgba(15, 23, 42, .28); }
.dc-shot img { width: 100%; height: auto; }
.dc-fig figcaption { margin-top: 11px; color: var(--muted); font: 400 var(--fs-13)/1.55 var(--sans); }
.dc-fig figcaption::before { content: "Figure " counter(dc-fig) ". "; color: var(--ink-2); font-weight: 600; }
.dc-fig.phone { display: flex; flex-direction: column; align-items: center; }
.dc-fig.phone .dc-shot { width: min(100%, 290px); border-radius: 22px; }
.dc-fig.phone figcaption { max-width: 44ch; text-align: center; }
:root[data-theme="dark"] .dc-shot { border-color: var(--ring-2); box-shadow: none; }
:root[data-theme="dark"] .dc-shot img { filter: brightness(.9); }

/* ------------------------------------------------------------------ live figures: ![Caption](live:KEY), drawn by pages/docs.js */
/* hidden until drawn: without JavaScript, or when a drawing fails, a page shows no empty frame */
.dc-live:not([data-ready]) { display: none; }
.dc-live-slot { container: dc-live / inline-size; padding: 22px 24px 18px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface);
  color: var(--ink-2); font: 400 var(--fs-14)/1.5 var(--sans); letter-spacing: 0; font-variant-numeric: normal; }
.dc-live-slot svg { display: block; width: 100%; height: auto; margin-inline: auto; }
.dc-live-slot svg text { font-family: var(--sans); }
.dc-live-slot svg.dc-narrow-only { display: none; }
.dc-live-slot .legend.dc-legend { gap: 6px 20px; margin-top: 16px; }
.dc-legend i { border: 1px solid var(--ring-2); }
.legend i.dc-sw-main { background: var(--primary-soft); border-color: var(--primary-line); }
.legend i.dc-sw-done { background: var(--ok-soft); border-color: var(--ok-line); }
.legend i.dc-sw-fail { background: var(--danger-soft); border: 1px dashed var(--danger-line); }
.legend i.dc-sw-bond, .legend i.dc-sw-read, .legend i.dc-sw-ext { width: 24px; height: 0; border-radius: 0; background: none; border: 0; border-top: 1.5px solid var(--ink-2); vertical-align: 3px; }
.legend i.dc-sw-read { border-top-style: dashed; }
.legend i.dc-sw-ext { border-top: 1.5px dotted var(--faint); }
/* a narrow slot (phones) shows the narrow layout of a drawing */
@container dc-live (max-width: 539px) {
  .dc-live-slot .dc-wide-only { display: none; }
  .dc-live-slot svg.dc-narrow-only { display: block; }
}
@media (max-width: 640px) { .dc-live-slot { padding: 16px 14px 14px; } }

/* a DAO drawn as a molecule */
.dc-mol.dc-wide-only { max-width: 700px; }
.dc-mol.dc-narrow-only { max-width: 360px; }
.dc-mol .bond { stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.dc-mol .bond.read { stroke-dasharray: 5 4; stroke-width: 1.3; }
.dc-mol .bond.ext { stroke: var(--faint); stroke-dasharray: 1.5 4; stroke-width: 1.6; }
.dc-mol .atom { stroke: var(--surface); stroke-width: 3; }
.dc-mol .atom.a1 { fill: var(--d1); } .dc-mol .atom.a2 { fill: var(--d2); } .dc-mol .atom.a3 { fill: var(--d3); }
.dc-mol .atom.a4 { fill: var(--d4); } .dc-mol .atom.a5 { fill: var(--d5); } .dc-mol .atom.a6 { fill: var(--d6); }
.dc-mol .atom.ext { fill: var(--surface); stroke: var(--faint); stroke-width: 1.6; stroke-dasharray: 3 3; }
.dc-mol .halo { fill: none; stroke: color-mix(in srgb, var(--d1) 24%, transparent); stroke-width: 1; }
.dc-mol .nm { fill: var(--ink); font-size: 14px; font-weight: 600; }
.dc-mol .rl { fill: var(--muted); font-size: 12px; }
.dc-mol .bl { fill: var(--muted); font-size: 11.5px; font-style: italic; }

/* which shares count with a holding period: the readings at 22% and 82% of the time axis */
.dc-hold { display: grid; grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr) minmax(0, 6.5em); gap: 0 18px; align-items: center; }
.dc-hold-row { display: contents; }
.dc-hold-head { grid-column: 2; position: relative; height: 28px; }
.dc-hold-mark { position: absolute; bottom: 7px; transform: translateX(-50%); color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
.dc-hold-mark.early, .dc-hold-tick.early { left: 22%; }
.dc-hold-mark.snap, .dc-hold-tick.snap { left: 82%; }
.dc-hold-name { grid-column: 1; padding: 9px 0; color: var(--ink); font-size: var(--fs-13); font-weight: 500; line-height: 1.35; }
.dc-hold-track { grid-column: 2; position: relative; align-self: stretch; min-height: 36px; }
.dc-hold-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ring); }
.dc-hold-window { position: absolute; top: 0; bottom: 0; left: 22%; width: 60%; border-inline: 1.5px dashed var(--ink-2);
  background: color-mix(in srgb, var(--science) 9%, transparent); }
.dc-hold-bar { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: var(--r-pill); background: var(--d2); }
.dc-hold-bar.part { background: color-mix(in srgb, var(--d2) 42%, var(--bg-3)); }
.dc-hold-bar.all { left: 0; right: 0; }
.dc-hold-bar.out { left: 0; right: 60%; }
.dc-hold-bar.back { left: 62%; right: 0; }
.dc-hold-bar.bought { left: 52%; right: 0; }
.dc-hold-bar.sold { left: 0; right: 48%; }
.dc-hold-out { grid-column: 3; color: var(--muted); font-size: var(--fs-13); line-height: 1.35; }
.dc-hold-out.ok { color: var(--ok); font-weight: 600; }
.dc-hold-axis { grid-column: 2; position: relative; height: 28px; border-top: 1px solid var(--ring-2); }
.dc-hold-tick { position: absolute; top: 0; height: 6px; border-left: 1px solid var(--ring-2); }
.dc-hold-tick span { position: absolute; top: 9px; left: 0; transform: translateX(-50%); color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
@container dc-live (max-width: 559px) {
  .dc-hold { display: block; }
  .dc-hold-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name out" "track track"; gap: 0 12px; align-items: end; }
  .dc-hold-name { grid-area: name; padding: 8px 0 0; }
  .dc-hold-out { grid-area: out; padding-top: 8px; text-align: right; }
  .dc-hold-track { grid-area: track; min-height: 30px; }
}

/* the life of a proposal */
.dc-flow.dc-wide-only { max-width: 700px; }
.dc-flow.dc-narrow-only { max-width: 340px; }
.dc-n rect { fill: var(--surface); stroke: var(--ring-2); stroke-width: 1.2; }
.dc-n.main rect { fill: var(--primary-soft); stroke: var(--primary-line); }
.dc-n.done rect { fill: var(--ok-soft); stroke: var(--ok-line); }
.dc-n.fail rect { fill: var(--danger-soft); stroke: var(--danger-line); stroke-dasharray: 4 3; }
.dc-n .t { fill: var(--ink); font-size: 13px; font-weight: 600; }
.dc-n .u { fill: var(--muted); font-size: 11.5px; }
.dc-e { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.dc-e.fail { stroke: color-mix(in srgb, var(--danger) 45%, var(--faint)); stroke-dasharray: 4 3; }
.dc-ah { fill: var(--faint); }
.dc-ah.fail { fill: color-mix(in srgb, var(--danger) 45%, var(--faint)); }

/* the worked example's ballots (core/charts.js ballot(), as on a proposal page) */
.dc-ballots { display: flex; flex-direction: column; gap: 22px; }
.dc-ballot + .dc-ballot { padding-top: 20px; border-top: 1px solid var(--ring); }
.dc-ballot-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 8px; }
.dc-ballot-h b { color: var(--ink); font-size: var(--fs-15); font-weight: 650; }
.dc-ballot-h span { color: var(--muted); font-size: var(--fs-13); }
.dc-ballot .fig.ballot { gap: 14px; }
.dc-ballot-r { margin-top: 16px; color: var(--ink-2); font-size: var(--fs-14); }
.dc-ballot-r .dc-ok { color: var(--ok); }
.dc-ballot-r .dc-bad { color: var(--danger); }

/* this site's network and contracts */
.kv.dc-kv { font-size: var(--fs-14); }
.kv.dc-kv dd { color: var(--ink); overflow-wrap: anywhere; }
.kv.dc-kv code { font-size: .88em; }
.dc-dep-p { margin-top: 12px; color: var(--muted); font-size: var(--fs-13); line-height: 1.55; }
.dc-dep-h { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ring); color: var(--ink); font-size: var(--fs-15); font-weight: 650; line-height: 1.35; }
.dc-dep-h + .dc-dep-p { margin-top: 4px; }
.dc-live-slot .addr a { color: inherit; text-decoration: none; }
.dc-live-slot .addr a:hover { color: var(--primary); }
.dc-dep-none { margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-ctl); background: var(--warn-soft); color: var(--ink-2); line-height: 1.55; }
.dc-dep-none b { color: var(--ink); }
.dc-addrs { margin-top: 8px; }
.dc-addr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; align-items: center; padding: 9px 0; }
.dc-addr-row + .dc-addr-row { border-top: 1px solid var(--ring); }
.dc-addr-name { display: flex; flex-direction: column; min-width: 0; }
.dc-addr-name b { color: var(--ink); font-size: var(--fs-14); font-weight: 600; line-height: 1.35; }
.dc-addr-name span { color: var(--muted); font-size: var(--fs-12); line-height: 1.4; }
.addr.dc-addr { justify-self: end; align-items: flex-start; font-size: var(--fs-12); }
.addr.dc-addr a, .addr.dc-addr > span { min-width: 0; word-break: break-all; }
.dc-code-box { margin-top: 8px; }
@container dc-live (max-width: 639px) {
  .dc-addr-row { grid-template-columns: minmax(0, 1fr); }
  .addr.dc-addr { justify-self: start; }
}

/* ------------------------------------------------------------------ previous and next */
.dc-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(48px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--ring); font-family: var(--sans); }
.dc-pg { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 18px 15px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); color: inherit;
  transition: border-color .15s, background-color .15s; }
.dc-pg:hover { border-color: var(--primary-line); background: var(--surface-2); text-decoration: none; }
.dc-pg.next { grid-column: 2; align-items: flex-end; text-align: right; }
.dc-pg-k { color: var(--muted); font-size: var(--fs-12); font-weight: 500; }
.dc-pg-t { color: var(--primary); font-size: var(--fs-15); font-weight: 600; line-height: 1.35; }
@media (max-width: 560px) { .dc-pager { grid-template-columns: minmax(0, 1fr); } .dc-pg.next { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .dc-pg, .dc-hl::after { transition: none; } }

/* ================================================================== the docs home (/docs) */
.dc-home .dc-main, .dc-main.dc-home { padding-block: 0; }
.band-head.dc-home-mast { padding-block: 26px clamp(36px, 4.4vw, 60px); }
.dc-home-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 30px clamp(40px, 5vw, 96px); align-items: center; margin-top: clamp(8px, 2vw, 24px); }
.dc-home-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dc-home-h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em; }
.dc-home-text .dc-lede { margin: 0; max-width: 60ch; }
.dc-home-text .dc-facts { padding-top: 16px; border-top: 1px solid var(--band-line); }
.dc-find { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-bottom: 4px; }
.dc-find-l { color: var(--ink); font-size: var(--fs-14); font-weight: 600; }
.dc-find-box { position: relative; }
.dc-find-ic { position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; color: var(--muted); pointer-events: none; }
.input.dc-find-in { min-height: 52px; padding: 10px 16px 10px 44px; border-radius: 12px; font-size: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.input.dc-find-in::-webkit-search-cancel-button { cursor: pointer; }
.dc-find-hint { margin: 0; color: var(--muted); font-size: var(--fs-13); }
.dc-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 45; max-height: min(64vh, 620px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid var(--ring); border-radius: var(--r-window); background: var(--surface); box-shadow: var(--shadow-pop); font-family: var(--sans); }
.dc-res-note { margin: 0; padding: 10px 12px; color: var(--muted); font-size: var(--fs-13); }
.dc-res { display: block; padding: 10px 12px; border-radius: var(--r-ctl); color: inherit; }
.dc-res:hover, .dc-res[aria-selected="true"] { background: var(--primary-soft); text-decoration: none; }
.dc-res-t { display: block; color: var(--ink); font-size: var(--fs-14); font-weight: 600; line-height: 1.35; }
.dc-res-t .dc-res-sec { color: var(--primary); }
.dc-res-p { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-12); }
.dc-res-s { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; overflow-wrap: anywhere; }
.dc-res mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--warn) 22%, transparent); color: inherit; }
@media (max-width: 1099px) { .dc-home-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.band.dc-aud-band { padding-block: clamp(28px, 3.6vw, 44px); }
.dc-aud-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card.dc-aud { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 22px 20px; }
.dc-aud-ic { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--primary-line); border-radius: 11px; background: var(--primary-soft); color: var(--primary); }
.dc-aud-ic .ic { width: 20px; height: 20px; }
.dc-aud h2 { margin-top: 4px; font-size: var(--fs-17); }
.dc-aud p { margin: 0; color: var(--muted); font-size: var(--fs-14); line-height: 1.55; }
.dc-aud ul { display: flex; flex-direction: column; margin: 6px 0 0; padding: 0; list-style: none; }
.dc-aud li a { display: block; padding: 8px 0; border-top: 1px solid var(--ring); color: var(--ink); font-size: var(--fs-14); font-weight: 500; }
.dc-aud li a:hover { color: var(--primary); text-decoration: none; }
.dc-aud-all { margin-top: auto; padding-top: 10px; font-size: var(--fs-13); font-weight: 600; }
@media (max-width: 1023px) { .dc-aud-grid { grid-template-columns: minmax(0, 1fr); } .card.dc-aud { padding: 18px 18px 16px; } }
@media (min-width: 640px) and (max-width: 1023px) { .card.dc-aud { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; }
  .dc-aud > :not(.dc-aud-ic) { grid-column: 2; } .dc-aud-ic { grid-row: 1 / span 2; } .dc-aud h2 { margin-top: 0; } }

.band.dc-home-body { padding-block: clamp(32px, 4vw, 56px) clamp(56px, 7vw, 96px); }
.doc.dc-doc.dc-home-doc { max-width: 72ch; }
.dc-home-doc + .dc-index, .dc-index + .dc-home-doc { margin-top: clamp(36px, 4vw, 56px); }
.dc-index > h2 { margin-bottom: 18px; font-family: var(--serif); font-size: clamp(25px, 2.1vw, 29px); font-weight: 600; }
.dc-ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 28px 36px; align-items: start; }
.dc-ix-group { min-width: 0; }
.dc-ix-group h3 { padding-bottom: 9px; border-bottom: 1px solid var(--ring-2); font-size: var(--fs-15); font-weight: 650; }
.dc-ix-group ol { margin: 0; padding: 0; list-style: none; }
.dc-ix-group a { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 11px; border-bottom: 1px solid var(--ring); color: inherit; }
.dc-ix-group a:hover { text-decoration: none; }
.dc-ix-group a:hover .dc-ix-t { text-decoration: underline; }
.dc-ix-t { color: var(--primary); font-size: var(--fs-15); font-weight: 600; line-height: 1.35; }
.dc-ix-d { color: var(--muted); font-size: var(--fs-13); line-height: 1.5; }
.dc-draft .dc-ix-t { color: var(--ink-2); }

/* ================================================================== not-found page */
.dc-nf { padding-block: clamp(36px, 6vw, 88px) clamp(40px, 6vw, 80px); }
.dc-nf-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 112px); align-items: center; }
.dc-nf-art { margin: 0; justify-self: center; width: min(100%, 360px); }
.dc-nf-art svg { width: 100%; height: auto; }
.fig-cap.dc-nf-cap { text-align: center; }
.fig-cap.dc-nf-cap::before { content: "Figure 404. "; }
.dc-nf-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dc-nf-text h1 { font-family: var(--serif); font-size: clamp(36px, 4vw, 56px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.dc-nf-text .lede { margin: 0; }
.dc-nf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.card.dc-nf-link { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; color: inherit; transition: border-color .15s, background-color .15s; }
.card.dc-nf-link:hover { border-color: var(--ring-2); background: var(--surface-2); text-decoration: none; }
.dc-nf-link svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--primary); }
.dc-nf-link b { display: block; color: var(--ink); font-weight: 600; }
.dc-nf-link span span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-13); line-height: 1.45; }
.dc-nf-ref-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px clamp(40px, 6vw, 112px); align-items: start; }
.dc-nf-ref h2 { font-size: var(--fs-20); }
.dc-nf-ref p { color: var(--ink-2); }
.dc-nf-paths { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.dc-nf-paths th, .dc-nf-paths td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--ring); text-align: left; vertical-align: top; }
.dc-nf-paths th { color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.dc-nf-paths tr:last-child td { border-bottom: 0; }
.dc-nf-paths code { font-family: var(--mono); font-size: var(--fs-13); color: var(--ink); overflow-wrap: anywhere; }
.dc-bond { stroke: var(--ink-2); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.dc-bond.dbl { stroke-width: 1.8; }
.dc-bond.gone { stroke: var(--faint); stroke-width: 1.8; stroke-dasharray: 1.5 3.2; }
.dc-atom { stroke: var(--surface); stroke-width: 1.6; }
.dc-atom.a1 { fill: var(--d1); } .dc-atom.a2 { fill: var(--d5); } .dc-atom.a3 { fill: var(--d4); }
.dc-atom.a4 { fill: var(--d2); } .dc-atom.a5 { fill: var(--d3); } .dc-atom.a6 { fill: var(--d6); }
.dc-atom.lost { fill: none; stroke: var(--faint); stroke-width: 1.4; stroke-dasharray: 2.4 2.4; }
.dc-nf-tile { fill: var(--bg-2); stroke: var(--ring); }
@media (max-width: 900px) {
  .dc-nf-grid, .dc-nf-ref-in { grid-template-columns: minmax(0, 1fr); }
  .dc-nf-art { width: min(52%, 220px); }
}
@media (max-width: 560px) { .dc-nf-links { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .card.dc-nf-link { transition: none; } }

/* ---- landing (merged from parts/landing.css) ---- */
/* landing: the home page (index.html) and the DAO directory (daos.html). Classes start with ld-;
   shared classes are only combined with an ld- class, never restyled on their own.
   Figure 1, the network molecule, is the page's single orchestrated motion (pages/index.js runs it
   with the Web Animations API and skips it under prefers-reduced-motion). */

.ld-measure { max-width: 72ch; }

/* ================================================================== hero */
.ld-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.ld-hero-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ld-hero-text h1 { max-width: 12ch; }
.ld-hero-text .lede { margin: 0; max-width: 54ch; }
.ld-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ld-hero-note { margin: 0; max-width: 54ch; }
.ld-hero-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: fit-content; max-width: 100%; margin: 0; padding: 8px 14px;
  border: 1px solid var(--ok-line); border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ink-2); font-size: var(--fs-14); }
.ld-hero-mine .ic { width: 16px; height: 16px; color: var(--ok); }
.ld-hero-mine a { font-weight: 600; }
@media (max-width: 1080px) {
  .ld-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ld-hero-text h1 { max-width: 16ch; }
}
@media (max-width: 560px) {
  .ld-hero-text { gap: 18px; }
  .ld-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ Figure 1: the network */
.ld-net-fig { min-width: 0; }
.stats.ld-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ring); }
.stats.ld-readout:empty { display: none; }
.ld-readout .stat .v { font-size: var(--fs-20); }
@media (max-width: 400px) { .stats.ld-readout > .stat { padding: 12px 12px; } .ld-readout .stat .v { font-size: 17px; } }
.ld-readout .stat .money .fiat { font-size: var(--fs-13); }
.ld-canvas { position: relative; aspect-ratio: 5 / 3; border-radius: 0 0 13px 13px;
  background: radial-gradient(circle, var(--ring) 1px, transparent 1.3px) 0 0 / 24px 24px; }
.ld-canvas.ld-narrow { aspect-ratio: 1 / 1; }
.ld-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ld-bond { stroke: var(--ink-2); stroke-width: 1.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ld-atom { stroke: var(--surface); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.ld-link line { stroke: var(--ink-2); stroke-width: 1.2px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; }
.ld-link { transform-box: fill-box; transform-origin: center; transition: opacity .18s; }
.ld-node { cursor: pointer; }
.ld-node:focus { outline: none; }
.ld-halo { fill: transparent; stroke: transparent; stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill .15s, stroke .15s; }
.ld-node:hover .ld-halo { fill: color-mix(in srgb, var(--primary) 5%, transparent); stroke: var(--primary-line); }
.ld-node:focus-visible .ld-halo { stroke: var(--primary); stroke-width: 2px; }
.ld-mol { transition: opacity .18s; }
.ld-hot .ld-node:not(.on) .ld-mol { opacity: .25; }
.ld-hot .ld-link:not(.on) { opacity: .2; }
.ld-link.on line { stroke: var(--primary); opacity: 1; }
.ld-labels { position: absolute; inset: 0; pointer-events: none; }
.ld-label { position: absolute; max-width: 24ch; overflow: hidden; padding: 1px 6px; border-radius: var(--r-chip); background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--ink-2); font-size: var(--fs-12); font-weight: 500; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; transform: translate(-50%, 8px); }
.ld-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid var(--ring); border-radius: var(--r-ctl);
  background: var(--surface); box-shadow: var(--shadow-pop); color: var(--muted); font-size: var(--fs-12); white-space: nowrap; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px)); }
.ld-tip b { color: var(--ink); font-size: var(--fs-13); font-weight: 600; }
.ld-canvas-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: var(--muted); font-size: var(--fs-14); text-align: center; }
.ld-canvas-empty { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 20px;
  color: var(--ink-2); font-size: var(--fs-14); text-align: center; }
/* the placeholder molecule: inside the upper part of the frame, clear of the message under it */
.ld-net.ld-ghost { inset: 8% 0 auto; height: 52%; overflow: hidden; opacity: .5; }
.ld-canvas-empty { z-index: 1; }
.ld-ghost .ld-atom { fill: var(--faint); }

/* ================================================================== DAOs on COLLAB: largest and voting now */
.ld-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.ld-featured { min-width: 0; }
.ld-featured .grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* on phones three cards are enough before the list of votes; the directory has the rest */
@media (max-width: 639px) { .ld-featured .grid-cards > .dao-card:nth-child(n + 4) { display: none; } }

/* ================================================================== Figure 2: the life of a proposal */
.ld-life-grid { position: relative; display: grid; grid-template-columns: 2.1fr 3.3fr 1.6fr 2.3fr; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
/* the time axis, under the phase windows */
.ld-life-grid::before { content: ""; position: absolute; left: 0; right: 0; top: 186px; border-top: 1px solid var(--ring-2); }
.ld-phase { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ld-ph-win { position: relative; display: flex; flex-direction: column; gap: 2px; height: 172px; padding: 12px 14px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); }
.ld-ph-win b { color: var(--ink); font-size: var(--fs-13); font-weight: 600; }
.ld-ph-win > span { color: var(--muted); font-size: var(--fs-12); }
.ld-ph-deposit .ld-ph-win { background: var(--st-deposit); border-color: var(--st-deposit-line); }
.ld-ph-vote .ld-ph-win { background: var(--st-voting); border-color: var(--st-voting-line); }
.ld-ph-lock .ld-ph-win { background: var(--bg-2); }
.ld-ph-exec .ld-ph-win { background: var(--st-passed); border-color: var(--st-passed-line); }
.ld-ph-plot { position: relative; flex: 1 1 auto; margin-top: 10px; }
.ld-ph-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ld-curve { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.ld-ph-deposit .ld-curve { stroke: var(--st-deposit-ink); }
.ld-ph-vote .ld-curve { stroke: var(--st-voting-ink); }
.ld-ph-exec .ld-curve { stroke: var(--st-passed-ink); }
.ld-ref { stroke: var(--ink-2); stroke-width: 1px; stroke-dasharray: 4 3; opacity: .75; }
.ld-ref-label { position: absolute; right: 0; padding-bottom: 3px; color: var(--ink-2); font-size: 11px; font-weight: 500; line-height: 1.2; transform: translateY(-100%); }
.ld-ref-label.ld-at-30 { top: 30%; }
.ld-ref-label.ld-at-52 { top: 52%; right: auto; left: 0; }
.ld-hatch { border-radius: 8px; background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--ink-2) 16%, transparent) 7px 8px); }
.ld-dot { position: absolute; left: 32%; top: 22%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--st-passed-ink);
  box-shadow: 0 0 0 3px var(--st-passed); }
.ld-ref-label.ld-exec-label { top: 22%; right: auto; left: calc(32% + 10px); }
.ld-tick { position: relative; display: block; margin-top: 14px; padding-top: 9px; color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.ld-tick::before { content: ""; position: absolute; left: 0; top: -4px; height: 8px; border-left: 1px solid var(--ink-2); }
.ld-tick.ld-tick-end { position: absolute; top: 172px; right: 0; margin: 0; padding-top: 23px; text-align: right; }
.ld-tick.ld-tick-end::before { left: auto; right: 0; top: 10px; }
.ld-phase h3 { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; font-size: var(--fs-17); }
.ld-n { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border: 1px solid var(--ring-2); border-radius: 50%; color: var(--ink-2);
  font-family: var(--mono); font-size: 12px; font-weight: 600; }
.ld-phase p { margin: 0; padding-right: 14px; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.6; max-width: 46ch; }
@media (max-width: 1080px) { .ld-life-grid { grid-template-columns: 2fr 3fr 1.7fr 2.3fr; } .ld-phase p { padding-right: 6px; } }
@media (max-width: 899px) {
  .ld-life-grid { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .ld-life-grid::before, .ld-tick { display: none; }
  .ld-phase { display: grid; grid-template-columns: 148px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; align-items: start; }
  .ld-ph-win { grid-row: 1 / span 2; height: 132px; }
  .ld-phase h3 { margin: 2px 0 6px; }
  .ld-phase p { padding-right: 0; }
}
@media (max-width: 480px) {
  .ld-phase { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; }
  .ld-ph-win { height: 118px; padding: 10px 10px 12px; }
  .ld-ph-win > span, .ld-ref-label { display: none; }
}

/* ================================================================== what a DAO can hold and do */
.grid.ld-caps { gap: 28px 44px; margin: 0; padding: 0; list-style: none; }
.ld-caps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start; }
.ld-caps .ic { grid-row: 1 / span 2; margin-top: 1px; color: var(--science); }
.ld-caps h3 { font-size: var(--fs-15); }
.ld-caps h3 a { color: var(--ink); }
.ld-caps h3 a:hover { color: var(--primary); }
.ld-caps p { grid-column: 2; margin: 4px 0 0; color: var(--muted); font-size: var(--fs-14); }

/* ================================================================== get started */
.kinds.ld-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ld-paths .kind { gap: 8px; padding: 18px 18px 20px; }
.ld-paths .kind p { font-size: var(--fs-14); line-height: 1.55; }
@media (max-width: 1080px) { .kinds.ld-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kinds.ld-paths { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== the directory (/daos) */
.ld-dir-tabslot:empty { display: none; }
.tabs.ld-dir-tabs { margin-bottom: 4px; }
.ld-dir-count { white-space: nowrap; }
.ld-dir-win { overflow: hidden; }
table.t.ld-dir td { padding-block: 12px; }
table.t.ld-dir th:first-child, table.t.ld-dir td:first-child { padding-left: 18px; }
table.t.ld-dir th:last-child, table.t.ld-dir td:last-child { padding-right: 18px; }
/* the whole row opens the DAO: the name's link covers it */
.ld-dir tbody tr { position: relative; }
.ld-dir-link { color: var(--ink); font-size: var(--fs-15); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ld-dir-link::after { content: ""; position: absolute; inset: 0; }
.ld-dir-link:hover { color: var(--primary); text-decoration: none; }
.ld-dir-link:focus-visible { outline: none; }
.ld-dir tbody tr:has(.ld-dir-link:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.ld-dir-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ld-dir-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ld-dir-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ld-dir-dao { width: 44%; }
.ld-dir-money .money { justify-content: flex-end; }
.ld-dir-created { color: var(--ink-2); white-space: nowrap; }
.ld-dir tr.ld-mine td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
@media (max-width: 759px) {
  table.t.ld-dir thead { display: none; }
  table.t.ld-dir, table.t.ld-dir tbody, table.t.ld-dir tr, table.t.ld-dir td { display: block; }
  table.t.ld-dir tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 16px; border-bottom: 1px solid var(--ring); }
  table.t.ld-dir tr:last-child { border-bottom: 0; }
  table.t.ld-dir td, table.t.ld-dir td.r, table.t.ld-dir td:first-child, table.t.ld-dir td:last-child { padding: 0; border: 0; text-align: left; }
  table.t.ld-dir td.ld-dir-dao { grid-column: 1 / -1; width: auto; }
  table.t.ld-dir td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; color: var(--muted); font-family: var(--sans); font-size: var(--fs-12); }
  .ld-dir-money .money { justify-content: flex-start; }
  table.t.ld-dir tbody tr:hover td { background: transparent; }
  .ld-dir tr.ld-mine td:first-child { box-shadow: none; }
}

/* ---- settings (merged from parts/settings.css) ---- */
/* settings: the visitor's settings (/settings) and the privacy and cookie policy (/privacy).
   Every class starts with st-. */

/* the sections as a bar under the top bar (the site's sidebar is the page's only rail), the cards below */
.st-layout { display: flex; flex-direction: column; gap: 20px; max-width: 920px; }
.st-toc { position: sticky; top: var(--topbar); z-index: 20; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  border-bottom: 1px solid var(--ring); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.st-toc ol { display: flex; gap: 2px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.st-toc ol::-webkit-scrollbar { display: none; }
.st-toc li { flex: none; }
.st-toc a { display: block; min-height: 44px; margin-bottom: -1px; padding: 11px 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: var(--fs-14); font-weight: 500; white-space: nowrap; }
.st-toc a:hover { color: var(--ink); text-decoration: none; }
.st-toc a[aria-current="true"] { border-bottom-color: var(--primary); color: var(--ink); font-weight: 600; }
.st-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.st-sec { scroll-margin-top: calc(var(--topbar) + 64px); }
.st-sec > .card-body { display: flex; flex-direction: column; gap: 16px; }
.st-lead { margin: 0; color: var(--muted); font-size: var(--fs-14); max-width: 70ch; }
.st-choices { display: flex; flex-direction: column; gap: 8px; }
.st-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--ring);
  border-radius: var(--r-row); background: var(--surface); cursor: pointer; }
.st-choice:hover { border-color: var(--ring-2); }
.st-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.st-choice input { margin: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.st-choice-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-choice-text b { font-size: var(--fs-14); font-weight: 600; }
.st-choice-text .mono { color: var(--muted); font-size: var(--fs-12); overflow-wrap: anywhere; }
.st-choice-side { color: var(--muted); font-size: var(--fs-12); text-align: right; white-space: nowrap; }
.st-custom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.st-result { margin: 0; font-size: var(--fs-13); }
.st-result:empty { display: none; }
.st-result.ok { color: var(--ok); }
.st-result.bad { color: var(--danger); }
.st-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.st-cur { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.st-cur .st-choice { grid-template-columns: auto minmax(0, 1fr); padding: 9px 12px; }
.st-cur .st-choice b { font-family: var(--mono); font-size: var(--fs-13); }
.st-cur .st-choice span { color: var(--muted); font-size: var(--fs-12); }
.st-keys td:first-child { white-space: nowrap; }
.st-keys code { font-size: var(--fs-12); }
.st-here { color: var(--ok); font-weight: 600; white-space: nowrap; }
.st-none { color: var(--faint); white-space: nowrap; }
/* phones: each stored key as a short entry: the key and whether it is here, then what it holds */
@media (max-width: 560px) {
  table.t.st-keys thead { display: none; }
  table.t.st-keys, table.t.st-keys tbody { display: block; }
  table.t.st-keys tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--ring); }
  table.t.st-keys tbody tr:last-child { border-bottom: 0; }
  table.t.st-keys td { display: block; padding: 0; border: 0; background: transparent; }
  table.t.st-keys td:first-child { grid-column: 1; grid-row: 1; white-space: normal; min-width: 0; }
  table.t.st-keys td:first-child code { overflow-wrap: anywhere; }
  table.t.st-keys td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--ink-2); }
  table.t.st-keys td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  table.t.st-keys tbody tr:hover td { background: transparent; }
}
@media (min-width: 1024px) { .st-toc { margin-inline: 0; padding-inline: 0; } }
@media (max-width: 560px) { .st-custom { grid-template-columns: minmax(0, 1fr); } .st-choice { grid-template-columns: auto minmax(0, 1fr); } .st-choice-side { grid-column: 2; text-align: left; } }

/* privacy: a journal-style policy page */
.st-policy { display: grid; grid-template-columns: minmax(0, 760px) 300px; justify-content: space-between; gap: 48px; align-items: start; }
.st-policy .doc h2 { scroll-margin-top: calc(var(--topbar) + 20px); }
.st-side { position: sticky; top: calc(var(--topbar) + 24px); display: flex; flex-direction: column; gap: 14px; }
.st-side .card-body { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1080px) { .st-policy { grid-template-columns: minmax(0, 1fr); } .st-side { position: static; } }


@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2?v=851bc5eec3e6") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* A local sans scaled to Inter's metrics, shown until Inter arrives: the swap moves no line. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.1%; ascent-override: 90.4%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono.woff2?v=851bc5eec3e6") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-400.woff2?v=851bc5eec3e6") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-400i.woff2?v=851bc5eec3e6") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-600.woff2?v=851bc5eec3e6") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

/* ================================================================== tokens */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #ffffff;          /* page */
  --bg-2: #f8fafc;        /* bands, table heads, sunken areas */
  --bg-3: #f1f5f9;        /* hover, bar tracks */
  --surface: #ffffff;     /* windows */
  --surface-2: #fafbfc;   /* rows nested in windows */
  /* text */
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  /* lines: every hairline is 1px */
  --ring: #e5e7eb;
  --ring-2: #cbd5e1;
  /* GenesisL1 blue */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff6ff;
  --primary-line: #bfdbfe;
  --on-primary: #ffffff;
  --glow: 0 6px 10px rgba(37, 99, 235, .12);
  /* the wallet button (gov.html) */
  --wallet: #e8f0fe;
  --wallet-ring: #d2e3fc;
  --wallet-ink: #174ea6;
  /* DeSci accent: data, models, sealed assets, figures */
  --science: #0f766e;
  --science-soft: #f0fdfa;
  --science-line: #99f6e4;
  /* feedback */
  --ok: #047857;
  --ok-soft: #ecfdf5;
  --ok-line: #a7f3d0;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --warn-line: #fde68a;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-line: #fecaca;
  /* proposal states, the gov.html pairs: background / text / border */
  --st-voting: #eef2ff; --st-voting-ink: #3730a3; --st-voting-line: #e0e7ff;
  --st-deposit: #fff7ed; --st-deposit-ink: #9a3412; --st-deposit-line: #ffedd5;
  --st-passed: #ecfdf5; --st-passed-ink: #065f46; --st-passed-line: #d1fae5;
  --st-rejected: #fef2f2; --st-rejected-ink: #991b1b; --st-rejected-line: #fee2e2;
  --st-failed: #fef3c7; --st-failed-ink: #92400e; --st-failed-line: #fde68a;
  /* votes */
  --yes: #2563eb;
  --no: #f43f5e;
  --veto: #9f1239;
  --abstain: #94a3b8;
  /* data palette, in this order (charts and molecule glyphs) */
  --d1: #2563eb; --d2: #0d9488; --d3: #7c3aed; --d4: #d97706; --d5: #db2777; --d6: #64748b;
  /* shapes */
  --r-window: 14px;
  --r-row: 12px;
  --r-ctl: 10px;
  --r-chip: 6px;
  --r-pill: 9999px;
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -12px rgba(15, 23, 42, .18);
  --scrim: rgba(15, 23, 42, .42);
  /* the portal shell: sidebar and top bar, the alpha strip, genesisl1.com's soft blue bands */
  --chrome: #ffffff;
  --strip-bg: #0f172a; --strip-ink: #cbd5e1; --strip-em: #fcd34d; --strip-link: #ffffff;
  --band: #f5f8ff; --band-line: #e2eaf8;
  --live: #10b981;
  /* DeSciFi's market pair: buying and selling, gains and losses. Used as text and as fills under
     white labels, so both hold 5.2:1 or more on white and on their soft tints (WCAG AA) */
  --buy: #047857; --buy-soft: #ecfdf5; --buy-line: #a7f3d0;
  --sell: #be123c; --sell-soft: #fff1f2; --sell-line: #fecdd3;
  /* type */
  --sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px;
  --fs-24: 24px; --fs-30: 30px; --fs-38: 38px; --fs-48: 48px;
  --fs-display: clamp(40px, 4.2vw, 64px);
  /* layout */
  --max: 1600px;
  --gutter: clamp(16px, 2.6vw, 40px);
  --topbar: 64px;
  --side: 256px;
  --rail: 264px;
  --aside: 360px;
  --ws-gap: 28px;
  /* names of version 1, still used by feature styles */
  --card: var(--surface);
  --sunken: var(--bg-2);
  --hover: var(--bg-3);
  --ring-strong: var(--ring-2);
  --primary-ink: var(--primary-hover);
  --info-soft: var(--primary-soft);
  --focus: var(--primary);
  --violet: #4338ca;
  --violet-soft: #eef2ff;
  --r-card: var(--r-window);
  --r-sm: 7px;
  --shell: var(--max);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090b;
  --bg-2: #0e0e11;
  --bg-3: #18181b;
  --surface: #0e0e11;
  --surface-2: #141418;
  --ink: #fafafa;
  --ink-2: #d4d4d8;
  --muted: #a1a1aa;
  --faint: #71717a;
  --ring: #1f1f24;
  --ring-2: #2e2e36;
  --primary: #6d8bff;
  --primary-hover: #8aa2ff;
  --primary-soft: #151b33;
  --primary-line: #2b3a74;
  --on-primary: #0b1024;
  --glow: 0 6px 14px -6px rgba(109, 139, 255, .45);
  --wallet: #111a33;
  --wallet-ring: #22356b;
  --wallet-ink: #a8c1ff;
  --science: #2dd4bf;
  --science-soft: #0d2622;
  --science-line: #134e4a;
  --ok: #34d399;
  --ok-soft: #0b2a1f;
  --ok-line: #14532d;
  --warn: #fbbf24;
  --warn-soft: #261c08;
  --warn-line: #4a3510;
  --danger: #f87171;
  --danger-soft: #2a1013;
  --danger-line: #4c1d22;
  --st-voting: #17193a; --st-voting-ink: #c7d2fe; --st-voting-line: #2b2f6b;
  --st-deposit: #2a1608; --st-deposit-ink: #fdba74; --st-deposit-line: #4a2a10;
  --st-passed: #0b2a1f; --st-passed-ink: #6ee7b7; --st-passed-line: #14532d;
  --st-rejected: #2a1013; --st-rejected-ink: #fca5a5; --st-rejected-line: #4c1d22;
  --st-failed: #2a2005; --st-failed-ink: #fcd34d; --st-failed-line: #4a3a0a;
  --yes: #6d8bff;
  --no: #fb7185;
  --veto: #e11d48;
  --abstain: #8b8b94;
  --d1: #7b9cff; --d2: #2dd4bf; --d3: #a78bfa; --d4: #fbbf24; --d5: #f472b6; --d6: #a1a1aa;
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, .6), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .6);
  --chrome: #0c0c0f;
  --strip-bg: #1c1c21; --strip-ink: #a1a1aa; --strip-em: #fbbf24; --strip-link: #fafafa;
  --band: #0c101d; --band-line: #1a2138;
  --live: #34d399;
  --buy: #34d399; --buy-soft: #0b2a1f; --buy-line: #14532d;
  --sell: #fb7185; --sell-soft: #2a1013; --sell-line: #4c1d22;
  --violet: #a5b4fc;
  --violet-soft: #17193a;
}

/* ================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  grid-template-rows: auto var(--topbar) auto 1fr auto;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-15)/1.55 var(--sans);
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  counter-reset: fig;
}
body > main { grid-column: 2; grid-row: 4; min-width: 0; width: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--primary); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--primary) 24%, transparent); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 620; line-height: 1.22; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--fs-30); font-weight: 650; line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-20); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-17); }
h4 { font-size: var(--fs-15); }
p { margin: 0 0 .75em; text-wrap: pretty; }
hr { border: 0; border-top: 1px solid var(--ring); margin: 1rem 0; }
code, kbd, samp { font-family: var(--mono); font-size: .88em; }
.display { font-size: var(--fs-display); font-weight: 650; line-height: 1.02; letter-spacing: -0.035em; }
.lede { font-size: var(--fs-17); line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--fs-13); }
.tiny { font-size: var(--fs-12); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; word-break: break-word; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden, [hidden] { display: none !important; }
.skip-link { position: fixed; left: 12px; top: -56px; z-index: 200; padding: 10px 16px; border-radius: var(--r-ctl); background: var(--ink); color: var(--bg); font-weight: 600; }
.skip-link:focus { top: 12px; color: var(--bg); text-decoration: none; }
main:focus { outline: none; }
.boot-error { margin: 24px auto; max-width: 720px; }

/* ================================================================== layout */
/* The frame: content held to --max with responsive gutters. .shell is its version 1 name. */
.frame, .shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.page { padding-block: 28px 72px; }
/* Bands: full-width sections (landing, directory, docs) with the frame inside. */
.bands { display: flex; flex-direction: column; }
.band { padding-block: clamp(36px, 5vw, 64px); background: var(--bg); }
.band + .band { border-top: 1px solid var(--ring); }
.band.alt { background: var(--bg-2); }
.band-head { padding-block: 28px clamp(28px, 4vw, 40px); background: var(--band); border-bottom: 1px solid var(--band-line); }
.band-head + .band { padding-top: clamp(24px, 3vw, 32px); border-top: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.page-head-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 78ch; }
.page-head-text .lede { margin: 0; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
/* Grids: .g2-.g4 fixed columns that step down; .grid-cards and .grid-auto fill the width. */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
/* Main column plus a side column (360px, or 420px with .split-wide). */
.split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.split-wide { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.sticky { position: sticky; top: calc(var(--topbar) + 20px); }
@media (max-width: 1080px) { .split, .split-wide { grid-template-columns: minmax(0, 1fr); } .sticky { position: static; } }
@media (max-width: 960px) { .g4, .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } h1 { font-size: var(--fs-24); } }

/* ------------------------------------------------------------------ DAO workspace
   Inside the portal the site's sidebar is the only rail. A DAO's sections are a bar under its
   masthead, sticky under the top bar, at every width; the view and its aside sit below it.
     content column >= 1180px (viewport >= 1440px): main | aside, with your membership above the aside.
     narrower: main, then the aside, then your membership. */
.ws { display: grid; gap: 20px var(--ws-gap); align-items: start; padding-block: 0 72px;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "main" "aside" "me"; }
.ws-rail { display: contents; }
.ws-main { grid-area: main; min-width: 0; container: ws-main / inline-size; }
.ws-aside { grid-area: aside; min-width: 0; }
.ws-me { grid-area: me; }
.ws[data-aside="off"] .ws-aside { display: none; }
.ws[data-state="empty"] { grid-template-areas: "main"; }
/* the overview shows the membership in full beside its decisions */
.ws[data-view="overview"] .ws-me { display: none; }
@container ws-main (max-width: 900px) {
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
}
@media (min-width: 1440px) {
  .ws[data-aside="on"] { grid-template-columns: minmax(0, 1fr) var(--aside); grid-template-areas: "nav nav" "main me" "main aside"; grid-template-rows: auto auto 1fr; }
  .ws[data-aside="on"] .ws-aside { position: sticky; top: calc(var(--topbar) + 66px); }
}

/* ================================================================== the portal shell
   One frame for every page, after gl1x.com: the alpha strip across the top, a sidebar with the brand,
   the live network card and grouped navigation, a top bar over the content (search, currency, theme,
   wallet) and the ecosystem footer. The markup is static in every entry (tools/shell_html.py), so the
   first paint shows the whole frame; js/core/ui.js shell() fills in what is live.
   The body is the grid; the sidebar and the top bar span every row below the strip, which is what
   lets both stick without a wrapper around <main>.
     >= 1024px: strip / sidebar | top bar, announcement, main, footer.
     <  1024px: one column; the sidebar is a drawer opened from the top bar.
     <   768px: the search folds into a button that opens it over the top bar. */
.alpha-strip { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 42; background: var(--strip-bg); color: var(--strip-ink); font-size: 12.5px; line-height: 1.45; }
.alpha-strip p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; margin: 0; padding: 6px var(--gutter); text-align: center; }
.alpha-tag { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--strip-em) 50%, transparent); border-radius: var(--r-pill);
  color: var(--strip-em); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.alpha-strip a { color: var(--strip-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--strip-link) 45%, transparent); text-underline-offset: 3px; }
.alpha-strip a:hover { color: var(--strip-link); text-decoration-color: currentColor; }
/* phones: one flowing paragraph of at most two lines (the default text), badge first, link last */
@media (max-width: 640px) {
  .alpha-strip { font-size: 12px; line-height: 1.4; }
  .alpha-strip p { display: block; padding: 5px var(--gutter) 6px; text-align: left; }
  .alpha-tag { height: 16px; margin-right: 6px; padding: 0 6px; font-size: 10px; vertical-align: 1px; }
  .alpha-more { margin-left: 4px; white-space: nowrap; }
}

/* the sidebar */
.side { grid-column: 1; grid-row: 2 / -1; align-self: start; position: sticky; top: 0; z-index: 41; display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ring-2) transparent; background: var(--chrome); border-right: 1px solid var(--ring); }
.side-brand { flex: none; display: flex; align-items: center; gap: 10px; min-height: var(--topbar); padding: 0 14px 0 20px; border-bottom: 1px solid var(--ring); }
.side .side-close { display: none; margin-left: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.alpha-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--warn-line); border-radius: var(--r-pill); background: var(--warn-soft);
  color: var(--warn); font-size: 11px; font-weight: 650; letter-spacing: .02em; cursor: default; }

/* the network card: chain, latest block, L1 price, this site's deployment */
.netcard { flex: none; margin: 14px 14px 2px; overflow: hidden; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); box-shadow: inset 3px 0 0 var(--ink); font-size: var(--fs-12); }
.netcard-top { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px 8px 15px; border-bottom: 1px solid var(--ring); color: var(--ink); font-size: var(--fs-13); }
.netcard-top:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.netcard-top b { font-weight: 650; }
.netcard-chain { margin-left: auto; color: var(--muted); font-size: var(--fs-12); white-space: nowrap; }
.netcard dl { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 8px 12px 10px 15px; }
.netcard dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.netcard dt { flex: none; color: var(--muted); }
.netcard dd { min-width: 0; margin: 0; overflow: hidden; color: var(--ink-2); text-align: right; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.netcard dd.mono, .netcard dd .mono { font-size: 11.5px; }
.netcard dd .up { color: var(--ok); }
.netcard dd .down { color: var(--danger); }
.netcard dd a { color: inherit; }
.netcard dd a:hover { color: var(--primary); }
.netcard dd .link-btn { text-decoration: none; color: var(--primary); }
.netcard dd .link-btn:hover { text-decoration: underline; }
.netcard .st { display: inline-flex; align-items: center; gap: 6px; }
.netcard .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.netcard .st.ok::before { background: var(--live); }
.netcard .st.warn { color: var(--warn); }
.netcard .st.warn::before { background: var(--warn); }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--faint); }
.netcard.live .dot, .dot.live { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
.netcard.slow .dot, .dot.slow { background: #f59e0b; box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 22%, transparent); }
.netcard.bad .dot, .dot.bad { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) { .netcard:not(.live):not(.slow):not(.bad) .dot { animation: pulse 1.4s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .35; } }

/* grouped navigation */
.side-nav { flex: 1 0 auto; padding: 4px 12px 18px; }
.nav-label { display: flex; align-items: center; gap: 8px; margin: 18px 10px 6px; color: var(--muted); font-size: var(--fs-12); font-weight: 600; letter-spacing: 0; }
/* DeSciFi's market pair, buy and sell, marks its group */
#nav-descifi::after { content: ""; width: 14px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--buy) 0 50%, var(--sell) 50% 100%); }
.side-nav ul { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.side-nav a { display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 7px 10px; border-radius: var(--r-ctl); color: var(--ink-2); font-size: var(--fs-14); font-weight: 500; }
.side-nav a .ic { width: 18px; height: 18px; color: var(--faint); }
.side-nav a:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }
.side-nav a:hover .ic { color: var(--muted); }
.side-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.side-nav a[aria-current="page"] .ic { color: var(--primary); }
.side-tools { display: none; }
.side-foot { flex: none; display: flex; flex-wrap: wrap; gap: 2px; padding: 10px 12px 14px; border-top: 1px solid var(--ring); }
.side-foot a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--r-ctl); color: var(--muted); font-size: var(--fs-13); }
.side-foot a:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }
.side-foot .ic { width: 15px; height: 15px; }

/* the top bar over the content */
.topbar { grid-column: 2; grid-row: 2 / -1; align-self: start; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; height: var(--topbar);
  padding: 0 var(--gutter); border-bottom: 1px solid var(--ring); background: color-mix(in srgb, var(--chrome) 90%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.topbar .topbar-brand, .topbar .menu-btn, .topbar .search-btn, .search .search-close { display: none; }
.topbar-brand .brand-mark { width: 28px; height: 28px; }
.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cur-slot { display: contents; }
.wallet-slot { display: flex; min-width: 0; }
.wallet-slot .btn { max-width: 100%; }

/* global search */
.search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 620px; }
.search-ic { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search-input { width: 100%; height: 40px; padding: 0 44px 0 40px; border: 1px solid var(--ring); border-radius: var(--r-ctl); background: var(--bg-2); color: var(--ink);
  font-size: var(--fs-14); transition: border-color .15s, background-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.search-input::placeholder { color: var(--faint); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-input:hover { border-color: var(--ring-2); }
.search-input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.search-key { position: absolute; right: 9px; top: 50%; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; transform: translateY(-50%);
  border: 1px solid var(--ring-2); border-radius: 6px; background: var(--surface); color: var(--muted); font: 500 12px/1 var(--mono); pointer-events: none; }
.search:focus-within .search-key { display: none; }
.search-close { display: none; }
.search-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 75; width: 100%; min-width: min(440px, calc(100vw - 24px)); max-height: min(72vh, 600px); overflow-y: auto;
  padding: 6px; border: 1px solid var(--ring); border-radius: var(--r-window); background: var(--surface); box-shadow: var(--shadow-pop); overscroll-behavior: contain; }
.search-group + .search-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ring); }
.search-label { margin: 0; padding: 8px 10px 4px; color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.search-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 10px; border-radius: var(--r-ctl); color: var(--ink); cursor: pointer; }
.search-opt:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.search-opt[aria-selected="true"] { background: var(--primary-soft); }
.search-opt .s-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--ring); border-radius: 9px; background: var(--surface-2); color: var(--muted); }
.search-opt .s-ic .ic { width: 16px; height: 16px; }
.search-opt .s-sym { font: 600 10.5px/1 var(--mono); letter-spacing: 0; color: var(--ink-2); }
.search-opt .s-ic .avatar { width: 100%; height: 100%; border: 0; border-radius: 8px; background: none; }
.search-opt .s-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.search-opt .s-t { overflow: hidden; font-size: var(--fs-14); font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.search-opt .s-t mark { background: transparent; color: var(--primary); }
.search-opt .s-m { overflow: hidden; color: var(--muted); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }
.search-opt .s-slug { color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; }
.search-opt .s-k { flex: none; margin-left: auto; color: var(--faint); font-size: var(--fs-12); }
.search-note { padding: 14px 12px; color: var(--muted); font-size: var(--fs-13); text-align: center; }
.search-note .spinner { display: inline-block; vertical-align: -3px; margin-right: 8px; }
.search-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; padding: 8px 10px 4px; border-top: 1px solid var(--ring); color: var(--faint); font-size: var(--fs-12); }
.search-foot kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-right: 4px; padding: 0 4px; border: 1px solid var(--ring-2); border-radius: 5px;
  background: var(--surface); color: var(--muted); font: 500 11px/1 var(--mono); }

/* currency chip and menu */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--ring); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; cursor: pointer; }
span.chip { cursor: default; height: auto; padding: 2px 9px; font-weight: 500; font-size: var(--fs-12); }
.chip:hover { border-color: var(--ring-2); color: var(--ink); }
.chip svg { width: 14px; height: 14px; color: var(--faint); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: none; }
.ok-chip { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--ring)); background: var(--ok-soft); }
.cur-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cur-opt { height: 32px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 12px var(--mono); cursor: pointer; }
.cur-opt:hover { background: var(--bg-3); color: var(--ink); }
.cur-opt[aria-pressed="true"] { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }

/* where the footer sits (here, so the phone layout below can move it) */
.site-foot { grid-column: 2; grid-row: 5; }

/* the site's announcement (site settings), under the top bar */
.announce { grid-column: 2; grid-row: 3; border-bottom: 1px solid var(--primary-line); background: var(--primary-soft); color: var(--ink-2); font-size: var(--fs-14); }
.announce.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.announce p { display: flex; align-items: center; gap: 10px; max-width: var(--max); margin: 0 auto; padding: 9px var(--gutter); }
.announce .ic { width: 17px; height: 17px; color: var(--primary); }
.announce.warn .ic { color: var(--warn); }
.announce a { font-weight: 600; }

/* phones and tablets: the sidebar becomes a drawer */
@media (max-width: 1023px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .alpha-strip, .topbar, .announce, body > main, .site-foot { grid-column: 1; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 62; width: min(320px, 88vw); height: auto; border-right: 1px solid var(--ring);
    transform: translateX(-104%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  html.side-open .side { transform: none; visibility: visible; box-shadow: 24px 0 64px -16px rgba(15, 23, 42, .28); transition: transform .22s ease; }
  html.side-open { overflow: hidden; }
  .side-scrim { position: fixed; inset: 0; z-index: 61; background: var(--scrim); }
  .side .side-close { display: inline-grid; }
  .side-tools { display: flex; flex-direction: column; gap: 10px; margin: 6px 14px 0; padding: 12px; border: 1px solid var(--ring); border-radius: var(--r-row); }
  .side-tools .side-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-13); color: var(--ink-2); }
  .side-tools .select { width: auto; min-height: 34px; padding-block: 4px; font-size: var(--fs-13); }
  .topbar { gap: 12px; }
  .topbar .topbar-brand { display: inline-flex; }
  .topbar .menu-btn { display: inline-grid; }
  .topbar .cur-slot .chip, .topbar .theme-toggle { display: none; }
}
@media (max-width: 767px) {
  .topbar { gap: 8px; }
  .topbar .search { display: none; }
  .topbar .search-btn { display: inline-grid; }
  html.search-open { overflow: hidden; }
  html.search-open .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.search-open .topbar .search { position: fixed; inset: 0 0 auto 0; z-index: 76; display: flex; align-items: center; gap: 8px; max-width: none; padding: 10px 12px;
    background: var(--surface); border-bottom: 1px solid var(--ring); }
  html.search-open .search-ic { left: 25px; }
  html.search-open .search-input { flex: 1 1 auto; height: 44px; padding-right: 14px; font-size: 16px; }
  html.search-open .search-key { display: none; }
  html.search-open .search .search-close { display: inline-grid; }
  html.search-open .search-pop { position: fixed; top: 64px; left: 0; right: 0; width: auto; min-width: 0; max-height: calc(100dvh - 64px); border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  .search-scrim { position: fixed; inset: 0; z-index: 74; background: var(--scrim); }
}
@media (max-width: 479px) {
  .topbar-brand .brand-word { font-size: 15px; }
  .wallet-slot .wallet-txt { display: none; }
  .wallet-slot .btn { padding: 0 11px; }
}
@media (max-width: 359px) { .topbar-brand .brand-word { display: none; } }
@media (prefers-reduced-motion: reduce) { .side { transition: none !important; } }

/* ================================================================== windows (cards) and rows */
.card { background: var(--surface); border: 1px solid var(--ring); border-radius: var(--r-window); }
.pad { padding: 18px; }
.pad-lg { padding: 24px; }
.pad-sm { padding: 12px 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 18px; border-bottom: 1px solid var(--ring); }
.card-head h2, .card-head h3 { font-size: var(--fs-15); font-weight: 600; letter-spacing: -0.01em; }
.card-body { padding: 16px 18px 18px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--ring); }
.sunken { background: var(--bg-2); border: 1px solid var(--ring); border-radius: var(--r-row); }
.row-card { padding: 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); }
.list > * + * { border-top: 1px solid var(--ring); }
.item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; }
a.item, button.item { color: inherit; }
a.item:hover, button.item:hover { background: var(--surface-2); text-decoration: none; }
:root[data-theme="dark"] a.item:hover { background: var(--surface-2); }

/* ================================================================== controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--ring); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink); font-size: var(--fs-14); font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn:hover { background: var(--bg-2); border-color: var(--ring-2); color: var(--ink); text-decoration: none; }
.btn:active { background: var(--bg-3); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--glow); font-weight: 600; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn.primary:disabled { box-shadow: none; }
.btn.wallet { background: var(--wallet); border-color: var(--wallet-ring); color: var(--wallet-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); font-weight: 600; }
.btn.wallet:hover { background: var(--wallet-ring); color: var(--wallet-ink); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--ring)); }
.btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg-3); border-color: transparent; }
.btn.sm { min-height: 32px; padding: 0 10px; gap: 6px; font-size: var(--fs-13); border-radius: 9px; }
.btn.sm svg { width: 15px; height: 15px; }
.btn.lg { min-height: 46px; padding: 0 20px; font-size: var(--fs-15); border-radius: 12px; }
.btn.block { width: 100%; }
.btn.yes { border-color: color-mix(in srgb, var(--yes) 40%, var(--ring)); }
.btn.yes[aria-pressed="true"] { background: color-mix(in srgb, var(--yes) 12%, var(--surface)); border-color: var(--yes); }
.btn.no[aria-pressed="true"] { background: color-mix(in srgb, var(--no) 12%, var(--surface)); border-color: var(--no); }
.btn.veto[aria-pressed="true"] { background: color-mix(in srgb, var(--veto) 12%, var(--surface)); border-color: var(--veto); }
.btn.abstain[aria-pressed="true"] { background: color-mix(in srgb, var(--abstain) 16%, var(--surface)); border-color: var(--abstain); }
.icon-btn { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--ring); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 18px; line-height: 1; }
.icon-btn:hover { background: var(--bg-2); border-color: var(--ring-2); color: var(--ink); text-decoration: none; }
.icon-btn svg { width: 18px; height: 18px; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn:hover { color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: var(--fs-12); font-weight: 400; color: var(--muted); line-height: 1.45; }
.input, .select, .textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ring-2); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink);
  font-size: var(--fs-14); font-weight: 400; line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--ring-2) 60%, var(--muted)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
.input[readonly] { background: var(--bg-2); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-2); color: var(--muted); cursor: not-allowed; }
.input.mono { font-family: var(--mono); font-size: var(--fs-13); }
.select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; }
:root[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.select[multiple] { background-image: none; padding-right: 12px; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.textarea.prose { min-height: 260px; font-family: var(--serif); font-size: var(--fs-17); line-height: 1.6; }
.textarea.code { min-height: 140px; font-family: var(--mono); font-size: var(--fs-13); }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .addon { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--ring-2); border-left: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  background: var(--bg-2); color: var(--muted); font-size: var(--fs-13); white-space: nowrap; }
.input-group .btn { border-left: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; min-height: 40px; }
.err { color: var(--danger); font-size: var(--fs-12); font-weight: 500; }
/* listField rows: the fields grow, the remove button stays beside them however tall they get */
.list-row { flex-wrap: nowrap; align-items: flex-end; }
.list-row > .icon-btn { flex: none; }
/* durationField: the number and its unit stay on one line, also in narrow columns */
.dur-row { flex-wrap: nowrap; }
.dur-row > .grow { min-width: 0; }
.dur-unit { flex: none; width: 7.5rem; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); cursor: pointer; }
.check input, input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.check input { width: 16px; height: 16px; margin: 0; flex: none; }
/* segmented control */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--ring); border-radius: var(--r-ctl); background: var(--bg-2); }
.seg button { padding: 5px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-size: var(--fs-13); font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px var(--ring); }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--bg-3); box-shadow: 0 0 0 1px var(--ring-2); }
.seg button:disabled { opacity: .5; cursor: not-allowed; }
/* toggle switch */
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--ring-2); transition: background-color .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ================================================================== pills, badges, chips of code */
.pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border: 1px solid var(--ring); border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--ink-2); font-size: var(--fs-12); font-weight: 500; line-height: 1.5; white-space: nowrap; }
a.pill:hover { border-color: var(--ring-2); color: var(--ink); text-decoration: none; }
.pill svg { width: 13px; height: 13px; flex: none; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--ring); border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--ink-2); font-size: var(--fs-12); font-weight: 500; line-height: 1.5; white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.voting { background: var(--st-voting); color: var(--st-voting-ink); border-color: var(--st-voting-line); }
.badge.deposit { background: var(--st-deposit); color: var(--st-deposit-ink); border-color: var(--st-deposit-line); }
.badge.passed, .badge.executed { background: var(--st-passed); color: var(--st-passed-ink); border-color: var(--st-passed-line); }
.badge.rejected, .badge.vetoed { background: var(--st-rejected); color: var(--st-rejected-ink); border-color: var(--st-rejected-line); }
.badge.failed, .badge.expired { background: var(--st-failed); color: var(--st-failed-ink); border-color: var(--st-failed-line); }
.badge.queued, .badge.executable { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
.badge.critical { background: transparent; color: var(--veto); border-color: color-mix(in srgb, var(--veto) 40%, var(--ring)); }
:root[data-theme="dark"] .badge.critical { color: #fda4af; }
.badge.science { background: var(--science-soft); color: var(--science); border-color: var(--science-line); }
.badge.frozen { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
:root[data-theme="dark"] .badge.frozen { background: #082f49; color: #7dd3fc; border-color: #0c4a6e; }
.badge.executable .dot { animation: none; }
code.chip-code, .code-chip { padding: .08em .4em; border: 1px solid var(--ring); border-radius: var(--r-chip); background: var(--bg-2); font-family: var(--mono); font-size: .86em; }

/* ================================================================== tabs and section bars */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ring); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { flex: none; margin-bottom: -1px; padding: 11px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted);
  font-size: var(--fs-14); font-weight: 500; cursor: pointer; white-space: nowrap; }
.tabs a:hover, .tabs button:hover { color: var(--ink); text-decoration: none; }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--primary); font-weight: 600; }
.tabs .count, .ws-nav .count { padding: 0 7px; border: 1px solid var(--ring); border-radius: var(--r-pill); background: var(--bg-2); color: var(--muted);
  font: 500 11px/1.6 var(--mono); font-variant-numeric: tabular-nums; }
.tabs .count { margin-left: 6px; }
/* breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: var(--fs-13); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.crumbs:empty { display: none; }

/* ================================================================== a DAO's section bar and membership box */
.ws-nav { grid-area: nav; position: sticky; top: var(--topbar); z-index: 20; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ring); }
.ws-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.ws-nav ul::-webkit-scrollbar { display: none; }
.ws-nav li { flex: none; }
.ws-nav a { display: flex; align-items: center; gap: 8px; min-height: 46px; margin-bottom: -1px; padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--muted);
  font-size: var(--fs-14); font-weight: 500; white-space: nowrap; }
.ws-nav a svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.ws-nav a .grow { flex: none; }
.ws-nav a:hover { color: var(--ink); text-decoration: none; }
.ws-nav a:hover svg { color: var(--muted); }
.ws-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); font-weight: 600; }
.ws-nav a[aria-current="page"] svg { color: var(--primary); }
.ws-nav a[aria-current="page"] .count { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
@media (max-width: 1599px) { .ws-nav a svg { display: none; } }
.ws-me { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--ring); border-radius: var(--r-window); background: var(--bg-2); }
.ws-me:empty { display: none; }
.ws-me h2 { font-size: var(--fs-14); font-weight: 600; }
.ws-mine { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ws-mine > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ws-mine dt { color: var(--muted); font-size: var(--fs-13); }
.ws-mine dd { margin: 0; min-width: 0; text-align: right; font-size: var(--fs-14); font-weight: 600; overflow-wrap: anywhere; }
.ws-mine dd .addr { font-size: var(--fs-12); }
.ws-rules .table-wrap { margin: 0 -2px; }

/* ================================================================== tables */
.table-wrap { position: relative; overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
table.t th { padding: 10px 14px; border-bottom: 1px solid var(--ring); background: var(--bg-2); color: var(--muted); font-size: var(--fs-12); font-weight: 600; text-align: left; white-space: nowrap; }
table.t td { padding: 11px 14px; border-bottom: 1px solid var(--ring); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--surface-2); }
table.t td.r, table.t th.r { text-align: right; }
table.t td.num, table.t td .num { font-family: var(--mono); font-size: var(--fs-13); letter-spacing: 0; }
table.t.t-compact { font-size: var(--fs-13); }
table.t.t-compact th, table.t.t-compact td { padding: 7px 10px; }
table.t.t-compact tbody th { background: transparent; color: var(--ink-2); font-size: var(--fs-13); font-weight: 400; border-bottom: 1px solid var(--ring); }
table.t.t-compact tbody tr:last-child th { border-bottom: 0; }
table.t.t-compact tbody tr:hover td { background: transparent; }

/* ================================================================== stats and key-value lists */
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .v { overflow: hidden; font-size: var(--fs-24); font-weight: 620; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.stat .v small { margin-left: 4px; color: var(--muted); font-size: var(--fs-13); font-weight: 500; letter-spacing: 0; }
.stat .l { color: var(--muted); font-size: var(--fs-13); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stats > .stat { padding: 14px 18px; border-left: 1px solid var(--ring); }
.stats > .stat:first-child { border-left: 0; }
@media (max-width: 640px) { .stats > .stat { border-left: 0; border-top: 1px solid var(--ring); } .stats > .stat:first-child { border-top: 0; } }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: var(--fs-14); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.money { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.money .fiat { color: var(--muted); font-size: .86em; font-weight: 500; }

/* ================================================================== figures: charts read as scientific figures */
.fig { display: flex; flex-direction: column; gap: 12px; margin: 0; counter-increment: fig; }
.fig-cap { color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }
.fig-cap::before { content: "Figure " counter(fig) ". "; color: var(--ink-2); font-weight: 600; }
/* core/charts.js autoNumberFigures numbers captions in document order (containers scope CSS counters) */
.fig-cap[data-n]::before { content: "Figure " attr(data-n) ". "; }
.chart { width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--muted); font-family: var(--sans); font-size: 11px; }
.chart .axis { stroke: var(--ring-2); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick { stroke: var(--ring-2); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick-label { fill: var(--faint); font-family: var(--mono); font-size: 10px; }
.chart .grid { stroke: var(--ring); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .ref { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; }
.chart .ref-label { fill: var(--ink-2); font-size: 11px; font-weight: 500; }
.chart .guide { stroke: var(--science); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.chart .series { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .marker { fill: var(--science); stroke: var(--surface); stroke-width: 2; }
.chart .floor-zone { fill: color-mix(in srgb, var(--warn) 9%, transparent); }
.chart .floor-line { stroke: var(--warn); stroke-width: 1.25; stroke-dasharray: 5 4; }
.chart .floor-label { fill: var(--warn); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: var(--fs-13); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
/* progress bars: 9px, fully rounded, on --bg-3 */
.progress { height: 9px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-3); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.mini-ballot { display: flex; height: 7px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-3); }
.mini-ballot > span { height: 100%; }
/* the ballot: votes against all voting power, and the three tally conditions with reference lines */
.ballot { gap: 14px; }
.ballot-track { position: relative; height: 12px; margin-top: 22px; border-radius: var(--r-pill); background: var(--bg-3); }
.ballot-fill { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: var(--r-pill); }
.ballot-fill > span { height: 100%; }
.ballot-fill .yes { background: var(--yes); }
.ballot-fill .no { background: var(--no); }
.ballot-fill .veto { background: var(--veto); }
.ballot-fill .abstain { background: var(--abstain); }
.ballot-mark { position: absolute; top: -7px; bottom: -7px; width: 0; border-left: 1.5px dashed var(--ink-2); }
.ballot-mark::after { content: attr(data-label); position: absolute; bottom: calc(100% + 3px); left: 0; transform: translateX(-50%); color: var(--ink-2); font-size: 11px; font-weight: 500; white-space: nowrap; }
.ballot-mark.end::after { transform: translateX(-100%); }
.ballot-mark.start::after { transform: none; }
.ballot-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ballot-legend .o { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--muted); font-size: var(--fs-12); }
.ballot-legend .o b { color: var(--ink); font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ballot-legend .o i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: 0; }
.ballot-checks { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ring); font-size: var(--fs-13); }
.ballot-checks .c { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.ballot-checks .c > .muted { min-width: 0; }
.ballot-checks .c .val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ballot-checks .c .ok { color: var(--ok); font-weight: 600; }
.ballot-checks .c .bad { color: var(--danger); font-weight: 600; }
.ballot-checks .meter { grid-column: 1 / -1; position: relative; height: 6px; border-radius: var(--r-pill); background: var(--bg-3); }
.ballot-checks .meter > span { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--ink-2); }
.ballot-checks .meter.yes > span { background: var(--yes); }
.ballot-checks .meter.veto > span { background: var(--veto); }
.ballot-checks .meter.turnout > span { background: var(--d2); }
.ballot-checks .meter > i { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed var(--ink-2); }
@media (max-width: 480px) { .ballot-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ timeline (proposal lifecycle) */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.timeline .s { position: relative; padding: 12px 10px 0; border-top: 3px solid var(--ring); }
.timeline .s.done, .timeline .s.now { border-top-color: var(--primary); }
.timeline .s.now::before { content: ""; position: absolute; top: -8px; left: 8px; width: 13px; height: 13px; border: 3px solid var(--primary); border-radius: 50%; background: var(--surface); }
.timeline .s.fail { border-top-color: var(--danger); }
.timeline .s b { display: block; font-size: var(--fs-13); font-weight: 600; }
.timeline .s span { display: block; color: var(--muted); font-size: var(--fs-12); }
@media (max-width: 720px) {
  .timeline { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .timeline .s { padding: 6px 12px; border-top: 0; border-left: 3px solid var(--ring); }
  .timeline .s.done, .timeline .s.now { border-left-color: var(--primary); }
  .timeline .s.now::before { top: 6px; left: -8px; }
}

/* ================================================================== notices */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); color: var(--ink-2); font-size: var(--fs-14); line-height: 1.5; }
.notice > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
.notice b { color: var(--ink); font-weight: 600; }
.notice.info { background: var(--primary-soft); border-color: var(--primary-line); }
.notice.info > svg { color: var(--primary); }
.notice.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.notice.warn > svg { color: var(--warn); }
.notice.danger { background: var(--danger-soft); border-color: var(--danger-line); }
.notice.danger > svg { color: var(--danger); }
.notice.ok { background: var(--ok-soft); border-color: var(--ok-line); }
.notice.ok > svg { color: var(--ok); }

/* ================================================================== addresses and avatars */
.addr { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-13); letter-spacing: 0; }
.addr a { color: inherit; }
.addr a:hover { color: var(--primary); }
.addr button { display: inline-grid; place-items: center; padding: 2px; border: 0; border-radius: 5px; background: transparent; color: var(--faint); cursor: pointer; }
.addr button:hover { background: var(--bg-3); color: var(--ink); }
.addr svg { width: 13px; height: 13px; }
.avatar { display: grid; place-items: center; flex: none; overflow: hidden; border: 1px solid var(--ring); border-radius: 14px; background: var(--surface-2); }
.avatar img, .avatar svg { width: 100%; height: 100%; object-fit: cover; }
.avatar.s16 { width: 16px; height: 16px; border-radius: 5px; }
.avatar.s18 { width: 18px; height: 18px; border-radius: 6px; }
.avatar.s20 { width: 20px; height: 20px; border-radius: 6px; }
.avatar.s24 { width: 24px; height: 24px; border-radius: 7px; }
.avatar.s40 { width: 40px; height: 40px; border-radius: 11px; }
.avatar.s48 { width: 48px; height: 48px; border-radius: 12px; }
.avatar.s56 { width: 56px; height: 56px; border-radius: 14px; }
.avatar.s64 { width: 64px; height: 64px; border-radius: 16px; }
.avatar.s88 { width: 88px; height: 88px; border-radius: 20px; }
.glyph .bond { stroke: var(--ink-2); stroke-linecap: round; }
.glyph .atom { stroke: var(--surface); }

/* ================================================================== documents: a journal page */
.doc { max-width: 70ch; color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.65; letter-spacing: 0; overflow-wrap: anywhere; font-variant-numeric: oldstyle-nums proportional-nums; }
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { margin: 1.5em 0 .5em; font-family: var(--serif); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.doc h1 { font-size: 1.55em; } .doc h2 { font-size: 1.3em; } .doc h3 { font-size: 1.12em; } .doc h4, .doc h5, .doc h6 { font-size: 1em; }
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }
.doc p { margin: 0 0 1em; }
.doc ul, .doc ol { margin: 0 0 1em; padding-left: 1.4em; }
.doc li { margin: .25em 0; }
.doc li::marker { color: var(--muted); }
.doc blockquote { margin: 0 0 1em; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--science-line); color: var(--ink-2); font-style: italic; }
.doc code { padding: .06em .34em; border: 1px solid var(--ring); border-radius: var(--r-chip); background: var(--bg-2); font-family: var(--mono); font-size: .8em; font-variant-numeric: normal; }
.doc pre { margin: 0 0 1em; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); font-size: 14px; line-height: 1.55; }
.doc pre code { padding: 0; border: 0; background: transparent; font-size: inherit; }
.doc table { display: block; max-width: 100%; margin: 0 0 1.2em; overflow-x: auto; border-collapse: collapse; font-family: var(--sans); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.doc th, .doc td { padding: 7px 12px; border-bottom: 1px solid var(--ring); text-align: left; vertical-align: top; }
.doc th { border-bottom-color: var(--ring-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.doc a { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.doc a:hover { text-decoration-color: currentColor; }
.doc hr { margin: 1.6em 0; border-top-color: var(--ring); }
.doc strong { font-weight: 600; }
.doc s, .doc del { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.doc img { max-width: 100%; height: auto; border-radius: var(--r-row); }
.doc.compact { font-size: 16px; line-height: 1.6; }
/* margin notes beside a document ("Version 3, adopted by proposal #12 on 22 Oct 2026") */
.doc-note { color: var(--muted); font-size: var(--fs-13); line-height: 1.5; }
.doc-note b { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------------ diff (constitution versions) */
.diff { overflow: hidden; border: 1px solid var(--ring); border-radius: var(--r-row); font-family: var(--serif); font-size: 16px; line-height: 1.6; }
.diff .l { padding: 2px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff .add { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.diff .add::before { content: "+ "; color: var(--ok); font-family: var(--mono); }
.diff .del { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.diff .del::before { content: "− "; display: inline-block; color: var(--danger); font-family: var(--mono); text-decoration: none; }
.diff .same { color: var(--muted); }

/* ------------------------------------------------------------------ code and raw data */
.code-block { max-height: 260px; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--bg-2); color: var(--ink-2);
  font-family: var(--mono); font-size: var(--fs-12); line-height: 1.55; white-space: pre-wrap; word-break: break-all; }

/* ================================================================== toasts, modals, popovers */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 36px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ring); border-left: 3px solid var(--ring-2); border-radius: var(--r-row);
  background: var(--surface); box-shadow: var(--shadow-pop); font-size: var(--fs-14); }
.toast .t-title { font-weight: 600; }
.toast .t-body { color: var(--muted); font-size: var(--fs-13); overflow-wrap: anywhere; }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--danger); }
.toast.pending { border-left-color: var(--primary); }
.toast .x { margin-left: auto; padding: 0 2px; border: 0; background: transparent; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; }
.toast .x:hover { color: var(--ink); }
.spinner { width: 16px; height: 16px; flex: none; border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; padding: clamp(24px, 10vh, 96px) 16px 16px; overflow-y: auto; background: var(--scrim); }
.modal { width: min(580px, 100%); border: 1px solid var(--ring); border-radius: var(--r-window); background: var(--surface); box-shadow: var(--shadow-pop); }
.modal.wide { width: min(880px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 6px; }
.modal-head h2 { font-size: var(--fs-17); }
.modal-body { padding: 8px 18px 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 18px 16px; border-top: 1px solid var(--ring); }
.pop { position: fixed; z-index: 70; width: max-content; min-width: 260px; max-width: min(360px, calc(100vw - 24px)); padding: 14px; border: 1px solid var(--ring); border-radius: var(--r-window);
  background: var(--surface); box-shadow: var(--shadow-pop); }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pop-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pop .addr { font-size: var(--fs-12); word-break: break-all; }
@media (prefers-reduced-motion: no-preference) {
  .modal { animation: rise .18s ease-out; }
  .pop { animation: rise .15s ease-out; }
  @keyframes rise { from { transform: translateY(6px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ================================================================== undeployed mode: before the operator deploys the contracts */
.undeployed { display: flex; align-items: flex-start; gap: 20px; max-width: 880px; padding: 28px; }
.undeployed-mark { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px solid var(--warn-line); border-radius: 14px; background: var(--warn-soft); color: var(--warn); }
.undeployed-mark .ic { width: 24px; height: 24px; }
.undeployed-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.undeployed-text h2 { font-size: var(--fs-24); letter-spacing: -0.02em; }
.undeployed-text p { max-width: 66ch; margin: 0; color: var(--ink-2); }
.undeployed-text p.small { color: var(--muted); }
.undeployed-text .code-chip { white-space: nowrap; }
@media (max-width: 560px) { .undeployed { flex-direction: column; gap: 14px; padding: 20px; } .undeployed-text h2 { font-size: var(--fs-20); } }

/* ================================================================== skeletons and empty states */
.skel { min-height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .skel { animation: shimmer 1.4s ease-in-out infinite; } }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; color: var(--muted); text-align: center; }
.empty > svg { width: 44px; height: 44px; color: var(--faint); }
.empty h3 { color: var(--ink); }
.empty p { max-width: 52ch; margin: 0; }

/* ================================================================== wizard steps, drop zone, kind picker */
.steps { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: step; }
.steps button { flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--r-row);
  background: var(--surface); text-align: left; cursor: pointer; counter-increment: step; }
.steps button::before { content: "Step " counter(step); color: var(--muted); font-size: var(--fs-12); }
.steps button b { font-size: var(--fs-14); font-weight: 600; }
.steps button:hover { border-color: var(--ring-2); }
.steps button[aria-current="step"] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.steps button.done b::after { content: " ✓"; color: var(--ok); }
.drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px; border: 1.5px dashed var(--ring-2); border-radius: var(--r-window); background: var(--bg-2); cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--primary); background: var(--primary-soft); }
/* the file input stays focusable (Tab, then Space or Enter opens the picker) but is not drawn */
.drop input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.drop:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.drop-thumb { flex: none; }
.drop-thumb img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.kinds { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.kind { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface); color: inherit; text-align: left; cursor: pointer; }
.kind:hover { border-color: var(--ring-2); background: var(--surface-2); text-decoration: none; }
.kind[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.kind .k-top { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--fs-15); font-weight: 600; }
.kind .k-top svg { width: 18px; height: 18px; color: var(--primary); }
.kind p { margin: 0; color: var(--muted); font-size: var(--fs-13); }


/* ================================================================== directory: toolbar and DAO cards */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.toolbar-search { position: relative; flex: 1 1 320px; max-width: 560px; }
.toolbar-search > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; color: var(--faint); transform: translateY(-50%); pointer-events: none; }
.toolbar-search .input { padding-left: 36px; min-height: 42px; }
.toolbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.dao-card { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 18px; color: inherit; transition: border-color .15s, background-color .15s; }
.dao-card:hover { border-color: var(--ring-2); background: var(--surface-2); color: inherit; text-decoration: none; }
.dao-card-top { display: flex; align-items: center; gap: 14px; }
.dao-card-name { display: flex; flex-direction: column; gap: 2px; }
.dao-card .t { color: var(--ink); font-size: var(--fs-15); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.dao-card .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--ring); }
.dao-card .facts div { display: flex; flex-direction: column-reverse; gap: 1px; min-width: 0; }
.dao-card .facts dt, .dao-card .facts span { color: var(--muted); font-size: var(--fs-12); }
.dao-card .facts dd, .dao-card .facts b { margin: 0; color: var(--ink); font-size: var(--fs-15); font-weight: 600; font-variant-numeric: tabular-nums; }
/* the landing hero (version 1 layout, restyled by the landing part) */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero h1 { max-width: 15ch; font-size: var(--fs-display); font-weight: 650; line-height: 1.02; letter-spacing: -0.035em; }
.hero .lede { margin: 18px 0 24px; }
@media (max-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .ghost { grid-column: 1 / -1; }
}
.live-list .item { align-items: center; }

/* ================================================================== footer: COLLAB and the GenesisL1 ecosystem */
.site-foot { border-top: 1px solid var(--ring); background: var(--bg-2); color: var(--muted); font-size: var(--fs-14); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 40px 56px; padding-block: 44px 34px; }
.foot-brand { display: flex; flex-direction: column; gap: 12px; }
.foot-brand .brand { font-size: 16px; }
.foot-brand .brand-mark { width: 28px; height: 28px; }
.foot-brand p { max-width: 44ch; margin: 0; line-height: 1.6; }
.foot-social { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 0; padding: 0; list-style: none; }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; }
.foot-col h2 { margin-bottom: 12px; color: var(--ink); font-size: var(--fs-13); font-weight: 600; }
.foot-col ul { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.foot-col a, .foot-social a { color: var(--muted); }
.foot-col a:hover, .foot-social a:hover { color: var(--ink); }
.foot-col .ext, .foot-social .ext { display: inline-block; width: 11px; height: 11px; margin-left: 5px; color: var(--faint); vertical-align: -1px; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 18px 30px; border-top: 1px solid var(--ring); font-size: var(--fs-13); }
.foot-legal p { margin: 0; }
.foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.foot-meta a { color: var(--muted); }
.foot-meta .link-btn { text-decoration: none; }
.foot-meta a:hover, .foot-meta .link-btn:hover { color: var(--ink); text-decoration: underline; }
.foot-meta .mono { font-size: var(--fs-12); }
.foot-meta span:empty { display: none; }
@media (max-width: 1279px) { .foot-top { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
@media (max-width: 900px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================== swap card */
.swap { max-width: 480px; margin: 0 auto; }
.swap-field { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--ring); border-radius: var(--r-window); background: var(--bg-2); }
.swap-field .amt { width: 100%; padding: 0; border: 0; background: transparent; font-size: var(--fs-24); font-weight: 500; font-variant-numeric: tabular-nums; }
.swap-field .amt:focus { outline: none; }
.swap-flip { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin: -10px auto; border: 1px solid var(--ring); border-radius: 12px; background: var(--surface); cursor: pointer; }
.token-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border: 1px solid var(--ring); border-radius: var(--r-pill); background: var(--surface); font-weight: 600; white-space: nowrap; cursor: pointer; }
.token-btn .tk { width: 22px; height: 22px; border-radius: 50%; }

/* ================================================================== cookie notice
   Small and quiet, like genesisl1.com's: a compact card at the bottom of the content, one or two
   lines and one button; with analytics configured, Accept and Decline at the same size. No overlay. */
.cookie-card { position: fixed; left: calc(var(--side) + 16px); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 85; display: flex; align-items: center; gap: 12px 16px;
  width: min(480px, calc(100vw - var(--side) - 32px)); padding: 10px 10px 10px 16px; border: 1px solid var(--ring); border-radius: var(--r-row); background: var(--surface);
  box-shadow: var(--shadow-pop); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.cookie-card.show { opacity: 1; transform: none; }
.cookie-card p { flex: 1 1 auto; min-width: 0; margin: 0; }
.cookie-card a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; flex: none; gap: 6px; }
.cookie-card.ask { flex-wrap: wrap; }
.cookie-card.ask .cookie-actions { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 1023px) { .cookie-card { left: max(12px, env(safe-area-inset-left)); width: min(480px, calc(100vw - 24px)); } }
/* phones: two lines of text beside its button (the question keeps its two buttons on a row of their own) */
@media (max-width: 480px) {
  .cookie-card { left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px);
    gap: 8px 10px; padding: 8px 8px 8px 12px; font-size: 12.5px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) { .cookie-card { transition: none; } }

/* ================================================================== print */
@media print {
  .alpha-strip, .side, .topbar, .announce, .site-foot, .ws-nav, .ws-actions, .ws-me, .ws-aside, .btn, .tabs, .toasts, .cookie-card, .skip-link { display: none !important; }
  body { display: block; background: #fff; color: #000; }
  .ws { display: block; }
  .card { border: 0; }
}

/* ================================================================== utilities */
.ic { width: 18px; height: 18px; flex: none; }
.pt-xl { padding-top: 44px; }
.mt-sm { margin-top: 8px; }
.mt { margin-top: 16px; }
.mt-lg { margin-top: 28px; }
.mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }
.right { text-align: right; }
.center { text-align: center; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.relative { position: relative; }
.yes-t { color: var(--yes); } .abstain-t { color: var(--muted); } .no-t { color: var(--no); } .veto-t { color: var(--veto); }
.ok-t { color: var(--ok); } .danger-t { color: var(--danger); } .warn-t { color: var(--warn); } .science-t { color: var(--science); }