/* Ported verbatim from the Atrium XBT Claude Artifact
   2026-09-14, for Step 4 of
   standalone-dashboard-scoping.md. No visual changes -- this is a straight
   lift so the live dashboard looks identical to the original artifact. */
:root {
  color-scheme: light;
  --bg: #E4E1D6;
  --surface: #EFECE2;
  --surface-2: #F7F4EA;
  --ink: #262220;
  --ink-muted: #696257;
  --line: #C9C3B4;
  --line-strong: #B6AF9C;
  --accent: #994E29;
  --accent-soft: #C97A4A;
  --accent-ink: #FBF3EC;
  --good: #3F6B3F;
  --bad: #9C3B33;
  --cat-1: #1394d2;
  --cat-2: #dd6b14;
  --cat-3: #007352;
  --cat-4: #876522;
  --cat-5: #6f2f60;
  --cat-6: #1e1e67;
  --cat-7: #643db7;
  --div-neg: #e34948;
  --hm-ink-dark: #1d1a17;
  --hm-ink-light: #ffffff;
  --ember-0: #F3E4CE;
  --ember-1: #E7B583;
  --ember-2: #CE8A4E;
  --ember-3: #A6552C;
  --ember-4: #4A1C0D;
  --control-border: #887E64; --surface-raised: #F7F4EA; --shadow-rgb: 38 34 32;
  --font-display: "Fraunces", Georgia, "Iowan Old Style", serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #171512;
    --surface: #211E19;
    --surface-2: #2A251F;
    --ink: #ECE6D8;
    --ink-muted: #A79E8D;
    --line: #38332C;
    --line-strong: #4A4338;
    --accent: #D98A52;
    --accent-soft: #E8A876;
    --accent-ink: #2A1B10;
    --good: #7FA06B;
    --bad: #CC766C;
    --cat-1: #06c2ff;
    --cat-2: #c37c3f;
    --cat-3: #8dd88e;
    --cat-4: #e0bc08;
    --cat-5: #fb3a9c;
    --cat-6: #f4e680;
    --cat-7: #6e7fff;
    --div-neg: #e66767;
    --ember-0: #3A2E22;
    --ember-1: #6B4426;
    --ember-2: #A6552C;
    --ember-3: #E0913F;
    --ember-4: #FBDFC0;
    --control-border: #7B6F5D; --surface-raised: #342E26; --shadow-rgb: 0 0 0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171512;
  --surface: #211E19;
  --surface-2: #2A251F;
  --ink: #ECE6D8;
  --ink-muted: #A79E8D;
  --line: #38332C;
  --line-strong: #4A4338;
  --accent: #D98A52;
  --accent-soft: #E8A876;
  --accent-ink: #2A1B10;
  --good: #7FA06B;
  --bad: #CC766C;
  --cat-1: #06c2ff;
  --cat-2: #c37c3f;
  --cat-3: #8dd88e;
  --cat-4: #e0bc08;
  --cat-5: #fb3a9c;
  --cat-6: #f4e680;
  --cat-7: #6e7fff;
  --div-neg: #e66767;
  --ember-0: #3A2E22;
  --ember-1: #6B4426;
  --ember-2: #A6552C;
  --ember-3: #E0913F;
  --ember-4: #FBDFC0;
    --control-border: #7B6F5D; --surface-raised: #342E26; --shadow-rgb: 0 0 0;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  padding: 0 20px;
}
.wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding-block: 32px 64px;
}

/* ---------- main navigation: labelled icon rail (2026-10-08 redesign; labels 2026-10-10) ----------
   Markup from app/site_nav.py, behaviour in side_nav.js. A 96px rail with
   each destination's name under its icon, always shown. Under 768px it becomes a
   bottom bar (four destinations + More). Not the same thing as index.html's
   own .tab-bar (the dashboard's sub-tabs). */
:root { --side-w: 96px; }
.side-nav {
  /* 62: above the network banner (.nb, 61) and the emergency banner (.eb, 60), so the slim menu's
     hover labels show over them, not under (2026-10-10). */
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 62;
  width: var(--side-w);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line);
}
:root[data-layout] body:has(.side-nav) { padding-left: calc(var(--side-w) + 32px); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.site-tab, .side-more {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink-muted); font: 500 14px/1.2 var(--font-body);
  text-decoration: none; cursor: pointer; text-align: left;
}
.side-ico { width: 20px; height: 20px; flex: none; }
.site-tab:hover, .side-more:hover { color: var(--ink); background: var(--surface-2); }
.site-tab.is-active { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.site-tab.is-active .side-ico { color: var(--accent); }
.side-more { display: none; }
/* A labelled rail (2026-10-10, Matthew): the name sits under every icon, so nothing is
   hover-only. Replaces the 64px icon-only menu with hover labels and its "Show labels" toggle. */
.side-nav .site-tab, .side-nav .side-more {
  flex-direction: column; justify-content: center; gap: var(--space-1);
  min-height: 56px; padding: var(--space-2) 0;
  font-size: 12px; text-align: center;
}
.side-nav .side-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .side-nav {
    top: auto; right: 0; width: auto;
    flex-direction: row; flex-wrap: nowrap; gap: 0; align-items: stretch;
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line-strong); box-shadow: var(--elev-4); overflow: visible;
  }
  :root[data-layout] body:has(.side-nav) { padding-left: 16px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .side-list { display: contents; }
  .side-list > li { flex: 1 1 0; min-width: 0; display: flex; order: 3; }
  .side-list > li:not([data-primary]) { display: none; order: 1; }
  .site-tab, .side-more {
    flex: 1 1 0; min-width: 0; min-height: 56px; padding: var(--space-1);
  }
  .side-more { display: flex; order: 3; }
  .site-tab, .side-more { padding-inline: 0; }
  /* things pinned to the bottom of the screen sit above the bar */
  .lay-toolbar, .ms-prompt { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .site-tab.is-active { box-shadow: inset 0 3px 0 var(--accent); }
  /* More: the other destinations open as rows above the bar */
  .side-nav[data-more="open"] { flex-wrap: wrap; }
  .side-nav[data-more="open"] .side-list > li:not([data-primary]) { display: flex; flex: 0 0 25%; }
  /* a real basis, or a zero-width item squeezes onto the divider's line */
  .side-nav[data-more="open"] .side-list > li[data-primary],
  .side-nav[data-more="open"] .side-more { flex: 1 1 18%; }
  .side-nav[data-more="open"]::before { content: ""; flex-basis: 100%; height: 0; order: 2; border-top: 1px solid var(--line); margin: var(--space-1) 0; }
  .side-more[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
}

/* ---------- logo (2026-10-10, app/static/brand/ logo kit) ----------
   site_nav.py puts the A mark at the top of the rail and the small wordmark above the
   page for phones; each is two <img>s, one per theme, and only the matching one shows. */
.brand-on-light { display: none; }
:root[data-theme="light"] .brand-on-dark { display: none; }
:root[data-theme="light"] .brand-on-light { display: block; }
.side-brand, .site-brand-top { text-decoration: none; border-radius: var(--r-sm); }
.side-brand { display: flex; align-items: center; justify-content: center; min-height: 56px; margin-bottom: var(--space-2); }
.side-brand img { width: auto; height: 40px; }
.site-brand-top { display: none; }
.site-brand-top img { width: auto; height: 28px; }
@media (max-width: 767px) {
  .side-brand { display: none; }
  .site-brand-top { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-3); }
}

/* ---------- the pinned top (2026-10-12, Matthew: "should always show") ----------
   Title, BTC price, ticker and tabs stay at the top of the window while the dashboard scrolls.
   The bell, gear and their panels are fixed in place once it is pinned (sticky_top.js sets
   html.dash-stuck), so they stay beside it; above that point they keep their usual spot. */
.dash-top { position: sticky; top: 0; z-index: 40; background: var(--bg); padding-top: var(--space-3); margin-top: calc(-1 * var(--space-3)); }
.dash-top-mark { height: 0; }
:root.dash-stuck:not([data-layout="midnight"]) :is(.ui-gear, .ui-bell, .ui-menu, .al-panel) {
  position: fixed; margin-top: 0;
}
/* Midnight puts the masthead and tabs in its sidebar column: not pinned there. */
:root[data-layout="midnight"] .dash-top { display: contents; }

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.masthead h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.masthead .kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.wallet-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 8px;
  vertical-align: middle;
}
.live-dot.stale { background: var(--bad); }
.wallet-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.wchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
}
.wchip:hover { border-color: var(--accent-soft); }
.wchip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.wchip .copy-ico {
  opacity: 0.6;
  font-size: 12px;
}
/* A tracked wallet our ord index hasn't read yet (app.js pendingNote, 2026-10-12). */
.wchip .wchip-note { font-family: var(--font-body); font-size: 12px; font-style: italic; }
.card-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-wallet-tag {
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px 4px;
}
#btcPrice {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
}

/* ---------- summary ---------- */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 28px;
}
.summary > div {
  background: var(--surface);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-value.hero { font-size: clamp(30px, 4.4vw, 40px); color: var(--accent); }
.stat-sub { font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 4px;
  background: var(--surface-2);
  gap: 2px;
}
.toggle button {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- tabs ---------- */
.tab-bar {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  margin-top: 4px;
  position: relative;
}
.tab-btn {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 8px 2px 12px;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.tab-btn[aria-selected="true"] { color: var(--ink); }
.tab-panel[hidden] { display: none; }

/* The active tab's highlight, drawn once here rather than by each button,
   so switching tabs can slide and resize it instead of snapping it into
   place. tab-indicator.js only ever measures the selected .tab-btn and
   publishes its box as --tab-x/-y/-w/-h; every theme below turns that box
   into its own shape (thin underline, filled block, sidebar row) with
   ordinary CSS, so the geometry and the look stay decoupled. */
.tab-indicator {
  position: absolute;
  left: var(--tab-x, 0px);
  width: var(--tab-w, 0px);
  top: calc(var(--tab-y, 0px) + var(--tab-h, 0px) - 2px);
  height: 2px;
  background: var(--tab-indicator-color, var(--accent));
  border-radius: var(--r-2xs);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition:
    left 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    top 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.28s ease,
    opacity 0.15s ease;
}
.tab-indicator.tab-indicator-instant { transition: none; }

/* ---------- section headers ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 40px 0 16px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}
.section-head .note { font-size: 12px; color: var(--ink-muted); }
.section-head h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.col-panel > .section-head:first-child { margin-top: 0; }

/* ---------- dual column overview ---------- */
.dual-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.col-panel { min-width: 0; }
/* The Mempool tab's charts zone (2026-10-13): full width above the columns,
   spaced from them by the same gap the cards keep between themselves. */
.mp-charts { margin-bottom: 20px; }
/* The block view is the tallest chart: it spans two rows so protocol mix and
   protocol share by block stack beside it instead of leaving a hole. */
@media (min-width: 761px) {
  [data-grid="mempoolCharts"] > [data-card="blockView"] { grid-row: span 2; }
}
@media (max-width: 980px) {
  .dual-col { grid-template-columns: 1fr; }
}

/* ---------- Holdings and Collections views (2026-10-09, UI redesign part 2, Kombai "Ledgerly";
   holdings_view.js) ---------- */
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.view-head[hidden] { display: none; }
.view-head h2 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
#panelOverview [data-view-out] { display: none !important; }
#panelOverview[data-view] .since, #panelOverview[data-view] .intro { display: none; }
#panelOverview:not([data-view="collections"]) [data-view-only="collections"] { display: none; }
.view-head .wl-btn { text-decoration: none; }
/* the table replaces the old bars; it keeps their colours and their sort control */
.hv-host { display: block; }
.hv-table { font-size: 13px; }
.hv-table thead th { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.hv-table tbody th, .hv-table tfoot th { font-weight: 600; text-align: left; }
.hv-table tbody tr:hover > * { background: var(--surface-2); }
.hv-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.hv-name .bar-dot { margin-right: 8px; vertical-align: middle; }
.hv-name .coll-link { color: var(--ink); text-decoration: none; }
.hv-name .coll-link:hover { color: var(--accent); text-decoration: underline; }
.hv-main { display: block; color: var(--ink); }
.hv-sub { display: block; font-size: 12px; color: var(--ink-muted); }
/* The value ladder's source under a value (2026-10-17): wraps rather than widen the column. */
.hv-src { white-space: normal; max-width: 16ch; margin-left: auto; }
.hv-chg.up { color: var(--good); }
.hv-chg.down { color: var(--bad); }
.hv-share { min-width: 112px; }
.hv-bar { display: inline-block; width: 64px; height: 8px; margin-right: 8px; border-radius: var(--r-2xs); background: var(--surface-2); vertical-align: middle; overflow: hidden; }
.hv-bar-fill { display: block; height: 100%; border-radius: var(--r-2xs); }
.hv-pct { display: inline-block; min-width: 4ch; }
.hv-total th, .hv-total td { border-bottom: 0; border-top: 1px solid var(--line-strong); font-weight: 600; }
/* The wallet pop-up's preview strip under each Holdings row (2026-10-13, holdings_view.js previews):
   lined up under the collection's name (no colour dot before it since 2026-10-19). */
.hv-name .hv-strip { margin-left: 0; }
.cv-tools[hidden] { display: none; }
.cv-tools { display: flex; gap: 8px; margin: 0 0 12px; }
.cv-filter { flex: 1; max-width: 320px; }
.cv-table tr.cv-mine .cv-held { color: var(--accent); font-weight: 600; }
.cv-table th .sg-sort { color: inherit; }
/* a card fed by an old snapshot says so, in words and with an outline, not colour alone */
.stale-chip { display: inline-block; padding: 0 8px; border: 1px solid var(--trend, var(--line-strong)); border-radius: var(--r-pill); color: var(--ink); font-size: 12px; white-space: nowrap; }
.stale-chip[hidden] { display: none; }
@media (max-width: 720px) {
  .hv-table .hv-floor, .hv-table .hv-vol, .cv-table .cv-buyers, .cv-table .cv-sales { display: none; }
  .hv-bar { width: 40px; }
  .hv-share { min-width: 0; }
  .view-head h2 { font-size: 20px; }
}
@media (max-width: 480px) {
  .hv-name .hv-strip { margin-left: 0; }
  /* 8-decimal BTC (2026-10-19) needs the room on a phone: the share keeps its percentage, the
     value its money, and the bar and the value's source line step aside */
  .hv-table .hv-bar, .hv-table .hv-src, .hv-table .hv-chg { display: none; }   /* 7d is in the row's pop-up */
}
@media (max-width: 420px) {
  .hv-table .hv-held { display: none; }
  .hv-name { max-width: 160px; }
  .hv-src { max-width: 10ch; }
}

/* ---------- signing pages: one step layout (2026-10-09, UI redesign part 2; sign_steps.js) ----------
   Only the frame: a step bar that stays in view, and the current step's card outlined. The cards'
   content, the review and every control are the pages' own and unchanged. */
.sign-steps { position: sticky; top: 0; z-index: 20; margin: 0 0 16px; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.sign-steps ol { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
/* position: relative (SEO audit T-13, 2026-10-17): the visually hidden step labels below are absolutely positioned;
   without it they were placed against the page, outside the bar's own scroll box, and widened the page at 390 px. */
.sign-steps li { flex: 0 0 auto; }
.sign-steps a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 4px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--ink-muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.sign-steps a:hover { color: var(--ink); background: var(--surface-2); }
.sign-step-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sign-steps li[data-state="open"] a { color: var(--ink); }
.sign-steps li[data-state="current"] a { color: var(--ink); background: var(--surface); border-color: var(--line-strong); font-weight: 600; }
.sign-steps li[data-state="current"] .sign-step-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sign-steps li[data-state="later"] a { cursor: default; }
.sign-steps li[data-state="later"] a:hover { background: none; color: var(--ink-muted); }
.sign-steps li[data-state="later"] .sign-step-n { border-style: dashed; }
.sign-flow .sign-step { scroll-margin-top: 72px; }
.sign-flow .sign-step.is-current { border-color: var(--line-strong); box-shadow: var(--elev-1); }
@media (pointer: coarse) { .sign-steps a { min-height: 44px; } }
@media (max-width: 720px) {
  .sign-steps ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}
@media (max-width: 560px) {
  .sign-steps li:not([data-state="current"]) .sign-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sign-steps li:not([data-state="current"]) a { padding-right: 4px; }
}

/* ---------- collection bars ---------- */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bars-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -8px 0 12px;
}
.bars-controls label {
  font-size: 12px;
  color: var(--ink-muted);
}
.bars-controls select {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px 8px;
  cursor: pointer;
}
.bars-controls select:hover { border-color: var(--accent-soft); }
.bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.bar-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.bar-name .count {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-muted);
}
.bar-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.bar-value-sats,
.card-value-sats {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
}

/* ---------- protocol mix ---------- */
.protocol-bar {
  display: flex;
  height: 26px;
  gap: 2px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
}
.protocol-seg {
  /* Left as a `width` transition on purpose (#impeccable optimize,
     2026-09-28 audit): these are flex siblings in a stacked bar, and
     their widths ARE the layout -- one segment growing is what makes its
     neighbors shrink to make room. A transform-based fill (see
     .meter-fill just above) only resizes the element itself and would
     leave the other segments' widths stale until the next full repaint,
     which is a worse bug than the reflow this transition already costs. */
  height: 100%;
  transition: width 0.4s ease;
}
.protocol-seg:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.protocol-seg:last-child { border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.protocol-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin-top: 12px;
}
.proto-item { display: flex; align-items: center; gap: 8px; }
.proto-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.proto-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.proto-detail {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------- leading markets ---------- */
/* A class that sets `display` beats the browser's own `[hidden]` rule, so
   each of these would sit on the page as an empty strip whenever its
   panel has nothing to show -- which is exactly the state a public
   instance with no wallets is in. Found by tests/test_pages.py rather
   than by looking, after the same bug turned up twice in one day. */
.market-list[hidden], .rune-list[hidden], .collapse-toggle[hidden] { display: none; }
.market-list { display: flex; flex-direction: column; gap: 2px; }
.market-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.market-row:last-child { border-bottom: none; }
.market-name {
  font-size: 13px;
  font-weight: 600;
}
.market-name .count {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 1px;
}
.market-compare { display: flex; gap: 16px; }
.market-src { display: flex; flex-direction: column; align-items: flex-end; }
.src-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.src-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.src-chg { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.src-chg.good { color: var(--good); }
.src-chg.bad { color: var(--bad); }
.market-stats {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------- runes & tokens ---------- */
.rune-list { display: flex; flex-direction: column; gap: 2px; }
.rune-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.rune-row:last-child { border-bottom: none; }
.rune-name {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rune-symbol { font-size: 15px; }
.rune-balance {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 1px;
}
.rune-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.rune-value-sats {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
}
.bar-nodata { font-size: 12px; color: var(--ink-muted); font-style: italic; }

/* ---------- bitmap districts ---------- */
.bitmap-list { display: flex; flex-direction: column; gap: 2px; }
.bitmap-list[hidden] { display: none; }
.bitmap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.bitmap-row:last-child { border-bottom: none; }
.bitmap-name {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.bitmap-wallet {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 1px;
}
.bitmap-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.bitmap-value-sats {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
}
.bitmap-summary {
  font-size: 13px;
  color: var(--ink);
  padding: 2px 0 8px;
}
.bitmap-summary .sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 2px;
  margin-bottom: 8px;
  background: none;
  border: none;
  border-top: 1px dashed var(--line);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}
.collapse-toggle:hover { color: var(--accent); }
.collapse-toggle .chevron {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}
.collapse-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ---------- gallery ---------- */
.gallery-controls[hidden], .gallery-pager[hidden], .gallery[hidden] { display: none; }
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}
.gallery-count {
  font-size: 12.5px;
  color: var(--ink-muted);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.gallery-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.gallery-pager button {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.gallery-pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.gallery-pager button:disabled { opacity: 0.4; cursor: default; }
.gallery-pager #galleryPageLabel {
  font-size: 12.5px;
  color: var(--ink-muted);
  min-width: 96px;
  text-align: center;
}
/* Marketplace landing (marketplace_showcase.js): the gallery's cards, in two short grids. */
.mkt-show { margin: 0 0 32px; }
.mkt-show-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.mkt-show-head h2 { margin: 0; }
.mkt-show-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
.mkt-show-card .card-body { padding: 12px; }
.mkt-show-card .card-footer { flex-wrap: wrap; }
.mkt-show-card .card-value, .mkt-show-card .card-footer .wl-btn { white-space: nowrap; }
.mkt-show-more { margin-top: 16px; }
button.card-media.mkt-show-media { width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: inherit; cursor: pointer; flex-direction: column; gap: 8px; }
button.card-media.mkt-show-media:hover { background: var(--surface-raised); }
div.card-media.mkt-show-media { flex-direction: column; gap: 8px; }
.mkt-show-card .card-id { overflow-wrap: anywhere; }
.mkt-show-card h3.card-name { margin: 0; }
.mkt-part { margin: 8px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-media {
  aspect-ratio: 1;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.card-media.interactive {
  --tint: var(--ink-muted);
  background:
    repeating-linear-gradient(45deg, var(--tint) 0, var(--tint) 1.5px, transparent 1.5px, transparent 11px),
    color-mix(in srgb, var(--tint) 14%, var(--surface-2));
  flex-direction: column;
  gap: 8px;
}
/* A live HTML inscription (app.js livePreview): looks, doesn't take taps,
   so the link over the card-media (.card-open) still opens the viewer. */
.card-media iframe.card-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; pointer-events: none; }
.card-media .plate-number {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 4px 8px;
}
.card-media .plate-caption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface);
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.card-body {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.card-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}
.card-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}
/* The inscription number, its own field under the item's name (2026-10-13). */
.card-number {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: -4px;
}
.card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.card-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--accent);
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.card-value.nodata { color: var(--ink-muted); font-weight: 400; font-style: italic; font-size: 12px; }
.rarity-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  white-space: nowrap;
}
.rarity-badge.hot { color: var(--accent); border-color: var(--accent-soft); }
.card-link {
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: none;
}
.card-link:hover { color: var(--accent); }

/* ---------- mempool pulse ---------- */
.mempool-caveat {
  font-size: 12px;
  color: var(--ink-muted);
  max-width: 68ch;
  margin: -8px 0 16px;
  line-height: 1.5;
}
.mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 20px;
}
.mini-stats > div {
  background: var(--surface);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mini-stats .stat-value { font-size: 18px; }
.heat-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 20px 16px;
}
.legend-bar {
  height: 8px;
  width: 160px;
  border-radius: var(--r-xs);
  background: linear-gradient(to right, var(--ember-0), var(--ember-1), var(--ember-2), var(--ember-3), var(--ember-4));
}

footer.page-foot {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* "Manage wallets" panel -- added 2026-09-14 so the tracked-wallet list is
   editable from the dashboard itself (a remote viewer's only way in is
   this HTTP port, with no filesystem access -- see app/wallets_store.py). Deliberately plain: it borrows the existing
   palette/tokens rather than introducing new visual language. */
.wallet-manage { margin: 2px 0 16px; }
.wallet-manage-toggle {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  cursor: pointer;
}
.wallet-manage-toggle:hover,
.wallet-manage-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent-soft); }
.wallet-manage-panel {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 16px;
  background: var(--surface);
}
.wallet-manage-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.wallet-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.wallet-manage-row:last-child { border-bottom: none; }
.wallet-manage-row-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wallet-manage-row-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.wallet-manage-row-address {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-manage-empty { font-size: 12px; color: var(--ink-muted); font-style: italic; padding: 4px 2px; }
.wallet-manage-remove {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--bad);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 4px 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.wallet-manage-remove:hover { border-color: var(--bad); }
.wallet-manage-remove.confirm { background: var(--bad); color: var(--accent-ink); border-color: var(--bad); }
.wallet-manage-form { display: flex; flex-wrap: wrap; gap: 8px; }
.wallet-manage-form input {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px 8px;
}
.wallet-manage-form input#walletManageLabel { font-family: var(--font-body); flex: 1 1 120px; }
.wallet-manage-form input#walletManageAddress { flex: 1 1 240px; }
.wallet-manage-form button {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  cursor: pointer;
}
.wallet-manage-form button:hover { background: var(--accent-soft); }
.wallet-manage-error { font-size: 12px; color: var(--bad); margin: 8px 2px 0; }
.wallet-manage-note { font-size: 12px; color: var(--ink-muted); margin: 8px 2px 0; }

@media (max-width: 640px) {
  .summary { grid-template-columns: 1fr 1fr; }
  .mini-stats { grid-template-columns: 1fr 1fr; }
  .masthead { flex-direction: column; align-items: flex-start; }
  .wallet-meta { align-items: flex-start; }
  .bar-row { grid-template-columns: 1fr; row-gap: 4px; }
  .bar-value { text-align: left; }
}

/* ---------- node health (2026-09-16) ---------- */
.node-health .mini-stats { margin-bottom: 8px; }
.node-health .stat-sub { font-size: 12px; }
.node-foot {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  margin: 0 0 20px;
}
/* chain_watch.py's independent-source cross-check line (2026-09-30): same
   look as the node-foot line it sits under, until it disagrees. */
.node-foot.warn { color: var(--bad); }
.meter {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ember-0);
  overflow: hidden;
  margin-top: 4px;
}
.meter-fill {
  /* GPU-composited fill instead of an animated `width` (#impeccable
     optimize, 2026-09-28): the audit's own detector flagged this as a
     layout-triggering transition. Verified safe to convert -- .meter-fill
     is always the sole child of a fixed-size, overflow:hidden .meter
     track (nhMemFill, ordMeterFill; grepped every caller), so nothing
     else's layout depends on its rendered width the way a flex sibling
     (.protocol-seg, left alone on purpose -- see that rule's own comment)
     would. Full-width box, scaled from the left edge instead of resized. */
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 3px;
  background: var(--accent);
  transition: transform 0.4s ease;
}
.meter-fill.warn { background: var(--bad); }

/* ---------- ord status (2026-09-16) ---------- */
.node-health.has-ord .node-foot { margin-bottom: 8px; }
.ord-status {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin: 0 0 20px;
}
.ord-status[hidden] { display: none; }
.ord-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ord-head .stat-label { margin: 0; }
.ord-state {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}
.ord-state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
  background: var(--line-strong);
}
.ord-state.s-good { color: var(--good); }
.ord-state.s-good::before { background: var(--good); }
.ord-state.s-busy { color: var(--accent); }
.ord-state.s-busy::before { background: var(--accent); animation: ord-pulse 1.6s ease-in-out infinite; }
.ord-state.s-bad { color: var(--bad); }
.ord-state.s-bad::before { background: var(--bad); }
@keyframes ord-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ord-state.s-busy::before { animation: none; } }
.ord-status .meter { margin: 8px 0 2px; }
.ord-status .meter[hidden] { display: none; }
.ord-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.ord-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ord-chip {
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  color: var(--ink-muted);
  cursor: default;
}
.ord-mark { font-family: var(--font-mono); }
.ord-chip.c-live { color: var(--good); border-color: var(--good); }
.ord-chip.c-wait { color: var(--ink); }
.ord-chip.c-no { color: var(--bad); border-color: var(--bad); }
.ord-warn {
  font-size: 12px;
  color: var(--bad);
  margin: 8px 0 0;
  line-height: 1.45;
}
.ord-warn[hidden] { display: none; }
.ord-code { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
@media (max-width: 480px) { .ord-code { white-space: normal; overflow-wrap: anywhere; } }

/* ---------- block view (tx grid) ---------- */
.bv-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 16px 12px;
  margin-bottom: 8px;
}
.bv-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.bv-divider {
  flex: none;
  width: 0;
  border-left: 2px dashed var(--line-strong);
  margin: 4px 2px;
}
.bv-tile {
  flex: none;
  width: 92px;
  text-align: left;
  font-family: var(--font-body);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 8px 8px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bv-tile:hover { border-color: var(--accent-soft); }
.bv-tile[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bv-tile:disabled { cursor: default; opacity: 0.55; }
.bv-tile.projected { background: var(--surface); }
.bv-tile.fresh { animation: bv-fresh 2.4s ease-out; }
@keyframes bv-fresh {
  0% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .bv-tile.fresh { animation: none; } }
.bv-tile-title { font-family: var(--font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }
.bv-tile-line { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-tile-fee { font-size: 12px; font-weight: 600; }
.bv-minibar { display: flex; gap: 1px; height: 4px; margin-top: 4px; border-radius: var(--r-2xs); overflow: hidden; background: var(--surface-2); }
.bv-minibar span { height: 100%; }
.bv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 2px 0 8px;
}
.bv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 4px 8px;
  cursor: pointer;
}
.bv-chip[aria-pressed="false"] { color: var(--ink-muted); opacity: 0.6; }
.bv-chip .sw { width: 9px; height: 9px; border-radius: var(--r-2xs); flex: none; }
.bv-chip .ct { font-family: var(--font-mono); font-weight: 400; color: var(--ink-muted); }
.bv-canvas-wrap { position: relative; }
.bv-canvas-wrap canvas { display: block; width: 100%; }
.bv-hover { position: absolute; inset: 0; pointer-events: none; }
#bvCanvas { cursor: pointer; }
.bv-empty {
  padding: 60px 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
}
.bv-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
.bv-scale { display: inline-flex; align-items: center; gap: 8px; }
.bv-scale .legend-bar { width: 110px; }
.bv-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 150px;
  max-width: 240px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px 8px;
  box-shadow: var(--elev-3);
  font-size: 12px;
  color: var(--ink-muted);
}
.bv-tip .tv { display: block; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bv-tip .tr { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bv-tip .tr b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 8px; }
.bv-tip .key { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.bv-tip .mono { font-family: var(--font-mono); font-size: 12px; }
/* the inscription a pending square carries (2026-10-14): fixed size, so the box is placed right before it loads */
.bv-tip .bv-thumb { display: block; width: 64px; height: 64px; margin: 8px 0 4px; object-fit: contain; image-rendering: pixelated; border-radius: var(--r-xs); background: var(--surface-2); }

/* ---------- protocol share by block ---------- */
.hist-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 16px 12px;
}
.hist-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 8px; font-size: 12px; color: var(--ink); }
.hist-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hist-legend i { width: 9px; height: 9px; border-radius: var(--r-2xs); display: inline-block; }
.hist-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.hist-chart .grid { stroke: var(--line); stroke-width: 1; }
.hist-chart .axis-t { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hist-chart .end-l { fill: var(--ink); font-size: 12px; font-family: var(--font-body); font-weight: 600; }
.hist-chart .end-v { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); }
.hist-chart .col-hit { fill: transparent; cursor: default; }
.hist-chart .col-hit:hover, .hist-chart .col-hit:focus { fill: var(--ink); fill-opacity: 0.06; outline: none; }
.hist-table { margin-top: 8px; font-size: 12px; }
.hist-table summary { cursor: pointer; color: var(--ink-muted); }
.hist-table-scroll { max-height: 260px; overflow: auto; margin-top: 8px; }
.hist-table table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.hist-table th, .hist-table td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hist-table th:first-child, .hist-table td:first-child, .hist-table th:nth-child(2), .hist-table td:nth-child(2) { text-align: left; }
.hist-table th { position: sticky; top: 0; background: var(--surface); color: var(--ink-muted); font-weight: 600; }

@media (max-width: 640px) {
  .bv-tile { width: 82px; }
  .node-health .mini-stats { grid-template-columns: 1fr 1fr; }
}
.node-health[hidden], .bv-wrap[hidden], .hist-wrap[hidden], .bv-scale[hidden],
.bv-tip[hidden], .bv-empty[hidden], .mempool-caveat[hidden], .section-head[hidden] { display: none !important; }

/* ---------- mint radar (2026-09-16) ---------- */
.tab-btn[hidden] { display: none; }
.mr-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mr-body { transition: opacity 0.2s ease; }
.mr-body.loading { opacity: 0.55; }
.mr-kpis { margin-bottom: 20px; }
.mr-kpis .stat-value { font-variant-numeric: normal; }
.mr-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 16px 12px;
  min-width: 0;
}
.mr-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mr-card-head h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; }
.mr-card-head .note { font-size: 12px; color: var(--ink-muted); }
.mr-sub { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 16px 0 8px; }
.mr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mr-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
}
.mr-rank { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); text-align: right; }
.mr-name { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.mr-name a, .mr-name span.t { font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-name a:hover { color: var(--accent); }
.mr-name .id { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.mr-val { font-size: 12.5px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mr-val small { font-weight: 400; color: var(--ink-muted); margin-left: 4px; }
.mr-bar { grid-column: 2 / 4; height: 6px; display: flex; align-items: center; }
.mr-bar span { display: block; height: 6px; min-width: 2px; border-radius: 0 3px 3px 0; }
.mr-meta { grid-column: 2 / 4; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-empty-row { font-size: 12px; color: var(--ink-muted); padding: 8px 0; }
.mr-etch .mr-row { grid-template-columns: minmax(0, 1fr) auto; }
.mr-etch .mr-meta { grid-column: 1 / 3; }
.mr-pill { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink-muted); white-space: nowrap; }
.mr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-chip { font-size: 12px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.mr-chip b { font-family: var(--font-mono); font-weight: 600; margin-left: 4px; }
#mrEmpty[hidden], #panelMints .mr-body[hidden] { display: none; }

/* ---------- wallet activity (2026-09-16) ---------- */
.wa-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 16px 8px;
  margin-bottom: 8px;
}
.wa-list { list-style: none; margin: 0; padding: 0; }
.wa-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.wa-row:last-child { border-bottom: none; }
.wa-row.fresh { animation: wa-fresh 3s ease-out; }
@keyframes wa-fresh { 0% { background: var(--surface-2); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .wa-row.fresh { animation: none; } }
.wa-dir {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.wa-main { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-main .wl { font-weight: 400; color: var(--ink-muted); }
.wa-amt { text-align: right; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-sub { min-width: 0; font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-sub a { color: var(--ink-muted); font-family: var(--font-mono); }
.wa-sub a:hover { color: var(--accent); }
.wa-status { text-align: right; white-space: nowrap; }
.wa-pill { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink-muted); }
.wa-pill.pending { border-color: var(--accent); color: var(--accent); }
.wa-pill.dropped { text-decoration: line-through; }
.wa-empty { font-size: 12px; color: var(--ink-muted); padding: 12px 0; }
.wa-balance { margin-top: 8px; font-size: 12px; }
.wa-balance summary { cursor: pointer; color: var(--ink-muted); padding: 8px 0; }
.wa-balance table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.wa-balance th, .wa-balance td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wa-balance th:first-child, .wa-balance td:first-child { text-align: left; }
.wa-balance th { color: var(--ink-muted); font-weight: 600; font-size: 12px; }
#waHead[hidden], #waWrap[hidden] { display: none; }
@media (max-width: 640px) { .wa-balance table { font-size: 12px; } }

/* ---------- watchlist tab (2026-09-16) ---------- */
.wl-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) { .wl-layout { grid-template-columns: 1fr; } }
.wl-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wl-cards { display: flex; flex-direction: column; gap: 8px; }
.wl-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink);
  min-width: 0;
}
.wl-card:hover { border-color: var(--accent-soft); }
.wl-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wl-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wl-name { font: inherit; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-align: left; min-height: 24px; }
.wl-name:hover { color: var(--accent); }
.wl-bal { font-weight: 600; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-addr { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-addr a { color: var(--ink-muted); }
.wl-addr a:hover { color: var(--accent); }
.wl-meta { font-size: 12px; color: var(--ink-muted); }
.wl-note { font-size: 12px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.wl-actions { display: flex; gap: 8px; margin-top: 4px; }
.wl-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 4px 8px;
  cursor: pointer;
}
.wl-btn:hover { border-color: var(--accent-soft); }
.wl-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); padding: 8px 16px; }
.wl-btn.danger.confirm { border-color: var(--bad); color: var(--bad); }
.wl-pending { font-size: 12px; font-weight: 600; color: var(--accent); }
.wl-add, .wl-edit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 16px; }
.wl-add summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.wl-add form, .wl-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wl-edit { margin-top: 8px; padding: 8px; background: var(--surface-2); }
.wl-add label, .wl-edit label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.wl-add input, .wl-add textarea, .wl-edit input, .wl-edit textarea {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px 8px;
  resize: vertical;
  min-width: 0;
}
#wlAddress { font-family: var(--font-mono); font-size: 12px; }
.wl-form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-error { font-size: 12px; color: var(--bad); }
.wl-error[hidden] { display: none; }
.wl-empty { font-size: 12.5px; color: var(--ink-muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 16px; }
.wl-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wl-feed-head h3 { font-family: var(--font-display); font-size: 16px; margin: 0; }
.wl-feed-head select {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 8px; max-width: 60%;
}
.tab-btn { white-space: nowrap; }
@media (max-width: 640px) {
  .tab-bar { gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
}

/* ---------- heatmap (Mint radar) ---------- */
.hm-card { position: relative; margin-bottom: 20px; }
.hm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.hm-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-muted); }
.hm-legend[hidden] { display: none; }
.hm-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hm-legend i { width: 10px; height: 10px; border-radius: var(--r-2xs); display: inline-block; }
.hm-legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-map {
  position: relative;
  height: 440px;
  background: var(--surface);
  overflow: hidden;
  margin: 0 -4px;
}
@media (max-width: 640px) { .hm-map { height: 340px; } }
.hm-group { position: absolute; }
.hm-head {
  position: absolute; left: 0; top: 0; right: 0; height: 22px;
  display: flex; align-items: center; gap: 8px; padding: 0 2px 2px;
  font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden;
}
.hm-key { width: 10px; height: 10px; border-radius: var(--r-2xs); background: var(--hm-fill); flex: none; }
.hm-head-count { flex: none; margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hm-head-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-tile {
  position: absolute;
  background: var(--hm-fill);
  border-radius: 3px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; text-decoration: none;
  line-height: 1.1;
  cursor: default;
}
a.hm-tile { cursor: pointer; }
.hm-tile.other {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px 7px);
}
.hm-tile:hover, .hm-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; z-index: 1; }
.hm-name { font-weight: 600; max-width: 100%; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.hm-count { font-variant-numeric: tabular-nums; margin-top: 2px; }
.hm-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--ink-muted); }
.hm-help { margin-top: 8px; font-size: 12px; line-height: 1.35; }
.hm-map[hidden] { display: none; }

/* The dominant item, lifted out of the treemap so the rest can be drawn
   against a total they can be seen against (heatmap.js). */
.hm-band {
  position: absolute; left: 3px; right: 3px; top: 3px; height: 46px;
  background: var(--hm-fill);
  border-radius: 3px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  text-decoration: none;
  overflow: hidden;
}
a.hm-band { cursor: pointer; }
.hm-band:hover, .hm-band:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.hm-band-name { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-band-count { font-size: 15px; font-variant-numeric: tabular-nums; }
.hm-band-share { margin-left: auto; font-size: 12px; opacity: 0.82; white-space: nowrap; }

/* The drill-down (2026-10-13, heatmap.js): a tile opens into its own
   transactions, one square each, sized by vsize; a breadcrumb leads back. */
.hm-tile.drill, .hm-band.drill { cursor: pointer; }
.hm-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 0 0 8px; font-size: 12px; color: var(--ink-muted);
}
.hm-crumb[hidden] { display: none; }
.hm-crumb-back {
  font: inherit; font-weight: 600; color: var(--ink);
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  padding: 4px 8px; cursor: pointer;
}
.hm-crumb-back:hover { background: var(--surface); }
.hm-crumb-item { color: var(--ink); font-weight: 600; }
.hm-crumb-link { color: var(--ink); }
.hm-crumb-note { margin-left: auto; font-variant-numeric: tabular-nums; }
.hm-tx {
  position: absolute;
  background: var(--hm-fill);
  border-radius: var(--r-2xs);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.hm-tx:hover, .hm-tx:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; z-index: 1; }
.hm-tx-rate { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The opened tile keeps its shape (Peter's notes, 13 Oct): a frame with the
   tile's aspect ratio, in its colour, over the dimmed map (heatmap_layout.js). */
.hm-dim { position: absolute; inset: 0; z-index: 2; background: var(--surface); opacity: 0.8; cursor: zoom-out; }
.hm-frame {
  position: absolute; z-index: 3; box-sizing: border-box;
  border: 2px solid var(--hm-fill); border-radius: var(--r-xs);
  background: var(--surface); box-shadow: var(--elev-3);
  overflow: hidden; transform-origin: 0 0;
}
.hm-frame-head {
  position: absolute; left: 0; right: 0; top: 0; height: 24px;
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: var(--hm-fill); font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden;
}
.hm-frame-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-frame-count { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.hm-frame-body { position: absolute; left: 0; right: 0; top: 24px; bottom: 0; }
@media (max-width: 640px) { .hm-crumb-note { margin-left: 0; flex-basis: 100%; } }

/* ---------- Heatmap, ranked ---------- */
.hm-ranked { position: relative; margin: 0 -4px; }
.hm-ranked[hidden] { display: none; }
.hm-comp { margin: 0 4px 16px; }
.hm-comp-bar { display: flex; gap: 2px; height: 14px; border-radius: 3px; overflow: hidden; }
.hm-comp-seg { display: block; min-width: 3px; border-radius: var(--r-2xs); }
.hm-comp-seg:hover, .hm-comp-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.hm-bars { list-style: none; margin: 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hm-bars li {
  display: grid; grid-template-columns: 116px 1fr 68px; align-items: center; gap: 12px;
  font-size: 12px; padding: 2px 0;
}
.hm-bars li:hover, .hm-bars li:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.hm-bar-name {
  color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px; text-decoration: none;
}
a.hm-bar-name:hover { text-decoration: underline; }
.hm-bar-track { display: block; height: 14px; }
.hm-bar-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.hm-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.hm-axis { position: relative; height: 18px; margin: 8px 4px 0 0; padding-left: 128px; font-size: 12px; color: var(--ink-muted); }
.hm-axis-tick { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.hm-more { font-size: 12px; color: var(--ink-muted); margin: 12px 4px 0; }
@media (max-width: 640px) {
  .hm-bars li { grid-template-columns: 84px 1fr 56px; }
  .hm-axis { padding-left: 96px; }
  .hm-band-name { font-size: 17px; }
}

/* ---------- Signals tab ---------- */
.sg-greeks-card { position: relative; }
.sg-kinds { margin-bottom: 8px; }
.act-feed { list-style: none; margin: 0; padding: 0; max-height: 820px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.act-feed > li { flex: none; }
@media (max-width: 640px) { .act-feed { max-height: 640px; } }
.act-block {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--ink-muted); padding: 8px 2px 0;
  font-variant-numeric: tabular-nums;
}
.act-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.act-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.act-who { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: wrap; }
.act-addr { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
a.act-addr:hover { color: var(--accent); }
.act-addr.plain { font-family: var(--font-body); }
.act-badge {
  font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--ink-muted); white-space: nowrap;
}
.act-badge.b-whale, .act-badge.b-smart { border-color: var(--accent); color: var(--accent); }
/* Which marketplace, pool or desk an address is (2026-09-20, util.js:
   venueChip). Quieter than .act-badge on purpose: it qualifies the address
   beside it rather than announcing anything, and most sales have none, so
   it mustn't make the two that do look like the important ones. */
.venue-chip {
  font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill);
  border: 1px dashed var(--line-strong); color: var(--ink-muted); white-space: nowrap;
  vertical-align: 1px;
  /* A derived label can be a whole sentence ("only sells to 70 different
     wallets"), which would push the rest of the line off a phone. The
     full text is always on the title attribute. */
  display: inline-block; max-width: 15ch; overflow: hidden; text-overflow: ellipsis;
  vertical-align: bottom;
}
.act-badge.b-mine, .act-badge.b-watched { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.act-value {
  font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
}
.act-action { display: flex; align-items: baseline; gap: 8px; font-size: 12px; min-width: 0; }
.act-pill {
  flex: none; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: var(--r-xs);
  border: 1px solid var(--line-strong); color: var(--ink);
}
.act-pill.k-buy { border-color: var(--good); color: var(--good); }
.act-pill.k-sell { border-color: var(--bad); color: var(--bad); }
.act-text { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.act-sub { color: var(--ink-muted); }
.act-tx { margin-left: auto; flex: none; font-size: 12px; color: var(--ink-muted); }
.act-tx:hover { color: var(--accent); }
.act-empty { font-size: 12px; color: var(--ink-muted); padding: 12px 2px; }
.sg-help { margin-top: 12px; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
.sg-help summary { cursor: pointer; }
.sg-help p { margin: 8px 0; }
.sg-help ul { margin: 8px 0; padding-left: 16px; }
.sg-help b { color: var(--ink); }
/* Measurement, not advice (2026-09-25): a always-visible footer, not tucked
   behind a <details> the way .sg-help is -- the point is that a skimming
   reader (or a Paddle reviewer) sees it without opening anything. Kept to
   the same muted, unboxed footer language as .sg-help rather than a boxed
   callout, so four of these on one tab reads as one consistent note, not
   four separate warnings competing for attention. */
.measure-badge { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
.measure-badge b { color: var(--ink); font-weight: 600; }
.measure-badge a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.measure-badge a:hover, .measure-badge a:focus-visible { color: var(--accent); }
.sg-kpis { margin-bottom: 16px; }
.sg-kpis > div { padding: 12px 16px; }
.sg-kpis .stat-value { font-size: 20px; }
.sg-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.sg-controls .note { font-size: 12px; color: var(--ink-muted); }
.sg-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); cursor: pointer; }
/* Greeks: the Columns menu (show or hide each Greek) */
.sg-controls-l { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sg-cols { position: relative; }
.sg-cols > summary {
  list-style: none; cursor: pointer; font-size: 12px; color: var(--ink);
  padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); user-select: none;
}
.sg-cols > summary::-webkit-details-marker { display: none; }
.sg-cols > summary::after { content: " \25BE"; font-size: 12px; color: var(--ink-muted); }
.sg-cols[open] > summary, .sg-cols > summary:hover { border-color: var(--ink-muted); }
.sg-cols > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sg-cols-n { color: var(--ink-muted); }
.sg-cols-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px;
  display: grid; gap: 8px; padding: 8px 12px;
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: var(--elev-3);
}
.sg-cols-menu .sg-check { gap: 8px; }
.sg-cols-sym { min-width: 44px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sg-cols-word { color: var(--ink-muted); }
.sg-cols-all {
  justify-self: start; margin-top: 4px; font: inherit; font-size: 12px; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.sg-table-wrap { overflow-x: auto; margin: 0 -4px; }
/* Profit and loss on a phone (2026-10-12, Matthew): the table scrolls sideways, so the item it is about
   stays pinned on the left while Cost, Now and Gain scroll under it. */
@media (max-width: 767px) {
  .pl-table th:first-child, .pl-table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface); max-width: 144px; box-shadow: 1px 0 0 var(--line);
  }
}
.sg-table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.sg-table th, .sg-table td { text-align: right; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sg-table th.l, .sg-table td.l { text-align: left; }
.sg-table th { position: sticky; top: 0; background: var(--surface); }
.sg-sort { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-muted); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.sg-sort:hover, th[aria-sort] .sg-sort { color: var(--ink); }
.sg-arrow { font-size: 12px; }
.sg-table tr.low td { color: var(--ink-muted); }
.sg-rune { color: var(--ink); font-weight: 600; text-decoration: none; max-width: 210px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sg-rune:hover { color: var(--accent); }
.sg-conf { font-size: 12px; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); }
.sg-conf.c-good { border-color: var(--good); color: var(--good); }
.sg-conf.c-low { border-style: dashed; }
.sg-empty { text-align: center !important; color: var(--ink-muted); padding: 16px !important; }

/* ---------- rune detail view ---------- */
/* A pop-up locks the page's scroll (rd-open). Without a reserved gutter the scroll bar then
   vanished and the whole page widened by its width, so everything behind the pop-up shifted
   (Peter, 2026-10-14). The gutter is kept whether or not the bar is showing. */
html { scrollbar-gutter: stable; }
body.rd-open { overflow: hidden; }
.rd-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 32px 16px;
}
.rd-overlay[hidden] { display: none; }
.rd-panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--elev-4);
  padding: 24px 24px 32px;
}
@media (max-width: 640px) {
  .rd-overlay { padding: 0; }
  .rd-panel { max-height: 100vh; height: 100vh; border-radius: 0; border: 0; padding: 16px 16px 28px; }
}
.rd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rd-head-main { min-width: 0; flex: 1 1 360px; }
.rd-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.rd-head h2 { margin: 2px 0 8px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); line-height: 1.15; overflow-wrap: anywhere; }
.rd-meta { font-size: 12px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.rd-links { display: inline-flex; gap: 12px; }
.rd-links a { color: var(--ink); }
.rd-links a:hover { color: var(--accent); }
.rd-note { flex-basis: 100%; }
/* "Send it to the Wizards of Ord" on a collection we found on-chain. */
.cc-send { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.cc-send a.wl-btn { text-decoration: none; }
.cc-send .cc-send-note { color: var(--ink-muted); font-size: 12px; max-width: 60ch; }

/* Asking us to send a found collection to the registry (2026-09-22,
   collection_detail.js). A small form inside the collection overlay. */
.cc-ask { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 4px; }
.cc-ask-form { display: flex; flex-direction: column; gap: 16px; max-width: 62ch; width: 100%; }
.cc-ask-form[hidden] { display: none; }
.cc-ask-field { display: flex; flex-direction: column; gap: 4px; }
.cc-ask-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.cc-ask-hint { font-size: 12px; color: var(--ink-muted); }
.cc-ask-field input, .cc-ask-field textarea { width: 100%; min-width: 0; }
.cc-ask-who { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; margin: 0; }
.cc-ask-who legend { padding: 0 4px; }
.cc-ask-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cc-ask-radio input { width: auto; }
.cc-ask-who > input[hidden] { display: none; }
.cc-ask-line { font-size: 12px; color: var(--ink-muted); margin: 4px 0 0; }
.cc-ask-said { font-size: 12px; color: var(--ink-muted); margin: 0; }
.cc-ask-said.bad { color: var(--warn, var(--ink)); }
.cc-ask-form .wl-btn { align-self: flex-start; }
.cc-ask-issue { font-size: 12px; }

/* The same requests on the Triage page (local_collections.js). */
.lc-req-form { display: flex; flex-direction: column; gap: 12px; max-width: 70ch; margin: 12px 0; }
.lc-req-form input, .lc-req-form textarea { width: 100%; min-width: 0; }
.lc-req-form .wl-btn { align-self: flex-start; }
.lc-asked { font-size: 12.5px; color: var(--ink-muted); white-space: pre-wrap; word-break: break-word; margin: 4px 0; }
pre.lc-asked { font-family: var(--font-mono); font-size: 12px; overflow-x: auto; }
.rd-head-side { display: flex; align-items: center; gap: 8px; }
.rd-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: 15px; cursor: pointer;
}
.rd-close:hover { border-color: var(--accent); color: var(--accent); }
.rd-body { transition: opacity 0.2s ease; }
.rd-body.loading { opacity: 0.5; }
.rd-kpis { margin-bottom: 16px; }
.rd-kpis > div { padding: 12px 16px; }
.rd-kpis .stat-value { font-size: 20px; }
.rd-kpi-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted var(--ink-muted); text-underline-offset: 4px; }
.rd-kpi-btn:hover, .rd-kpi-btn:focus-visible { color: var(--accent); }
.sg-table tr.is-median td { background: var(--accent-soft); font-weight: 600; }
.rd-sec {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 16px 12px; margin-bottom: 16px; min-width: 0;
}
.rd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rd-two .rd-sec { margin-bottom: 16px; }
@media (max-width: 860px) { .rd-two { grid-template-columns: 1fr; gap: 0; } }
.rd-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.rd-chart .grid { stroke: var(--line); stroke-width: 1; }
.rd-chart .axis-t { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rd-chart .end-l { fill: var(--ink); font-size: 12px; font-weight: 600; }
.rd-chart .end-v { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); }
.rd-dot { fill: var(--ink-muted); fill-opacity: 0.45; stroke: var(--surface); stroke-width: 1; }
.rd-dot.out { fill: none; stroke: var(--ink-muted); stroke-opacity: 0.7; stroke-dasharray: 2 2; }
.rd-line { fill: none; stroke: var(--cat-4); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rd-ring { fill: none; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.rd-bar { fill: var(--cat-4); }
.rd-hit { fill: transparent; }
.rd-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-muted); margin: -2px 0 8px; }
.rd-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rd-key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); opacity: 0.6; display: inline-block; }
.rd-key-dot.out { background: none; border: 1px dashed var(--ink-muted); }
.rd-key-line { width: 16px; height: 2px; border-radius: 1px; background: var(--cat-4); display: inline-block; }

/* ---------- our own transaction and block pages (tx_view.js, 2026-10-12) ---------- */
.tv-mono { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.tv-id { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; }
.tv-id .tv-mono { color: var(--ink); }
.tv-sub { font-size: 12px; color: var(--ink-muted); }
.tv-ok { color: var(--good); font-weight: 600; }
.tv-pending { color: var(--trend, var(--ink)); font-weight: 600; }
.tv-msg { font-size: 13px; color: var(--ink); margin: 8px 0; }
.tv-msg.sub { color: var(--ink-muted); font-size: 12px; }
.tv-msg.bad { color: var(--bad); }
.tv-list { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tv-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.tv-h4 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.tv-io > div { min-width: 0; }
.tv-io .sg-table-wrap { margin-bottom: 16px; }
.tv-table td a { color: var(--ink); }
.tv-table td a:hover { color: var(--accent); }
.tv-tag { font-size: 12px; color: var(--ink-muted); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0 4px; }
.tv-mix { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
.tv-mix li { display: inline-flex; align-items: center; gap: 8px; }
.tv-swatch { width: 12px; height: 12px; border-radius: var(--r-2xs); display: inline-block; }
.tv-record { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.tv-record a.wl-btn { text-decoration: none; }
.tv-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.rd-empty { font-size: 12.5px; color: var(--ink-muted); margin: 8px 0; }
.rd-greeks th, .rd-greeks td { text-align: center; }
.rd-wallet { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rd-addr { font-family: var(--font-mono); font-size: 12px; color: var(--ink); text-decoration: none; }
.rd-addr:hover { color: var(--accent); }
.rd-sales-wrap { max-height: 520px; overflow: auto; }
.rd-via { color: var(--ink-muted); }
.rd-more { margin-top: 8px; }
.act-rune, .sg-rune { cursor: pointer; }
.act-rune { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.act-rune:hover { color: var(--accent); }
.rd-panel .bv-tip { z-index: 1001; }

/* ---------- wallet profile view ---------- */
.wp-full { font-family: var(--font-mono); font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.wp-tracked { margin: -8px 0 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .wp-tracked { grid-template-columns: 1fr 1fr; } }
.wp-caveat { margin: -4px 0 16px; line-height: 1.5; }
/* What it holds (2026-10-12): the collection grid's cards, as links to our viewer. */
.wp-holds .mini-stats { margin-bottom: 16px; }
.wp-holds .sg-table-wrap { margin-bottom: 16px; }
.wp-holds.loading .rd-empty { font-style: italic; }
.wp-holds-sub { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.wp-holds-grid { margin-bottom: 8px; }
/* Rare sats in a looked-up wallet (2026-10-17, app/jobs/notable_sats.py) */
.wp-rare { margin-top: 16px; }
.wp-rare .rd-empty { margin: 0 0 8px; }
/* BRC-20 balances in a looked-up wallet (2026-10-18, from OPI): up to 18 decimals, so they may wrap */
.wp-brc20 { margin-top: 16px; }
.wp-brc20 .rd-empty { margin: 0 0 8px; }
.wp-brc20-amt { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* a card still being described: the wallet's ?fast=1 half is on screen, the full answer is on its way (2026-10-12) */
.wp-skel-card .ci-media { background: var(--skel-2); box-shadow: inset 0 0 0 1px var(--skel); animation: skel-pulse 1.6s ease-in-out infinite; }
.wp-skel-card .ci-name { display: block; width: 60%; height: 12px; margin-top: 8px; border-radius: var(--r-xs); background: var(--skel); }
@media (prefers-reduced-motion: reduce) { .wp-skel-card .ci-media { animation: none; } }
.wp-holds .rd-more { margin: 0 0 16px; }
a.wp-holds-item { text-decoration: none; }
.wp-holds .stat-value, .wp-holds .stat-sub { overflow-wrap: anywhere; }
.wp-holds .wp-card-floor { white-space: normal; }
/* A money tile (wallet_profile.js kpiMoney, 2026-10-13): the amount, large, is a button that swaps
   which money goes first; the other one sits under it, as on the Overview's portfolio value. */
button.stat-swap { display: block; width: fit-content; max-width: 100%; padding: 0; margin: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; border-radius: var(--r-xs); }
button.stat-swap:hover { color: var(--accent); }
button.stat-swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wp-money .stat-swap-sub { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 640px) {
  .wp-holds .mini-stats { grid-template-columns: 1fr 1fr; }
  /* The collection table's Floor column goes on a phone; Est. value stays (2026-10-12). */
  .wp-holds .wp-col-floor { display: none; }
  /* "¥1,234 · 0.012 BTC" wraps in its cell instead of pushing the table sideways. */
  .wp-holds .sg-table td, .wp-holds .sg-table th { white-space: normal; }
}
/* Grid | List (2026-10-12): the list is the Holdings tab's .hv-table, grouped by asset type */
.wp-view-toggle { margin: 0 0 16px; }
.wp-list .wp-list-group th { padding-top: 16px; font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; background: transparent; }
.wp-list tbody tr.wp-list-group:hover > * { background: transparent; }
.wp-list tbody th { position: static; background: transparent; }
.wp-list .wp-list-name { max-width: none; white-space: normal; }
.wp-list-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wp-list-line .coll-link, .wp-list-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "sorting 87…": text still being read for BRC-20, bitmaps and names (2026-10-13) */
.wp-list-note { font-size: 12px; font-weight: 400; font-style: italic; color: var(--ink-muted); white-space: nowrap; margin-left: 4px; }
.wp-list-row.wp-can-open { cursor: pointer; }
.wp-sec-runes .wp-list-line { padding-left: 28px; }
.wp-list-row.open > * { background: var(--surface-2); }
.wp-list .wp-list-held { font-variant-numeric: tabular-nums; }
.wp-exp { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-muted); font-size: 12px; cursor: pointer; }
.wp-exp:hover { color: var(--accent); background: var(--surface-2); }
.wp-strip { display: flex; align-items: center; gap: 4px; margin: 4px 0 0 28px; }
.wp-strip-more { font-size: 12px; color: var(--ink-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.wp-strip-narrow { display: none; }   /* a phone's own "+N" (wallet_profile.js strip) */
a.wp-thumb { width: 36px; height: 36px; flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); text-decoration: none; }
a.wp-thumb:hover { border-color: var(--accent); }
a.wp-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* a live preview in a strip tile (wallet_profile.js stripLive): the tile stays the link, so the frame takes no taps */
a.wp-thumb { position: relative; }
a.wp-thumb iframe.wp-thumb-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: var(--surface-2); }
.wp-thumb-plate { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.wp-list-sub > td { padding: 0 0 8px; text-align: left; background: var(--surface-2); }
.wp-list tbody tr.wp-list-sub:hover > * { background: var(--surface-2); }
.wp-sub { list-style: none; margin: 0; padding: 4px 8px 0 36px; display: grid; gap: 4px; }
.wp-sub li { display: grid; grid-template-columns: 36px minmax(64px, auto) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; }
.wp-sub-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.wp-sub-what { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-sub-floor { font-variant-numeric: tabular-nums; text-align: right; }
.wp-list-sub .rd-more { margin: 8px 0 0 36px; }
@media (max-width: 480px) {
  .wp-strip a.wp-thumb:nth-child(n+4) { display: none; }
  .wp-strip .wp-strip-wide { display: none; }
  .wp-strip .wp-strip-narrow { display: inline; }
  .wp-strip { margin-left: 0; }
  .wp-sub { padding-left: 0; }
  .wp-sub li { grid-template-columns: 36px auto minmax(0, 1fr); }
  .wp-sub-floor { display: none; }
}
/* Text inscriptions drawn (2026-10-12): a name card, a BRC-20 badge, a note card */
.tt { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; box-sizing: border-box; overflow: hidden; text-align: center; background: var(--surface-2); color: var(--ink); }
.tt-name { font-family: var(--font-display); font-weight: 600; line-height: 1.1; color: var(--accent); overflow-wrap: anywhere; }
.tt-name.tt-l { font-size: 24px; }
.tt-name.tt-m { font-size: 16px; }
.tt-name.tt-s { font-size: 13px; }
.tt-brc20 { background: var(--surface-raised); border: 1px solid var(--line-strong); }
.tt-tick { font-family: var(--font-mono); font-size: 24px; font-weight: 600; line-height: 1; color: var(--trend); overflow-wrap: anywhere; }
.tt-op { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tt-amt { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tt-text, .tt-json { position: relative; align-items: stretch; justify-content: flex-start; text-align: left; }
.tt-lines { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.tt-text::after, .tt-json::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: linear-gradient(transparent, var(--surface-2)); pointer-events: none; }
.tt-small { padding: 0; gap: 0; align-items: center; justify-content: center; text-align: center; }
.tt-small::after { display: none; }
.tt-mark { font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink); }
.tt-small.tt-name .tt-mark { color: var(--accent); }
.tt-small.tt-brc20 .tt-mark { color: var(--trend); }

/* ---------- two wallets side by side (#328) ---------- */
.wp-compare { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wp-compare-form { display: flex; gap: 8px; align-items: center; }
.wp-compare-form[hidden] { display: none; }
.wp-compare-form input {
  width: 200px; min-width: 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 4px 8px;
}
.wp-compare-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wp-compare-form button {
  font: 600 12px/1 var(--font-body); color: var(--ink-muted);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 4px 12px; cursor: pointer;
}
.wp-compare-form button:hover { border-color: var(--accent); color: var(--accent); }
/* The "Higher" column is a reading of the two beside it, not a third
   figure, so it is set quieter than the numbers it summarises. */
.wc-lead { color: var(--ink-muted); font-size: 12px; }
.wc-figs td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- month in review (#329) ---------- */
.recap-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.recap-form[hidden] { display: none; }
.recap-form label { font-size: 12px; color: var(--ink-muted); }
.recap-form input, .recap-form button {
  font: 600 12px/1 var(--font-body); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 8px 12px;
}
.recap-form button { color: var(--ink-muted); cursor: pointer; }
.recap-form button:hover { border-color: var(--accent); color: var(--accent); }
.recap-form input:focus-visible, .recap-form button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.recap-out {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.6; color: var(--ink-muted);
}
.recap-out[hidden] { display: none; }
.recap-out h4 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.recap-out h5 { margin: 16px 0 4px; font-size: 12px; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.recap-out p { margin: 4px 0; }
.recap-out .recap-item { padding-left: 16px; }

/* ---------- how fast a mint went (#325) ---------- */
/* A description of the curve, set below the pace line it explains. The
   warm variant marks a fee premium worth noticing, not a wrongdoing. */
.om-rush { font-style: italic; }
.om-rush.faint { opacity: .7; font-style: normal; }
.om-rush-hot { color: var(--ink); font-weight: 600; font-style: normal; }

/* ---------- what we can say about a collection (#334) ---------- */
/* Four statements, not a score. The band is a label beside the sentence,
   never a colour doing the talking on its own. */
.cs-summary { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.cs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-item {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 16px;
}
.cs-band { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.cs-item.cs-watch .cs-band { color: var(--ink); }
.cs-says { font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
a.cs-says { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a.cs-says:hover { color: var(--accent); }
@media (max-width: 640px) { .cs-item { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- your own alert rules (#330) ---------- */
.ar-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ar-item { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 12px; }
.ar-item.off .ar-name { opacity: .6; }
.ar-name { min-width: 0; overflow-wrap: anywhere; }
.ar-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ar-conds { display: flex; flex-direction: column; gap: 4px; }
.ar-cond { display: flex; gap: 4px; align-items: center; }
.ar-cond select, .ar-cond input {
  flex: 1; min-width: 0;
  font: 400 12px/1.4 var(--font-body); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 4px 8px;
}
.ar-cond select:focus-visible, .ar-cond input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ar-err:empty { display: none; }
@media (max-width: 640px) {
  .wp-compare-form input { width: 140px; }
}
.wp-buy { fill: var(--cat-1); }
.wp-sell { fill: var(--div-neg); }
.rd-chart .grid.zero { stroke: var(--line-strong); }
.wp-key { width: 10px; height: 10px; border-radius: var(--r-2xs); display: inline-block; }
.wp-key-buy { background: var(--cat-1); }
.wp-key-sell { background: var(--div-neg); }
.bv-tip .key.wp-key-buy, .bv-tip .key.wp-key-sell { height: 8px; width: 8px; }
.wp-activity { margin: 0; }
.act-pill.k-self { border-style: dashed; }

/* ---------- source notes (#13) ---------- */
.src-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 8px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-muted);
  font: italic 600 12px/1 Georgia, serif; vertical-align: 2px; cursor: pointer;
}
.src-btn:hover, .src-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.src-pop {
  position: absolute; z-index: 1100;
  background: var(--surface-raised); color: var(--ink-muted);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: var(--elev-3);
  padding: 8px 12px; font-size: 12px; line-height: 1.45;
  font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none;
}
.src-pop[hidden] { display: none; }
.src-pop strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 4px; }
.src-pop p { margin: 4px 0 0; }
.src-pop b { color: var(--ink); font-weight: 600; }

/* ---------- per-figure provenance (#333) ---------- */
/* A figure you can ask about, rather than another button beside every
   number: the dotted rule under it is the whole affordance. */
[data-prov-ready] {
  cursor: help;
  text-decoration: underline dotted var(--line-strong);
  text-underline-offset: 4px;
}
[data-prov-ready]:hover, [data-prov-ready][aria-expanded="true"] { text-decoration-color: var(--accent); }
[data-prov-ready]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.prov-pop { max-width: 320px; }

/* ---------- stuck-transaction fee helper (#21) ---------- */
.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;
}
.fh-wrap[hidden], .section-head[hidden] { display: none; }
.fh-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px; }
.fh-form { display: flex; gap: 8px; align-items: center; }
.fh-form input {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 8px;
}
.fh-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fh-result:empty { display: none; }
.fh-result { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.fh-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fh-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fh-stat .k { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.fh-stat .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fh-stat .s { font-size: 12px; color: var(--ink-muted); }
.fh-msg { margin: 0; font-size: 12.5px; }
.fh-msg.sub { font-size: 12px; color: var(--ink-muted); }
.fh-msg.sub a { color: var(--ink-muted); }
.fh-msg.sub a:hover { color: var(--accent); }
.fh-msg.bad { color: var(--bad); }
.fh-msg.good { color: var(--accent); }
.fh-table td { vertical-align: top; }
.fh-table th[scope="row"] { font-weight: 600; }
.fh-table .fh-main { display: block; font-weight: 600; }
.fh-table .fh-sub { display: block; font-size: 12px; color: var(--ink-muted); }
.fh-table .fh-ok { text-align: center; color: var(--ink-muted); }
.fh-notes { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.wa-speed { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--accent); }
@media (max-width: 640px) {
  .fh-summary { grid-template-columns: 1fr; gap: 8px; }
  .fh-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; padding: 8px 8px; }
  .fh-stat .v { text-align: right; font-size: 14px; }
  .fh-stat .s { grid-column: 1 / -1; }
  .fh-table { font-size: 12px; table-layout: fixed; }
  .fh-table th, .fh-table td { white-space: normal; padding: 8px 4px; overflow-wrap: anywhere; }
  .fh-table th:first-child { width: 26%; }
  .fh-table th:nth-child(2) { width: 18%; }
}

/* ---------- Hot runes (Signals tab) ---------- */
.sg-hot-card { margin-bottom: 20px; }
.sg-hot-card[hidden] { display: none; }
.hot-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.hot-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hot-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.hot-rank { font-size: 12px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; flex: none; }
.hot-top .act-rune { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hot-warn { font-size: 12px; font-weight: 600; color: var(--bad); border: 1px solid var(--bad); border-radius: var(--r-pill); padding: 1px 8px; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-big { display: flex; flex-direction: column; }
.hot-big .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hot-big .s { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hot-facts { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.hot-facts > div { display: flex; gap: 8px; min-width: 0; }
.hot-facts dt { color: var(--ink-muted); flex: none; width: 48px; }
.hot-facts dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.hot-facts .up dd { color: var(--good); }
.hot-facts .down dd { color: var(--bad); }
.hot-empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-muted); }
@media (max-width: 480px) { .hot-list { grid-template-columns: 1fr; gap: 8px; } .hot-big .v { font-size: 16px; } }

/* ---------- watched runes & BRC-20 (Watchlist tab) ---------- */
.tw-section { margin-top: 28px; }
.tw-section[hidden] { display: none; }
.tw-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.tw-list .wl-empty { grid-column: 1 / -1; }
.tw-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tw-top { display: flex; gap: 8px; align-items: center; }
.tw-kind { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 1px 8px; }
.tw-hot { font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-pill); padding: 1px 8px; }
.tw-name { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.tw-name { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a.tw-name:hover { color: var(--accent); }
.tw-label { font-size: 12px; color: var(--ink-muted); }
.tw-stats { margin: 2px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.tw-stat { display: flex; gap: 8px; min-width: 0; }
.tw-stat dt { color: var(--ink-muted); flex: none; width: 70px; }
.tw-stat dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.tw-stat.up dd { color: var(--good); }
.tw-stat.down dd { color: var(--bad); }
.tw-add { max-width: 560px; }
.tw-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tw-form-row .tw-key { flex: 1; min-width: 180px; }
.tw-add select {
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 8px;
}
.rd-watch[hidden] { display: none; }
.rd-watch { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.rd-watch[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.act-badge.b-token { border-color: var(--accent); color: var(--accent); }
.watch-icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.hot-top > .watch-icon { color: var(--accent); }
.act-badge .watch-icon { margin-right: 4px; }
.hm-name .watch-icon { margin-right: 0.25em; }
.hm-tile.watched { box-shadow: inset 0 0 0 2px currentColor; }

/* ---------- mempool over time ---------- */
.mh-wrap[hidden], #mhHead[hidden] { display: none; }
.mh-wrap { margin-bottom: 16px; }
.mh-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; }
.hist-chart .mh-cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.mh-wrap .col-hit { cursor: crosshair; }

/* ---------- CSV download links ---------- */
.csv-link[hidden] { display: none; }
.csv-link {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink-muted); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 1px 8px; margin-left: 8px; text-decoration: none; white-space: nowrap; vertical-align: middle;
}
.csv-link::before { content: "↓ "; }
.tax-year {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-muted);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 0 8px; margin-left: 4px; vertical-align: middle; cursor: pointer;
}
.tax-year:hover, .tax-year:focus-visible { color: var(--accent); border-color: var(--accent); }
html:not(.exports-on) .tax-year { display: none; }
.csv-link:hover, .csv-link:focus-visible { color: var(--accent); border-color: var(--accent); }
.rd-csv { margin-left: 0; padding: 4px 8px; font-size: 12px; }

/* ---------- alerts: bell + panel (next to the gear) ---------- */
.ui-bell[hidden], .al-panel[hidden], .ui-bell-count[hidden] { display: none; }
.ui-bell {
  position: absolute; top: 20px; right: 68px; z-index: 50;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-muted); cursor: pointer;
}
:root[data-layout="terminal"] .ui-bell { border-radius: 0; top: 16px; }
:root[data-layout="midnight"] .ui-bell { top: 22px; right: 76px; border-radius: var(--r); }
.ui-bell:hover, .ui-bell[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); }
.ui-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-bell svg { width: 19px; height: 19px; }
.ui-bell-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700;
  line-height: 18px; text-align: center; font-family: var(--font-body);
}
.al-panel {
  position: absolute; top: 68px; right: 20px; z-index: 51;
  width: 400px; max-width: calc(100vw - 32px); max-height: min(78vh, 720px); overflow-y: auto;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--elev-3);
  padding: 12px 16px;
}
:root[data-layout="terminal"] .al-panel { border-radius: 0; }
.al-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.al-head strong { font-family: var(--font-display); font-size: 16px; margin-right: auto; }
.al-tg { font-size: 12px; color: var(--ink-muted); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 1px 8px; }
.al-tg.on { color: var(--good); border-color: var(--good); }
.al-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.al-item { display: flex; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--line); }
.al-item:first-child { border-top: none; }
/* unread: an accent edge rather than a tinted fill, which dropped the grey text below 4.5:1 */
.al-item.new { box-shadow: -4px 0 0 var(--accent); }
.al-icon { flex: none; width: 20px; display: inline-flex; justify-content: center; padding-top: 2px; color: var(--ink-muted); }
.al-icon svg { width: 16px; height: 16px; }
.al-item.k-price .al-icon, .al-item.new .al-icon { color: var(--accent); }
.al-main { min-width: 0; flex: 1; }
.al-title { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.al-sub { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.al-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; }
.al-links a { color: var(--ink-muted); }
.al-links a:hover { color: var(--accent); }
.al-err { color: var(--bad); }
.al-empty { font-size: 12.5px; color: var(--ink-muted); padding: 8px 2px; }
.al-settings { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 12.5px; }
.al-settings summary { cursor: pointer; font-weight: 600; }
.al-settings form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.al-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.al-check { display: inline-flex; align-items: center; gap: 4px; }
.al-amt { font-size: 12px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 4px; }
.al-amt input {
  width: 84px; font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 4px 8px;
}
.al-hint { font-size: 12px; color: var(--ink-muted); }
.al-actions { display: flex; align-items: center; gap: 8px; }
.al-msg { font-size: 12px; color: var(--good); }
.al-msg.bad { color: var(--bad); }
:root.has-bell[data-layout] .masthead { padding-right: 104px; }
:root.has-bell[data-layout="midnight"] .masthead { padding-right: 20px; }
@media (max-width: 900px) {
  :root.has-bell[data-layout="midnight"] .masthead { padding-right: 112px; }
}

/* ---------- sales in the mempool (Signals tab) ---------- */
.sg-pending-card { margin-bottom: 20px; }
.sg-pending-card[hidden] { display: none; }
.ps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ps-item { border-left: 3px dashed var(--accent); padding: 4px 0 4px 8px; min-width: 0; }
.ps-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ps-what { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ps-sub { font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }

/* ---------- price cross-checks ---------- */
.pc-wrap[hidden] { display: none; }
.pc-wrap { margin-bottom: 16px; }
.pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-item { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 8px; }
.pc-item.l-warn { border-left-color: var(--pc-warn); }
.pc-item.l-flag { border-left-color: var(--bad); }
.pc-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-pill { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--r-pill); padding: 1px 8px; border: 1px solid var(--line-strong); color: var(--ink-muted); }
.pc-pill.l-warn { border-color: var(--pc-warn); color: var(--pc-warn); }
.pc-pill.l-flag { border-color: var(--bad); color: var(--bad); }
.pc-subj { font-weight: 600; font-size: 13px; color: var(--ink); }
a.pc-subj { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.pc-ratio { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.pc-vals { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.pc-note { font-size: 12px; margin-top: 2px; }
.pc-allok { font-size: 12px; color: var(--ink-muted); }
.pc-more { margin-top: 8px; }
.pc-more[hidden] { display: none; }

:root { --pc-warn: #8A5A00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pc-warn: #E3A548; } }
:root[data-theme="dark"] { --pc-warn: #E3A548; }

/* ---------- block view: a mined block slides out (backlog #20) ---------- */
@keyframes bv-leave { to { transform: translateX(-48px); opacity: 0; } }
.bv-leave { animation: bv-leave 0.38s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .bv-leave { animation: none; } }

/* ---------- inscription sales (Signals tab, 2026-09-16) ---------- */
.is-card { margin-top: 20px; }
.is-card[hidden] { display: none; }
.is-card .is-kpis { margin-bottom: 12px; }
.is-card .is-kcoll { font-size: 15px; overflow-wrap: anywhere; }
.is-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.is-filter {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--accent-soft);
  color: var(--accent);
  background: transparent;
  border-radius: var(--r-pill);
  padding: 4px 8px;
  cursor: pointer;
}
.is-filter[hidden] { display: none; }
.is-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.is-list[hidden], .is-card .sg-table-wrap[hidden] { display: none; }
.is-item { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.is-main { flex: 1; min-width: 0; }
.is-thumb {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}
.is-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.is-thumb.g-brc { color: var(--cat-4); }
.is-thumb.g-img { color: var(--cat-1); }
.is-thumb.g-html { color: var(--cat-5); }
.is-thumb.g-txt { color: var(--cat-3); }
.is-item.st-pending .is-thumb, .is-item.st-unknown .is-thumb { border-style: dashed; }
.is-name { color: var(--ink); text-decoration: none; }
a.is-name:hover { color: var(--accent); text-decoration: underline; }
.is-name.muted { color: var(--ink-muted); font-weight: 500; }
.is-coll {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
}
.is-coll:hover { text-decoration: underline; }
.is-more { list-style: none; }
.is-table td.num, .is-table th.num { text-align: right; }

/* Read-only public mode (2026-09-17): the dashboard still shows everything,
   but nothing that would change it. The server refuses writes regardless
   (app/main.py); this only keeps the controls out of the way. */
body.readonly .admin-only { display: none !important; }

/* ---------- About / Terms pages (2026-09-17) ----------
   Their own shell on purpose: .wrap is a grid in the midnight layout, so
   reusing it reflowed the prose into the dashboard's columns. These pages
   share only the colour and font variables. */
.doc-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  color: var(--ink);
}
.doc-head { margin-bottom: 8px; }
.doc-head h1 { font-size: 26px; margin: 4px 0 0; letter-spacing: -0.01em; }
.doc-kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.doc-shell h2 {
  font-size: 18px;
  margin: 32px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* a question under a group heading (the FAQ, 2026-10-17): below the h2, not bigger than it */
.doc-shell h3 { font-size: 16px; margin: 24px 0 4px; }
.doc-shell p, .doc-list li { line-height: 1.6; }
.doc-lede { font-size: 16px; color: var(--ink-muted); max-width: 68ch; }
/* store-app mode (AP-13, app/app_mode.py): the payment pages' "manage your plan" line, in place of the purchase controls */
.app-mode-note { color: var(--ink); font-weight: 600; }
.doc-shell p { max-width: 74ch; }
.doc-list { padding-left: 20px; max-width: 74ch; }
.doc-list li { margin: 8px 0; }
/* the /collections A to Z list (2026-10-14): ~980 names, in columns */
.doc-list.doc-cols { columns: 16rem; column-gap: 32px; max-width: none; }
.doc-cols li { margin: 4px 0; break-inside: avoid; }
.doc-back { color: var(--ink-muted); text-decoration: none; white-space: nowrap; font-size: 13px; }
.doc-back:hover { color: var(--ink); }
.doc-scroll { overflow-x: auto; }

/* ---------- the source table, in groups ---------- */
/* Forty-one rows is a wall. Each group shut still lists what is inside it,
   so the page reads as an index and find-in-page keeps working -- a group
   that hid its own contents would just move the problem. */
.doc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; align-items: center; }
.doc-jump a, .dg-all {
  font: 600 12px/1 var(--font-body); color: var(--ink-muted);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 8px 12px; text-decoration: none; cursor: pointer;
}
.doc-jump a:hover, .dg-all:hover { border-color: var(--accent); color: var(--accent); }
.doc-jump a:focus-visible, .dg-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-group { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; background: var(--surface); }
.doc-group > summary { cursor: pointer; padding: 12px 16px; list-style-position: inside; }
.doc-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r); }
.dg-title { font-weight: 600; color: var(--ink); }
.dg-what { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.doc-group[open] > summary { border-bottom: 1px solid var(--line); }
.doc-group[open] > summary .dg-what { display: none; }
.doc-group > .doc-scroll { padding: 0 16px 16px; }
.doc-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-size: 13.5px;
  margin: 8px 0 4px;
}
.doc-table th, .doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.doc-table th { color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.doc-table td:first-child { font-weight: 600; white-space: nowrap; padding-right: 16px; }
.doc-table td:last-child, .doc-table th:last-child { color: var(--ink-muted); }
.doc-shell code { font-size: 12.5px; background: var(--surface-2); padding: 1px 4px; border-radius: var(--r-xs); }
.doc-shell a { color: var(--accent); }
.doc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-muted);
}
.doc-foot a { color: var(--ink-muted); }
@media (max-width: 680px) {
  .doc-shell { padding: 20px 16px 48px; }
  .doc-table { min-width: 520px; }
  .doc-table td:first-child { white-space: normal; }
}

/* ---------- Why a number is older than it should be (2026-09-20) ----------
   Deliberately quiet: this is a caveat on numbers elsewhere in the page,
   not news of its own, and it's hidden entirely whenever there's nothing
   to caveat. Amber left edge rather than an amber box, so it reads as a
   footnote and not as an error.

   `.broken` is the louder case, and the distinction is real: an allowance
   running out is expected and self-correcting, while a job failing over
   and over is neither. Same shape, so it doesn't shove the page around
   when it changes. */
.health-note {
  margin: 0 0 12px; padding: 8px 12px;
  border-left: 3px solid var(--warn, var(--line));
  background: var(--panel-2, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-muted);
}
.health-note.broken {
  border-left-color: var(--bad, var(--warn, var(--line)));
  color: var(--ink);
}

/* ---------- Wallets you added yourself (2026-09-17) ----------
   The strip under the Atrium XBT heading that says whose wallets
   these are. Two states: you have some (neutral), or this is a public
   instance and nobody's wallets are on show (an invitation). */
.viewed-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-2, transparent);
  font-size: 12.5px; color: var(--ink-muted);
}
/* `display: flex` on a class beats the browser's own `[hidden] {
   display: none }`, so this banner stayed laid out while hidden -- an
   empty bordered strip under the Atrium XBT heading in every
   layout, which is what it looked like for three days. Found by asking
   the page for every [hidden] element still taking up space, rather than
   by looking. */
.viewed-banner[hidden] { display: none; }
.viewed-banner > div { flex: 1 1 260px; min-width: 0; }
.viewed-banner strong { color: var(--ink); font-weight: 600; }
.viewed-banner.empty { border-style: dashed; }
.viewed-banner.has-error { border-color: var(--warn, var(--line)); }
.viewed-banner .wl-btn { flex: 0 0 auto; }
.viewed-banner-error {
  flex: 1 1 100%; margin: 8px 0 0; font-size: 12px; color: var(--warn, var(--ink-muted));
}
.viewed-banner-status {
  flex: 1 1 100%; margin: 8px 0 0; font-size: 12px; color: var(--ink-muted); font-style: italic;
}
@media (max-width: 560px) {
  .viewed-banner { flex-direction: column; align-items: stretch; }
  /* The 260px basis on the text block is a *width* hint in a row and a
     *height* one in a column, which left a phone-sized hole between the
     text and the button. */
  .viewed-banner > div { flex: 0 0 auto; }
  .viewed-banner .wl-btn { width: 100%; }
}

/* ---------- Settings page (2026-09-17) ----------
   Its own shell for the same reason the About page has one: .wrap is a grid
   in the midnight layout. */
.set-shell { max-width: 900px; margin: 0 auto; padding: 28px 20px 64px; color: var(--ink); }
.set-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 0 0 16px;
  background: var(--panel, transparent);
}
.set-card h2 { font-size: 16px; margin: 0 0 4px; }
.set-card .set-lede { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-muted); }
.set-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--line);
}
.set-row:first-of-type { border-top: 0; }
.set-row-main { flex: 1 1 auto; min-width: 0; }
.set-row-name { font-weight: 600; font-size: 13.5px; }
.set-row-addr {
  font-family: var(--mono, monospace); font-size: 12px; color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.set-row-note { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.set-row-note.bad { color: var(--warn, var(--ink-muted)); }
.set-row-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.set-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.set-form[hidden] { display: none; }
.set-form input { flex: 1 1 220px; min-width: 0; }
.set-form input.short { flex: 0 1 160px; }
/* A labelled form (marketplace list/buy, mint, make-safe...) stacks: label above its field, one per
   row. The wrapping row above suits a one-line settings form, but wrapped label/field pairs drifted
   apart and the 220px flex-basis made inputs 220px TALL in a column (lab test, 2026-10-08). */
.set-form:has(> .acct-label) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.set-form:has(> .acct-label) > input,
.set-form:has(> .acct-label) > textarea,
.set-form:has(> .acct-label) > select { flex: 0 0 auto; width: 100%; }
.set-form:has(> .acct-label) > .acct-label { margin-top: 8px; }
.set-form:has(> .acct-label) > button,
.set-form:has(> .acct-label) > .wl-btn { align-self: flex-start; }
.set-empty { font-size: 12.5px; color: var(--ink-muted); padding: 8px 0; }
.set-error { color: var(--warn, var(--ink)); font-size: 12px; margin: 8px 0 0; }
.set-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-muted);
}
@media (max-width: 560px) {
  .set-shell { padding: 20px 16px 48px; }
  .set-row { flex-direction: column; }
  .set-row-actions { width: 100%; }
}

/* ---------- Touch targets (2026-09-17) ----------
   The source-note "i" buttons are 16px and the CSV pills are 18px tall.
   That reads well and is too small to hit with a thumb -- and the "i" is
   exactly what a first-time visitor on a phone reaches for, since it's the
   thing that explains where a number came from.

   The hit area is grown with a pseudo-element rather than padding, so
   nothing moves: the button looks identical and simply catches taps from
   further away. 40px under a coarse pointer; 24px for a mouse too
   (2026-10-08, design critique: the "i" was a 16x16 target on desktop,
   under WCAG 2.5.8's 24px minimum). */
.src-btn, .csv-link { position: relative; }
.src-btn::after, .csv-link::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 24px);
  height: max(100%, 24px);
}
@media (pointer: coarse) {
  .src-btn::after, .csv-link::after {
    width: max(100%, 40px);
    height: max(100%, 40px);
  }
}

/* Placeholders (2026-10-08): the browser default grey measured 3.7:1 on the
   dark input background. --ink-muted is tested at 4.5:1 on every surface. */
::placeholder { color: var(--ink-muted); opacity: 1; }

/* ---------- First-visit explainer (2026-09-20) ----------
   Above the dashboard, not in front of it: a stranger should see the
   explanation and the numbers at the same time, because the numbers are
   what makes the claim credible. Shown once, then dismissed for good. */
.intro {
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--panel, var(--surface, transparent));
}
.intro-kicker {
  display: block; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 8px;
}
.intro h2 {
  margin: 0 0 8px; font-size: 20px; line-height: 1.3; color: var(--ink);
  max-width: 34em;
}
.intro > .intro-main > p {
  margin: 0 0 16px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-muted); max-width: 62em;
}
.intro code { font-size: .92em; }
.intro-points {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 24px; margin: 0 0 16px; padding: 0; list-style: none;
}
.intro-points li { display: flex; flex-direction: column; gap: 4px; }
.intro-points strong { font-size: 13px; color: var(--ink); font-weight: 600; }
.intro-points span { font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.intro-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.intro-dismiss {
  margin-left: auto;
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.intro-dismiss:hover { color: var(--ink); }
.intro-caveat {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-muted);
}
/* First-use hints (2026-10-11, hints.js): one sentence, inline, in the
   page's own flow. Same accent edge as the intro banner, quieter. */
.hint {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 8px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm);
  background: var(--panel, var(--surface, transparent));
}
.hint p { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--ink); }
.hint-dismiss {
  background: none; border: 0; padding: 8px 4px; cursor: pointer; flex-shrink: 0;
  font: inherit; font-size: 12.5px; color: var(--ink-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.hint-dismiss:hover { color: var(--ink); }
/* The tour, offered as a quiet link rather than a button (2026-10-11). */
.intro-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.intro-link:hover { color: var(--accent); }
@media (max-width: 560px) {
  /* On a phone the explainer competes with the dashboard for the whole
     first screen, so it gets tighter rather than longer -- a visitor should
     be able to see that there are numbers under it without scrolling. */
  .intro { padding: 16px 16px; margin-bottom: 16px; }
  .intro h2 { font-size: 16.5px; line-height: 1.25; }
  .intro > .intro-main > p { font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
  .intro-points { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
  .intro-points strong { font-size: 12.5px; }
  .intro-points span { font-size: 12px; line-height: 1.4; }
  .intro-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .intro-actions .wl-btn { width: 100%; text-align: center; }
  .intro-dismiss { margin-left: 0; width: 100%; padding: 4px; }
  .intro-caveat { margin-top: 12px; padding-top: 8px; font-size: 12px; }
}

/* First-run guided tour (2026-09-30, #545, app/static/tour.js). Reuses the
   .rd-overlay/.rd-panel shell every other modal here uses (rune detail,
   wallet compare, inscription viewer) rather than a new one -- only the
   step footer below is new. */
.tour-panel { max-width: 560px; }
.tour-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.tour-step { font-size: 12px; color: var(--ink-muted); }
.tour-note { font-size: 12.5px; color: var(--ink-muted); margin-top: 12px; }
.tour-showcase { margin-top: 16px; }
.tour-showcase .wl-btn, .tour-showcase .wl-error { margin-top: 8px; }
@media (max-width: 560px) {
  .tour-actions { flex-wrap: wrap; }
  .tour-step { order: 1; flex-basis: 100%; text-align: center; }
}

/* Mempool preview (2026-10-12, app/static/mempool_preview.js): an inscription
   still in our node's mempool, in the same .rd-overlay/.rd-panel shell. */
.mpp-panel { max-width: 560px; }
.mpp-note { margin: 0 0 16px; padding: 8px 12px; border-left: 2px solid var(--accent); background: var(--surface); font-size: 13px; color: var(--ink); }
.mpp-body { display: flex; flex-direction: column; gap: 16px; }
.mpp-item { display: flex; flex-direction: column; gap: 8px; }
.mpp-item-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--ink-muted); }
.mpp-item-head b { color: var(--ink); }
.mpp-media { display: flex; justify-content: center; align-items: center; min-height: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; }
.mpp-media img { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; object-fit: contain; }
.mpp-media img.pixel { image-rendering: pixelated; min-width: 192px; }
.mpp-text { margin: 0; width: 100%; max-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.mpp-msg { margin: 0; font-size: 14px; color: var(--ink-muted); text-align: center; }
#bvCanvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   Landing page (2026-09-20, redone 2026-10-08; app/static/landing.html)

   The dashboard lives at /app and this is "/": what a stranger sees first.
   Two halves. The hero is a full-bleed night sky over a Bitcoin-orange
   field (an artwork slot, a gradient until the art exists) with a left text
   column on a scrim, in its own fixed colours (--lp-* in themes.css).
   Everything below it is the dashboard's Graphite dark, so clicking through
   doesn't feel like changing product.

   Rules this keeps: body text 16px or more at 4.5:1, the serif on the
   headline only, a real button (small radius) as the one primary action,
   no motion under prefers-reduced-motion, and on a phone the text sits in
   the dark sky above the field, never over the busiest part of the art.
   ========================================================================== */
.lp-page { background: var(--bg); }
/* Full-bleed hero: the dashboard's body gutter (20px, 32px on Graphite in
   themes.css) moves inside each block instead. */
:root .lp-page, :root[data-layout] body.lp-page { padding: 0; }
.lp-page :focus-visible { outline-color: var(--lp-amber); }

/* ---- hero ---- */
.lp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: min(100svh, 880px);
  background: var(--lp-sky); color: var(--lp-ink);
}
.lp-hero-art {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 55% at 72% 108%, var(--lp-glow) 0%, var(--lp-field) 28%, transparent 64%),
    linear-gradient(180deg, var(--lp-sky) 0%, var(--lp-sky-2) 58%, var(--lp-horizon) 100%);
}
/* A sparse star field, drawn rather than shipped as an image. */
.lp-hero-art::before {
  content: ""; position: absolute; inset: 0 0 45% 0;
  background:
    radial-gradient(1px 1px at 12% 18%, var(--lp-star), transparent),
    radial-gradient(1px 1px at 28% 42%, var(--lp-star), transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, var(--lp-star), transparent),
    radial-gradient(1px 1px at 58% 30%, var(--lp-star), transparent),
    radial-gradient(1.5px 1.5px at 71% 8%, var(--lp-star), transparent),
    radial-gradient(1px 1px at 83% 36%, var(--lp-star), transparent),
    radial-gradient(1px 1px at 92% 16%, var(--lp-star), transparent),
    radial-gradient(1px 1px at 66% 52%, var(--lp-star), transparent),
    radial-gradient(1.5px 1.5px at 37% 64%, var(--lp-star), transparent);
  opacity: 0.7;
}
.lp-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The scrim: darkens the left column so the copy reads at 4.5:1 whatever
   the artwork puts behind it. */
.lp-hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgb(var(--lp-scrim-rgb) / 0.9) 0%, rgb(var(--lp-scrim-rgb) / 0.72) 38%, rgb(var(--lp-scrim-rgb) / 0) 68%);
}
/* Meteors (2026-10-14, Matthew: "a few more ... have them loop so it's
   never just static"). Five streaks on the art side, each on its own cycle
   (8 to 14 s, staggered starts) so they never fall together and the sky
   never sits still for long; each is visible for the first eighth of its
   cycle. Transform and opacity only. Off under reduced motion (below). */
.lp-star {
  position: absolute; top: 14%; right: 14%; z-index: 1;
  width: 160px; height: 2px; transform-origin: left center;
  background: linear-gradient(90deg, var(--lp-star), transparent);
  opacity: 0; transform: translate(0, 0) rotate(-24deg);
  animation: lp-star 11s ease-out 0.8s infinite both;
}
.lp-star:nth-child(2) { top: 6%;  right: 34%; width: 120px; animation-duration: 13s; animation-delay: 3.4s; }
.lp-star:nth-child(3) { top: 26%; right: 4%;  width: 96px;  animation-duration: 8s;  animation-delay: 5.9s; }
.lp-star:nth-child(4) { top: 10%; right: 22%; width: 180px; animation-duration: 14s; animation-delay: 8.2s; }
.lp-star:nth-child(5) { top: 34%; right: 28%; width: 112px; animation-duration: 10s; animation-delay: 11.5s; }
@keyframes lp-star {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-24deg); }
  2%   { opacity: 0.9; }
  12%  { opacity: 0; transform: translate(-280px, 124px) rotate(-24deg); }
  100% { opacity: 0; transform: translate(-280px, 124px) rotate(-24deg); }
}
@keyframes lp-star-sm {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-24deg); }
  2%   { opacity: 0.9; }
  12%  { opacity: 0; transform: translate(-140px, 62px) rotate(-24deg); }
  100% { opacity: 0; transform: translate(-140px, 62px) rotate(-24deg); }
}

.lp-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 16px 24px;
}
.lp-mark { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--lp-ink); text-decoration: none; padding: 8px 0; }
.lp-mark img { display: block; width: auto; height: 40px; }   /* the logo kit's full wordmark; the hero is always dark */
.lp-nav-links { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; justify-content: flex-end; }
.lp-nav-links a {
  font-size: 15px; font-weight: 500; color: var(--lp-ink); text-decoration: none;
  padding: 8px 12px; border-radius: var(--r-sm);
}
.lp-nav-links a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lp-amber); }
.lp-nav-links .lp-nav-cta { border: 1px solid var(--lp-amber); color: var(--lp-amber); font-weight: 600; margin-left: 8px; }
.lp-nav-links .lp-nav-cta:hover { background: var(--lp-amber); color: var(--lp-amber-ink); text-decoration: none; }

.lp-hero-copy {
  width: 100%; max-width: 1120px; margin: auto; padding: 48px 24px 96px;
}
.lp-hero-copy > * { max-width: 40rem; }
.lp-hero .lp-display {
  font-family: "Playfair Display", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -0.01em;
  margin: 24px 0 0; max-width: 18ch; color: var(--lp-ink);
}
/* Playfair has no Chinese; the stack falls to a CJK serif, which wants more
   leading and no negative tracking. */
.lp-hero .lp-display:lang(zh) { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.24; letter-spacing: 0; max-width: 13em; }
/* The indexing reel (2026-10-10): "Indexing" then an amber word that
   spins like a slot reel through what the node reads and lands on "the
   World" (landing.js). The window is one row tall and as wide as the
   widest word, so nothing beside it shifts while it spins; on a narrow
   phone it wraps under "Indexing" as a whole. */
.lp-hero .lp-display.lp-reel {
  --lp-reel-row: 1.2em;
  display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 0.25em;
  font-size: clamp(44px, 7vw, 88px); line-height: var(--lp-reel-row); max-width: none;
}
.lp-hero .lp-display.lp-reel:lang(zh) { column-gap: 0; }
.lp-reel-window {
  display: block; height: var(--lp-reel-row); overflow: hidden; color: var(--lp-amber);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.lp-reel-strip {
  display: flex; flex-direction: column;
  transition: transform 820ms cubic-bezier(.12, .75, .3, 1.12), filter 300ms ease;
}
.lp-reel-strip.is-spinning { filter: blur(2.5px); }
.lp-reel-item { height: var(--lp-reel-row); white-space: nowrap; }
/* With script on, the resting word waits for landing.js to load the reel,
   so "the World" doesn't flash before "Ordinals". If the script never
   arrives, it shows anyway after a second. */
.lp-js .lp-reel-strip:not(.is-ready) { visibility: hidden; animation: lp-reel-show 0s linear 1s forwards; }
@keyframes lp-reel-show { to { visibility: visible; } }
.lp-lede { font-size: 22px; line-height: 1.4; font-weight: 600; color: var(--lp-ink); margin: 24px 0 0; max-width: 30ch; }
.lp-mission { font-size: 18px; line-height: 1.55; color: var(--lp-ink-muted); margin: 12px 0 0; }
.lp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.lp-btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  background: var(--lp-amber); color: var(--lp-amber-ink);
  border: 1px solid var(--lp-amber); border-radius: var(--r-sm);
}
.lp-btn:hover { background: var(--lp-amber-soft); border-color: var(--lp-amber-soft); }
.lp-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-size: 16px; font-weight: 600; color: var(--lp-ink);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--lp-amber);
}
.lp-arrow span { transition: transform 0.15s ease-out; }
.lp-arrow:hover span { transform: translateX(4px); }
.lp-fineprint { font-size: 14px; color: var(--lp-ink-muted); margin: 16px 0 0; }

/* ---- below the hero: the dashboard's own dark ---- */
.lp { max-width: 1120px; margin: 0 auto; padding: 0 24px 32px; color: var(--ink); }
.lp-section { padding: 64px 0; border-top: 1px solid var(--line); }
.lp-section:first-child { border-top: 0; }
.lp-h2 { font-size: 28px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 12px; }
.lp-intro { font-size: 17px; line-height: 1.6; color: var(--ink-muted); max-width: 62ch; margin: 0 0 24px; }
.lp a { color: var(--lp-amber); }

.lp-feature {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center;
  padding: 32px 0;
}
/* Every other row puts the picture first, visually only: text still comes
   first for a screen reader and the keyboard. */
.lp-feature:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lp-feature:nth-of-type(even) .lp-shot { grid-column: 1; grid-row: 1; }
.lp-feature h3 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 8px; }
.lp-feature p { font-size: 16px; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.lp-shot { margin: 0; }
/* SCREENSHOT PLACEHOLDER: swap the div for an <img> (1600x1000, WebP with
   width/height set and loading="lazy") of the real tab. */
.lp-shot-slot {
  aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); text-align: center; padding: 16px;
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r);
  box-shadow: var(--elev-2);
}

.lp-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; max-width: 30rem; }
.lp-form input {
  flex: 1 1 240px; min-width: 0; min-height: 44px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--control-border);
  border-radius: var(--r-sm); padding: 8px 12px;
}
.lp-form input:focus-visible { outline: 2px solid var(--lp-amber); outline-offset: 1px; }
.lp-form button {
  flex: 0 0 auto; min-height: 44px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--control-border);
  border-radius: var(--r-sm); padding: 8px 20px;
}
.lp-form button:hover { border-color: var(--lp-amber); color: var(--lp-amber); }
.lp-form-msg { font-size: 15px; margin: 12px 0 0; }
.lp-form-msg.bad { color: var(--bad); }
/* In the hero (2026-10-10): the search sits right under the headline, a
   size up from the in-page form, on the hero's own colours. */
.lp-hero .lp-hero-search { max-width: 36rem; margin-top: 32px; }
.lp-hero .lp-hero-search input {
  flex-basis: 160px; min-height: 52px; font-size: 17px; color: var(--lp-ink);
  background: rgb(var(--lp-scrim-rgb) / 0.8); border-color: var(--lp-ink-muted);
}
.lp-hero .lp-hero-search input::placeholder { color: var(--lp-ink-muted); opacity: 1; }
.lp-hero .lp-hero-search button {
  min-height: 52px; padding: 8px 24px; color: var(--lp-ink);
  background: rgb(var(--lp-scrim-rgb) / 0.8); border-color: var(--lp-amber);
}
.lp-hero .lp-hero-search button:hover { background: var(--lp-amber); color: var(--lp-amber-ink); }
.lp-hero .lp-form-msg.bad { color: var(--lp-amber-soft); }
.lp-hero .lp-form-msg + .lp-trust { margin-top: 12px; }
/* First-time experience (2026-10-11): the read-only promise right under the
   box, then the example wallet for a visitor with no address to hand. */
.lp-trust { font-size: 16px; line-height: 1.5; color: var(--lp-ink); margin: 12px 0 0; }
.lp-example { margin-top: 4px; }
.lp-arrow[hidden] { display: none; }

/* What we index (2026-10-10): one card per protocol and where it stands. */
.lp-protos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px;
}
.lp-proto {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 12px;
  padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.lp-proto h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.lp-proto p { grid-column: 1 / -1; margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.lp-proto-state {
  padding: 0 8px; border: 1px solid currentColor; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
}
.lp-proto-live { color: var(--good); }
.lp-proto-next { color: var(--lp-amber); }
.lp-proto-planned { color: var(--ink-muted); }

/* The closing band: one last way in for whoever read to the bottom. */
.lp-close { text-align: center; }
.lp-close .lp-intro { margin-left: auto; margin-right: auto; }
.lp-close .lp-btn { color: var(--lp-amber-ink); }

/* .lp-scroll and .lp-table are shared with account.html's Plans card and
   marketplace.html; their base stays as it was, and the landing page's
   larger type is scoped to it. */
.lp-scroll { overflow-x: auto; }
.lp-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13.5px; }
.lp-table th, .lp-table td { text-align: left; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--line); }
.lp-table thead th { color: var(--ink-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.lp-table tbody td:first-child { color: var(--ink); font-weight: 500; }
.lp-table tbody td { color: var(--ink-muted); }

.lp-page .lp-scroll { margin-top: 24px; }
.lp-page .lp-table, .lp-sources { border-collapse: collapse; width: 100%; font-size: 15px; }
.lp-page .lp-table { min-width: 560px; }
.lp-page .lp-table-compact { min-width: 0; }
.lp-page .lp-table caption { text-align: left; font-size: 15px; font-weight: 600; color: var(--ink); padding-bottom: 8px; }
.lp-page .lp-table th, .lp-page .lp-table td, .lp-sources th, .lp-sources td {
  text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line);
}
.lp-sources thead th { color: var(--ink-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.lp-page .lp-table-compact td:first-child { color: var(--ink-muted); font-weight: 400; width: 2em; }
.lp-sources tbody th { color: var(--ink); font-weight: 600; width: 28%; }
.lp-sources tbody td { color: var(--ink-muted); }
.lp-src-own { color: var(--lp-amber); font-weight: 600; }
.lp-live, .lp-soon {
  display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid currentColor; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; vertical-align: 1px;
}
.lp-live { color: var(--good); }
.lp-soon { color: var(--ink-muted); }
.lp-note { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 16px 0 0; }

/* ---- footer ---- */
.lp-foot { max-width: 1120px; margin: 0 auto; padding: 48px 24px 32px; border-top: 1px solid var(--line); color: var(--ink-muted); }
.lp-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; }
.lp-foot nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lp-foot h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 4px; }
.lp-foot a { display: inline-block; padding: 4px 0; font-size: 15px; color: var(--ink); text-decoration: none; }
.lp-foot a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lp-amber); }
.lp-foot-line {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px;
}

/* ---- phones and small tablets ---- */
@media (max-width: 767px) {
  /* Text goes in the sky at the top; the field and the streak stay in the
     bottom part of the picture, below the buttons. */
  .lp-hero { min-height: 0; }
  .lp-hero-art::after {
    background: linear-gradient(180deg,
      rgb(var(--lp-scrim-rgb) / 0.88) 0%, rgb(var(--lp-scrim-rgb) / 0.7) 55%, rgb(var(--lp-scrim-rgb) / 0) 80%);
  }
  .lp-hero-art {
    background:
      radial-gradient(160% 40% at 60% 104%, var(--lp-glow) 0%, var(--lp-field) 30%, transparent 66%),
      linear-gradient(180deg, var(--lp-sky) 0%, var(--lp-sky-2) 60%, var(--lp-horizon) 100%);
  }
  /* Meteors keep to the empty field under the buttons, with a shorter fall. */
  .lp-star { top: auto; bottom: 150px; right: 8%; width: 96px; animation-name: lp-star-sm; }
  .lp-star:nth-child(2) { top: auto; bottom: 170px; right: 44%; width: 72px; }
  .lp-star:nth-child(3) { top: auto; bottom: 110px; right: 2%; width: 64px; }
  .lp-star:nth-child(4) { top: auto; bottom: 160px; right: 24%; width: 104px; }
  .lp-star:nth-child(5) { top: auto; bottom: 120px; right: 58%; width: 72px; }
  .lp-nav { padding: 12px 16px; }
  .lp-nav-anchor { display: none; }
  .lp-nav-links a { padding: 8px; }
  .lp-nav-links .lp-nav-cta { margin-left: 4px; }
  .lp-hero-copy { margin: 0; padding: 32px 16px 192px; }
  .lp-mission { font-size: 17px; }
  .lp-btn { flex: 1 1 100%; justify-content: center; }
  .lp { padding: 0 16px 24px; }
  .lp-section { padding: 48px 0; }
  .lp-h2 { font-size: 24px; }
  .lp-feature, .lp-feature:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0; }
  .lp-feature:nth-of-type(even) .lp-shot { grid-column: auto; grid-row: auto; }
  /* The sources table stacks into one block per row: three columns of
     sentences don't fit 390px, and sideways scrolling hides the point. */
  .lp-sources thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lp-sources, .lp-sources tbody, .lp-sources tr, .lp-sources th, .lp-sources td { display: block; width: auto; }
  .lp-sources tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .lp-sources tbody th, .lp-sources tbody td { padding: 0; border: 0; width: auto; }
  .lp-sources tbody td { margin-top: 4px; }
  .lp-foot { padding: 32px 16px 24px; }
}
@media (max-width: 420px) {
  .lp-mark { font-size: 16px; }
  .lp-mark img { height: 32px; }
  .lp-nav-links a[href="#pricing"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-star { display: none; animation: none; }
  .lp-reel-strip { transition: none; }
  .lp-reel-strip.is-spinning { filter: none; }
  .lp-arrow span { transition: none; }
  .lp-arrow:hover span { transform: none; }
}

/* ==========================================================================
   The BTC price page (2026-09-20, app/static/price.js)

   Marks follow the dashboard's categorical tokens rather than a second
   palette, which also means the chart is re-checked for colour-vision
   separation every time those tokens change. Grid and axis stay recessive
   on purpose: they orient the eye and must never compete with the line.
   ========================================================================== */
.pr-stats {
  display: grid; gap: 16px 24px; margin: 24px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.pr-stat { display: flex; flex-direction: column; gap: 2px; }
.pr-stat-label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.pr-stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pr-stat-sub { font-size: 12px; color: var(--ink-muted); }
.pr-stat.bad .pr-stat-value { color: var(--bad); }

.pr-controls { display: flex; gap: 8px; margin: 20px 0 8px; }
.pr-controls button {
  font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-muted);
}
.pr-controls button[aria-pressed="true"] {
  background: var(--surface-2); border-color: var(--accent); color: var(--ink); font-weight: 600;
}

.pr-figure { margin: 0; }
.pr-figure figcaption { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 8px; }
.pr-chart { position: relative; width: 100%; }
.pr-axis { font-size: 12px; fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pr-mark { font-size: 12px; font-weight: 600; }
.pr-empty { font-size: 13.5px; color: var(--ink-muted); padding: 32px 0; }

/* Identity is never colour alone: a legend for both series, plus each
   line labelled at its own end in the chart. */
.pr-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; font-size: 12.5px; }
.pr-legend-item { display: inline-flex; align-items: baseline; gap: 8px; }
.pr-legend-label { color: var(--ink); font-weight: 600; }
.pr-legend-sub { color: var(--ink-muted); }
.pr-swatch { display: inline-block; width: 9px; height: 9px; border-radius: var(--r-2xs); flex: 0 0 auto; }

.pr-provenance { margin-top: 8px; }
.pr-prov-key { font-size: 12px; color: var(--ink-muted); margin: 4px 0 0; }

/* `display: flex` on a class beats the browser's `[hidden]` rule, so this
   needs saying explicitly or an empty tooltip box sits on the page. */
.pr-tip[hidden] { display: none; }
.pr-tip {
  position: absolute; top: 8px; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-raised); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; min-width: 180px;
  color: var(--ink); box-shadow: var(--elev-3);
}
.pr-tip strong { font-size: 12px; }
.pr-tip-row { display: flex; align-items: baseline; gap: 8px; }
.pr-tip-label { color: var(--ink-muted); flex: 1 1 auto; }
.pr-tip-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.pr-tip-gap { color: var(--ink-muted); }

.pr-table-wrap { margin: 24px 0 0; }
.pr-table-wrap summary { cursor: pointer; font-size: 13.5px; color: var(--ink-muted); }
.pr-table-wrap summary:hover { color: var(--ink); }
.pr-note { font-size: 12px; color: var(--ink-muted); }

/* Glossary hover/focus tooltips (2026-09-30, #545, app/static/glossary.js):
   sat, UTXO, commit/reveal, wherever those words are raw jargon in a field
   label rather than something already explained in prose. Same floating
   shape as .pr-tip above, just anchored to the term rather than the mouse. */
.gloss-term { border-bottom: 1px dotted var(--ink-muted); cursor: help; }
/* 2026-10-11 tab-order pass: no outline:none here; it hid the keyboard ring with nothing in its place */
.gloss-term:hover, .gloss-term:focus { color: var(--accent); }
.gloss-tip {
  position: absolute; z-index: 1200; max-width: 260px;
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: var(--elev-3); padding: 8px 12px; font-size: 12px; line-height: 1.5; color: var(--ink);
  pointer-events: none;
}

@media (max-width: 520px) {
  .pr-stat-value { font-size: 18px; }
  .pr-tip { min-width: 150px; font-size: 12px; }
}

/* The masthead price is a link to where it came from (2026-09-20). Styled
   to stay looking like the reading it is -- an underline on hover is
   enough of an invitation without turning a number into a button. */
a.btc-price-link { color: inherit; text-decoration: none; }
a.btc-price-link[href]:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* An on-chain estimate the method isn't sure of (2026-10-13, app.js renderBtcPrice). */
a.btc-price-link.btc-price-low { color: var(--warn, var(--ink)); }
/* The cross-check's legend swatch mirrors its dashed stroke, so the key
   matches the chart rather than just naming the colour. */
.pr-swatch.dashed { background: transparent !important; border: 1.5px dashed; height: 0; border-radius: 0; width: 12px; align-self: center; }

/* Hot collections (2026-09-20) -- the same card as Hot runes, plus a line
   naming its source. Every other panel on the Signals tab is read from
   the node; this one is a scrape, and the tab's own claim depends on the
   difference being visible rather than assumed. */
.hot-name { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-source { font-size: 12px; line-height: 1.5; color: var(--ink-muted); margin: 8px 0 0; }

/* Bitcoin headlines (2026-09-20, app/static/news.js). Sits at the foot of
   the node column, deliberately quieter than the numbers above it: this is
   context, not a reading. */
.news-card { margin-top: 24px; }
.news-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.news-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; }
.news-title {
  display: block; font-size: 13px; line-height: 1.45; font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.news-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.news-meta { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.news-source { font-weight: 600; }

/* ---------- Arrangeable panels (layout.js) ----------
   One twelve-column grid per tab. A card spans a whole number of twelfths,
   so any arrangement reflows instead of overlapping, and there is no width
   at which a saved layout comes out broken.

   Two narrower steps below: --card-w-md promotes quarter-width cards to a
   half, and under 760px everything is full width. Both properties are set
   by layout.js alongside --card-w, so this stylesheet never has to know
   what any particular card is -- and the promotion has to land on a width
   that still tiles, which is why it isn't simply max(6, w). */
.lay-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
/* margin: 0 -- the cards carried their own margin-bottom before the grid
   existed; the gap does that job now. */
.lay-grid > [data-card] { grid-column: span var(--card-w, 12); min-width: 0; margin: 0; }

/* The Overview is two independent columns, and it stays that way: each is
   its own grid root inside one zone, so a panel can still be dragged from
   one to the other, but the default arrangement is byte-for-byte the flow
   the page has always had. Folding both columns into a single twelve-wide
   grid was the other option and it would have changed how the tab looks
   for everybody who never opens edit mode -- rows in a grid align, so a
   short panel beside a tall one leaves a hole that the two independent
   columns simply don't have.

   These cards carry no panel chrome; the Overview's blocks are open flow,
   and the 40px top margin on each .section-head is what has always spaced
   them, so the grid contributes no row gap and stays out of the way. */
.ov-card { min-width: 0; }
[data-grid^="overview"] { column-gap: 20px; row-gap: 0; }
[data-grid^="overview"] > .ov-card:first-child > .section-head:first-child { margin-top: 0; }
.lay-grid > [data-card].lay-off { display: none; }

@media (max-width: 900px) {
  .lay-grid > [data-card] { grid-column: span var(--card-w-md, 12); }
}
@media (max-width: 760px) {
  .lay-grid > [data-card] { grid-column: span 12; }
}

/* ---------- Edit mode ----------
   Controls are injected by layout.js only while arranging, so nothing here
   has to coexist with the dozen renderers that own these panels. */
.lay-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lay-toolbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 8px 16px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  max-width: min(calc(100vw - 24px), 720px);
}
.lay-toolbar-text { font-size: 12px; color: var(--ink-muted); }
.lay-toolbar button {
  font: inherit; font-size: 12px; padding: 8px 12px; border-radius: 7px; white-space: nowrap;
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
}
.lay-toolbar .lay-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lay-toolbar button:hover { border-color: var(--accent); }
@media (max-width: 560px) {
  /* Arranging on a phone: the hint gets its own row above the buttons. Squeezed beside them it
     ran one word to a line and stood ~200px tall over the cards (2026-10-09, touch check). */
  .lay-toolbar { flex-wrap: wrap; width: calc(100vw - 32px); gap: 8px 12px; }
  .lay-toolbar-text { flex: 1 0 100%; }
  .lay-toolbar .lay-reset { margin-left: auto; }
}

[data-editing] .lay-editable { outline: 1px dashed var(--line); outline-offset: 3px; }
[data-editing] .lay-editable:focus-within { outline: 2px solid var(--accent); }
/* A panel hidden by the layout, or one that has nothing to show yet, still
   has to be reachable while arranging -- otherwise you cannot bring it
   back, and on a fresh dashboard the tab looks empty. Shown faded, and the
   selectors are specific enough to beat the [hidden] rules further up
   without reaching for !important. */
[data-editing] .lay-grid > [data-card].lay-off,
[data-editing] .lay-grid > [data-card][hidden] { display: block; opacity: 0.5; }

/* Injected furniture inside panels this file doesn't own. Some of those
   panels are grids or flex columns themselves (the mint totals strip is a
   grid of stat tiles), and a bar dropped into one gets laid out by its
   host -- which stacked the handle, the name and the buttons vertically
   down the middle. Hence the full-row span and a selector specific enough
   to beat a host rule like `.summary > div` without !important. */
.lay-grid > [data-card] > .lay-bar,
.lay-grid > .lay-preview > .lay-bar {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  grid-column: 1 / -1; text-align: left;
  margin: -8px -8px 8px; padding: 4px 8px;
  border-radius: 7px; background: var(--bg);
}
.lay-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lay-tag { font-size: 12px; color: var(--ink-muted); font-style: italic; }
.lay-bar button {
  font: inherit; font-size: 12px; padding: 4px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent; color: var(--ink-muted); cursor: pointer;
}
.lay-bar button:hover, .lay-bar button:focus-visible { color: var(--ink); border-color: var(--accent); }
.lay-w { font-variant-numeric: tabular-nums; min-width: 42px; }

/* Starting to arrange (2026-10-09, Matthew): the bars that just appeared light up yellow for about three
   seconds (layout.js sets [data-arrange-intro], then clears it). An inset glow, so it isn't an elevation. */
[data-arrange-intro] .lay-grid > [data-card] > .lay-bar {
  animation: lay-intro 3s ease-out both;
}
@keyframes lay-intro {
  0%, 60% { background: var(--arrange-glow); box-shadow: inset 0 0 0 2px var(--arrange-glow); }
  100% { background: var(--bg); box-shadow: inset 0 0 0 0 transparent; }
}
[data-arrange-intro] .lay-grid > [data-card] > .lay-bar .lay-name,
[data-arrange-intro] .lay-grid > [data-card] > .lay-bar button { animation: lay-intro-ink 3s ease-out both; }
@keyframes lay-intro-ink {
  0%, 60% { color: var(--arrange-glow-ink); border-color: var(--arrange-glow-ink); }
}

/* ...and a bead runs round each panel's dashed edge (outline-offset 3px), throwing sparks behind it,
   for as long as arranging lasts. Decoration only: no pointer, no screen reader, nothing with reduced
   motion. The panel becomes the bead's positioning box and lets it overhang its edge while arranging. */
[data-editing] .lay-editable { position: relative; overflow: visible; }
.lay-bead {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: 0;
  border-radius: 50%; background: var(--arrange-bead); pointer-events: none; z-index: 3;
  filter: drop-shadow(0 0 4px var(--arrange-glow)) drop-shadow(0 0 8px var(--arrange-glow));
  offset-path: inset(-3px round calc(var(--r) + 3px));
  offset-rotate: auto;
}
.ui-arrange.ui-arrange-on { border-color: var(--arrange-glow); }
/* Since 2026-10-12 the bead runs one lap and lands on the drag handle (layout.js launchBeads); the
   handles then glow, after a short flare, until arranging ends. */
[data-arrange-lit] .lay-grip {
  color: var(--arrange-bead); border-color: var(--arrange-glow);
  filter: drop-shadow(0 0 3px var(--arrange-glow)) drop-shadow(0 0 6px var(--arrange-glow));
  animation: lay-grip-lit 0.5s ease-out;
}
@keyframes lay-grip-lit { from { transform: scale(1.4); } to { transform: scale(1); } }
.lay-spark {
  position: absolute; left: 2px; top: 2px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--arrange-glow); opacity: 0;
  animation: lay-spark 0.6s ease-out infinite;
}
.lay-spark:nth-child(2) { animation-delay: 0.15s; --dy: -12px; }
.lay-spark:nth-child(3) { animation-delay: 0.3s; --dy: 8px; }
.lay-spark:nth-child(4) { animation-delay: 0.45s; --dy: -4px; }
@keyframes lay-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-20px, var(--dy, 12px)) scale(0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .lay-bead { display: none; }
  [data-arrange-lit] .lay-grip { animation: none; }
  [data-arrange-intro] .lay-grid > [data-card] > .lay-bar,
  [data-arrange-intro] .lay-grid > [data-card] > .lay-bar * { animation: none; }
}
.lay-grip { padding: 4px 4px; cursor: grab; touch-action: none; }
.lay-grip svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.lay-dragging { pointer-events: none; }
/* The toolbar floats over the page, so make room for it or it sits on top
   of whatever panel happens to be last. */
[data-editing] body { padding-bottom: 96px; }
.lay-dragging .lay-grip { cursor: grabbing; }

/* Dragging a card (Build 26, 2026-10-08). The card being moved stays in
   the grid as the drop space: its contents are hidden but keep their
   size, so the space is the card's own width and height wherever it goes.
   An outline drawn 1px inside the edge, not a border, so a card that has
   no border of its own doesn't grow by two pixels when it becomes a space. */
[data-editing] .lay-grid > [data-card].lay-slot {
  background: var(--surface-2);
  border-color: transparent;
  box-shadow: none;
  outline: 1px dashed var(--line-strong);
  outline-offset: -1px;
  opacity: 1;
}
.lay-slot > * { visibility: hidden; }
[data-dragging], [data-dragging] body { overflow-anchor: none; }
/* The copy that follows the pointer. Placed with the translate property
   (set from layout.js on every move, never animated while dragging) so
   the lift and tilt can ease in on transform without lagging the pointer. */
.lay-preview {
  position: fixed; left: 0; top: 0; z-index: 70; margin: 0;
  pointer-events: none; overflow: hidden;
  translate: var(--lay-x, 0) var(--lay-y, 0);
  transform-origin: 50% 50%;
  background: var(--surface);
  box-shadow: var(--elev-4);
  opacity: 1;
  transition: transform 120ms ease-out;
}
.lay-preview.lay-lifted { transform: translate(0, 0) rotate(3deg) scale(1.02); }
/* Landing: only the position and the tilt animate. The size is set to the
   space's in one step (it differs only after a move across the Overview's
   columns), since animating width and height re-lays the copy every frame. */
.lay-preview.lay-landing { transition: translate 150ms ease-out, transform 150ms ease-out; }
/* The Overview's cards have no panel chrome of their own; as a space or a
   copy they need an edge to read as a card. */
.ov-card.lay-slot, .ov-card.lay-preview { border-radius: var(--r); }
@media (prefers-reduced-motion: reduce) {
  .lay-preview, .lay-preview.lay-lifted, .lay-preview.lay-landing { transform: none; transition: none; }
}

/* Collection page (2026-09-21) */
.cc-status { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-muted); }
.cc-status.s-curated { color: var(--good); border-color: currentColor; }
.cc-status.s-needs_info, .cc-status.s-disputed { color: var(--pc-warn); border-color: currentColor; }
.cc-status.s-held { color: var(--bad); border-color: currentColor; }
.cc-desc { color: var(--ink-muted); max-width: 70ch; margin: 0 0 16px; line-height: 1.5; }
.cc-small { color: var(--ink-muted); font-size: 12px; margin: 4px 0 8px; font-weight: 400; }
.cc-trait { margin: 8px 0; }
.cc-trait > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.cc-trait .sg-table-wrap { margin: 4px 0 8px; }
a.coll-link { color: inherit; text-decoration: none; }
a.coll-link:hover { color: var(--accent); text-decoration: underline; }

/* Bitmap district pictures (2026-09-21) */
.bm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.bm-tiles[hidden] { display: none; }
.bm-tile { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; min-width: 0; }
.bm-tile:hover .bm-pic, .bm-tile:focus-visible .bm-pic { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-pic { display: block; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: #fff; }
.bm-pic.loading { background: var(--surface-2); }
.bm-pic.err { display: grid; place-items: center; font-size: 12px; color: var(--ink-muted); background: var(--surface-2); text-align: center; padding: 8px; }
.bm-pic .bm-svg { display: block; width: 100%; height: 100%; }
.bm-label { font-family: var(--font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-more { align-self: center; font-size: 12px; color: var(--ink-muted); }
.bm-panel { max-width: 720px; }
.bm-large { max-width: 576px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.bm-large .bm-svg { display: block; width: 100%; height: auto; }
.bm-large rect[data-i]:hover, .bm-large rect.hl { fill: #b35f00; }
.bm-readout { text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); min-height: 1.4em; margin: 8px 0 4px; }

/* Being bought right now (2026-09-21) */
.pi-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pi-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.pi-card.mine { border-color: var(--accent); }
.pi-media { width: 76px; height: 76px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.pi-media img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pi-plate { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); text-align: center; padding: 4px; overflow-wrap: anywhere; }
.pi-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pi-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-name { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pi-name:hover { color: var(--accent); text-decoration: underline; }
.pi-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.pi-eta { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.pi-eta.next { color: var(--good); font-weight: 600; }
.pi-facts { display: flex; flex-wrap: wrap; gap: 2px 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.pi-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.pi-how { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-empty { position: static; margin: 12px 0 4px; }
.bv-legend-buy { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); }
.bv-legend-buy i { width: 11px; height: 11px; border: 2px solid var(--accent); border-radius: 3px; }
.bv-legend-buy[hidden] { display: none; }

/* Profit and loss (2026-09-21) */
.pl-kpis { margin-bottom: 16px; }
.pl-up, td.pl-up { color: var(--good); }
.pl-down, td.pl-down { color: var(--bad); }
.pl-item { color: var(--ink); text-decoration: none; font-weight: 600; display: block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-item:hover { color: var(--accent); text-decoration: underline; }
.pl-coll { display: block; font-size: 12px; color: var(--ink-muted); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-how, .pl-wallet { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.pl-closed { margin-top: 16px; }
.pl-closed > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }

/* Underpriced sales and top flippers (2026-09-21) */
.up-item { display: flex; flex-direction: column; min-width: 0; max-width: 30ch; }
.up-item > a:first-child { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.up-item > a:first-child:hover { color: var(--accent); text-decoration: underline; }
td.up-pending { color: var(--accent); font-weight: 600; }
.cc-chart { display: block; width: 100%; height: auto; }
.cc-chart .grid { stroke: var(--line); stroke-width: 1; }
.cc-chart .axis-t { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); }
.cc-chart .rd-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.cc-chart .rd-dot { fill: var(--cat-1); fill-opacity: 0.75; }
.cc-hcharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* address clustering CL-13: the owner range beside the address count (only drawn with clustering on) */
.cc-chart .cc-owner-band { fill: var(--cat-2); fill-opacity: 0.28; stroke: none; }
.cc-chart .cc-owner-line { fill: none; stroke: var(--cat-2); stroke-width: 2; stroke-dasharray: 4 4; }
.cc-key-addr { width: 16px; height: 2px; background: var(--accent); display: inline-block; }
.cc-key-owner { width: 16px; height: 8px; background: color-mix(in srgb, var(--cat-2) 40%, transparent); border-top: 2px dashed var(--cat-2); display: inline-block; }
.cc-owner-how { color: var(--accent); }
.cc-owner-range { white-space: nowrap; }
.bm-lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 12.5px; color: var(--ink-muted); }
.bm-lookup input { width: 14ch; font-family: var(--font-mono); font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); }
.bm-info { display: grid; gap: 8px; margin: 0 auto 16px; max-width: 576px; font-size: 13px; }
.bm-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; }
.bm-k { color: var(--ink-muted); }
.bm-v { overflow-wrap: anywhere; }
.bm-large rect.claimed { fill: #8a4a00; }
.bm-key { width: 11px; height: 11px; background: #F7931A; border-radius: var(--r-2xs); display: inline-block; }
.bm-key.claimed { background: #8a4a00; }
.bm-legend { justify-content: center; margin-top: 8px; }
/* The picture is the way in (2026-10-13, Peter's notes): a link over the whole card-media, above a
   live preview's iframe, opens the viewer. No button covers the art. */
.card-open { position: absolute; inset: 0; z-index: 1; border-radius: 0; }
.card-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.card-media:has(.card-open) { cursor: pointer; }
.card-media:has(.card-open:hover) { border-bottom-color: var(--line-strong); }

/* Inscription viewer (2026-09-21) */
.iv-panel { max-width: 860px; }
.iv-frame-wrap { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #000; }
.iv-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.iv-note { text-align: center; font-size: 12px; color: var(--ink-muted); margin: 8px auto 0; max-width: 640px; }
/* "Report this inscription" (2026-09-30, A6): a quieter default than the
   other viewer links so it doesn't read as equally routine, but still
   clearly there -- and unmistakably a flag on hover. */
.iv-report { color: var(--ink-muted); }
.iv-report:hover { color: var(--bad); }
/* AP-5 (app stores, 2026-10-09): Report and Hide for me as link-styled buttons, the report form at the
   top of the viewer, and the Gallery's cover for an inscription you hid. */
.rd-links button.iv-report { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.iv-report-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.iv-report-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
.iv-report-form select, .iv-report-form textarea { font: inherit; font-size: 14px; font-weight: 400; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-width: 0; }
.iv-report-form textarea { resize: vertical; }
.iv-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.iv-report-form .iv-note { text-align: left; margin: 0; }
/* The inscription's details, from our own ord (2026-10-12, app/jobs/inscription_details.py). */
.iv-details { max-width: 640px; margin: 16px auto 0; }
.iv-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: 13px; }
.iv-facts dt { color: var(--ink-muted); }
.iv-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.iv-mono { font-family: var(--font-mono); font-size: 12px; }
.iv-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.iv-sub { font-size: 13px; font-weight: 600; margin: 16px 0 8px; scroll-margin-top: 16px; }
.iv-children { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 4px 12px; }
.iv-details .iv-note, .iv-details .rd-empty { text-align: left; margin-left: 0; }
@media (max-width: 480px) {
  .iv-facts { grid-template-columns: 1fr; gap: 0; }
  .iv-facts dd { margin: 0 0 8px; }
}
.card-media.hidden-by-you { flex-direction: column; gap: 8px; }
.hidden-by-you-note { margin: 0; font-size: 13px; color: var(--ink-muted); }
.cr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cr-item { border-top: 1px solid var(--line); padding-top: 12px; }
.cr-notes { margin: 8px 0; padding-left: 20px; font-size: 13px; color: var(--ink); }
#orPanel .mono { font-family: var(--font-mono); font-size: 12px; }
.bm-v .act-badge { margin-left: 8px; }

/* My view (2026-09-21) */
.mv-picker { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 16px; margin: 0 0 16px; background: var(--surface); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; align-items: start; }
.mv-picker[hidden] { display: none; }
.mv-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mv-group legend { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; padding: 0; }
.mv-opt { display: flex; gap: 8px; align-items: baseline; font-size: 13px; cursor: pointer; }
.mv-picker > .wl-btn { grid-column: 1 / -1; justify-self: start; }
.mv-empty { color: var(--ink-muted); max-width: 64ch; }
.mv-empty[hidden] { display: none; }
#mvGrid:empty { display: none; }

/* What it costs to get in (2026-09-21, replaced the fee heat grid) */
.fee-answer { font-size: 14.5px; line-height: 1.55; max-width: 72ch; margin: 0 0 16px; color: var(--ink); }
.fee-answer b { font-weight: 700; color: var(--accent); white-space: nowrap; }
.fee-ladder-svg { display: block; width: 100%; height: auto; }
.fee-ladder-svg .fl-grid { stroke: var(--line); stroke-width: 1; }
.fee-ladder-svg .fl-axis { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); }
.fee-ladder-svg .fl-label { fill: var(--ink); font-size: 12px; font-weight: 600; font-family: var(--font-mono); }
.fee-ladder-svg .fl-sub { fill: var(--ink-muted); font-size: 12px; }
.fee-ladder-svg .fl-range { stroke: var(--line-strong); stroke-width: 2; }
.fee-ladder-svg .fl-mid { fill: color-mix(in srgb, var(--accent) 45%, transparent); }
.fee-ladder-svg .fl-next .fl-mid { fill: var(--accent); }
.fee-ladder-svg .fl-cut { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.fee-ladder-svg .fl-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.fee-ladder-svg .fl-val { fill: var(--ink); font-size: 12px; font-family: var(--font-mono); }
.fee-ladder-svg .fl-row:hover .fl-range { stroke: var(--accent); }
.fee-key { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--ink-muted); margin-top: 8px; }
.fee-key span { display: inline-flex; align-items: center; gap: 8px; }
.fee-key i { display: inline-block; }
.fee-key .fk-range { width: 18px; height: 2px; background: var(--line-strong); }
.fee-key .fk-mid { width: 18px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.fee-key .fk-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); }
.fee-key .fk-cut { width: 2.5px; height: 14px; background: var(--ink); border-radius: var(--r-2xs); }
#mvGrid > .mv-card { min-width: 0; }

/* Names card (names.js) */
.sn-ns { font-weight: 400; color: var(--ink-muted); font-size: 0.85em; margin-left: 4px; }
.sn-form { display: flex; gap: 8px; margin: 4px 0 12px; max-width: 520px; }
.sn-form input { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: 13px; padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.sn-result { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 16px; margin-bottom: 12px; background: var(--surface-2); }
.sn-result[hidden] { display: none; }
.sn-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sn-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; min-width: 0; }
.sn-big { font-size: 15px; margin-bottom: 4px; }
.sn-name { font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
.sn-meta { color: var(--ink-muted); font-size: 12px; margin: 2px 0; }
.sn-status { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-muted); }
.sn-ok { color: var(--good); border-color: currentColor; }
.sn-maybe { border-style: dashed; }
.sn-bad { color: var(--bad); border-color: currentColor; }
@media (max-width: 520px) { .sn-ns { display: none; } }
.rp-more { margin-top: 8px; }

/* Feedback form (about.html, community.js) */
.cm-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 8px 0 28px; }
.cm-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
.cm-form select, .cm-form textarea, .cm-form input { font: inherit; font-size: 14px; font-weight: 400; padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-width: 0; }
.cm-form textarea { resize: vertical; }
.cm-opt { font-weight: 400; color: var(--ink-muted); }
.cm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cm-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cm-status { font-size: 13px; color: var(--ink-muted); }
.cm-status.bad { color: var(--bad); }
.cm-discord[hidden], [data-community][hidden] { display: none; }

/* Emergency banner (banner.js, app/banner.py). Fixed colours rather than
   theme tokens: it has to look like an alarm in every layout and theme. */
.eb { position: relative; z-index: 60; margin: 0 -20px; display: flex; align-items: flex-start; gap: 12px; padding: 8px 16px; font: 500 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; border-bottom: 1px solid rgba(0,0,0,.15); }
.eb-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.eb-label { font-weight: 700; margin-right: 2px; }
.eb a.eb-link { color: inherit; text-decoration: underline; font-weight: 600; white-space: nowrap; }
.eb-close { flex: none; background: transparent; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .8; }
.eb-close:hover, .eb-close:focus-visible { opacity: 1; }
.eb-action { flex: none; background: transparent; border: 1px solid currentColor; border-radius: var(--r-xs); color: inherit; font: inherit; font-weight: 600; padding: 0 8px; cursor: pointer; }
.eb-action:hover, .eb-action:focus-visible { background: rgba(255,255,255,.15); }
/* Counting-visits question (2026-10-11, visit.js ask()): shown only where
   consent is needed (EU/EEA/UK, or country unknown). Two equal buttons, no
   pre-chosen answer, no close button: closing isn't an answer. */
.consent-bar { position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.consent-text { flex: 1 1 320px; margin: 0; max-width: 80ch; }
.consent-text a { color: var(--accent); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.eb-info { background: var(--status-info); color: var(--status-info-ink); }
.eb-warning { background: var(--status-warn); color: var(--status-warn-ink); }
.eb-critical { background: var(--status-crit); color: var(--status-crit-ink); }
/* Build 25 (#434): the test-network line, above the emergency banner; never on mainnet (app/network.py) */
.nb { position: relative; z-index: 61; margin: 0 -20px; padding: 8px 16px; font: 600 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: repeating-linear-gradient(135deg, #F2C14E 0 14px, #E5B23D 14px 28px); color: #1A1204; text-align: center; overflow-wrap: anywhere; }
.nb-label { font-weight: 800; letter-spacing: .02em; margin-right: 2px; }
/* The launch countdown (2026-10-13, app/countdown.py): under the other two banners, in the accent. */
.lc { position: relative; z-index: 59; margin: 0 -20px; padding: 8px 16px; background: var(--accent); color: var(--accent-ink); font-size: 14px; line-height: 1.5; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.lc-time { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.lc-when { font-weight: 500; }
:root[data-layout="midnight"] .lc { margin: 0; }
:root[data-layout="terminal"] .lc { margin: 0 -24px; }
@media (max-width: 640px) {
  .lc-when { display: none; }
}
/* Full width: cancel the body's side padding, which each layout sets
   (themes.css). Not sticky: it would sit over the overlays' close buttons. */
:root[data-layout="graphite"] .eb, :root[data-layout="graphite"] .nb { margin: 0 -32px; }
:root[data-layout="graphite"] .lc { margin: 0 -32px; }
:root[data-layout="midnight"] .eb, :root[data-layout="midnight"] .nb { margin: 0; }
:root[data-layout="terminal"] .eb, :root[data-layout="terminal"] .nb { margin: 0 -24px; }
@media (max-width: 640px) {
  /* After the per-layout rules above, so a phone's 16px gutter wins over
     Graphite's 32px (2026-10-14: the wider pull made every page scroll
     sideways on a phone). */
  :root[data-layout] .eb, :root[data-layout] .nb, :root[data-layout] .lc { margin: 0 -16px; }
  :root[data-layout="midnight"] .eb, :root[data-layout="midnight"] .nb, :root[data-layout="midnight"] .lc { margin: 0; }
}
/* The landing page has no body gutter (.lp-page), so nothing to pull back. */
:root[data-layout] body.lp-page .eb, :root[data-layout] body.lp-page .nb, :root[data-layout] body.lp-page .lc { margin: 0; }
/* The corner controls are positioned from the top of the page; banner.js
   sets --eb-h to the banner's height so they move down with the page. */
/* visit.js sets --cb-h the same way while its counting question is shown (2026-10-11). */
/* countdown.js sets --lc-h the same way while the launch countdown is shown (2026-10-13). */
.ui-gear, .ui-menu, .ui-bell, .al-panel { margin-top: calc(var(--eb-h, 0px) + var(--cb-h, 0px) + var(--lc-h, 0px)); }
.eb-form textarea { flex: 1 1 100%; font: inherit; padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-width: 0; }
.eb-current { font-size: 13px; }
.eb-other { font-size: 12px; }

/* Triage (triage.html, triage.js; private) */
.tr-shell { max-width: 1400px; margin: 0 auto; padding: 28px 20px 64px; color: var(--ink); }
.tr-stats { color: var(--ink-muted); font-size: 13px; }
.tr-tabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.tr-tab { font: inherit; font-size: 13px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); cursor: pointer; }
.tr-tab[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }
.tr-closed { margin-left: auto; font-size: 12.5px; color: var(--ink-muted); display: flex; gap: 8px; align-items: center; }
.tr-layout { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .tr-layout { grid-template-columns: 1fr; } }
.tr-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-row { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; background: var(--surface); cursor: pointer; }
.tr-row.on { border-color: var(--accent); }
.tr-row.overdue { border-left: 4px solid var(--bad); }
.tr-row-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.tr-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.tr-meta, .tr-item-meta, .tr-facts { font-size: 12px; color: var(--ink-muted); }
.tr-p { flex: none; font: 600 12px/1 var(--font-mono); padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-muted); }
.tr-p.p0 { background: var(--status-crit); color: var(--status-crit-ink); border-color: var(--status-crit); }
.tr-p.p1 { background: var(--status-caution); color: var(--status-caution-ink); border-color: var(--status-caution); }
.tr-p.p2 { color: var(--ink); border-color: var(--ink-muted); }
.tr-detail { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px; background: var(--surface); min-width: 0; }
.tr-d-head { display: flex; gap: 8px; align-items: center; }
.tr-d-head h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.tr-say { font-size: 13px; min-height: 1em; color: var(--good); }
.tr-say.bad { color: var(--bad); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.tr-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-muted); min-width: 0; }
.tr-field input:not([type=checkbox]), .tr-field select, .tr-field textarea, .tr-row-actions input, .tr-outcome select, .tr-outcome input, .tr-outcome textarea {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 8px; min-width: 0; }
.tr-form { display: flex; flex-direction: column; gap: 8px; }
.tr-form > .wl-btn { align-self: flex-start; }
.tr-detail h3 { font-size: 14px; margin: 20px 0 8px; }
.tr-items { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.tr-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 8px; }
.tr-item.suggested { border-style: dashed; }
.tr-item-pick { display: flex; gap: 8px; align-items: baseline; }
.tr-item-text { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }
.tr-row-actions, .tr-outcome { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.tr-row-actions input { flex: 1 1 200px; }
.tr-row-actions input.tr-num { flex: 0 0 110px; }
.tr-outcome textarea { flex: 1 1 100%; }
.tr-outcome .tr-push { flex: 0 1 200px; }
.tr-replies { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.tr-reply-st { font: 600 12px/1 var(--font-mono); text-transform: uppercase; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--line); }
.tr-reply.st-approved .tr-reply-st, .tr-reply.st-sent .tr-reply-st { color: var(--good); border-color: currentColor; }
.tr-reply.st-skipped { color: var(--ink-muted); }
.tr-log ul { font-size: 12px; color: var(--ink-muted); padding-left: 16px; }
.tr-help { margin-top: 24px; font-size: 13px; color: var(--ink-muted); max-width: 90ch; }
.tr-empty { color: var(--ink-muted); }
/* Triage: Mempool finds tab (mempool_finds.js) */
.tr-layout[hidden], .tr-closed[hidden], .mf-panel[hidden] { display: none; }
.mf-bar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.mf-show { font-size: 13px; color: var(--ink-muted); display: flex; gap: 8px; align-items: center; }
.mf-show select { font: inherit; padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--control-border, var(--line)); background: var(--surface); color: var(--ink); }
.mf-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mf-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 12px; background: var(--surface); min-width: 0; }
.mf-card.surging { border-left: 4px solid var(--warn); }
.mf-card.st-dismissed .mf-title, .mf-card.st-added .mf-title { color: var(--ink-muted); }
.mf-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.mf-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.mf-badge { flex: none; font: 600 12px/1 var(--font-mono); padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-muted); }
.mf-badge.new { border-color: var(--accent); color: var(--ink); }
.mf-badge.researching { border-color: var(--ink-muted); color: var(--ink); }
.mf-badge.added { color: var(--good); }
.mf-badge.surge { border-color: var(--warn); color: var(--ink); }
.mf-key { font: 12px/1.4 var(--font-mono); color: var(--ink-muted); overflow-wrap: anywhere; margin-top: 4px; }
.mf-preview { font: 12px/1.4 var(--font-mono); margin: 8px 0 0; padding: 8px 8px; border-radius: var(--r-pill); background: var(--surface-raised, var(--surface)); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.mf-samples { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; margin-top: 8px; font: 12px var(--font-mono); }
.mf-samples a, .mf-table a { color: var(--accent); font-family: var(--font-mono); }
.mf-h { font-size: 16px; margin: 28px 0 8px; }
.mf-sub { font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-left: 8px; }
.mf-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.mf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mf-table th, .mf-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mf-table td:nth-child(2) { white-space: normal; }
.mf-table th { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.mf-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.mf-table tr:last-child td { border-bottom: 0; }

/* Known issues (known-issues.html; public) */
.ki-list { list-style: none; padding: 0; margin: 16px 0 32px; display: flex; flex-direction: column; gap: 8px; max-width: 74ch; }
.ki-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ki-status { grid-row: span 2; font: 600 12px/1.2 var(--font-mono); text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface-2); align-self: start; }
.ki-fixed .ki-status { color: var(--good); }
.ki-title { font-weight: 600; overflow-wrap: anywhere; }
.ki-meta { font-size: 12px; color: var(--ink-muted); }
.ki-empty { color: var(--ink-muted); }

/* Signal track record (track-record.html; public, #379, 2026-09-25):
   a dated audit log, grouped by day -- same list shape as Known issues
   above, one .tr-day section per calendar day. */
.tr-days { max-width: 74ch; }
.tr-day { margin: 24px 0; }
.tr-date { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.tr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.tr-tag { font: 600 12px/1.2 var(--font-mono); text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-muted); white-space: nowrap; align-self: start; }
.tr-body { overflow-wrap: anywhere; }
.tr-addr, .tr-item-link { color: var(--accent); }
.tr-time { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.tr-empty { color: var(--ink-muted); }
@media (max-width: 560px) {
  .tr-row { grid-template-columns: 1fr; }
  .tr-time { grid-column: 1; }
}

/* P0 strip on the private dashboard (triage_strip.js) */
.tr-strip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 16px; margin: 12px 0 0; border-radius: var(--r-md); background: var(--status-crit); color: var(--status-crit-ink); font-size: 13.5px; }
.tr-strip[hidden] { display: none; }
.tr-strip a { color: var(--status-crit-ink); font-weight: 600; }

/* Price ticker on the private dashboard (ticker.js): BTC/USD plus whatever
   is on the Watchlist, scrolling. */
.ticker-strip { display: flex; align-items: stretch; gap: 8px; margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.ticker-strip[hidden] { display: none; }
/* The marquee used to put overflow:hidden on the animated element itself, so
   the clip box slid left with the content (translateX moves the box) and
   chips were cut off mid-strip with empty space after them (2026-10-05).
   The clip now lives on a fixed .ticker-viewport; the track just slides
   inside it. A list that fits is shown static, not scrolled. */
.ticker-viewport { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; align-items: center; gap: 32px; padding: 0 16px; white-space: nowrap; width: max-content; min-width: 100%; box-sizing: border-box; }
/* No left padding while sliding: the loop distance (half the track) is then exactly one copy plus its gaps. */
.ticker-track.tk-scroll { animation: tk-scroll 32s linear infinite; min-width: 0; padding: 0 32px 0 0; }
.ticker-strip:hover .ticker-track.tk-scroll,
.ticker-strip:focus-within .ticker-track.tk-scroll { animation-play-state: paused; }
@keyframes tk-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track.tk-scroll { animation: none; }
  .ticker-viewport { overflow-x: auto; }
}
.tk-item { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 12px 0; }
.tk-label { font-weight: 600; color: var(--ink); text-decoration: none; }
.tk-label:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tk-price { font-family: var(--font-mono); color: var(--ink); }
.tk-chg { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.tk-chg.good { color: var(--good); }
.tk-chg.bad { color: var(--bad); }
.tk-empty { color: var(--ink-muted); font-size: 13px; padding: 12px 0; }
.ticker-manage { flex: none; align-self: center; margin-right: 12px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--control-border, var(--line-strong)); background: var(--surface); color: var(--ink-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.ticker-manage:hover, .ticker-manage[aria-expanded="true"] { color: var(--ink); border-color: var(--line-strong); }
/* Per-chip remove control: quiet until you're actually looking at it,
   same idea as .eb-close -- no circle, no border, just an × that steps
   forward on hover/focus. Sits outside the chip's own link so clicking it
   never navigates. */
.tk-remove { flex: none; align-self: center; background: transparent; border: 0; color: var(--ink-muted); font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer; opacity: .55; }
.tk-remove:hover, .tk-remove:focus-visible { opacity: 1; color: var(--bad); }
.ticker-add { margin: 8px 0 0; }
.ticker-add-hint { margin: 0; font-size: 12px; color: var(--ink-muted); }

/* Cheapest times to send (analytics.js) */
.ft-wrap { overflow-x: auto; }
.ft-grid { display: grid; grid-template-columns: 34px repeat(24, minmax(14px, 1fr)); gap: 2px; min-width: 420px; }
.ft-cell { height: 18px; border-radius: 3px; }
.ft-cell.ft-empty { background: var(--surface-2); }
.ft-hlabel { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: visible; }
.ft-dlabel { font-size: 12px; color: var(--ink-muted); align-self: center; }
.ft-key { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-muted); margin-top: 8px; }
.ft-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.ft-lo { background: rgba(34, 160, 90, 0.7); }
.ft-hi { background: rgba(220, 60, 50, 0.7); }
.ft-none { background: var(--surface-2); }

/* Open rune mints */
.om-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.om-row { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; min-width: 0; }
.om-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.om-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; color: var(--ink); text-decoration: none; }
.om-name:hover { text-decoration: underline; }
.om-status { flex: none; font: 600 12px/1 var(--font-mono); text-transform: uppercase; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink-muted); }
.om-status.st-open { color: var(--good); border-color: currentColor; }
.om-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); margin: 8px 0 4px; overflow: hidden; }
.om-fill { display: block; height: 100%; background: var(--accent); }
.om-meta { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

/* Which pools mine inscriptions */
.vx-chip { font: 600 12px/1.2 var(--font-mono); padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); white-space: nowrap; }
.vx-bad { background: var(--status-crit); color: var(--status-crit-ink); border-color: var(--status-crit); }
.vx-warn { color: var(--status-warn-text); border-color: currentColor; }
.vx-ok { color: var(--good); border-color: currentColor; }
.vx-na { color: var(--ink-muted); }

/* Market indexes and wash-trade tiles */
.mx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mx-tile { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; min-width: 0; }
.mx-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.mx-value { font: 600 26px/1.2 var(--font-mono); margin: 4px 0; }
.mx-meta { font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; margin-top: 2px; }
.mx-spark { width: 100%; height: 48px; display: block; margin: 8px 0; }
.mx-line { fill: none; stroke-width: 2; }
.mx-line.up { stroke: var(--good); }
.mx-line.down { stroke: var(--bad); }
.mx-base { stroke: var(--line); stroke-dasharray: 3 3; }
.wx-pairs { font-size: 13px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.wx-meta { color: var(--ink-muted); font-size: 12px; }
/* 11px, not 10px (#impeccable typeset, 2026-09-28) -- every other secondary/
   metadata label in this file sits at an 11px floor; this was the one place
   that had drifted a pixel under it. */
.wash-chip { font: 600 12px/1 var(--font-mono); text-transform: uppercase; padding: 2px 8px; border-radius: 5px; border: 1px dashed var(--bad); color: var(--bad); white-space: nowrap; }
/* A sale/trade past the mempool but not yet past the reorg-watch depth
   (util.js confChip, 2026-10-04) -- not a warning like .wash-chip, just
   "not fully settled yet", so it borrows .venue-chip's quieter dashed
   treatment with --accent in place of --ink-muted rather than --bad's red. */
.confirming-chip { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill); border: 1px dashed var(--accent); color: var(--accent); white-space: nowrap; vertical-align: 1px; }

/* Overview's one line about the network (the rest is on the Mempool tab) */
.net-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 13px; }
.net-item { display: inline-flex; align-items: baseline; gap: 8px; }
.net-k { color: var(--ink-muted); font-size: 12px; }
.net-item b { font-variant-numeric: tabular-nums; font-weight: 600; }
.net-go { margin-left: auto; }

/* Reference pages for search and AI (app/seo.py) */
.doc-crumbs { font-size: 13px; color: var(--ink-muted); margin-bottom: 8px; }
.doc-crumbs a { color: var(--ink-muted); }
.doc-updated { font-size: 13px; color: var(--ink-muted); margin-top: 24px; }
.ent-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.ent-stats > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 12px 16px; }
.ent-stats dt { font-size: 12px; color: var(--ink-muted); }
.ent-stats dd { margin: 4px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ent-how { font-size: 12px; margin-left: 4px; }

/* Private Visitors page (visitors.js) and the About page's opt-out */
.vs-nav { display: flex; gap: 16px; align-items: baseline; }
.vs-bar { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 8px 0 16px; }
.vs-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.vs-kpi-label { font-size: 12px; color: var(--ink-muted); }
.vs-kpi-value { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1; }
.vs-kpi-sub { font-size: 12px; color: var(--ink-muted); }
.vs-card { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px; background: var(--surface); min-width: 0; }
.vs-card h2 { font-size: 15px; margin: 0 0 4px; }
.vs-card h3 { font-size: 13px; margin: 16px 0 4px; }
/* Admin directory page (2026-09-25): one link-card per private page. */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 16px; }
.admin-card { display: block; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.admin-card:hover, .admin-card:focus-visible { border-color: var(--accent); }
.admin-card h2 { font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.admin-card p { font-size: 12px; color: var(--ink-muted); margin: 0; }
.vs-sub { font-size: 12px; color: var(--ink-muted); margin: 0 0 8px; }
.vs-chart-card { position: relative; margin-bottom: 16px; }
.vs-chart { width: 100%; }
.vs-chart svg { display: block; overflow: visible; }
.vs-col { fill: var(--accent); }
.vs-hit { fill: transparent; cursor: pointer; }
.vs-hit:hover { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.vs-grid-line { stroke: var(--line); stroke-width: 1; opacity: 0.6; }
.vs-axis { stroke: var(--ink-muted); stroke-width: 1; }
.vs-tick { fill: var(--ink-muted); font: 12px var(--font-mono); }
.vs-deploy-mark { fill: var(--ink-muted); }
.vs-tip { position: absolute; top: 56px; width: 240px; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-raised, var(--surface)); box-shadow: var(--elev-2); font-size: 12px; color: var(--ink); pointer-events: none; z-index: 2; }
.vs-tip[hidden] { display: none; }
.vs-table-toggle { margin-top: 8px; font-size: 13px; }
.vs-table-toggle summary { cursor: pointer; color: var(--ink-muted); }
.vs-scroll { max-height: 320px; overflow: auto; margin-top: 8px; }
/* 2026-10-11 tab-order pass: these wrappers are Tab stops (tabindex=0, so a keyboard can scroll them);
   with no rows yet they have no size, and the focus ring vanished into nothing. Hide them until a row exists. */
.vs-scroll:not(:has(tr)), .lab-table-wrap:not(:has(tr)) { display: none; }
.vs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vs-table th, .vs-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.vs-table th { font-size: 12px; color: var(--ink-muted); font-weight: 600; position: sticky; top: 0; background: var(--surface); }
.vs-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.vs-table .mono { font-family: var(--font-mono); font-size: 12px; }
/* Payments ops page (2026-09-25): outcome/status chips inside a vs-table
   row. Not a pill (UI-Design-Rulebook.md) -- 4px corners, a border, no
   fully-rounded ends. */
.pm-chip { display: inline-block; padding: 1px 8px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; }
.pm-chip.pm-good { border-color: var(--good); color: var(--good); }
.pm-chip.pm-bad { border-color: var(--bad); color: var(--bad); }
.pm-fee-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.pm-fee-fields > div { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.pm-fee-fields input { width: 100%; flex: 0 0 auto; }
.pm-row-flagged td { background: color-mix(in srgb, var(--bad) 8%, transparent); }
/* Taxes page (2026-10-12): every state fits without a second scroll; the totals row stands apart. */
.vs-scroll.tx-tall { max-height: 640px; }
.pm-row-flagged th { background: color-mix(in srgb, var(--bad) 8%, transparent); }
.vs-table tfoot th, .vs-table tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
@media (max-width: 440px) { .vs-grid { grid-template-columns: 1fr; } }
.vs-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vs-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(40px, 1fr) 56px 40px; gap: 8px; align-items: center; font-size: 13px; }
.vs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.vs-label.mono { font: 12px var(--font-mono); }
.vs-meter { height: 8px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.vs-meter-fill { display: block; height: 100%; border-radius: var(--r-xs); background: var(--accent); }
.vs-meter-fill.warn { background: var(--bad); }
/* System status page (2026-09-25): one row per resource reading, value and
   an optional capacity meter stacked in the second column. */
.sy-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.sy-row:first-child { border-top: none; }
.sy-row-label { color: var(--ink); }
.sy-row-label.mono { font-family: var(--font-mono); font-size: 12px; }
.sy-row-detail { display: flex; flex-direction: column; gap: 4px; }
.sy-row-value { font-variant-numeric: tabular-nums; color: var(--ink); }
.sy-row-note { color: var(--ink-muted); font-size: 12px; }
/* BRC-20 sync card (2026-10-13): on a phone the label sits above its reading instead of beside it */
@media (max-width: 480px) { .sy-rows-stack .sy-row { grid-template-columns: 1fr; gap: 4px; } }
/* Restart control (2026-09-25), same card. Its own top border so it reads
   as one more row of "this machine" rather than a separate block. */
.sy-restart { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sy-restart-confirm { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sy-restart-confirm[hidden] { display: none; }
.sy-restart-actions { display: flex; gap: 8px; }
.sy-restart-confirm input { font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; max-width: 320px; }
.sy-restart-status { color: var(--ink-muted); font-size: 12px; margin: 8px 0 0; min-height: 16px; }
.vs-n { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.vs-share { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-muted); font-size: 12px; }
/* Feature discovery (2026-09-26): label + two shares, no meter -- new vs.
   returning visitors compared side by side instead of one ranked bar. */
.vs-row-cmp { grid-template-columns: minmax(0, 2fr) 56px 56px; }
/* Same-day patterns (2026-09-26): label + one correlation figure. */
.vs-row-co { grid-template-columns: minmax(0, 3fr) 96px; }
/* Features by device (2026-09-26): label + phone/tablet/desktop counts. */
.vs-row-dev { grid-template-columns: minmax(0, 2fr) 40px 40px 40px; }
.vs-row-head, .vs-row-head .vs-label, .vs-row-head .vs-n { font-size: 12px; color: var(--ink-muted); }
.vs-row-cmp3 { grid-template-columns: minmax(0, 2fr) 48px 48px 44px; }
.vs-row-restart { grid-template-columns: minmax(0, 2fr) 56px 64px; }
.vs-row-perf { grid-template-columns: minmax(0, 1.4fr) 44px 44px 44px 48px; }
.vs-row-wallet { grid-template-columns: minmax(0, 2fr) 40px 44px minmax(0, 1.3fr); }
.vs-row-wallet .vs-fail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Visitors: weekday x hour heatmap (2026-10-11, push_window.js). One hue
   (the accent) in five steps mixed into the surface; an hour with no views
   is a faint neutral, an hour not yet in the period is left empty. */
.vs-card-wide { grid-column: 1 / -1; }
.vs-heat { position: relative; width: 100%; }
.vs-heat svg { display: block; overflow: visible; }
.vs-heat-cell { cursor: pointer; }
.vs-heat-cell.s0 { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.vs-heat-cell.s1, .vs-heat-key.s1 { fill: color-mix(in srgb, var(--accent) 20%, var(--surface)); background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.vs-heat-cell.s2, .vs-heat-key.s2 { fill: color-mix(in srgb, var(--accent) 40%, var(--surface)); background: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.vs-heat-cell.s3, .vs-heat-key.s3 { fill: color-mix(in srgb, var(--accent) 60%, var(--surface)); background: color-mix(in srgb, var(--accent) 60%, var(--surface)); }
.vs-heat-cell.s4, .vs-heat-key.s4 { fill: color-mix(in srgb, var(--accent) 80%, var(--surface)); background: color-mix(in srgb, var(--accent) 80%, var(--surface)); }
.vs-heat-cell.s5, .vs-heat-key.s5 { fill: var(--accent); background: var(--accent); }
.vs-heat-cell.unseen { fill: transparent; stroke: var(--line); stroke-width: 1; }
.vs-heat-cell.best, .vs-heat-cell.best:hover { stroke: var(--ink); stroke-width: 2; }
.vs-heat-cell:hover { stroke: var(--ink-muted); stroke-width: 1; }
.vs-heat-tip { top: 0; }
.vs-heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 12px; color: var(--ink-muted); }
.vs-heat-key { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-2xs); }
.vs-heat-key.best { margin-left: 8px; border: 2px solid var(--ink); background: transparent; }
.about-optout label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.about-optout-note { color: var(--ink-muted); font-size: 13px; margin-left: 8px; }
.cm-consent a { color: var(--accent); }
.cm-consent { font-size: 13px; color: var(--ink-muted); margin: 4px 0 0; max-width: 72ch; }
.doc-shell code { overflow-wrap: anywhere; word-break: break-word; }
/* A code block keeps to the page's width (SEO audit T-5, 2026-10-17): it scrolls
   inside its own box, and the embed snippet (/embed) wraps there instead, so a
   long URL never gives a phone's page a sideways scroll. */
.doc-shell pre { max-width: 100%; overflow-x: auto; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-xs); }
.doc-shell pre code { padding: 0; background: none; }
.doc-shell pre.doc-snippet { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Placeholder outlines while a panel loads (2026-09-22). A container marked
   .skel shows grey bars while it's still empty; the moment its script fills
   it, :empty stops matching and they're gone. Stat values (and subs marked
   .skel-sub) start empty and show a bar.
   2026-10-09 (critique P1): each placeholder is settled on its own by
   placeholders.js, which sets data-skel-state="empty" | "error" | "quiet" and
   puts an honest line next to it; a settled figure shows a dash. Pages
   without placeholders.js keep util.js's 15 s .skel-done fallback. */
.skel[hidden] { display: none !important; }
:root { --skel: color-mix(in srgb, var(--ink) 9%, transparent); --skel-2: color-mix(in srgb, var(--ink) 5%, transparent); }
html:not(.skel-done) .skel:empty:not([data-skel-state]) {
  display: block;
  min-height: 88px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(var(--skel), var(--skel)) 0 4px / 92% 12px no-repeat,
    linear-gradient(var(--skel-2), var(--skel-2)) 0 30px / 78% 12px no-repeat,
    linear-gradient(var(--skel), var(--skel)) 0 56px / 85% 12px no-repeat;
  animation: skel-pulse 1.6s ease-in-out infinite;
}
html:not(.skel-done) .skel.skel-block:empty:not([data-skel-state]) {
  min-height: 140px;
  background: var(--skel-2);
  box-shadow: inset 0 0 0 1px var(--skel);
}
html:not(.skel-done) .stat-value:empty:not([data-skel-state])::before,
html:not(.skel-done) .stat-sub.skel-sub:empty:not([data-skel-state])::before,
html:not(.skel-done) .net-item b:empty::before {
  content: "";
  display: inline-block;
  width: 6ch;
  height: 0.8em;
  border-radius: var(--r-xs);
  background: var(--skel);
  vertical-align: middle;
  animation: skel-pulse 1.6s ease-in-out infinite;
}
html:not(.skel-done) .stat-sub.skel-sub:empty:not([data-skel-state])::before { width: 9ch; height: 0.7em; background: var(--skel-2); }
html.skel-done .stat-value:empty::before, html.skel-done .net-item b:empty::before,
.stat-value[data-skel-state]:empty::before { content: "–"; color: var(--ink-muted); }
/* a settled placeholder's line sits where the panel would be */
.skel-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.skel-note-error { border-style: solid; border-color: var(--line-strong); color: var(--ink); }
.skel-note .wl-btn { margin-left: auto; }
@keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.skel-done) .skel:empty, html:not(.skel-done) .stat-value:empty::before,
  html:not(.skel-done) .stat-sub.skel-sub:empty::before, html:not(.skel-done) .net-item b:empty::before { animation: none; }
}

/* Collection page: the items grid (2026-09-22, collection_detail.js) */
.ci-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.ci-search { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--control-border, var(--line)); background: var(--surface); color: var(--ink); min-width: 0; flex: 1 1 200px; max-width: 320px; }
.ci-sort { font-size: 13px; color: var(--ink-muted); display: flex; gap: 8px; align-items: center; }
.ci-sort select { font: inherit; padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--control-border, var(--line)); background: var(--surface); color: var(--ink); }
.ci-traits { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ci-trait-menu { max-height: 260px; overflow-y: auto; }
.ci-trait-clear { margin-top: 0; }
.ci-status { min-height: 1.4em; }
.ci-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.ci-grid > li { min-width: 0; }
.ci-item { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 0 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.ci-item:hover { border-color: var(--accent-soft, var(--accent)); }
.ci-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ci-media { display: grid; place-items: center; aspect-ratio: 1; background: var(--surface-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.ci-media img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ci-name { padding: 0 8px; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-sale { padding: 0 8px; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; }
.ci-pager:empty { display: none; }
.ci-pager .wl-btn:disabled { opacity: 0.5; cursor: default; }
.ci-sec.loading .ci-grid { opacity: 0.6; }
@media (max-width: 480px) { .ci-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } .ci-search { max-width: none; } }

/* Collections this site lists itself (2026-09-22): the status chip and the Triage tab */
.cc-status.s-added { color: var(--accent); border-color: currentColor; }
.lc-why { font-size: 13px; margin: 8px 0 0; color: var(--ink); }
.lc-add .tr-row-actions input.mono { flex: 2 1 320px; }
.lc-card .mf-title { font-weight: 600; }
.lc-card a.mf-title { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.lc-card a.mf-title:hover { color: var(--accent); }
.lc-card a.wl-btn { text-decoration: none; }

/* "Found on-chain": a collection shown here that the Wizards of Ord
   registry doesn't list yet (2026-09-22, collection_finds.js) */
.find-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px 2px 4px; border-radius: var(--r-pill); border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; vertical-align: middle; cursor: help; flex: none; }
.find-chip svg { width: 12px; height: 12px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.rd-meta .find-chip, #ccMeta .find-chip, .find-note .find-chip { margin-left: 0; }
.find-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* "Send it to the Wizards of Ord" on a collection page (app/seo.py). */
.find-send { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--ink-muted); font-size: 13px; }
.doc-btn { display: inline-block; padding: 8px 12px; border: 1px solid var(--control-border, var(--line)); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.doc-btn:hover { border-color: var(--accent); }

/* Language (2026-09-22, i18n.js): Chinese typesetting below. The header's English / 中文
   switch and the hint bar for Chinese-language browsers were removed on 2026-10-08; the
   language is chosen on the Account page now. */
.doc-head-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Sign-in status badge (2026-10-03, account.js): a small chip in the header's corner. */
.acct-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.acct-badge:hover { border-color: var(--accent); color: var(--accent); }
.acct-badge[hidden] { display: none; }
/* The header's sign-in pop-up and signed-in menu (signin_popup.js, 2026-10-13). */
.acct-signin { position: relative; display: inline-flex; align-items: center; }
.acct-menu-btn { font-family: var(--font-body); background: var(--surface); cursor: pointer; min-height: 24px; max-width: 220px; }
.acct-menu-btn[hidden] { display: none; }
.acct-menu-btn[aria-expanded="true"] { border-color: var(--accent); }
.acct-menu-name { overflow: hidden; text-overflow: ellipsis; }
.acct-menu-caret { font-size: 12px; color: var(--ink-muted); }
.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 900;
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 240px; max-width: min(320px, calc(100vw - 32px));
  padding: var(--space-2); background: var(--surface-raised);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--elev-3);
}
.acct-menu[hidden] { display: none; }
.acct-menu-who { margin: 0 0 var(--space-1); padding: var(--space-1) var(--space-2); font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.acct-menu-item {
  display: flex; align-items: center; min-height: 32px; padding: var(--space-1) var(--space-2);
  font: 600 13px var(--font-body); color: var(--ink); text-decoration: none; text-align: left;
  background: none; border: 0; border-radius: var(--r-pill); cursor: pointer;
}
.acct-menu-item:hover { background: var(--surface-2); color: var(--accent); }
.acct-menu-err { margin: 0; padding: var(--space-1) var(--space-2); font-size: 12px; color: var(--bad); }
.acct-menu-err[hidden] { display: none; }
@media (pointer: coarse) { .acct-menu-btn { min-height: 44px; } .acct-menu-item { min-height: 44px; } }
.acct-menu.acct-menu-left { right: auto; left: 0; }   /* when right-aligned would leave the screen */
.si-overlay { align-items: flex-start; padding-top: 80px; }
.si-panel { width: min(440px, 100%); padding: var(--space-5); }
.si-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
.si-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; }
.si-lede { margin: 0 0 var(--space-4); font-size: 13px; color: var(--ink-muted); }
.si-wallets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.si-wallet { display: flex; align-items: center; gap: var(--space-3); }
.si-wallet-btn { flex: 0 0 160px; justify-content: flex-start; }
.si-wallet-btn:disabled { cursor: not-allowed; color: var(--ink-muted); }
.si-wallet-note { font-size: 12px; color: var(--ink-muted); }
.si-say { min-height: 20px; margin: var(--space-4) 0 0; font-size: 13px; color: var(--ink); }
.si-err { margin: var(--space-2) 0 0; font-size: 13px; color: var(--bad); }
.si-err[hidden] { display: none; }
.si-more { margin: var(--space-4) 0 0; font-size: 12px; }
.si-more a { color: var(--ink-muted); }
.si-more a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .si-overlay { padding: 0; }
  .si-panel { height: auto; max-height: 100vh; padding: var(--space-4); border-bottom: 1px solid var(--line-strong); }
  .si-wallet-btn { flex-basis: 140px; }
}
/* Chinese: no tracking (it spreads the characters apart), a little more
   line height, and nothing uppercased that has no case. */
html:lang(zh) body, html:lang(zh) body * { letter-spacing: normal; }
html:lang(zh) body { line-height: 1.6; }
html:lang(zh) .stat-label, html:lang(zh) .card-eyebrow, html:lang(zh) .kicker, html:lang(zh) .doc-kicker,
html:lang(zh) .pi-eyebrow, html:lang(zh) .cc-status, html:lang(zh) .find-chip { text-transform: none; }

/* Account section of the Settings page (2026-09-22, account_ui.js) */
.acct-h { font-size: 14px; margin: 16px 0 4px; }
.acct-small { font-size: 12.5px; }
/* Pick from your own coins (wallet_coins.js, lab test 2026-10-08). */
.wc-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.wc-coin {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; cursor: pointer;
}
.wc-coin:has(input:disabled) { cursor: default; color: var(--ink-muted); }
.wc-coin:has(input:checked) { border-color: var(--accent); }
.wc-coin input { margin-top: 2px; flex: 0 0 auto; }
.wc-coin-text { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.acct-wallets, .acct-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.acct-actions a.wl-btn { text-decoration: none; }
.acct-manual { margin: 8px 0; }
.acct-manual summary { cursor: pointer; font-size: 13px; }
.acct-label { display: block; font-size: 12.5px; color: var(--ink-muted); margin: 12px 0 4px; }
.acct-card textarea { width: 100%; box-sizing: border-box; font: 12px/1.5 var(--font-mono); padding: 8px; border-radius: var(--r-pill); border: 1px solid var(--control-border, var(--line)); background: var(--surface); color: var(--ink); }
.acct-card #acctSignStep .wl-btn { margin-top: 8px; }
#acctOut > .acct-small:last-child { margin-top: 12px; }
.acct-keylist { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.acct-key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.acct-key-row.revoked { opacity: 0.55; }
.acct-key-meta { font-size: 12.5px; color: var(--ink-muted); }
.acct-key-usage { font-size: 12.5px; color: var(--ink-muted); }
.acct-key-usage-hot { color: var(--warn, var(--bad)); font-weight: 600; }
.acct-keyval { display: block; font: 12px/1.5 var(--font-mono); padding: 8px; border-radius: var(--r-pill); border: 1px solid var(--control-border, var(--line)); background: var(--surface); color: var(--ink); word-break: break-all; margin: 8px 0; }
.set-ok { font-size: 12.5px; color: var(--ink-muted); margin: 8px 0 0; min-height: 1em; }
/* Billing history on the Account page (2026-10-12, account_billing.js). A plain table on a wide screen;
   under 640px each invoice stacks into a small block, so a phone never scrolls sideways. */
.bill-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.bill-table th, .bill-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.bill-table thead th { color: var(--ink-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.bill-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.bill-table td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.bill-table .bill-sub { display: block; font-size: 12px; color: var(--ink-muted); }
.bill-table a.wl-btn { text-decoration: none; display: inline-block; }
.bill-status { font-weight: 600; }
.bill-status.paid { color: var(--good); }
.bill-status.waiting { color: var(--accent); }
.bill-status.ended { color: var(--ink-muted); font-weight: 400; }
.bill-status.held { color: var(--trend, var(--ink)); }
@media (max-width: 640px) {
  .bill-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bill-table, .bill-table tbody, .bill-table tr, .bill-table td { display: block; width: 100%; }
  .bill-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .bill-table td { border-bottom: 0; padding: 0; width: auto; }
  .bill-table td.bill-c-date { grid-column: 1; grid-row: 1; color: var(--ink-muted); font-size: 12px; }
  .bill-table td.bill-c-status { grid-column: 2; grid-row: 1; text-align: right; }
  .bill-table td.bill-c-plan { grid-column: 1 / -1; }
  .bill-table td.bill-c-amount { grid-column: 1; }
  .bill-table td.bill-opt { grid-column: 1; font-size: 12px; color: var(--ink-muted); }
  .bill-table td:last-child { grid-column: 2; grid-row: 3 / span 2; align-self: end; }
}
a.ui-account { text-decoration: none; text-align: center; }

/* Pay with Bitcoin (2026-09-24, /btc.html, app/static/btc_pay.js) */
.btc-tiers { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.btc-tiers[hidden] { display: none; }
.btc-invoice { margin: 16px 0 0; }
.btc-invoice-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; font-size: 13px; }
.btc-invoice-facts dt { color: var(--ink-muted); }
.btc-invoice-facts dd { margin: 0; }
.btc-mono { font-family: var(--mono, monospace); overflow-wrap: anywhere; }
.btc-qr-wrap { margin: 12px 0 0; }
.btc-qr { width: 176px; height: 176px; max-width: 100%; border-radius: var(--r-sm); background: #fff; padding: 8px; }
.btc-status { font-size: 12.5px; font-weight: 600; margin: 12px 0 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.btc-status-settled, .btc-status-paid_late { color: var(--good); }
.btc-status-expired, .btc-status-underpaid, .btc-status-under_review { color: var(--warn, var(--bad)); }
.btc-status-grace { color: var(--warn, var(--bad)); }
.btc-status-mempool, .btc-status-confirming { color: var(--ink-muted); }
@media (max-width: 560px) {
  .btc-invoice-facts { grid-template-columns: 1fr; gap: 0 0; }
  .btc-invoice-facts dd { margin: 0 0 8px; }
}

/* ---------- Since you last looked (2026-10-08) ----------
   Overview's first row: what changed, as four tiles that each open the detail
   (since.js; plan: claude/overview-ia-plan-2026-10-08.md). Outside the
   arrangeable grid, full width. */
.since { margin: 0 0 24px; }
.since[hidden] { display: none; }
/* 2026-10-14 (Peter's notes): one small Updates bar, closed until it's pulled open. */
.since-bar { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.since-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 8px 16px; cursor: pointer; list-style: none;
}
.since-head::-webkit-details-marker { display: none; }
.since-head:hover .since-k-bar { color: var(--accent); }
.since-k-bar { font-size: 14px; font-weight: 600; color: var(--ink); }
.since-title { margin: 0; font-size: 13px; color: var(--ink-muted); }
.since-when { font-size: 13px; color: var(--ink-muted); }
.since-brief { flex: 1 1 16rem; min-width: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.since-head .chevron { align-self: center; flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--ink-muted); transition: transform 120ms ease-out; }
.since-bar[open] .chevron { transform: rotate(180deg); }
.since-bar[open] .since-brief { visibility: hidden; }
.since-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 8px; }
.since-bar .since-tiles { padding: 0 16px 16px; }
.since-mark { margin-left: auto; }
.since-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.since-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
  padding: 12px 16px; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.since-tile:hover { border-color: var(--accent); }
.since-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.since-k { font-size: 12px; color: var(--ink-muted); }
.since-v { font-size: 20px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.since-d { font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; }
.since-go { margin-left: 4px; color: var(--ink-muted); opacity: 0; transition: opacity 120ms ease-out; }
.since-tile:hover .since-go, .since-tile:focus-visible .since-go { opacity: 1; }
@media (hover: none) { .since-go { opacity: 1; } }
.since-delta.news { color: var(--accent); }
.since-delta.good { color: var(--good); }
.since-delta.bad { color: var(--bad); }
.since-tile.since-quiet .since-v { color: var(--ink-muted); }   /* nothing changed: the tile recedes */
.since-undo[hidden] { display: none; }
@media (max-width: 720px) {
  .since-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .since-tile { padding: 12px; }
  .since-head { padding: 8px 12px; }
  .since-bar .since-tiles { padding: 0 12px 12px; }
  .since-v { font-size: 16px; }
}

/* Watchlist movers (right column of Overview), same data as the watchlist tile. */
.wm-list { list-style: none; margin: 0; padding: 0; }
.wm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wm-name { overflow-wrap: anywhere; color: var(--ink); }
.wm-price { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.wm-chg { text-align: right; font-variant-numeric: tabular-nums; }
.wm-chg.good { color: var(--good); }
.wm-chg.bad { color: var(--bad); }

/* A card with nothing to show keeps its place and says why, rather than
   vanishing and collapsing its column (2026-10-08 critique). */
.card-empty { margin: 0; padding: 12px 16px; border: 1px dashed var(--line); border-radius: var(--r-sm); font-size: 13px; color: var(--ink-muted); }
.card-empty[hidden] { display: none; }

/* Wallet activity new since the last look, until "Mark seen". */
.wa-new-tag { color: var(--accent); font-weight: 600; }

/* The provenance rule under the hero figure (2026-10-08 critique P1). At hero
   size any dotted rule read as a row of bullets, a stuck loader, even at a
   fixed 2px. So the hero carries no rule at rest; the label above it says
   "Where from?" instead, and the figure underlines on hover or when its
   source note is open. Keyboard focus keeps the usual ring. Smaller figures
   keep the dotted rule, where it reads as a link. */
.stat-value.hero[data-prov-ready] { text-decoration: none; }
.stat-value.hero[data-prov-ready]:hover,
.stat-value.hero[data-prov-ready][aria-expanded="true"] {
  text-decoration: underline solid var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}
.prov-ask { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline dotted var(--line-strong); text-underline-offset: 4px; }
.prov-ask:hover { color: var(--ink); text-decoration-color: var(--accent); }
/* The value ladder's totals line (2026-10-17, Option B; value_ladder.js note()): the short line is a
   button whose detail (range, disagree count, bitmaps OPI couldn't check) shows on hover as its title
   and opens under it on tap, click, Enter or Space. Looks like the line it is, with a dotted underline. */
.vl-total { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline dotted var(--line-strong); text-underline-offset: 4px; }
.vl-total:hover, .vl-total[aria-expanded="true"] { color: var(--ink); text-decoration-color: var(--accent); }
.vl-detail { display: block; margin-top: 4px; color: var(--ink-muted); white-space: normal; }
.vl-detail[hidden] { display: none; }
@media (pointer: coarse) { .vl-total { padding: 4px 0; } }

@media (max-width: 560px) {
  /* The site tabs now keep clear of the bell and gear, so the masthead below
     them doesn't need to. */
  :root.has-bell[data-layout] .masthead { padding-right: 0; }
}
:root[data-layout="terminal"] .since-tile, :root[data-layout="terminal"] .card-empty { border-radius: 0; }
.news-list[hidden] { display: none; }

/* ---------- Labs voting (2026-10-08, lab.js / admin_labs.js) ---------- */
.lab-shell { max-width: 1200px; }
.lab-how { margin-top: 0; }
.lab-bar-row[hidden] { display: none; }
.lab-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
.lab-filter { max-width: 360px; }
.lab-progress { font-size: 13px; color: var(--ink-muted); }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.lab-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.lab-img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: contain; background: var(--surface-2); border-radius: var(--r-xs); }
.lab-facts { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.lab-tag { margin-left: 8px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-size: 12px; color: var(--ink-muted); }
.lab-map { font-size: 13px; color: var(--accent); align-self: flex-start; }
.lab-blind { margin: 0; font-size: 13px; color: var(--ink-muted); }
.lab-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-choice[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.lab-note { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--control-border, var(--line)); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink); }
.lab-withdraw { align-self: flex-start; font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--ink-muted); text-decoration: underline; cursor: pointer; }
.lab-signin { align-self: flex-start; }
.lab-crowd { display: flex; flex-direction: column; gap: 4px; }
.lab-stack { display: flex; height: 12px; border-radius: var(--r-xs); overflow: hidden; background: var(--surface-2); }
.lab-seg { display: block; height: 100%; }
.lab-seg-0 { background: var(--good); }
.lab-seg-1 { background: var(--bad); }
.lab-seg-2 { background: var(--ink-muted); }
.lab-seg-3, .lab-seg-4, .lab-seg-5 { background: var(--accent); }
.lab-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-muted); }
.lab-key { display: inline-flex; align-items: center; gap: 4px; }
.lab-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-2xs); }
.lab-meta, .lab-verdict { margin: 0; font-size: 12px; color: var(--ink-muted); }
.lab-verdict.is-community { color: var(--ink); font-weight: 600; }
.lab-table-wrap { overflow-x: auto; }
.lab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lab-table th, .lab-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lab-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* #389 (c): the cancel dialog's two choices, each with its consequence under it */
.ml-cancel-dialog { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 16px; margin: 8px 0 0; }
.ml-cancel-dialog legend { padding: 0 4px; color: var(--ink); }
.ml-cancel-opt { display: block; margin: 8px 0; cursor: pointer; }
.ml-cancel-why { display: block; margin: 4px 0 0 24px; color: var(--ink-muted); }
/* #389 (c), T2: the relist warning (warn, never block) */
.set-warn { border: 1px solid var(--bad); border-radius: var(--r-sm); padding: 8px 16px; margin: 8px 0; color: var(--ink); }
.set-warn p { margin: 4px 0; }
/* #389 (b): the make-safe page's order list, one row each */
.ms-order { display: block; margin: 8px 0; color: var(--ink-muted); cursor: pointer; }
.ms-order input { margin-right: 8px; }
/* #389 (d): the make-safe prompt for an expired acceptance; never covers the whole page */
.ms-prompt { position: fixed; right: 16px; bottom: 16px; z-index: 40; max-width: 360px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); box-shadow: var(--elev-3); }
.ms-prompt-h { margin: 0 0 8px; font-size: 16px; }
.ms-prompt p { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 480px) { .ms-prompt { left: 16px; right: 16px; max-width: none; } }

/* Blog (#454, 2026-10-08): a readable column, figures with captions; tokens only, so all layouts and both themes follow */
.blog-list { list-style: none; margin: 16px 0 0; padding: 0; }
.blog-item { padding: 16px 0; border-top: 1px solid var(--line); }
.blog-item:first-child { border-top: 0; }
.blog-item h2 { margin: 0 0 4px; padding-top: 0; border-top: 0; font-size: 20px; line-height: 1.3; }
.blog-item h2 a { color: var(--ink); text-decoration: none; }
.blog-item h2 a:hover, .blog-item h2 a:focus-visible { color: var(--accent); text-decoration: underline; }
.blog-item p { margin: 4px 0 0; max-width: 68ch; }
.blog-meta { margin: 0 0 8px; color: var(--ink-muted); font-size: 13px; }
.blog-draft { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); color: var(--ink-muted); font-size: 12px; font-weight: 600; vertical-align: middle; }
.blog-draft-note { margin: 0 0 16px; padding: 8px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); color: var(--ink-muted); }
.blog-post { max-width: 68ch; }
.blog-post p, .blog-post li { line-height: 1.65; }
.doc-figure { margin: 24px 0; }
.doc-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.doc-figure figcaption { margin-top: 8px; color: var(--ink-muted); font-size: 13px; }
.blog-advice { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 13px; }
/* Email sign-up under the blog (#455): one box per topic, then the consent box. */
.blog-subscribe { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.blog-subscribe h2 { margin: 0 0 8px; padding-top: 0; border-top: 0; font-size: 18px; }
.sub-topics { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.sub-topics legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 500; }
.cm-form .sub-check { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; }
.cm-form .sub-check input { flex: none; width: 16px; height: 16px; margin: 4px 0 0; padding: 0; accent-color: var(--accent); }

/* Labs page (#458, 2026-10-08): one card per experiment; each experiment's own card script draws inside
   .lab-exp-body. Tokens only, so every layout and both themes follow. */
/* Labs landing (2026-10-09, UI redesign part 2, Kombai "Aether Vault"; labs.js) */
.lx-hero { display: grid; gap: 16px; margin-bottom: 24px; }
.lx-hero .doc-lede { margin: 0; }
.lx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.lx-stats:empty { display: none; }
.lx-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px; border-left: 1px solid var(--line); }
.lx-stat:first-child { border-left: 0; }
.lx-stat dt { font-size: 12px; color: var(--ink-muted); }
.lx-stat dd { margin: 0; }
.lx-stat-v { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lx-stat:last-child .lx-stat-v { font-size: 20px; }
.lx-stat-sub { font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.lx-how summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.lx-how p { margin: 8px 0 0; max-width: 72ch; font-size: 13px; color: var(--ink-muted); }
.lx-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; }
.lx-bar-row[hidden] { display: none; }
.lx-index { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lx-index:empty { display: none; }
.lx-item[hidden] { display: none; }
.lx-link { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.lx-link:hover { border-color: var(--line-strong); background: var(--surface-2); }
.lx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lx-name { font-weight: 600; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.lx-bar { display: block; height: 4px; border-radius: var(--r-2xs); background: var(--surface-2); overflow: hidden; }
.lx-bar-fill { display: block; height: 100%; background: var(--accent); }
.lx-item[data-status="retired"] .lx-bar-fill { background: var(--line-strong); }
.lx-item[data-status="promoted"] .lx-bar-fill { background: var(--good); }
.lx-when { font-size: 12px; color: var(--ink-muted); }
.lab-exp[hidden] { display: none; }
.lab-exp h2 { scroll-margin-top: 16px; }
#labsError .wl-btn { margin-left: 8px; }
@media (max-width: 720px) {
  .lx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-stat:nth-child(3) { border-left: 0; }
  .lx-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lx-index { grid-template-columns: minmax(0, 1fr); }
}
.labs-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.lab-exp { min-width: 0; }
.lab-exp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lab-exp-head h2 { margin: 0; }
.lab-chip { padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.lab-chip-trying { color: var(--accent); border-color: var(--accent); }
.lab-chip-promoted { color: var(--good); border-color: var(--good); }
.lab-exp-meta { margin: 4px 0 16px; color: var(--ink-muted); font-size: 13px; }
.lab-exp-body { min-height: 24px; }
.lab-exp-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--line); }
.lab-exp-q { margin: 8px 0; color: var(--ink-muted); font-size: 13px; }

/* Labs card: Mempool weather */
.mw-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mw-headline { margin: 0; font-size: 24px; font-weight: 700; color: var(--ink); }
.mw-fee { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.mw-lines, .mw-notes { margin: 8px 0; padding-left: 20px; }
.mw-lines li { margin: 4px 0; }
.mw-notes li { margin: 4px 0; color: var(--ink-muted); font-size: 12px; }
.mw-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 8px 0; }
.mw-cell { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.mw-cell-when { color: var(--ink-muted); font-size: 12px; }
.mw-cell-fee { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.mw-cell-cond { font-weight: 600; color: var(--ink); }
.mw-note, .mw-track { margin: 8px 0; color: var(--ink-muted); font-size: 13px; }
.mw-sub { margin: 16px 0 8px; font-size: 15px; }
.mw-grid { display: grid; grid-template-columns: 32px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.mw-grid-day { color: var(--ink-muted); font-size: 12px; }
.mw-grid-cell { display: block; height: 16px; border-radius: var(--r-2xs); background: var(--surface-2); }
.mw-grid-cell.is-empty { background: var(--line); }
.mw-grid-cell.is-out { background: transparent; }
.mw-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--ink-muted); font-size: 12px; }
.mw-legend-empty { display: inline-flex; align-items: center; gap: 4px; }
.mw-legend-empty .mw-grid-cell { width: 12px; height: 12px; }
.mw-table { margin-top: 8px; font-size: 12px; }
.mw-table summary { cursor: pointer; color: var(--ink-muted); }

/* Labs card: Math-labelled sats */
.ms-lookup { margin: 8px 0 16px; }
.ms-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ms-form .acct-label { flex-basis: 100%; }
.ms-form input { flex: 1 1 240px; min-width: 0; }
.ms-result { margin-top: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ms-result-head { margin: 0 0 8px; }
.ms-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ms-chip { padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-size: 12px; color: var(--ink); }
.ms-chip.is-none { color: var(--ink-muted); }
.ms-note { margin: 8px 0 0; color: var(--ink-muted); font-size: 13px; }
.ms-ord { font-weight: 600; color: var(--ink); }
.ms-list { max-height: 360px; overflow: auto; margin-top: 8px; }
.ms-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mw-grid-hour { color: var(--ink-muted); font-size: 12px; white-space: nowrap; overflow: visible; }

/* ============================================================
   Overview market panels (2026-10-08 redesign, Kombai "Cointrail").
   overview_market.js. Stat readouts above a chart, small rectangular range
   toggles in the card header, a visible source line under every panel, and
   one shared look for loading, empty and error.
   =================================================================== */
.ct-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ct-range, .ct-filters { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.ct-range { padding: var(--space-1); background: var(--surface-2); border-radius: var(--r-sm); }
.ct-filters { margin-bottom: var(--space-3); }
.ct-range button, .ct-filters button {
  min-height: 32px; min-width: 40px; padding: 0 var(--space-3);
  font: 600 12px/1 var(--font-body); color: var(--ink-muted);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
}
.ct-filters button { border-color: var(--line-strong); }
.ct-range button:hover, .ct-filters button:hover { color: var(--ink); }
.ct-range button[aria-pressed="true"], .ct-filters button[aria-pressed="true"] {
  color: var(--ink); background: var(--surface-raised); border-color: var(--control-border);
}
.ct-range button[aria-disabled="true"] { border-style: dashed; border-color: var(--line-strong); cursor: help; }
@media (pointer: coarse) {
  .ct-range button, .ct-filters button { min-height: 44px; min-width: 44px; }
}
.ct-body { min-width: 0; }
.ct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.ct-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ct-stat-k { font-size: 12px; color: var(--ink-muted); }
.ct-stat-v { font: 600 24px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.ct-stat-minor .ct-stat-v { font-size: 16px; font-weight: 500; }
.ct-stat-sub { font-size: 12px; color: var(--ink-muted); }
.ct-chart { display: block; width: 100%; height: 160px; }
.ct-grid { stroke: var(--line); stroke-width: 1; }
.ct-area { fill: var(--accent); fill-opacity: 0.14; }
.ct-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.ct-vol { fill: var(--ink-muted); fill-opacity: 0.45; }
.ct-bar { fill: var(--accent); fill-opacity: 0.85; }
.ct-trend { fill: none; stroke: var(--trend); stroke-width: 2; }
/* Sales activity (2026-10-12, Matthew: "the green overpowers the line"): the bars sit back as a quiet
   layer, the price line on top keeps full strength, and both get a labelled axis. */
.ct-bar.ct-bar-under { fill-opacity: 0.4; }
.ct-plot { position: relative; padding: 0 60px 0 48px; }
.ct-y { position: absolute; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-y-l { left: 0; width: 40px; text-align: right; }
.ct-y-r { right: 0; width: 52px; text-align: left; }
.ct-y-trend { color: var(--trend); }
.ct-axis-plot { padding: 0 60px 0 48px; }
.ct-unknown { fill: var(--surface-2); }
.ct-hit { fill: transparent; }
.ct-hit:hover { fill: var(--ink); fill-opacity: 0.06; }
.ct-axis { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ct-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: 12px; color: var(--ink-muted); }
.ct-key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--space-2); vertical-align: -1px; border-radius: var(--r-2xs); }
.ct-key-area::before, .ct-key-bar::before { background: var(--accent); }
.ct-key-vol::before { background: var(--ink-muted); }
.ct-key-trend::before { height: 2px; vertical-align: 4px; background: var(--trend); }
.ct-note { margin: var(--space-2) 0 0; font-size: 13px; color: var(--ink-muted); }
.ct-source { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); }
.ct-source:empty { display: none; }
.ct-source a { color: var(--accent); }
.ct-source-k { font-weight: 600; }
/* states */
.ct-skel span { display: block; height: 16px; margin-bottom: var(--space-3); border-radius: var(--r-xs); background: var(--surface-2); animation: ct-pulse 1.6s ease-in-out infinite; }
.ct-skel span:nth-child(1) { width: 60%; }
.ct-skel span:nth-child(2) { width: 90%; height: 64px; }
.ct-skel span:nth-child(3) { width: 75%; }
.ct-skel span:nth-child(4) { width: 40%; }
@keyframes ct-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .ct-skel span { animation: none; } }
.ct-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.ct-state-text { flex: 1 1 200px; margin: 0; font-size: 14px; color: var(--ink-muted); }
.ct-error { border-style: solid; border-color: var(--bad); }
.ct-error .ct-state-text { color: var(--ink); }
.ct-state-btn { min-height: 32px; }
@media (pointer: coarse) { .ct-state-btn { min-height: 44px; } }
.ct-table summary { min-height: 24px; margin-top: var(--space-3); font-size: 13px; color: var(--ink-muted); cursor: pointer; }
.ct-table table { width: 100%; margin-top: var(--space-2); border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ct-table th, .ct-table td { padding: var(--space-1) var(--space-2); text-align: left; border-bottom: 1px solid var(--line); }
.ct-table .num { text-align: right; }
/* floor-change heatmap: the change is always written, colour only adds to it */
.ct-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ct-cell { --heat: 0; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.ct-cell[data-dir="up"] { background: color-mix(in srgb, var(--good) calc(8% + var(--heat) * 32%), var(--surface)); }
.ct-cell[data-dir="down"] { background: color-mix(in srgb, var(--bad) calc(8% + var(--heat) * 32%), var(--surface)); }
.ct-cell-name { overflow: hidden; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.ct-cell-pct { font: 600 18px/1.1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-cell-floor, .ct-cell-sub { font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* mempool donut */
.ct-donut-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto var(--space-4); }
.ct-donut { display: block; width: 100%; height: 100%; }
.ct-donut-track { fill: none; stroke: var(--surface-2); stroke-width: 6; }
.ct-donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ct-donut-v { font: 600 20px/1.1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-donut-k { font-size: 12px; color: var(--ink-muted); }
.ct-mix-legend { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ct-mix-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.ct-swatch { flex: none; width: 12px; height: 12px; border-radius: var(--r-2xs); }
.ct-mix-pct { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ct-mix-sub { margin-left: auto; font: 13px var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ct-mix-sub + .ct-mix-pct { margin-left: var(--space-3); min-width: 6ch; text-align: right; }
/* signal feed: icon, name, change, one line of detail, time, type */
.ct-feed { margin: 0; padding: 0; list-style: none; }
.ct-feed-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.ct-feed-row:last-child { border-bottom: 0; }
.ct-feed-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--accent); }
.ct-feed-ico[data-group="prices"] { color: var(--trend); }
.ct-feed-ico[data-group="wallets"] { color: var(--ink); }
.ct-feed-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.ct-feed-name { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ct-feed-chg { font-size: 13px; font-weight: 600; }
.ct-feed-chg.is-up { color: var(--good); }
.ct-feed-chg.is-down { color: var(--bad); }
.ct-feed-detail { display: block; margin-top: var(--space-1); font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; }
.ct-feed-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.ct-feed-time { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.ct-tag { padding: 0 var(--space-2); font-size: 12px; font-weight: 600; line-height: 20px; color: var(--ink-muted); border: 1px solid var(--line-strong); border-radius: var(--r-xs); }
/* chain calendar */
.ct-cal { margin: 0; padding: 0; list-style: none; }
.ct-cal-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.ct-cal-row:last-child { border-bottom: 0; }
.ct-cal-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ct-cal-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.ct-cal-detail, .ct-cal-when { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ct-cal-when { white-space: nowrap; }

/* ===================================================================
   One page system (2026-10-08 cohesion pass). Every page carries the
   sidebar (app/site_nav.py) except the landing page, and every page title
   starts where the dashboard's masthead starts, beside it. Reading and
   form pages keep a readable width; tool and admin pages use the full
   width. Cards, buttons and corner controls share one skin.
   =================================================================== */
body:has(.side-nav) :is(.doc-shell, .set-shell, .tr-shell) {
  margin-left: 0; margin-right: auto; padding: 36px 0 72px;
}
body:has(.side-nav) :is(.doc-shell, .set-shell) { max-width: 960px; }
body:has(.side-nav) .set-shell.lab-shell { max-width: 1200px; }
body:has(.side-nav) .tr-shell { max-width: 1312px; }
/* the sidebar is the way back now */
body:has(.side-nav) a.doc-back[href$="/app"] { display: none; }
.tr-shell > p, .tr-shell header p, .set-shell > p { max-width: 80ch; }
/* page titles: one size, one rhythm */
.doc-head h1, .set-shell h1, .tr-shell h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
/* cards: the same skin as the dashboard's */
.set-card, .vs-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-5);
}
.set-card { margin: 0 0 var(--space-4); }
.set-card .set-lede { font-size: 13px; }
/* no empty strip under a card's last line (2026-10-10, Minting/Marketplace on a phone) */
.set-card > :last-child { margin-bottom: 0; }
.set-card p.set-empty { margin: var(--space-2) 0 0; }
/* links read in the accent, like the dashboard's and the reading pages' (.doc-shell a); a bare
   <a> was browser blue on every .set-shell page */
.set-shell a:not([class]) { color: var(--accent); text-underline-offset: 2px; }
.set-foot a:not([class]) { color: var(--ink-muted); }
.set-foot a:not([class]):hover { color: var(--ink); }
/* a page of tools (Minting): two across on a wide screen, each card one link */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-4); }
.set-grid > .set-card { margin: 0; }
.set-card-link { position: relative; transition: border-color 120ms ease, background-color 120ms ease; }
.set-card-link:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.set-card-link h2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.set-shell .set-card-link h2 a { color: var(--ink); text-decoration: none; }
.set-card-link h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the link */
.set-card-link h2::after { content: "\2192"; color: var(--ink-muted); font-weight: 400; }
.set-card-link:hover h2::after { color: var(--accent); }
.set-card-link:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Marketplace: section titles at the dashboard's section size, not a second page title */
.mkt-show-head h2, .set-shell > h2.mkt-part { font-size: 18px; line-height: 1.3; }
.mkt-show > .set-lede { margin: 0 0 var(--space-3); font-size: 13px; color: var(--ink-muted); }
.mkt-show .set-empty { padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface); }
.vs-kpi { border-radius: var(--r); }
/* buttons: one height, small-radius rectangles */
.wl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 32px; padding: var(--space-1) var(--space-3);
}
.wl-btn.primary { min-height: 32px; padding: var(--space-1) var(--space-4); }
.wl-btn[hidden] { display: none; }   /* the flex display above would otherwise beat [hidden] */
@media (pointer: coarse) { .wl-btn, .wl-btn.primary { min-height: 44px; } }
.ui-gear, .ui-bell { border-radius: var(--r-sm); }
/* the private pages' link row reads as sub-tabs, like the dashboard's own */
.vs-nav { flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); margin: var(--space-3) 0 var(--space-5); border-bottom: 1px solid var(--line); }
.vs-nav a.doc-back { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: -1px; font-size: 14px; border-bottom: 2px solid transparent; }
.vs-nav a.doc-back[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.tok-switch .tok-ico { width: 16px; height: 16px; margin-right: 8px; flex: none; }
@media (max-width: 767px) {
  body:has(.side-nav) :is(.doc-shell, .set-shell, .tr-shell) { padding-top: 24px; }
  .vs-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
/* form fields: one default for every field a page hasn't styled itself
   (zero specificity, so a page's own field rules still win) */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"]), select, textarea) {
  min-height: 36px; padding: var(--space-2) var(--space-3);
  font: 14px/1.4 var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--r-sm);
}
:where(textarea) { min-height: 96px; }
@media (pointer: coarse) {
  /* 16px stops phones zooming into the field */
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"]), select, textarea) { min-height: 44px; font-size: 16px; }
}
/* the private pages' intro line: readable, not fine print */
.vs-sub { font-size: 13px; line-height: 1.5; max-width: 80ch; }
/* a field with its button, written inline in a paragraph: a row with a gap */
p:has(> input + .wl-btn) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
p:has(> input + .wl-btn) > input { flex: 1 1 240px; min-width: 0; }
=======

/* Labs card: Fair-launch score for runes */
.fl-note { margin: 8px 0; color: var(--ink-muted); font-size: 13px; }
.fl-labels { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.fl-tag { padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-size: 12px; color: var(--ink-muted); }
.fl-tag.is-partial { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.fl-table th { padding: 0; }
.fl-sort { width: 100%; padding: 8px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.fl-sort:focus-visible, .fl-rune:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-rune { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.fl-partial { display: inline-block; margin-left: 8px; padding: 0 4px; border: 1px solid var(--accent); border-radius: var(--r-xs); color: var(--ink); font-size: 12px; font-weight: 600; }
.fl-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-detail { margin-top: 16px; }
.fl-detail-h { margin: 0 0 4px; font-size: 15px; }
.fl-parts { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.fl-part { display: grid; grid-template-columns: minmax(120px, 160px) minmax(80px, 1fr) 64px; gap: 4px 8px; align-items: center; }
.fl-part-label { font-size: 13px; color: var(--ink); }
.fl-bar { display: block; height: 8px; border-radius: var(--r-xs); background: var(--surface-2); overflow: hidden; }
.fl-bar-fill { display: block; height: 100%; border-radius: var(--r-xs); background: var(--accent); }
.fl-part-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink); text-align: right; white-space: nowrap; }
.fl-part-why { grid-column: 1 / -1; color: var(--ink-muted); font-size: 12px; }
.fl-sub { margin: 16px 0 4px; font-weight: 600; font-size: 13px; }
.fl-minters { margin: 0; padding-left: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
/* Labs card: Mempool as sound (a link to the lab's own page; nothing plays on /labs) */
.snd-line { margin: 0 0 8px; color: var(--ink); }
.snd-note { margin: 8px 0 0; color: var(--ink-muted); font-size: 13px; }

/* The regtest lab's wallet (lab_wallet.js): only ever on the lab dashboard */
.lw-badge { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: inline-flex; gap: 8px; align-items: center; padding: 4px 12px; border: 1px dashed var(--accent); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; box-shadow: var(--elev-2); }
/* Clear of the side menu (z-index 62, var(--side-w) wide) on desktop, and of the bottom menu bar on
   a phone: both used to cover part of the badge (lab test 2026-10-08). */
.lw-badge { left: calc(var(--side-w) + 16px); }
@media (max-width: 767px) {
  .lw-badge { left: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.lw-badge-label { color: var(--ink-muted); }
.lw-badge-name { font-weight: 600; }
.lw-dialog { max-width: 520px; width: calc(100% - 32px); padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); box-shadow: var(--elev-4); }
.lw-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.lw-title { margin: 0 0 4px; font-size: 16px; }
.lw-note { margin: 0 0 12px; color: var(--ink-muted); font-size: 13px; }
.lw-list { display: grid; gap: 8px; margin-bottom: 12px; max-height: 60vh; overflow: auto; }
.lw-person { display: grid; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lw-person[aria-current="true"] { border-color: var(--accent); }
.lw-person:focus-visible, .lw-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lw-addr { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }

/* Labs: holder overlap network (app/static/lab-cards/holder-overlap.js). The SVG is a picture for wide
   screens; the list of collections under it carries the same content and is all a phone shows. */
.ho-cov { margin: 8px 0; color: var(--ink-muted); font-size: 13px; }
.ho-find { margin: 8px 0 16px; max-width: 420px; }
.ho-find-label { display: block; margin: 0 0 4px; font-weight: 600; font-size: 13px; }
.ho-combo { position: relative; }
.ho-find-input {
  width: 100%; min-width: 0; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--control-border); border-radius: var(--r-sm); padding: 8px 12px;
}
.ho-find-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ho-options {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none;
  max-height: 320px; overflow-y: auto; background: var(--surface-raised); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: var(--elev-3);
}
.ho-options[hidden] { display: none; }
.ho-option { display: flex; justify-content: space-between; gap: 12px; min-height: 32px; align-items: center; padding: 4px 12px; cursor: pointer; font-size: 14px; }
.ho-option[aria-selected="true"], .ho-option:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ho-option[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent); }
.ho-option-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ho-option-meta { flex: none; color: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ho-find-note { margin: 4px 0 0; min-height: 16px; color: var(--ink-muted); font-size: 12px; }
.ho-sel { margin: 0 0 8px; font-size: 15px; }
.ho-graph-host { min-width: 0; }
.ho-graph { position: relative; margin: 8px 0; display: flex; justify-content: center; }
.ho-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ho-line { stroke: var(--accent); stroke-linecap: round; fill: none; }
.ho-s0 { stroke-width: 1; opacity: 0.4; }
.ho-s1 { stroke-width: 1.5; opacity: 0.6; }
.ho-s2 { stroke-width: 2.5; opacity: 0.8; }
.ho-s3 { stroke-width: 4; opacity: 1; }
.ho-line.is-hot { stroke: var(--ink); opacity: 1; }
/* Links between the collections on the circle: muted ink at half strength, under the accent lines. */
.ho-chord { stroke: var(--ink-muted); stroke-linecap: round; fill: none; }
.ho-chord.ho-s0 { opacity: 0.2; }
.ho-chord.ho-s1 { opacity: 0.3; }
.ho-chord.ho-s2 { opacity: 0.4; }
.ho-chord.ho-s3 { opacity: 0.5; }
.ho-svg.is-focus .ho-chord { opacity: 0.08; }
.ho-svg .ho-chord.is-hot { stroke: var(--ink); opacity: 0.9; }
.ho-cross-toggle { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--ink-muted); font-size: 12px; cursor: pointer; }
.ho-cross-toggle input { margin: 0; accent-color: var(--accent); }
.ho-hit { stroke: transparent; stroke-width: 12; fill: none; cursor: help; }
.ho-node { cursor: pointer; outline: none; }
.ho-node-hit { fill: transparent; }
.ho-dot { fill: var(--surface-2); stroke: var(--accent); stroke-width: 1.5; }
.ho-node text { fill: var(--ink-muted); font-size: 12px; }
.ho-node.is-hot text, .ho-node:focus-visible text { fill: var(--ink); font-weight: 600; }
.ho-node.is-hot .ho-dot { fill: var(--accent); }
.ho-node:focus-visible .ho-node-hit { stroke: var(--accent); stroke-width: 2; }
.ho-node.is-on { cursor: default; }
.ho-node.is-on .ho-dot { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.ho-node.is-on text { fill: var(--ink); font-weight: 600; font-size: 13px; }
.ho-tip {
  position: absolute; z-index: 10; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; max-width: 240px;
  padding: 4px 8px; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: var(--elev-2); font-size: 12px; font-variant-numeric: tabular-nums;
}
.ho-tip[hidden] { display: none; }
.ho-step { display: inline-flex; align-items: center; gap: 4px; }
.ho-swatch { display: block; }
.ho-more { margin: 4px 0 0; color: var(--ink-muted); font-size: 12px; }
.ho-shares { margin: 8px 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.ho-all { margin-top: 16px; }
.ho-all > summary { cursor: pointer; }
.ho-key { margin: 4px 0 0; color: var(--ink-muted); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ho-sub { margin: 0 0 8px; font-weight: 600; font-size: 13px; }
.ho-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ho-pick { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ho-pick[aria-pressed="true"] { border-color: var(--accent); font-weight: 600; }
.ho-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ho-detail { margin-top: 16px; }
.ho-detail-h { margin: 0 0 4px; font-size: 15px; }
.ho-near { margin: 8px 0; padding-left: 24px; display: grid; gap: 8px; }
.ho-near li { display: grid; gap: 4px; min-width: 0; }
.ho-near-words { color: var(--ink); }
.ho-near-counts { overflow-wrap: anywhere; color: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ho-below { margin: 8px 0; color: var(--ink-muted); font-size: 12px; }
.ho-limits { margin: 16px 0 8px; padding-left: 20px; color: var(--ink-muted); font-size: 12px; }
.ho-how { font-size: 13px; }

/* Labs: holder retention curves (app/static/lab-cards/holder-retention.js). */
.rt-note { margin: 8px 0; color: var(--ink-muted); font-size: 13px; }
.rt-list td, .rt-list th { white-space: nowrap; }
.rt-pick { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.rt-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rt-cov { display: block; color: var(--ink-muted); font-size: 12px; }
.rt-cov.is-note { color: var(--ink); font-weight: 600; }
.rt-detail { margin-top: 16px; }
.rt-detail-h { margin: 0 0 4px; font-size: 15px; }
.rt-labels { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.rt-tag { padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-size: 12px; color: var(--ink-muted); }
.rt-tag.is-note { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.rt-sum { margin: 8px 0; color: var(--ink); font-size: 13px; }
.rt-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 8px 0; }
.rt-fig { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.rt-fig-when { color: var(--ink-muted); font-size: 12px; }
.rt-fig-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--ink); }
.rt-fig-of { color: var(--ink-muted); font-size: 12px; }
.rt-chart { margin: 8px 0; }
.rt-svg { display: block; width: 100%; height: auto; }
.rt-grid { stroke: var(--line); stroke-width: 1; }
.rt-mark { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.rt-axis { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); }
.rt-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.rt-end { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.rt-table { margin-top: 8px; font-size: 12px; }
.rt-table summary { cursor: pointer; color: var(--ink-muted); }
.rt-limits { margin: 16px 0 8px; padding-left: 20px; color: var(--ink-muted); font-size: 12px; }
.rt-how { font-size: 13px; }

/* Labs: Real holders (app/static/lab-cards/real-holders.js, clustering CL-10). A list at every width. */
.rh-cov { margin: 8px 0; color: var(--ink-muted); font-size: 13px; }
.rh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rh-item { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.rh-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rh-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.rh-gap { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.rh-gap.is-none { color: var(--ink-muted); }
.rh-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.rh-fig { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rh-fig-label, .rh-sub { color: var(--ink-muted); font-size: 12px; }
.rh-sub { margin: 0; }
.rh-fig-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.rh-bars { display: grid; gap: 4px; }
.rh-bar-row { display: grid; grid-template-columns: 80px 1fr 56px; align-items: center; gap: 8px; font-size: 12px; }
.rh-bar-label { color: var(--ink-muted); }
.rh-bar { display: block; height: 8px; border-radius: var(--r-xs); background: var(--line); overflow: hidden; }
.rh-bar-fill { display: block; height: 100%; }
.rh-bar-fill.is-addr { background: var(--ink-muted); }
.rh-bar-fill.is-owner { background: var(--accent); }
.rh-bar-val { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.rh-more { margin-top: 8px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.rh-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rh-limits { margin: 16px 0 8px; padding-left: 20px; color: var(--ink-muted); font-size: 12px; }
.rh-how { font-size: 13px; }

/* Collection mints (AM-5/AM-6, 2026-10-09: /mint/<slug>, mint_collection.js; /mint-collection-create.html) */
.cm-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; font-size: 13px; }
.cm-facts dt { color: var(--ink-muted); }
.cm-facts dd { margin: 0; overflow-wrap: anywhere; }
#cmStatus, #cmSignSay, #cmPrepareSay { overflow-wrap: anywhere; }
.cm-phases, .cm-minted { margin: 0; padding-left: 20px; }
.cm-phase { padding: 8px 0; border-top: 1px solid var(--line); }
.cm-phase:first-child { border-top: 0; }
.cm-phase[aria-current="true"] strong { color: var(--accent); }
.cm-phase .set-lede { margin: 4px 0 0; }
.cm-minted li { font-size: 13px; overflow-wrap: anywhere; padding: 4px 0; }
.cm-wallets { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.cm-me-phase h3, #cmReview h3, #cmStatusBox h3 { font-size: 14px; margin: 12px 0 4px; }
.cm-me-phase ul { margin: 0; padding-left: 20px; font-size: 13px; overflow-wrap: anywhere; }
#ccPayout, .cc-phase-grid input, .cc-phase-grid select { max-width: 100%; min-width: 0; }
.set-form.cm-stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.set-form.cm-stack > input, .set-form.cm-stack > textarea, .set-form.cm-stack > select { flex: none; }
.set-form.cm-stack > button { align-self: flex-start; }
.set-form.cm-stack fieldset { margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.cc-phase > strong, .cc-phase > textarea { display: block; width: 100%; margin: 0 0 8px; }
.cc-list { list-style: none; margin: 0 0 12px; padding: 0; }
.cc-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cc-list li:first-child { border-top: 0; }
.cc-row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cc-phase { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; margin: 0 0 12px; }
.cc-list-file { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-muted); margin: 0 0 8px; }
.cc-list-file input { max-width: 100%; min-width: 0; }
.cc-list-count { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 8px; min-height: 1em; }
.cc-list-mode { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cc-list-mode legend { font-size: 12.5px; color: var(--ink-muted); padding: 0; margin: 0 0 4px; width: 100%; }
.cc-list-mode[hidden], .cc-list-confirm[hidden] { display: none; }
.cc-list-confirm { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; margin: 8px 0 0; }
.cc-list-confirm p { margin: 0 0 8px; }
.cc-phase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cc-phase-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-muted); }
.acct-actions[hidden], .cc-phase-grid[hidden], .cm-facts[hidden] { display: none; }
.cc-items { margin: 8px 0 12px; padding-left: 20px; font-size: 13px; max-height: 240px; overflow: auto; }
/* The creator page's steps (2026-10-09): one step on screen at a time, resumable. */
.cc-steps ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cc-steps button { width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.cc-steps button:disabled { cursor: not-allowed; opacity: 0.6; }
.cc-steps button[aria-current="step"] { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.cc-steps .cc-step-state { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.cc-steps .cc-step-state.s-done { color: var(--good); }
.cc-steps .cc-step-state.s-missing { color: var(--trend); }
.cc-step-nav { display: flex; gap: 8px; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.cc-step-nav:empty { display: none; }
.cc-step[hidden] { display: none; }
#ccSendBox[hidden] { display: none; }
.cc-upcoming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cc-upcoming li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.cc-upcoming a { font-weight: 600; }
.cc-upcoming p { margin: 0; font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .cm-facts { grid-template-columns: 1fr; gap: 0; }
  .cm-facts dd { margin: 0 0 8px; }
  .cc-phase-grid { grid-template-columns: 1fr; }
  .cc-steps ol { grid-template-columns: 1fr; gap: 4px; }
  .cc-steps button { min-height: 44px; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* What arrived in your wallets (Build 24, 2026-10-09: account_receipts.js) */
.rc-row { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.rc-row:first-child { border-top: 0; }
.rc-warn { color: var(--bad); }
.rc-addr { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.rc-row .acct-actions { margin-top: 4px; }
.rc-sub { font-size: 14px; margin: 16px 0 4px; }
/* MT-7: the collection mint page's phishing line and verified-creator badge; long ids wrap. */
.cm-phish, .cm-verified { overflow-wrap: anywhere; }
.cm-verified { color: var(--good); font-weight: 600; }
.cm-links { margin: 4px 0 8px; padding-left: 16px; overflow-wrap: anywhere; }
.cm-sub { font-size: 14px; margin: 16px 0 4px; }
/* MT-11: the composer (/mint). Two columns on a wide screen, the cost panel sticky beside the form; on a
   phone the panel becomes a bar at the bottom of the screen. */
.mc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.mc-layout[hidden] { display: none; }
.mc-left { display: grid; gap: 16px; min-width: 0; }
.mc-panel { position: sticky; top: 16px; }
.mc-tabs { display: flex; gap: 8px; margin: 8px 0 12px; }
.mc-tabs [aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.mc-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.mc-tiers [aria-checked="true"] { border-color: var(--accent); color: var(--accent); }
.mc-drop { display: grid; gap: 4px; place-items: center; padding: 24px 16px; border: 1px dashed var(--control-border); border-radius: var(--r-sm); text-align: center; cursor: pointer; }
.mc-drop.mc-over { border-color: var(--accent); }
.mc-drop input { max-width: 100%; }
.mc-files { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 16px; overflow-wrap: anywhere; }
.mc-file { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc-adv { margin-top: 12px; }
.mc-adv[open] > summary { margin-bottom: 8px; }
.mc-go { width: 100%; margin-top: 8px; }
.mc-panel .acct-status { overflow-wrap: anywhere; }
.mc-left input[type="text"], .mc-left textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 720px) {
  .mc-layout { grid-template-columns: minmax(0, 1fr); }
  .mc-panel { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); top: auto; z-index: 2; max-height: 60vh; overflow: auto; padding: 12px 16px; box-shadow: var(--elev-3); }
  .mc-panel:not(.mc-open) > :not(.mc-bar):not(.mc-go):not(.acct-status):not(#mcCostWarn):not(#mcReview) { display: none; }
  .mc-panel:not(.mc-open):not(.mc-signing) > #mcReview { display: none; }
  .mc-panel .mc-go { margin-top: 8px; }
}
.mc-bar { display: none; }
/* My mints, /mint/history (MT-12) */
.mh-list { display: grid; gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.mh-item { padding: 16px 0 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.mh-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mh-state { padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 12px; }
.mh-done, .mh-recovered { border-color: var(--accent); color: var(--accent); }
.mh-stuck, .mh-failed { border-color: var(--warn, var(--ink)); color: var(--warn, var(--ink)); }
.mh-rate { max-width: 160px; }
.mc-tpl-fields { display: grid; gap: 4px; margin: 8px 0; }
.mc-tpl-fields [hidden] { display: none; }
.mc-tpl-fields[hidden] { display: none; }
.mc-tpl-warn { margin: 8px 0 0; padding-left: 16px; }
/* Rune mint page (MT-15): minted, waiting in the mempool, left */
.mr-bar { margin: 12px 0; }
.mr-seg-done { background: var(--accent); }
.mr-seg-wait { background: var(--accent-soft); }
.mr-seg-left { background: var(--line); }
.mr-go:disabled { opacity: 0.5; cursor: not-allowed; }
.mr-ok { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.mr-ok[hidden] { display: none; }
.mh-pre { max-width: 100%; overflow: auto; font-size: 12px; white-space: pre-wrap; }
@media (max-width: 720px) {
  .mc-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
}

/* What's in "Other OP_RETURN" (2026-10-12) */
.opr-breakdown { margin-top: 16px; }
.opr-breakdown summary { cursor: pointer; font-weight: 600; }
.opr-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.opr-count { font-variant-numeric: tabular-nums; text-align: right; }
.opr-preview { grid-column: 1 / -1; font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }

/* ---------- the search bar (2026-10-12, Matthew; app/site_search.py, search.js) ----------
   One rounded field with the magnifier inside it, under the sign-in row on the dashboard and at the
   top of the other dashboard pages; suggestions drop down under it. */
.site-search { position: relative; margin: var(--space-3) 0; }
.site-search-form { position: relative; margin: 0; }
.site-search-ico {
  position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  color: var(--ink-muted); pointer-events: none;
}
:root[data-layout] .site-search-input {
  box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px 0 40px;
  font: 400 14px/1.4 var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--r-sm);
  transition: border-color 0.15s ease;
}
:root[data-layout] .site-search-input:hover { border-color: var(--ink-muted); }
:root[data-layout] .site-search-input:focus { border-color: var(--accent); }
.site-search-input:focus-visible { outline-offset: 0; }
.site-search-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  max-height: min(60vh, 440px); overflow-y: auto; padding: 4px;
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: var(--elev-3);
}
.site-search-panel[hidden], .site-search-list[hidden], .site-search-notes[hidden] { display: none; }
.site-search-list { list-style: none; margin: 0; padding: 0; }
.site-search-opt {
  display: flex; align-items: baseline; gap: 12px; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer;
}
.site-search-opt:hover, .site-search-opt.is-active { background: var(--surface-2); }
.site-search-opt.is-active { box-shadow: inset 2px 0 0 var(--accent); }
.site-search-kind {
  flex: 0 0 96px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.site-search-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-search-label { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.site-search-sub { font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.site-search-notes { padding: 8px 12px; }
.site-search-list:not([hidden]) + .site-search-notes { margin-top: 4px; border-top: 1px solid var(--line); }
.site-search-note { margin: 0; font-size: 12px; color: var(--ink-muted); }
.site-search-note + .site-search-note { margin-top: 4px; }
@media (max-width: 600px) {
  .site-search { margin: var(--space-2) 0; }
  .site-search-opt { flex-direction: column; gap: 2px; }
  .site-search-kind { flex: none; }
}

/* ---------- Overview, compact top (2026-10-19, Peter's notes) ----------
   "The goal is to see the top collections and tokens holdings immediately without needing to scroll
   as much or at all." The layouts' own summary rules (themes.css) do the spacing; here only the
   Holdings heading, which now carries its sort control on its own line. */
[data-card="holdings"] > .section-head { align-items: center; flex-wrap: wrap; }
[data-card="holdings"] > .section-head .note { display: inline-flex; align-items: center; gap: 8px; }
[data-card="holdings"] .bars-controls { margin: 0; }

/* ---------- Holdings: Held as a share of the collection, and a row's own pop-up (2026-10-19) ---------- */
.hv-held-btn { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.hv-held-btn:hover { color: var(--ink); }
.hv-table tbody tr.hv-can-open { cursor: pointer; }
.hv-table tbody tr.hv-can-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hp-kpis { margin-bottom: 16px; }
.hp-chart { margin: 0 0 16px; }
.hp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.hp-grid li { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; }
.hp-grid a.wp-thumb { width: 100%; height: auto; aspect-ratio: 1; }
.hp-grid .hp-num { color: var(--ink-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-grid .hp-val { color: var(--ink); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-foot { margin: 16px 0 0; font-size: 13px; }