:root {
  --bg: #f6f6f3;
  --panel: #ffffff;
  --text: #15171c;
  --muted: #5a6170;
  --line: #e2e3e8;
  --grid: rgba(21, 23, 28, 0.07);
  --accent: #4f46e5;
  --up: #0f7a4e;
  --down: #b42318;
  --c1: #4f46e5;
  --c2: #c2410c;
  --c3: #0d9488;
  --c4: #a21caf;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f14;
    --panel: #151821;
    --text: #e7e9ee;
    --muted: #9aa1af;
    --line: #272b36;
    --grid: rgba(231, 233, 238, 0.08);
    --accent: #918bff;
    --up: #45c98e;
    --down: #ff806e;
    --c1: #918bff;
    --c2: #f59e3b;
    --c3: #2cc4b3;
    --c4: #e879f9;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--panel); padding: 8px 12px; z-index: 10; }

.site-header { border-bottom: 1px solid var(--line); background: var(--panel); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.brand { font-weight: 750; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.brand span { color: var(--accent); }
/* ---- Header menu: the primary row, then More, a <details> list that opens and closes without any script.
   Both come from the navigation registry in src/render.mjs. On wide screens More drops down under its label; on
   phones it opens as a full-width list under the header. ---- */
.site-header { position: relative; z-index: 5; }
.site-header nav, .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.site-header nav a, .nav-more > summary { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.site-header nav a:hover, .site-header nav a[aria-current="page"], .site-header nav a[aria-current="true"] { color: var(--text); }
.nav-more { position: relative; }
.nav-more > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; user-select: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.nav-more[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.nav-more > summary:hover, .nav-more[open] > summary, .nav-more:has(a[aria-current="page"]) > summary { color: var(--text); }
.nav-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.nav-more-list { position: absolute; top: calc(100% + 14px); right: -12px; z-index: 20; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); }
.site-header .nav-more-list a { display: block; padding: 7px 12px; border-radius: 8px; white-space: nowrap; }
.site-header .nav-more-list a:hover { background: var(--bg); }
.site-header .nav-more-list a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 11%, transparent); }

main { padding-bottom: 48px; }

.hero { padding: 36px 0 20px; max-width: 760px; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.02em; }
.lede { font-size: 1.12rem; margin: 0 0 10px; }
.refresh { color: var(--muted); font-size: 0.92rem; margin: 0; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 8px 0 28px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.tile-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.tile-value { font-size: 1.75rem; font-weight: 720; margin: 2px 0 0; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 0.88rem; margin: 0; color: var(--text); }
.tile-change { font-size: 0.9rem; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-meta { font-size: 0.78rem; color: var(--muted); margin: auto 0 0; padding-top: 6px; }

.up { color: var(--up); }
.down { color: var(--down); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 0 0 20px; }
main > .panel:first-child { margin-top: 32px; } /* a page that opens with a panel, such as /protocols/ */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h1, .panel-head h2 { font-size: 1.2rem; margin: 0; }
.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; padding: 5px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.check { font-size: 0.88rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.chart { min-height: 240px; width: 100%; }
.no-charts .chart { display: none; }
.note { color: var(--muted); font-size: 0.88rem; margin: 10px 0 0; }
.note.more { margin: 0 0 20px; } /* a link line between panels */

.uplot { font-family: inherit; }
.u-legend { font-size: 0.82rem; color: var(--text); }
.u-legend .u-marker { border-radius: 2px; }
.u-select { background: rgba(127, 127, 127, 0.15); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
table.data th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; white-space: nowrap; }
table.data .rank { color: var(--muted); }
table.data .chains { color: var(--muted); font-size: 0.85rem; }
.row-note { color: var(--muted); font-size: 0.8rem; margin-top: 2px; max-width: 46ch; }

/* A table that becomes one block per row on phones, each cell under its column's name (data-label): the Sources
   table and the Activity page's tables by chain and of cross-checks. */
@media (max-width: 640px) {
  table.stack-sm thead { position: absolute; left: -9999px; }
  table.stack-sm, table.stack-sm caption, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td, table.stack-sm tbody th { display: block; width: auto; min-width: 0; }
  table.stack-sm caption { padding: 0 0 6px; }
  table.stack-sm tbody tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.stack-sm tbody tr:last-child { border-bottom: 0; }
  table.stack-sm td, table.stack-sm .num, table.stack-sm tbody th { padding: 2px 0; border: 0; text-align: left; white-space: normal; }
  table.stack-sm tbody tr > :first-child { padding-bottom: 4px; font-weight: 600; }
  table.stack-sm td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
  /* The overview's coin table keeps its four columns, with narrower cell padding so that they fit in 390px. */
  #assets table.data th, #assets table.data td { padding-left: 6px; padding-right: 6px; }
}

.status { display: inline-block; font-size: 0.75rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; color: var(--muted); }
.status-live { color: var(--up); border-color: currentColor; }
.status-exploited, .status-deprecated { color: var(--down); border-color: currentColor; }

details.not-counted { margin-top: 14px; }
details.not-counted summary { cursor: pointer; color: var(--muted); font-size: 0.92rem; }

.events { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.events h3 { font-size: 0.95rem; margin: 6px 0 8px; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.event-list li:last-child { border-bottom: 0; }
.event-list time { display: block; color: var(--muted); font-size: 0.8rem; }
.countdown { color: var(--accent); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }

.prose { max-width: 760px; padding: 32px 0 8px; }
.prose.wide { max-width: none; }
.prose h1 { font-size: 2rem; letter-spacing: -0.02em; margin: 0 0 6px; }
.prose h2 { font-size: 1.3rem; margin: 30px 0 8px; }
.prose h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.prose .meta { color: var(--muted); margin-top: 0; }
.prose li { margin: 4px 0; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; padding: 18px 0 28px; background: var(--panel); }
.site-footer p { margin: 6px 0; }
/* every page in the navigation registry, in menu order */
.foot-nav ul { list-style: none; margin: 0 0 12px; padding: 0 0 14px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-nav a { color: var(--text); text-decoration: none; font-size: 0.9rem; }
.foot-nav a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .header-inner { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .site-header nav, .nav-list { gap: 4px 13px; }
  .site-header nav a, .nav-more > summary { font-size: 0.88rem; }
  /* More opens as a plain list across the width of the header */
  .nav-more { position: static; }
  .nav-more-list { top: calc(100% - 4px); left: 16px; right: 16px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .site-header .nav-more-list a { white-space: normal; font-size: 0.92rem; }
  .tiles { grid-template-columns: 1fr; }
  .events { grid-template-columns: 1fr; }
  .panel { padding: 14px; }
  .tile-value { font-size: 1.55rem; }
  /* phones: protocol, TVL, 30d and status only (type, chains, trend and 7d hidden) */
  table.protocols th:nth-child(3), table.protocols td:nth-child(3),
  table.protocols th:nth-child(4), table.protocols td:nth-child(4),
  table.protocols th:nth-child(6), table.protocols td:nth-child(6),
  table.protocols th:nth-child(7), table.protocols td:nth-child(7),
  table.protocols th:nth-child(9), table.protocols td:nth-child(9) { display: none; }
  table.protocols td, table.protocols th { padding: 8px 6px; }
  table.protocols .row-note { display: none; }
}

/* ---- Hero with illustration ---- */
.hero.has-art { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hero-text { max-width: 640px; }
.hero-art svg { width: 100%; height: auto; display: block; max-height: 360px; }

/* ---- Icons (inline sprite) ---- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.no-icons .ic { display: none; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; margin-right: 8px; color: var(--accent); }
.ic-sm { width: 16px; height: 16px; margin-right: 6px; color: var(--muted); vertical-align: -3px; }
.ic-lg { width: 30px; height: 30px; vertical-align: -4px; margin-right: 12px; }
.tile-label { display: flex; align-items: center; }
.panel-head h1, .panel-head h2 { display: flex; align-items: center; }
td.type { white-space: nowrap; }

/* ---- How it works ---- */
.steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.step { display: flex; flex-direction: column; gap: 6px; }
.step-art { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.step-art svg { width: 100%; height: auto; display: block; }
.step h3 { font-size: 1rem; margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
.step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.78rem; font-weight: 700; flex: none; }
.step p { margin: 0; color: var(--muted); font-size: 0.9rem; }
/* ---- How it works: page header, title and lede beside the "On this page" list ---- */
.how-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 390px); gap: 24px 56px; align-items: center; padding: 44px 0 36px; counter-reset: how; }
.how-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; display: flex; align-items: center; }
.how-head .lede { font-size: 1.22rem; line-height: 1.6; max-width: 53ch; margin: 0; }
.how-toc { display: block; max-width: 36rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px 8px; }
.how-toc-title { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 4px; }
.how-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.how-toc li { counter-increment: toc; }
.how-toc li + li { border-top: 1px solid var(--line); }
.how-toc a { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; color: var(--text); text-decoration: none; font-size: 0.93rem; line-height: 1.35; }
.how-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 1.5em; color: var(--muted); font-size: 0.78rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.how-toc a:hover, .how-toc a:hover::before { color: var(--accent); }
html:has(.how-toc) { scroll-behavior: smooth; }

/* ---- How it works: numbered section panels and running text (numbers come from the counter) ---- */
.how-sec { counter-increment: how; padding: 30px 40px 36px; margin-bottom: 24px; font-size: 1.0625rem; line-height: 1.65; scroll-margin-top: 16px; }
.how-sec > .panel-head { margin-bottom: 18px; }
.how-sec > .panel-head h2 { font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.01em; gap: 14px; }
.how-sec > .panel-head h2::before { content: counter(how, decimal-leading-zero); flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.how-sec a { text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.how-sec a:hover { text-decoration-color: currentColor; }
.how-sec .note { max-width: 72ch; }
.how-text { max-width: 63ch; }
p.how-text, .how-text p, .how-text ul { margin: 0 0 1em; }
.how-text ul { padding-left: 1.3em; }
.how-text li { margin: 0.3em 0; padding-left: 0.2em; }
.how-text li::marker { color: var(--muted); }
.how-text > :last-child, .how-sec > p.how-text:last-child { margin-bottom: 0; }
.how-cols { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 56px; }
.how-cols > p { margin: 0; }

/* Text beside its illustration; .flip puts the illustration first */
.how-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px 56px; align-items: center; }
.how-split.flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.how-split.flip > .fig { order: -1; }
.how-sec .steps { margin-top: 24px; }
.how-sec .steps + .note { margin: 16px 0 0; }
.how-sec .note + .how-split { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }

.fig { margin: 0; }
.fig-art svg { width: 100%; height: auto; display: block; }
.how-split .fig-art > svg { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.fig figcaption { margin-top: 8px; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }

/* ---- How it works: leak and technology cards ----
   Illustration and caption on top, then the card body. The illustration row is shared across each grid row
   (subgrid), so the headings line up and the cards in a row are the same height. */
.leaks { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.techs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.leak, .tech { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.leak > .fig .fig-art, .tech > .fig .fig-art { border-bottom: 1px solid var(--line); }
.leak > .fig figcaption, .tech > .fig figcaption { margin: 0; padding: 10px 20px 0; }
.card-body { padding: 16px 20px 22px; }
.card-body h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.35; }
.tech .card-body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.leak .card-body p { margin: 0; font-size: 0.94em; line-height: 1.62; }
.tech .analogy { margin: 0 0 14px; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--muted); font-style: italic; font-size: 0.94em; line-height: 1.55; }
.tech .analogy + p { margin: 0 0 18px; font-size: 0.94em; line-height: 1.62; }
.tech-facts { margin: 0; padding: 14px 16px; display: grid; gap: 12px; align-content: start; background: var(--bg); border-radius: 10px; }
.tech-facts dt { font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.tech-facts dd { margin: 3px 0 0; font-size: 0.88em; line-height: 1.5; }
.used-by { color: var(--muted); }
.chip { display: inline-block; margin: 2px 0; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--text); font-size: 0.92em; line-height: 1.65; white-space: nowrap; }
@media (min-width: 761px) {
  /* a card left over at the end of the two columns spans both: illustration beside the text, facts in a strip below */
  .tech:last-child:nth-child(odd) { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr auto; column-gap: 36px; padding: 24px; }
  .tech:last-child:nth-child(odd) > .fig { grid-column: 1; grid-row: 1 / 4; align-self: center; }
  .tech:last-child:nth-child(odd) > .fig .fig-art { border-bottom: 0; }
  .tech:last-child:nth-child(odd) > .fig figcaption { padding: 10px 0 0; }
  .tech:last-child:nth-child(odd) .card-body { display: contents; }
  .tech:last-child:nth-child(odd) .card-body > :not(.tech-facts) { grid-column: 2; }
  .tech:last-child:nth-child(odd) .tech-facts { grid-column: 1 / -1; margin-top: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
}

/* ---- How it works: glossary and sources ---- */
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin: 0; }
.glossary > div { padding: 14px 0; border-top: 1px solid var(--line); }
.glossary > div:nth-child(-n + 2) { padding-top: 0; border-top: 0; }
.glossary dt { font-weight: 650; }
.glossary dd { margin: 3px 0 0; color: var(--muted); font-size: 0.94em; line-height: 1.55; }
.how-sources { list-style: none; margin: 0; padding: 0; }
.how-sources li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 24px; padding: 11px 0; border-top: 1px solid var(--line); }
.how-sources li:first-child { padding-top: 0; border-top: 0; }
.src-name { flex: 1 1 28em; min-width: 0; }
.src-note { color: var(--muted); }
.src-host { color: var(--muted); font-size: 0.8rem; }
.how-sources + .note { margin-top: 18px; }

@media (max-width: 960px) {
  .how-head { grid-template-columns: 1fr; padding: 32px 0 28px; }
  .leaks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-cols { grid-template-columns: 1fr; max-width: 63ch; }
}

@media (max-width: 760px) {
  .how-split, .how-split.flip, .glossary { grid-template-columns: 1fr; }
  .techs { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .how-split.flip > .fig { order: 0; }
  .how-sec { padding: 24px 22px 28px; font-size: 1rem; }
  .how-text { max-width: 58ch; }
  .glossary > div:nth-child(2) { padding-top: 14px; border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .leaks { grid-template-columns: 1fr; }
  .how-head { padding: 26px 0 22px; gap: 20px; }
  .how-head .lede { font-size: 1.06rem; }
  .how-sec { padding: 20px 16px 24px; margin-bottom: 16px; }
  .how-sec > .panel-head { margin-bottom: 14px; }
  .how-sec > .panel-head h2 { font-size: 1.22rem; gap: 12px; }
  .how-sec > .panel-head h2::before { width: 30px; height: 30px; font-size: 0.72rem; }
  .leak > .fig figcaption, .tech > .fig figcaption { padding: 10px 16px 0; }
  .card-body { padding: 14px 16px 18px; }
  .leak .card-body p, .tech .analogy, .tech .analogy + p { font-size: 1em; }
  .tech-facts { padding: 12px 14px; }
}

/* ---- Pager and project logos ---- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.pager button { font: inherit; font-size: 0.85rem; padding: 4px 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 6px; cursor: pointer; }
.pager button:hover:not(:disabled) { border-color: var(--accent); }
.pager button[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager-info { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
.proto { display: flex; gap: 10px; align-items: flex-start; }
.logo { width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px; }
img.logo { background: #fff; border: 1px solid var(--line); object-fit: cover; }
.mono { display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: 0.02em; line-height: 1; }
.mono-a1 { background: var(--c1); }
.mono-a2 { background: var(--c2); }
.mono-a3 { background: var(--c3); }
.mono-a4 { background: var(--c4); }

/* ---- Trend lines and composition bars ---- */
td.trend, th.trend { width: 104px; }
.spark { width: 96px; height: 28px; display: block; }
.spark path { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-up path { stroke: var(--up); }
.spark-down path { stroke: var(--down); }
.sub { font-size: 0.95rem; margin: 2px 0 10px; color: var(--muted); font-weight: 600; }
.stack { margin: 0 0 14px; }
.stack-track { border-radius: 6px; overflow: hidden; background: var(--line); }
.stack-bar { width: 100%; height: 14px; display: block; }
.stack-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.88rem; }
.stack-legend li { display: inline-flex; align-items: center; gap: 6px; }
.stack-legend .share { color: var(--muted); }
.stack figcaption { position: absolute; left: -9999px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.sw-a1 { background: var(--c1); }
.sw-a2 { background: var(--c2); }
.sw-a3 { background: var(--c3); }
.sw-a4 { background: var(--c4); }
.sw-muted { background: var(--muted); }
.sw-line { background: var(--line); border: 1px solid var(--muted); }

@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero.has-art { grid-template-columns: 1fr; gap: 12px; }
  .hero-art { max-width: 420px; }
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  td.trend, th.trend { display: none; }
}

/* ---- Illustration palette: inline SVG artwork uses these classes, so it follows the light/dark theme ---- */
.i-ink { fill: var(--text); }
.i-ink-s { stroke: var(--text); fill: none; }
.i-muted { fill: var(--muted); }
.i-muted-s { stroke: var(--muted); fill: none; }
.i-line { fill: var(--line); }
.i-line-s { stroke: var(--line); fill: none; }
.i-panel { fill: var(--panel); }
.i-bg { fill: var(--bg); }
.i-a1 { fill: var(--c1); }
.i-a1-s { stroke: var(--c1); fill: none; }
.i-a2 { fill: var(--c2); }
.i-a2-s { stroke: var(--c2); fill: none; }
.i-a3 { fill: var(--c3); }
.i-a3-s { stroke: var(--c3); fill: none; }
.i-a4 { fill: var(--c4); }
.i-a4-s { stroke: var(--c4); fill: none; }
.i-stop-a1 { stop-color: var(--c1); }
.i-stop-a2 { stop-color: var(--c2); }
.i-stop-a3 { stop-color: var(--c3); }
.i-stop-a4 { stop-color: var(--c4); }
.i-stop-panel { stop-color: var(--panel); }
.i-stop-bg { stop-color: var(--bg); }
.i-soft { opacity: 0.16; }
.i-mid { opacity: 0.45; }
.i-strong { opacity: 0.8; }
@keyframes i-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes i-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.i-pulse { animation: i-pulse 3.2s ease-in-out infinite; }
.i-drift { animation: i-drift 5s ease-in-out infinite; transform-box: fill-box; }
.i-delay-1 { animation-delay: 0.6s; }
.i-delay-2 { animation-delay: 1.2s; }
.i-delay-3 { animation-delay: 1.8s; }

/* leak-frontend: a pulse leaves the device, the server's eye notices it, then it moves on to the chain */
@keyframes leak-frontend-hop1 { 0% { opacity: 0; transform: translateX(0); } 6% { opacity: 1; } 28% { opacity: 1; transform: translateX(28px); } 34%, 100% { opacity: 0; transform: translateX(28px); } }
@keyframes leak-frontend-hop2 { 0%, 42% { opacity: 0; transform: translateX(0); } 48% { opacity: 1; } 68% { opacity: 1; transform: translateX(32px); } 74%, 100% { opacity: 0; transform: translateX(32px); } }
@keyframes leak-frontend-look { 0%, 20% { opacity: 0.6; } 34%, 48% { opacity: 1; transform: scale(1.12); } 64%, 100% { opacity: 0.6; transform: scale(1); } }
.leak-frontend-hop1 { animation: leak-frontend-hop1 8s ease-in-out infinite; }
.leak-frontend-hop2 { animation: leak-frontend-hop2 8s ease-in-out infinite; }
.leak-frontend-look { animation: leak-frontend-look 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .leak-frontend-hop1, .leak-frontend-hop2, .leak-frontend-look { animation: none; }
}

/* tech-fhe: two sealed amounts slide into the adding box and a sealed total slides out, never opened */
@keyframes tech-fhe-in-a { 0%, 10% { opacity: 1; transform: translate(0, 0); } 32% { opacity: 0; transform: translate(118px, 55px); } 33%, 84% { opacity: 0; transform: translate(0, 0); } 96%, 100% { opacity: 1; transform: translate(0, 0); } }
@keyframes tech-fhe-in-b { 0%, 14% { opacity: 1; transform: translate(0, 0); } 36% { opacity: 0; transform: translate(118px, -55px); } 37%, 86% { opacity: 0; transform: translate(0, 0); } 98%, 100% { opacity: 1; transform: translate(0, 0); } }
@keyframes tech-fhe-out { 0%, 44% { opacity: 0; transform: translateX(-110px); } 50% { opacity: 1; } 60%, 80% { opacity: 1; transform: translateX(0); } 92% { opacity: 0; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-110px); } }
@keyframes tech-fhe-work { 0%, 30% { opacity: 0.16; } 38%, 46% { opacity: 0.6; } 56%, 100% { opacity: 0.16; } }
.tech-fhe-in-a { animation: tech-fhe-in-a 9s ease-in-out infinite; }
.tech-fhe-in-b { animation: tech-fhe-in-b 9s ease-in-out infinite; }
.tech-fhe-out { animation: tech-fhe-out 9s ease-in-out infinite; }
.tech-fhe-work { animation: tech-fhe-work 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tech-fhe-in-a, .tech-fhe-in-b, .tech-fhe-out, .tech-fhe-work { animation: none; }
}

/* tech-ring: the real signer lights up, then the highlight melts into all sixteen; the one-time address changes */
@keyframes tech-ring-real { 0%, 8% { opacity: 0; } 18%, 34% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes tech-ring-blend { 0%, 32% { opacity: 0; } 46%, 58% { opacity: 0.55; } 74%, 100% { opacity: 0; } }
@keyframes tech-ring-addr-a { 0%, 56% { opacity: 1; } 64%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tech-ring-addr-b { 0%, 56% { opacity: 0; } 64%, 92% { opacity: 1; } 100% { opacity: 0; } }
.tech-ring-real { animation: tech-ring-real 8s ease-in-out infinite; }
.tech-ring-blend { animation: tech-ring-blend 8s ease-in-out infinite; }
.tech-ring-addr-a { animation: tech-ring-addr-a 8s ease-in-out infinite; }
.tech-ring-addr-b { animation: tech-ring-addr-b 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tech-ring-real, .tech-ring-blend, .tech-ring-addr-a, .tech-ring-addr-b { animation: none; }
}

/* leak-timing: a coin goes in at one tick, an identical coin comes out a few ticks later, then a link pairs them */
@keyframes leak-timing-in { 0% { opacity: 0; transform: translateX(0); } 6%, 12% { opacity: 1; transform: translateX(0); } 25%, 100% { opacity: 0; transform: translateX(58px); } }
@keyframes leak-timing-out { 0%, 50% { opacity: 0; transform: translateX(-58px); } 62%, 88% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes leak-timing-entry { 0%, 24% { opacity: 0; } 27%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes leak-timing-exit { 0%, 49% { opacity: 0; } 52%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes leak-timing-link { 0%, 64% { opacity: 0; } 72%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes leak-timing-hand { from { transform: rotate(-180deg); } to { transform: rotate(180deg); } }
.leak-timing-in { animation: leak-timing-in 8s ease-in-out infinite; }
.leak-timing-out { animation: leak-timing-out 8s ease-in-out infinite; }
.leak-timing-entry { animation: leak-timing-entry 8s ease-in-out infinite; }
.leak-timing-exit { animation: leak-timing-exit 8s ease-in-out infinite; }
.leak-timing-link { animation: leak-timing-link 8s ease-in-out infinite; }
.leak-timing-hand { animation: leak-timing-hand 8s steps(12, end) infinite; transform-box: view-box; transform-origin: 160px 30px; }
@media (prefers-reduced-motion: reduce) {
  .leak-timing-in, .leak-timing-out, .leak-timing-entry, .leak-timing-exit, .leak-timing-link, .leak-timing-hand { animation: none; }
}

/* leak-amounts: coins go in and come out, links snap between matching odd sizes, while the fixed sizes stay unlinked */
@keyframes leak-amounts-in { 0% { opacity: 0; transform: translateX(-10px); } 12%, 88% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes leak-amounts-out { 0%, 22% { opacity: 0; transform: translateX(-10px); } 34%, 88% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes leak-amounts-l1 { 0%, 42% { opacity: 0; } 50%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes leak-amounts-l2 { 0%, 50% { opacity: 0; } 58%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes leak-amounts-l3 { 0%, 58% { opacity: 0; } 66%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes leak-amounts-no { 0%, 64% { opacity: 0; } 72%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.leak-amounts-in { animation: leak-amounts-in 9s ease-in-out infinite; }
.leak-amounts-out { animation: leak-amounts-out 9s ease-in-out infinite; }
.leak-amounts-l1 { animation: leak-amounts-l1 9s ease-in-out infinite; }
.leak-amounts-l2 { animation: leak-amounts-l2 9s ease-in-out infinite; }
.leak-amounts-l3 { animation: leak-amounts-l3 9s ease-in-out infinite; }
.leak-amounts-no { animation: leak-amounts-no 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .leak-amounts-in, .leak-amounts-out, .leak-amounts-l1, .leak-amounts-l2, .leak-amounts-l3, .leak-amounts-no { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .i-pulse, .i-drift { animation: none; }
}

/* tech-zk: the proof card travels to the checker, a tick appears, the envelope stays sealed */
@keyframes tech-zk-card { 0% { opacity: 0; transform: translateX(-70px); } 8% { opacity: 1; transform: translateX(-70px); } 45% { opacity: 1; transform: translateX(84px); } 55%, 100% { opacity: 0; transform: translateX(104px); } }
@keyframes tech-zk-tick { 0%, 50% { opacity: 0; } 60%, 88% { opacity: 1; } 97%, 100% { opacity: 0; } }
.tech-zk-card { animation: tech-zk-card 8s ease-in-out infinite; }
.tech-zk-tick { animation: tech-zk-tick 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tech-zk-card, .tech-zk-tick { animation: none; }
}

/* anonymity-set: the pool fills with 3, then 10, then 30 identical notes while the watcher's guess fades; the still frame is the full pool */
@keyframes anonymity-set-b { 0%, 30% { opacity: 0; } 37%, 92% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes anonymity-set-c { 0%, 63% { opacity: 0; } 70%, 92% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes anonymity-set-guess { 0%, 30% { opacity: 1; } 37%, 63% { opacity: 0.55; } 70%, 92% { opacity: 0.2; } 99%, 100% { opacity: 1; } }
@keyframes anonymity-set-odds { 0%, 30% { transform: scaleX(1); } 37%, 63% { transform: scaleX(0.3); } 70%, 92% { transform: scaleX(0.1); } 99%, 100% { transform: scaleX(1); } }
.anonymity-set-b { animation: anonymity-set-b 9s ease-in-out infinite; }
.anonymity-set-c { animation: anonymity-set-c 9s ease-in-out infinite; }
.anonymity-set-guess { opacity: 0.2; animation: anonymity-set-guess 9s ease-in-out infinite; }
.anonymity-set-odds { transform: scaleX(0.1); transform-box: fill-box; transform-origin: left center; animation: anonymity-set-odds 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .anonymity-set-b, .anonymity-set-c, .anonymity-set-guess, .anonymity-set-odds { animation: none; }
}

/* tech-shielded-transfer: notes change hands along the arcs inside the pool; the outside view never changes */
@keyframes tech-shielded-transfer-pay { 0% { opacity: 0; transform: translate(-34px, 22.5px); } 6% { opacity: 1; transform: translate(-34px, 22.5px); } 14% { transform: translate(-19.7px, 5.6px); } 22% { transform: translate(0, 0); } 30% { transform: translate(19.7px, 5.6px); } 38% { opacity: 1; transform: translate(34px, 22.5px); } 44%, 100% { opacity: 0; transform: translate(34px, 22.5px); } }
@keyframes tech-shielded-transfer-back { 0%, 46% { opacity: 0; transform: translate(34px, -22.5px); } 52% { opacity: 1; transform: translate(34px, -22.5px); } 60% { transform: translate(19.7px, -5.6px); } 68% { transform: translate(0, 0); } 76% { transform: translate(-19.7px, -5.6px); } 84% { opacity: 1; transform: translate(-34px, -22.5px); } 90%, 100% { opacity: 0; transform: translate(-34px, -22.5px); } }
.tech-shielded-transfer-pay { animation: tech-shielded-transfer-pay 9s linear infinite; }
.tech-shielded-transfer-back { animation: tech-shielded-transfer-back 9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .tech-shielded-transfer-pay, .tech-shielded-transfer-back { animation: none; }
}

/* ---- Exchange access and country rules (/access/) ----
   Map levels are an ordinal ramp: strictest darkest in light mode and brightest in dark mode, checked against the
   panel colour with the dataviz ordinal rules (lightness in order, steps at least 0.06 apart, lightest step at least
   2:1). "No restriction found" is a separate blue and "Not reviewed" the plain land grey. */
:root {
  --lv-crypto-ban: #8c2901;
  --lv-exchange-ban: #b83b07;
  --lv-scheduled-ban: #d8582e;
  --lv-delisted-under-pressure: #eb7955;
  --lv-mixers-targeted: #f79d81;
  --lv-no-restriction-found: #8eabe1;
  --lv-none: #e2e3e8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lv-crypto-ban: #fec5b3;
    --lv-exchange-ban: #f99b7e;
    --lv-scheduled-ban: #e37958;
    --lv-delisted-under-pressure: #c45e3d;
    --lv-mixers-targeted: #9b462c;
    --lv-no-restriction-found: #3b5584;
    --lv-none: #272b36;
  }
}

/* one class per level: fill for map shapes, background for legend swatches */
.lv-crypto-ban { fill: var(--lv-crypto-ban); background-color: var(--lv-crypto-ban); }
.lv-exchange-ban { fill: var(--lv-exchange-ban); background-color: var(--lv-exchange-ban); }
.lv-scheduled-ban { fill: var(--lv-scheduled-ban); background-color: var(--lv-scheduled-ban); }
.lv-delisted-under-pressure { fill: var(--lv-delisted-under-pressure); background-color: var(--lv-delisted-under-pressure); }
.lv-mixers-targeted { fill: var(--lv-mixers-targeted); background-color: var(--lv-mixers-targeted); }
.lv-no-restriction-found { fill: var(--lv-no-restriction-found); background-color: var(--lv-no-restriction-found); }
.lv-none { fill: var(--lv-none); background-color: var(--lv-none); }
.sw-hatch { background: repeating-linear-gradient(135deg, var(--lv-no-restriction-found) 0 2px, var(--panel) 2px 3.5px); }

.acc-head { padding-bottom: 30px; }
.acc-stats { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); font-size: 0.95rem; }
.acc-stats strong { color: var(--text); font-size: 1.35rem; font-weight: 720; margin-right: 6px; font-variant-numeric: tabular-nums; }
.acc-meta { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; }
.acc-sec { padding: 24px 28px 28px; margin-bottom: 24px; scroll-margin-top: 16px; }
.acc-sec > .panel-head h2 { font-size: 1.35rem; letter-spacing: -0.01em; }
.acc-intro { margin: 0 0 16px; color: var(--muted); max-width: 78ch; }
.acc-sec h3.sub { margin: 28px 0 8px; }

/* map and its panel */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px 28px; }
.map-fig { margin: 0; min-width: 0; }
.world { display: block; width: 100%; height: auto; }
.world .cty { stroke: var(--panel); stroke-width: 0.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; }
.world .hatches path { fill: url(#hatch); pointer-events: none; }
.world .hatch-line { fill: var(--panel); opacity: 0.6; }
.world .pt { cursor: pointer; }
.world .hit { fill: transparent; }
.world .dot { stroke: var(--panel); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.world .map-hl, .world .map-hl-dot { display: none; fill: none; stroke: var(--text); stroke-width: 1.75px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.world .map-hl.on, .world .map-hl-dot.on { display: inline; }
.map-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.85rem; }
.map-legend li { display: inline-flex; align-items: center; gap: 7px; }
.map-legend .sw { width: 14px; height: 10px; border-radius: 2px; }
.map-legend .n { color: var(--muted); font-variant-numeric: tabular-nums; }
/* the panel sits beside the map without changing the row height, so hovering never moves the page */
.map-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.map-pick { font-size: 0.9rem; color: var(--muted); }
.map-tools select { width: min(100%, 300px); font: inherit; font-size: 0.92rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.map-side { position: relative; min-height: 420px; }
.map-side-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
.map-panel { flex: 1; min-height: 0; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 0.92rem; line-height: 1.5; }
.mp-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.mp-kicker .sw { width: 12px; height: 12px; }
.mp-name { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
.mp-tag { display: inline-block; margin: 0 0 8px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); font-size: 0.78rem; color: var(--muted); }
.mp-summary { margin: 0 0 12px; }
.mp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mp-facts dt { color: var(--muted); font-size: 0.76rem; }
.mp-facts dd { margin: 1px 0 0; font-weight: 600; line-height: 1.35; }
.mp-inst { margin: 0 0 10px; color: var(--muted); font-size: 0.84rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.mp-foot { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 0.85rem; color: var(--muted); }
span.lbl { font-weight: 650; color: var(--text); }
p.lbl { margin: 14px 0 2px; font-size: 0.76rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.conf { white-space: nowrap; }
.conf-confirmed, .conf-reported { color: var(--muted); }
.conf-reported { font-style: italic; }
.conf-unconfirmed { color: var(--text); font-style: italic; text-decoration: underline dashed var(--muted); text-underline-offset: 3px; }

/* country rules: the whole list is one <details>, closed by default, opened by a button-like row */
.rules-list > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--accent); font-size: 0.92rem; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.rules-list > summary::-webkit-details-marker { display: none; }
.rules-list > summary::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.rules-list[open] > summary::before { transform: translateY(2px) rotate(225deg); }
.rules-list > summary:hover { border-color: var(--accent); }
.rules-list > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rules-list[open] > summary { margin-bottom: 14px; }
.rules-list[open] > summary > .rl-show, .rules-list:not([open]) > summary > .rl-hide { display: none; }

/* country rules: each entry is a <details> whose summary is laid out as a table row */
.rules-head, .rule > summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.2fr) minmax(0, 0.95fr) minmax(0, 0.8fr); column-gap: 14px; align-items: baseline; }
.rules-head { margin-top: 18px; padding: 8px 10px 8px 26px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.rule { border-bottom: 1px solid var(--line); }
.rule > summary { padding: 10px; cursor: pointer; list-style: none; font-size: 0.92rem; }
.rule > summary::-webkit-details-marker, .xnote > summary::-webkit-details-marker { display: none; }
.rule > summary:hover, .xnote > summary:hover { background: var(--bg); }
.rule > summary:focus-visible, .xnote > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.r-name, .xn-name { font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.r-name::before, .xn-name::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(-45deg); transition: transform 0.15s; }
.rule[open] > summary .r-name::before, .xnote[open] > summary .xn-name::before { transform: translateY(-3px) rotate(45deg); }
.r-sub { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.r-level { display: flex; align-items: baseline; gap: 8px; }
.r-level .sw { flex: none; transform: translateY(1px); }
.r-date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-group-note { grid-column: span 3; color: var(--muted); }
.rule-group { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.rule-group > summary { border-radius: 10px; }
.rule-group > summary:hover { background: color-mix(in srgb, var(--line) 45%, var(--bg)); }
.rule-body { padding: 4px 10px 20px 26px; max-width: 88ch; font-size: 0.94rem; line-height: 1.6; }
.rule-body p { margin: 0 0 10px; }
.rule-summary { font-weight: 600; }
.rule-facts { display: none; }
.rule-inst { color: var(--muted); font-size: 0.9rem; }
.rule-body .rule-meta, .xn-cell .rule-meta { margin: 12px 0 0; color: var(--muted); font-size: 0.82rem; }
.rule:target > summary, .xn-cell:target { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.srcs { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.86rem; line-height: 1.45; }
.srcs li { padding: 4px 0; }
.src-meta { color: var(--muted); }
.srcs a, .chg-src a { overflow-wrap: anywhere; }

/* exchange table and notes */
.xtable { min-width: 780px; }
.xtable th.coin span { display: block; font-size: 0.72rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.xtable tbody th { text-align: left; font-size: 0.92rem; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.xtable thead th:first-child, .xtable tbody th { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.x-hint { display: none; margin: 0 0 8px; }
.xtable tbody tr:last-child th { border-bottom: 0; }
.xtable tbody th a { color: var(--text); text-decoration: none; }
.xtable tbody th a:hover { color: var(--accent); }
.st { display: inline-block; padding: 1px 9px; border: 1px solid var(--line); border-radius: 99px; font-size: 0.8rem; line-height: 1.55; white-space: nowrap; color: var(--text); text-decoration: none; }
a.st:hover { border-color: var(--accent); }
.st-listed { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.st-listed-restricted { background: color-mix(in srgb, var(--accent) 5%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.st-delisted { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.st-never-listed, .st-unknown { color: var(--muted); }
.st.unconf { border-style: dashed; }
.st-never-listed.unconf, .st-unknown { border-color: color-mix(in srgb, var(--muted) 65%, transparent); }
.st-when, .st-zec { display: block; margin-top: 3px; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.x-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.85rem; color: var(--muted); }
.x-legend li { display: inline-flex; align-items: center; gap: 8px; }
.xnotes { border-top: 1px solid var(--line); }
.xnote { border-bottom: 1px solid var(--line); }
.xnote > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 10px; cursor: pointer; list-style: none; }
.xn-scope { flex: 1 1 30em; min-width: 0; color: var(--muted); font-size: 0.86rem; }
.xn-body { padding: 0 10px 16px 26px; max-width: 92ch; font-size: 0.92rem; line-height: 1.55; }
.xn-site { margin: 0 0 6px; font-size: 0.86rem; }
.xn-cell { padding: 12px 8px 12px 0; border-top: 1px solid var(--line); }
.xn-cell h4 { margin: 0 0 6px; font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.xn-coin-name, .xn-when { font-weight: 400; color: var(--muted); font-size: 0.86rem; }
.xn-cell p { margin: 0 0 6px; }
.xn-regions { font-weight: 600; }
.xn-zec { color: var(--muted); }

/* changes */
.changes { list-style: none; margin: 0; padding: 0; }
.chg { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 2px 18px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.92rem; line-height: 1.55; }
.changes > .chg:first-child { border-top: 0; padding-top: 2px; }
.chg time { color: var(--muted); font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; }
.chg-body p { margin: 0 0 4px; max-width: 92ch; }
.chg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.chg-coins { font-weight: 600; font-size: 0.86rem; letter-spacing: 0.02em; }
.chg-src { color: var(--muted); font-size: 0.84rem; }
.ev { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; font-size: 0.76rem; line-height: 1.6; white-space: nowrap; }
.ev-listed, .ev-relisted { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ev-delisted { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.ev-restricted { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }
.ev-shielded-support { background: color-mix(in srgb, var(--c3) 13%, transparent); border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.more-changes { margin-top: 6px; border-top: 1px solid var(--line); }
.more-changes > summary { cursor: pointer; padding: 12px 0; color: var(--accent); font-size: 0.92rem; }

/* how this page was checked */
.acc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; font-size: 0.94rem; line-height: 1.6; }
.acc-cols h3 { font-size: 1rem; margin: 6px 0 8px; }
.acc-cols h3:not(:first-child) { margin-top: 22px; }
.acc-cols p { margin: 0 0 10px; }
.acc-defs { margin: 0; }
.acc-defs > div { padding: 9px 0; border-top: 1px solid var(--line); }
.acc-defs dt { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.acc-defs dd { margin: 3px 0 0; color: var(--muted); }

/* Sources page: publishers cited on /access/ */
.pubs { margin-top: 10px; }
.pubs > summary { cursor: pointer; color: var(--accent); }
.pub-list { columns: 2 280px; column-gap: 40px; padding-left: 1.1em; font-size: 0.9rem; }
.pub-list li { break-inside: avoid; margin: 3px 0; }

@media (max-width: 960px) {
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .map-side { min-height: 0; }
  .map-side-inner { position: static; }
  .map-panel { overflow: visible; }
  .acc-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .rules-head { display: none; }
  .rule > summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); row-gap: 2px; }
  .rule > summary > .r-val, .rule > summary > .r-group-note, .rule > summary > .r-conf { display: none; }
  .rule-facts { display: block; margin: 0 0 12px; }
  .rule-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
  .rule-facts dt { color: var(--muted); }
  .rule-facts dd { margin: 0; font-weight: 600; text-align: right; }
  .rule-body, .xn-body { padding-left: 10px; }
  .chg { grid-template-columns: minmax(0, 1fr); }
  .x-hint { display: block; }
}

@media (max-width: 640px) {
  .acc-sec { padding: 18px 14px 22px; margin-bottom: 16px; }
  .acc-stats strong { font-size: 1.15rem; }
  .map-legend { font-size: 0.8rem; gap: 4px 12px; }
  .map-panel { padding: 14px; }
}

/* ---- A box beside a page's title: "Follow changes" on /changes/, "Cite and reuse" on /data/ ---- */
.side-box { max-width: 36rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.side-title { margin: 0 0 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.side-links li + li { border-top: 1px solid var(--line); }
.side-links li:last-child { padding-bottom: 2px; }
.side-links > li > a { display: inline-flex; align-items: center; align-self: flex-start; font-weight: 600; text-decoration: none; }
.side-links > li > a:hover { text-decoration: underline; }
.side-links span { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.side-links .ic, .foot-feed .ic { width: 16px; height: 16px; margin-right: 8px; }
.cite { margin: 2px 0 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.9rem; overflow-wrap: anywhere; }
.side-note { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; overflow-wrap: anywhere; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.9em; }

/* ---- Changes (/changes/): the list reuses .changes and .chg from /access/ ---- */
.chg-kind { font-size: 0.7rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ev-level { display: inline-flex; align-items: center; gap: 6px; }
.ev-level .sw { width: 9px; height: 9px; border-radius: 2px; }
.ev-added, .ev-counted, .ev-tracked { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ev-removed, .ev-uncounted, .ev-gone { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.ev-status, .ev-changed { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }
.ev-review { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 65%, transparent); }
.ev-ignored { color: var(--muted); }
.chg-note { color: var(--muted); font-size: 0.86rem; }
.chg-src .sep { margin: 0 3px; }
.chg-src .chg-more { white-space: nowrap; }
.chg-filter { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 22px; }
.chg-filter input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.chg-filter label { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--text); font-size: 0.86rem; line-height: 1.5; cursor: pointer; user-select: none; }
.chg-filter label:hover { border-color: var(--accent); }
.chg-filter .n { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.chg-filter input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; }
.chg-filter input:checked + label .n { color: inherit; opacity: 0.85; }
.chg-filter input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.chg-years { display: flex; flex-direction: column; gap: 22px; }
.chg-year-h { margin: 0 0 2px; font-size: 0.95rem; color: var(--muted); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.chg-year .changes > .chg:first-child { border-top: 1px solid var(--line); padding-top: 12px; }
/* a year is a <details>: the newest are open, earlier ones closed with a count of their entries */
.chg-year > summary { display: flex; align-items: baseline; gap: 12px; padding: 2px 0; cursor: pointer; list-style: none; }
.chg-year > summary::-webkit-details-marker { display: none; }
.chg-year > summary::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-3px) rotate(-45deg); transition: transform 0.15s; }
.chg-year[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.chg-year > summary .chg-year-h { margin: 0; }
.chg-year > summary:hover .chg-year-h { color: var(--accent); }
.chg-year > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.chg-year[open] > summary { margin-bottom: 2px; }
.yc { display: none; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.chg-list:has(#k-all:checked) .yc[data-k="all"],
.chg-list:has(#k-exchange:checked) .yc[data-k="exchange"],
.chg-list:has(#k-rule:checked) .yc[data-k="rule"],
.chg-list:has(#k-protocol:checked) .yc[data-k="protocol"],
.chg-list:has(#k-listing:checked) .yc[data-k="listing"],
.chg-list:has(#k-site:checked) .yc[data-k="site"] { display: inline; }
/* The filter: with one kind chosen, the other kinds and the years without that kind are hidden. No script needed. */
.chg-list:has(#k-exchange:checked) .chg:not([data-kind="exchange"]),
.chg-list:has(#k-rule:checked) .chg:not([data-kind="rule"]),
.chg-list:has(#k-protocol:checked) .chg:not([data-kind="protocol"]),
.chg-list:has(#k-listing:checked) .chg:not([data-kind="listing"]),
.chg-list:has(#k-site:checked) .chg:not([data-kind="site"]),
.chg-list:has(#k-exchange:checked) .chg-year:not(:has([data-kind="exchange"])),
.chg-list:has(#k-rule:checked) .chg-year:not(:has([data-kind="rule"])),
.chg-list:has(#k-protocol:checked) .chg-year:not(:has([data-kind="protocol"])),
.chg-list:has(#k-listing:checked) .chg-year:not(:has([data-kind="listing"])),
.chg-list:has(#k-site:checked) .chg-year:not(:has([data-kind="site"])) { display: none; }

/* ---- Data downloads (/data/): one card per file ---- */
.files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.file { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 16px; }
.file-head { display: flex; align-items: center; gap: 10px; }
.file-head h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.fmt { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; font-size: 0.72rem; font-weight: 650; line-height: 1.6; letter-spacing: 0.04em; }
.fmt-csv { background: color-mix(in srgb, var(--c3) 13%, transparent); border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.fmt-json { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.fmt-rss { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.file-desc { margin: 0; font-size: 0.94rem; line-height: 1.55; }
.file-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.88rem; line-height: 1.45; }
.file-facts dt { color: var(--muted); font-size: 0.76rem; }
.file-facts dd { margin: 1px 0 0; }
.file-fields { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.file-fields > summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.file-fields > summary .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.file-fields .table-wrap { margin-top: 8px; }
table.fields { font-size: 0.85rem; }
table.fields td { padding: 7px 8px; line-height: 1.45; }
table.fields td:first-child { white-space: nowrap; }

.foot-feed a { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; font-size: 0.9rem; }
.foot-feed a:hover { color: var(--accent); text-decoration: underline; }
.foot-feed .ic { color: var(--c2); }

@media (max-width: 760px) {
  .files { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .side-box { padding: 14px 16px; }
  .file { padding: 14px; }
  .file-facts { grid-template-columns: minmax(0, 1fr); }
}

/* a family of files on /data/ (one card, one link per file) */
.file-members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.88rem; line-height: 1.5; }

/* ---- Protocol profiles (/protocols/<id>/), the strip of profiles on /protocols/ and the table's Profile link ----
   The header band reuses .how-head and .how-toc; sections are .acc-sec panels; incidents reuse the .chg list. */
.crumbs { margin: 26px 0 0; font-size: 0.88rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.75; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); }
.pf-head { padding-top: 16px; }
.pf-head h1 { gap: 16px; }
.pf-head .lede { font-size: 1.12rem; line-height: 1.6; max-width: 60ch; }
.logo.pf-logo { width: 46px; height: 46px; margin: 0; }
.logo.pf-logo.mono { font-size: 16px; }
.pf-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; }
.pf-badges .status { font-size: 0.8rem; padding: 2px 10px; }
.pf-kind { display: inline-flex; align-items: center; font-size: 0.92rem; color: var(--muted); }
.pf-status-note { margin: 10px 0 0; max-width: 72ch; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.pf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px 24px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.pf-facts .pf-wide { grid-column: 1 / -1; }
.pf-facts dt { font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pf-facts dd { margin: 4px 0 0; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.pf-facts dd small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.pf-links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pf-links a { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--text); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.pf-links a:hover { border-color: var(--accent); color: var(--accent); }
.pf-links .src-host { font-weight: 400; }
.pf-head .acc-meta { margin-top: 16px; }

.pf-text { max-width: 78ch; font-size: 1rem; line-height: 1.65; }
.pf-text p { margin: 0 0 1em; }
.pf-text > :last-child { margin-bottom: 0; }
/* how it works: the description, with the token and the team in a box beside it */
.pf-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); gap: 24px 48px; align-items: start; }
.pf-aside { padding: 16px 20px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; font-size: 0.92rem; line-height: 1.55; }
.pf-aside h3 { margin: 0 0 6px; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pf-aside h3:not(:first-child) { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pf-aside p { margin: 0; }
.chip.pf-symbol { margin: 0 4px 0 0; font-weight: 650; font-size: 0.85em; letter-spacing: 0.02em; }
.pf-stats { margin: 0 0 16px; }
.pf-stats strong { font-size: 1.2rem; }
.pf-chart-note { max-width: 96ch; line-height: 1.55; }
.pf-none { margin: 0; }

/* what it hides and what it does not: two boxes side by side */
.pf-hides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-hide { padding: 16px 20px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.pf-hidden { border-top: 3px solid var(--c3); }
.pf-visible { border-top: 3px solid var(--c2); }
.pf-hide h3 { display: flex; align-items: center; margin: 0 0 10px; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pf-hide h3 .ic { width: 18px; height: 18px; margin-right: 8px; }
.pf-hidden h3 .ic { color: var(--c3); }
.pf-visible h3 .ic { color: var(--c2); }
.pf-hide ul { margin: 0; padding-left: 1.15em; font-size: 0.95rem; line-height: 1.55; }
.pf-hide li { margin: 0 0 8px; padding-left: 0.2em; }
.pf-hide li:last-child { margin-bottom: 0; }
.pf-hide li::marker { color: var(--muted); }
.pf-hides + .note { margin-top: 14px; max-width: 96ch; }

/* audits and funding tables; on phones each row becomes a block */
table.pf-table { font-variant-numeric: normal; }
table.pf-table td { line-height: 1.5; }
table.pf-table td p { margin: 0 0 4px; }
table.pf-table .chg-src { margin: 0; }
table.pf-table th[scope="row"] { min-width: 9em; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); font-size: 0.92rem; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: normal; }
table.pf-table tr:last-child th { border-bottom: 0; }
.pf-date { width: 7.5em; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-undated { color: var(--muted); font-style: italic; }
table.pf-funding td.num { font-weight: 600; font-variant-numeric: tabular-nums; }
table.pf-funding td:last-child { min-width: 12em; }

/* incidents: badges by type, on the .chg list */
.ev-exploit, .ev-governance-attack { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.ev-sanction, .ev-prosecution { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }

/* milestones: a timeline with a dot per entry on a line between the dates and the text */
.pf-timeline { list-style: none; margin: 0; padding: 0; }
.pf-timeline > li { position: relative; display: grid; grid-template-columns: 7.2em minmax(0, 1fr); column-gap: 36px; padding: 0 0 18px; font-size: 0.92rem; line-height: 1.55; }
.pf-timeline > li:last-child { padding-bottom: 0; }
.pf-timeline > li::before { content: ""; position: absolute; left: calc(7.2em + 17px); top: 8px; bottom: -8px; width: 2px; background: var(--line); }
.pf-timeline > li:last-child::before { display: none; }
.pf-timeline > li::after { content: ""; position: absolute; left: calc(7.2em + 12px); top: 5px; width: 8px; height: 8px; border: 2px solid var(--accent); border-radius: 50%; background: var(--panel); }
.pf-timeline time { padding-top: 1px; color: var(--muted); font-size: 0.86rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-body p { margin: 0 0 4px; max-width: 92ch; }
.tl-body .chg-src { margin: 0; }

.pf-sources { columns: 2 340px; column-gap: 40px; }
.pf-sources li { break-inside: avoid; }
#sources .acc-meta { margin-top: 16px; }

/* the strip of profiles: on /protocols/ above the table, and at the foot of each profile */
.sub.pf-sub { margin-top: 26px; }
.pf-strip-note { margin: 0 0 12px; }
.pf-strip { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pf-card { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none; }
.pf-card:hover { border-color: var(--accent); }
.pf-card:hover .pf-card-name { color: var(--accent); }
.pf-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo.pf-card-logo { width: 30px; height: 30px; margin: 0; }
.logo.pf-card-logo.mono { font-size: 11px; }
.pf-card-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pf-card-name { font-weight: 600; }
.pf-card-kind { color: var(--muted); font-size: 0.8rem; }

/* the Profile link beside a protocol's name in the table */
.pf-link { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 99px; font-size: 0.72rem; font-weight: 600; line-height: 1.6; text-decoration: none; white-space: nowrap; vertical-align: 1px; }
.pf-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

@media (max-width: 960px) {
  .pf-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-how { grid-template-columns: minmax(0, 1fr); }
  .pf-aside { max-width: 78ch; }
}

@media (max-width: 760px) {
  .pf-hides { grid-template-columns: minmax(0, 1fr); }
  table.pf-table thead { position: absolute; left: -9999px; }
  table.pf-table, table.pf-table tbody, table.pf-table tr, table.pf-table td, table.pf-table th[scope="row"] { display: block; width: auto; min-width: 0; }
  table.pf-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.pf-table tr:last-child { border-bottom: 0; }
  table.pf-table td, table.pf-table th[scope="row"] { padding: 2px 0; border: 0; text-align: left; }
  table.pf-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
  table.pf-funding td.num { text-align: left; }
  .pf-timeline > li { grid-template-columns: minmax(0, 1fr); padding-left: 28px; }
  .pf-timeline > li::before { left: 5px; }
  .pf-timeline > li::after { left: 0; }
  .pf-timeline time { text-align: left; }
}

@media (max-width: 640px) {
  .crumbs { margin-top: 18px; }
  .logo.pf-logo { width: 38px; height: 38px; }
  .pf-head .lede { font-size: 1.04rem; }
  .pf-card { gap: 10px; padding: 8px 10px; }
  .logo.pf-card-logo { width: 26px; height: 26px; }
  .pf-hide { padding: 14px 16px; }
}

/* ---- exchange-checker: the Exchange access chart on /access/ (src/listing-check.mjs, web/exchange-access.js) ----
   Small multiples: a card per coin and one for any of the seven, each with its latest count, a small chart on the
   same 0 to 14 scale (smallChart in web/chart.mjs) and the exchanges behind the count; then the daily counts as a
   table. Also the change log's badges for what the daily check found. */
.xa-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.xa-card { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.xa-coin { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.95rem; line-height: 1.3; }
.xa-sym { font-weight: 650; letter-spacing: 0.02em; }
.xa-name { font-weight: 400; color: var(--muted); font-size: 0.86rem; }
.xa-now { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: var(--muted); font-size: 0.86rem; }
.xa-now strong { color: var(--text); font-size: 1.6rem; font-weight: 720; line-height: 1.15; }
.xa-when { margin-left: auto; font-size: 0.78rem; white-space: nowrap; }
.chart.xa-chart { min-height: 0; height: 112px; margin-top: 6px; }
.xa-list { margin: 6px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.xa-note, .xa-checked { max-width: 96ch; line-height: 1.55; }
.xa-checked a, .xa-note a { overflow-wrap: anywhere; }
.xa-table { margin-top: 14px; }
.xa-table > summary { cursor: pointer; color: var(--accent); font-size: 0.92rem; }
.xa-table .table-wrap { margin-top: 8px; }
.xa-table td:first-child { white-space: nowrap; }
.ev-check-listed, .ev-check-missing { border-style: dashed; }
.ev-check-listed { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ev-check-missing { background: color-mix(in srgb, var(--c2) 8%, transparent); border-color: color-mix(in srgb, var(--c2) 55%, transparent); }

@media (max-width: 960px) {
  .xa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .xa-grid { gap: 8px; }
  .xa-card { padding: 10px; }
  .xa-now strong { font-size: 1.35rem; }
}

/* ---- Task timeline: the Timeline page (/timeline/: src/timeline.mjs, web/timeline.js) and the overview's strip of
   recent entries. The header band reuses .how-head, .acc-stats and .side-box. Entries hang on one vertical line under a
   marker for each year, each with a dot in its type's colour. The colours group the ten types into families: exploits
   and delistings orange, enforcement (sanctions, prosecutions, court) magenta, regulation teal, launches and upgrades
   the accent, shutdowns grey, other plain. ---- */
.tln-t-exploit, .tln-t-delisting { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.tln-t-sanction, .tln-t-prosecution, .tln-t-court { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }
.tln-t-regulation { background: color-mix(in srgb, var(--c3) 13%, transparent); border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.tln-t-launch, .tln-t-upgrade { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tln-t-shutdown { background: color-mix(in srgb, var(--muted) 14%, transparent); border-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.tln-t-other { color: var(--muted); }
.tln-sw-exploit, .tln-sw-delisting { background: var(--c2); }
.tln-sw-sanction, .tln-sw-prosecution, .tln-sw-court { background: var(--c4); }
.tln-sw-regulation { background: var(--c3); }
.tln-sw-launch, .tln-sw-upgrade { background: var(--accent); }
.tln-sw-shutdown { background: var(--muted); }
.tln-sw-other { background: var(--panel); border: 1px solid var(--muted); }

/* header: years to jump to */
.tln-jump { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tln-jump li[hidden] { display: none; }
.tln-jump a { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--text); font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.tln-jump a:hover { border-color: var(--accent); color: var(--accent); }
.tln-jump a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tln-jump .n { color: var(--muted); font-size: 0.78rem; font-weight: 400; }

/* the filter and the search box, hidden until web/timeline.js runs */
.tln-tools { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.tln-tools[hidden] { display: none; }
.tln-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tln-filter button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--text); font: inherit; font-size: 0.86rem; line-height: 1.5; cursor: pointer; }
.tln-filter button:hover { border-color: var(--accent); }
.tln-filter button:focus-visible, .tln-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tln-filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tln-filter .n { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.tln-filter button[aria-pressed="true"] .n { color: inherit; opacity: 0.85; }
.tln-filter .sw { width: 9px; height: 9px; border-radius: 50%; }
.tln-filter button[aria-pressed="true"] .sw { box-shadow: 0 0 0 1.5px #fff; }
.tln-find { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tln-search { display: flex; align-items: center; gap: 10px; flex: 0 1 28rem; min-width: 0; color: var(--muted); font-size: 0.9rem; }
.tln-search input { flex: 1 1 auto; width: 100%; min-width: 0; font: inherit; font-size: 1rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.tln-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.tln-count { margin: 0; color: var(--muted); font-size: 0.88rem; }
.tln-clear { font: inherit; font-size: 0.85rem; padding: 3px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--accent); cursor: pointer; }
.tln-clear:hover { border-color: var(--accent); }
.tln-clear[hidden] { display: none; }

/* the line, a marker for each year and a dot for each entry (date | line | text), centred 18px into the gap */
.tln-years { position: relative; }
.tln-years::before { content: ""; position: absolute; left: calc(6.6rem + 17px); top: 14px; bottom: 8px; width: 2px; background: var(--line); }
.tln-year { scroll-margin-top: 16px; }
.tln-year[hidden] { display: none; }
.tln-year-head { position: relative; display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); column-gap: 36px; align-items: center; margin: 0 0 14px; }
.tln-year + .tln-year .tln-year-head { margin-top: 10px; }
.tln-year-head::after { content: ""; position: absolute; left: calc(6.6rem + 11px); top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 3px solid var(--muted); border-radius: 50%; background: var(--panel); }
.tln-year-h { margin: 0; text-align: right; font-size: 1.3rem; line-height: 1.2; font-weight: 720; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tln-year-n { color: var(--muted); font-size: 0.86rem; }
.tln-list { list-style: none; margin: 0 0 12px; padding: 0; }
.tln-entry { position: relative; display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); column-gap: 36px; padding: 0 0 24px; font-size: 0.92rem; line-height: 1.55; scroll-margin-top: 16px; }
.tln-entry[hidden] { display: none; }
.tln-entry::after { content: ""; position: absolute; left: calc(6.6rem + 13px); top: 6px; width: 10px; height: 10px; border: 2px solid var(--tln-c, var(--muted)); border-radius: 50%; background: var(--panel); }
.tln-entry[data-type="exploit"], .tln-entry[data-type="delisting"] { --tln-c: var(--c2); }
.tln-entry[data-type="sanction"], .tln-entry[data-type="prosecution"], .tln-entry[data-type="court"] { --tln-c: var(--c4); }
.tln-entry[data-type="regulation"] { --tln-c: var(--c3); }
.tln-entry[data-type="launch"], .tln-entry[data-type="upgrade"] { --tln-c: var(--accent); }
.tln-entry > time { padding-top: 1px; color: var(--muted); font-size: 0.86rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tln-body { min-width: 0; }
.tln-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 5px; }
.tln-conf { font-size: 0.8rem; }
.tln-title { margin: 0 0 4px; max-width: 70ch; font-size: 1.02rem; line-height: 1.4; font-weight: 650; }
.tln-sum { margin: 0 0 8px; max-width: 88ch; }
.tln-amount { margin: 0 0 8px; color: var(--muted); font-size: 0.88rem; }
.tln-amount strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.tln-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 6px; }
.tln-chips .chip { margin: 0; font-size: 0.8rem; line-height: 1.6; white-space: normal; }
.tln-chips a.chip { color: var(--accent); text-decoration: none; }
.tln-chips a.chip:hover { border-color: var(--accent); }
.tln-chips a.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* numbered source links: the number, then the site; the full title is in the link's title and for screen readers */
.tln-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; color: var(--muted); font-size: 0.84rem; }
.tln-src-h { font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; }
.tln-src ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 14px; }
.tln-src a { display: inline-flex; align-items: baseline; gap: 5px; overflow-wrap: anywhere; }
.tln-n { display: inline-block; min-width: 1.6em; padding: 0 4px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 99px; font-size: 0.72rem; font-weight: 650; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
.tln-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tln-note { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; font-style: italic; }
.tln-entry:target > .tln-body { border-radius: 6px; background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent); }
.tln-entry:target::after { background: var(--tln-c, var(--muted)); }
.tln-defs dt { font-weight: 400; }

/* the overview: the five newest entries under the events block */
.panel-head .tln-all { font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.panel-head .tln-all:hover { text-decoration: underline; }
.tln-strip { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tln-card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none; }
.tln-card:hover { border-color: var(--accent); }
.tln-card:hover .tln-card-title { color: var(--accent); }
.tln-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tln-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.tln-card time { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tln-card-title { font-size: 0.92rem; font-weight: 600; line-height: 1.4; }

@media (max-width: 960px) {
  /* the strip becomes a list: date and type, then the title */
  .tln-strip { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2px; }
  .tln-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .tln-strip > li:first-child .tln-card { border-top: 0; padding-top: 4px; }
  .tln-card:hover { border-color: var(--line); }
  .tln-card-top { flex: 0 0 auto; justify-content: flex-start; gap: 10px; min-width: 12rem; }
  .tln-card-title { flex: 1 1 18rem; }
}

@media (max-width: 760px) {
  /* one column: the line runs down the left edge, with the date above each entry */
  .tln-years::before { left: 5px; }
  .tln-year-head { display: flex; align-items: baseline; gap: 12px; padding-left: 28px; }
  .tln-year-head::after { left: -1px; }
  .tln-year-h { text-align: left; }
  .tln-entry { grid-template-columns: minmax(0, 1fr); padding-left: 28px; }
  .tln-entry::after { left: 1px; }
  .tln-entry > time { text-align: left; }
}

@media (max-width: 640px) {
  .tln-search { flex-basis: 100%; }
  .tln-tools { margin-bottom: 20px; padding-bottom: 16px; }
}

/* ---- [activity] Activity (/activity/): the header band reuses .how-head and .how-toc, the tiles .tiles and .tile
   from the overview, and each metric is an .acc-sec panel with a chart (web/activity.js), what it measures and its
   limits side by side, a table by chain where there is one, its source line and its documents. ---- */
.act-tiles { margin: 0 0 24px; scroll-margin-top: 16px; }
.act-tile .tile-change { font-weight: 500; color: var(--muted); }
.act-sec .acc-stats.act-stats { margin: 0 0 14px; }
.act-note { margin: 8px 0 0; max-width: 96ch; }
.act-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.94rem; line-height: 1.6; }
.act-about h3 { margin: 0 0 6px; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.act-about p { margin: 0; max-width: 72ch; }
.act-chains { margin: 18px 0 0; max-width: 720px; }
.act-chains caption, .act-checks caption { caption-side: top; text-align: left; padding: 0 10px 6px; color: var(--muted); font-size: 0.82rem; }
.act-chains tbody th, .act-checks tbody th { text-align: left; font-size: 0.92rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); white-space: normal; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.act-chains tbody tr:last-child th, .act-checks tbody tr:last-child th { border-bottom: 0; }
.act-source { margin: 16px 0 0; max-width: 110ch; line-height: 1.55; }
.act-docs { margin: 8px 0 0; font-size: 0.9rem; }
.act-docs .srcs { margin-top: 8px; }
.act-usage p { max-width: 64ch; }
.act-checks { margin: 4px 0 12px; font-size: 0.88rem; }
.act-checks td .src-meta { display: block; font-size: 0.78rem; white-space: normal; }
.act-checks td.num { white-space: normal; }

@media (max-width: 760px) {
  .act-about { grid-template-columns: minmax(0, 1fr); }
}

/* ---- [share] Private share of DeFi: the overview's fifth tile. Five tiles in one row on wide screens, with their
   labels given two lines so that the figures line up; three and two on medium screens; two by two with the fifth
   across the row up to 960px; one column on phones, as before. The ranges meet the max-width rules above exactly,
   so no fractional width falls between them. Scoped to the overview's tiles ([data-tiles]), so the eight tiles on
   /activity/ keep the four-column grid. ---- */
@media (width > 1140px) {
  .tiles[data-tiles] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tiles[data-tiles] > .tile { padding: 16px; }
  .tiles[data-tiles] .tile-label { align-items: flex-start; min-height: 2.6em; line-height: 1.3; }
  .tiles[data-tiles] .tile-value { font-size: 1.55rem; }
}

@media (960px < width <= 1140px) {
  .tiles[data-tiles] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tiles[data-tiles] > .tile { grid-column: span 2; }
  .tiles[data-tiles] > .tile:nth-child(n + 4) { grid-column: span 3; }
}

@media (640px < width <= 960px) {
  .tiles[data-tiles] > .tile:nth-child(5) { grid-column: 1 / -1; }
}

/* ---- Anonymity sets (/anonymity-sets/), task anonymity ----
   The header band reuses .how-head, .acc-stats and .how-toc; sections are .acc-sec panels and tables are table.data;
   the charts use the shared uPlot setup (web/chart.mjs). On phones each table row becomes a block with labels. */
.anon-intro { margin: 0 0 14px; max-width: 80ch; line-height: 1.6; }
.anon-meta { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; }
.anon-what p { margin: 0 0 10px; }
.anon-table tbody th[scope="row"] { min-width: 8em; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); font-size: 0.92rem; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: normal; }
.anon-table tbody tr:last-child th[scope="row"] { border-bottom: 0; }
.anon-now tr.anon-group th { padding: 10px 10px 6px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; }
.anon-now tbody + tbody tr.anon-group th { padding-top: 24px; }
.anon-now tr.anon-group a { color: inherit; text-decoration: none; }
.anon-now tr.anon-group a:hover { color: var(--accent); }
.anon-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.anon-when { color: var(--muted); font-size: 0.86rem; white-space: nowrap; }
.anon-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; align-items: start; margin: 8px 0 26px; }
.anon-fig { margin: 0; min-width: 0; }
.anon-fig-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; }
.anon-fig-head h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.anon-fig .note { margin-top: 8px; line-height: 1.5; }
.anon-wait { display: grid; place-items: center; min-height: 200px; margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 0.9rem; line-height: 1.5; text-align: center; }
.anon-box { padding: 16px 20px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; font-size: 0.94rem; line-height: 1.6; }
.anon-box h3 { margin: 0 0 6px; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.anon-box p { margin: 0; }
.anon-fact { display: flex; align-items: center; gap: 18px; max-width: 80ch; margin: 4px 0 22px; padding: 14px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.anon-fact strong { flex: none; font-size: 2.8rem; line-height: 1; font-weight: 750; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.anon-fact span { line-height: 1.5; }
.anon-limits { padding: 18px 24px 20px; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--c2); border-radius: 12px; }
.anon-limits ul { margin: 0; padding-left: 1.15em; max-width: 92ch; line-height: 1.6; }
.anon-limits li { margin: 0 0 10px; padding-left: 0.2em; }
.anon-limits li:last-child { margin-bottom: 0; }
.anon-limits li::marker { color: var(--c2); }
.anon-limits strong { font-weight: 650; }
.anon-srcs .srcs { margin-bottom: 4px; }

@media (max-width: 760px) {
  .anon-charts { grid-template-columns: minmax(0, 1fr); }
  table.anon-stack thead { position: absolute; left: -9999px; }
  table.anon-stack, table.anon-stack tbody, table.anon-stack tr, table.anon-stack td, table.anon-stack th { display: block; width: auto; min-width: 0; }
  table.anon-stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.anon-stack td, table.anon-stack th[scope="row"] { padding: 2px 0; border: 0; text-align: left; white-space: normal; }
  table.anon-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
  table.anon-stack td.num { white-space: normal; }
  .anon-now tr.anon-group { padding: 18px 0 6px; }
  .anon-now tr.anon-group th, .anon-now tbody + tbody tr.anon-group th { padding: 0; border: 0; }
  .anon-sub { display: inline; margin: 0 0 0 6px; }
}

@media (max-width: 640px) {
  .anon-fact { gap: 14px; padding: 12px 14px; }
  .anon-fact strong { font-size: 2.2rem; }
  .anon-limits { padding: 14px 16px 16px; }
  .anon-box { padding: 14px 16px; }
}

/* ---- FUNDING: the Funding page (/funding/, src/funding.mjs, web/funding.js) ----
   The header band, tiles and panels reuse .how-head, .tiles and .acc-sec. Disclosed funding by year is a list of HTML
   rows, each with an inline SVG bar sized as a share of its row, so the labels stay readable at any width. The table
   of rounds becomes one block per round on narrow screens, where a Sort menu stands in for its column headings. */
.fd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* disclosed funding by year: the year, the bar with its value at the tip, the number of rounds */
.fd-years-head, .fd-yr { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 4.5rem; column-gap: 14px; align-items: center; }
.fd-years-head { max-width: 860px; padding: 0 10px 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.fd-years-head > :last-child, .fd-yr-n { text-align: right; }
.fd-years { list-style: none; margin: 4px 0 0; padding: 0; max-width: 860px; }
.fd-yr { min-height: 32px; padding: 4px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.92rem; line-height: 1.3; }
a.fd-yr:hover { background: var(--bg); }
a.fd-yr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
a.fd-yr[aria-current="true"] { background: color-mix(in srgb, var(--accent) 11%, transparent); }
a.fd-yr[aria-current="true"] .fd-yr-label { color: var(--accent); }
.fd-yr-label { font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-yr-track { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.fd-bar { display: block; flex: none; }
.fd-bar rect { fill: var(--c1); }
.fd-years .fd-yr-undated { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.fd-yr-undated .fd-bar rect { fill: color-mix(in srgb, var(--c1) 50%, var(--panel)); }
.fd-val { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-val-none { color: var(--muted); font-weight: 400; font-style: italic; }
.fd-yr-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.fd-chart-note { max-width: 96ch; }

/* filters and the count above the table; they stay hidden until web/funding.js runs */
.fd-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 0 0 14px; }
.fd-tools[hidden], .fd-reset[hidden], .fd-empty[hidden] { display: none; }
.fd-pick { display: inline-flex; flex-direction: column; gap: 4px; }
.fd-pick-l { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fd-pick select { min-width: 11em; font: inherit; font-size: 0.92rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.fd-pick select:hover { border-color: var(--accent); }
.fd-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fd-pick-sort { display: none; }
.fd-reset { font: inherit; font-size: 0.9rem; padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--accent); cursor: pointer; }
.fd-reset:hover { border-color: var(--accent); }
.fd-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fd-count { margin: 0 0 8px; color: var(--muted); font-size: 0.92rem; }
.fd-empty { margin: 14px 0 0; }

/* the table of rounds */
table.fd-table { font-size: 0.88rem; font-variant-numeric: normal; }
table.fd-table th { vertical-align: bottom; }
table.fd-table td { line-height: 1.45; }
table.fd-table tr[hidden] { display: none; }
.fd-sortable th[data-sort-key] { padding: 0; }
.fd-sort { display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.fd-table th.num .fd-sort { justify-content: flex-end; }
.fd-sort::after { content: ""; flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.3; }
.fd-sort:hover, .fd-table th[aria-sort] .fd-sort { color: var(--text); }
.fd-table th[aria-sort] .fd-sort::after { opacity: 1; }
.fd-table th[aria-sort="ascending"] .fd-sort::after { transform: rotate(180deg); }
.fd-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fd-date { width: 7.4em; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.fd-undated { font-style: italic; }
.fd-project { min-width: 9.5em; }
.fd-pname { font-weight: 600; }
.fd-project .pf-link { margin-left: 6px; }
.fd-org { display: block; margin-top: 1px; color: var(--muted); font-size: 0.82rem; }
.fd-round { min-width: 8em; }
.fd-rt { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--text); font-size: 0.76rem; line-height: 1.6; white-space: nowrap; }
.fd-rt-seed, .fd-rt-series-a { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.fd-rt-strategic { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }
.fd-rt-token-sale { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.fd-rt-grant { background: color-mix(in srgb, var(--c3) 13%, transparent); border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.fd-rname { display: block; margin-top: 3px; color: var(--muted); font-size: 0.82rem; }
.fd-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-none { color: var(--muted); font-weight: 400; }
.fd-lead { min-width: 8.5em; }
.fd-inv { min-width: 13em; }
.fd-src { min-width: 10.5em; }
.fd-srcs { list-style: none; margin: 0; padding: 0; }
.fd-srcs li { margin: 0 0 2px; }
.fd-srcs a { overflow-wrap: anywhere; }
.fd-src-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 3px; font-size: 0.82rem; }
.fd-conf { white-space: nowrap; }
.fd-note > summary, .fd-more > summary { cursor: pointer; color: var(--accent); font-size: 0.82rem; }
.fd-note[open] { flex-basis: 100%; }
.fd-note p { margin: 4px 0 2px; max-width: 62ch; color: var(--text); font-size: 0.84rem; line-height: 1.5; }
.fd-more { margin-top: 3px; }
.fd-more[open] > summary { margin-bottom: 2px; }

/* what the figures cover: the types of round */
.fd-types dt { gap: 10px; }
.fd-type-n { color: var(--muted); font-size: 0.85rem; font-weight: 400; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .fd-pick-sort { display: inline-flex; }
  table.fd-table thead { position: absolute; left: -9999px; }
  table.fd-table, table.fd-table tbody, table.fd-table td { display: block; width: auto; min-width: 0; }
  table.fd-table tr { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.fd-table tr[hidden] { display: none; }
  table.fd-table tr:last-child { border-bottom: 0; }
  table.fd-table td { padding: 0; border: 0; text-align: left; }
  table.fd-table td.fd-project { order: -1; font-size: 0.95rem; }
  table.fd-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
  .fd-date { color: var(--text); }
  .fd-round .fd-rname { display: inline; margin: 0 0 0 8px; }
  .fd-srcs, .fd-srcs li { display: inline; }
  .fd-srcs li + li::before { content: "; "; }
}

@media (max-width: 640px) {
  .fd-years-head, .fd-yr { grid-template-columns: 3.4rem minmax(0, 1fr) 3.4rem; column-gap: 10px; }
  .fd-years-head { padding: 0 6px 6px; }
  .fd-yr { padding: 4px 6px; font-size: 0.88rem; }
  .fd-tools { gap: 10px 12px; }
  .fd-pick { flex: 1 1 9em; }
  .fd-pick select { min-width: 0; width: 100%; }
}

/* ---- Watchlist (/watchlist/), task watchlist: privacy projects followed but not counted, one card each, grouped by
   category. The header band reuses .how-head, .how-toc and .acc-stats, sections are .acc-sec panels, the status
   badges reuse .status (Live with users is the green of a live protocol) and the sources .srcs. ---- */
.wl-toc-n { margin-left: auto; padding-left: 12px; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.wl-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; }
.wl-reasons > div { padding: 12px 0; border-top: 1px solid var(--line); }
.wl-reasons > div:nth-child(-n + 2) { padding-top: 2px; border-top: 0; }
.wl-reasons dt { font-weight: 650; }
.wl-reasons dd { margin: 3px 0 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.wl-count { color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.wl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wl-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 16px; }
.wl-card:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wl-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.wl-card-head h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.status.wl-st-mainnet { color: var(--accent); border-color: currentColor; }
.status.wl-st-testnet { color: var(--c2); border-color: currentColor; }
.status.wl-st-research { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 65%, transparent); }
.wl-summary { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.wl-hidden { padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--c3); border-radius: 10px; }
.wl-hidden h4 { display: flex; align-items: center; margin: 0 0 4px; font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.wl-hidden h4 .ic { color: var(--c3); }
.wl-hidden p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.wl-facts { display: grid; gap: 10px; margin: 0; }
.wl-facts dt { font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.wl-facts dd { margin: 2px 0 0; font-size: 0.92rem; line-height: 1.55; }
.wl-facts time { margin-right: 4px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-onsite { margin: 0; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 8px; font-size: 0.88rem; line-height: 1.5; }
.wl-onsite-h { display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.wl-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.wl-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.wl-site { display: inline-flex; align-items: baseline; gap: 8px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--text); font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.wl-site:hover { border-color: var(--accent); color: var(--accent); }
.wl-site .src-host { font-weight: 400; }
.wl-meta { color: var(--muted); font-size: 0.8rem; }
.wl-srcs { margin-top: 8px; }
.wl-srcs > summary { cursor: pointer; color: var(--accent); font-size: 0.88rem; }
.wl-srcs .srcs { margin-top: 6px; }

@media (max-width: 960px) {
  .wl-reasons { grid-template-columns: minmax(0, 1fr); }
  .wl-reasons > div:nth-child(2) { padding-top: 12px; border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .wl-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .wl-card { padding: 14px 14px 12px; }
}

/* ---- Bitcoin privacy on /protocols/ (task bitcoin, src/bitcoin.mjs) ----
   A section below the protocol table: the "not counted" box, the Liquid chart (web/bitcoin.js) and a card per entry
   in config/bitcoin.json, grouped. Cards follow the /data/ file cards; incidents reuse the .ev badges. */
.btc-apart { max-width: 96ch; margin: 0 0 6px; padding: 14px 20px 16px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; font-size: 0.94rem; line-height: 1.6; }
.btc-apart h3 { margin: 0 0 6px; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.btc-apart p { margin: 0; }
.btc-liquid { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.btc-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.btc-chart-head h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.btc-liquid .pf-stats { margin: 10px 0 14px; }
.btc-chart { min-height: 240px; width: 100%; }
.btc-chart > .note { margin: 0; }
.btc-chart-off { display: none; }
.btc-asof, .btc-chart-note { max-width: 96ch; line-height: 1.55; }
.btc-h { display: flex; align-items: baseline; gap: 10px; margin: 32px 0 4px; font-size: 1.12rem; line-height: 1.35; scroll-margin-top: 16px; }
.btc-h .n { color: var(--muted); font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.btc-group-intro { margin: 0 0 14px; max-width: 78ch; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.btc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.btc-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: break-word; scroll-margin-top: 16px; }
.btc-card:target { border-color: var(--accent); }
.btc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.btc-card-head h4 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.btc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.status-shut-down { color: var(--down); border-color: currentColor; }
.btc-alert { display: inline-block; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--c2) 45%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--c2) 13%, transparent); font-size: 0.75rem; white-space: nowrap; }
.btc-kind { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: -4px 0 0; color: var(--muted); font-size: 0.88rem; }
.btc-site { font-size: 0.84rem; }
.btc-status-note { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.btc-facts { display: grid; gap: 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.btc-facts > div + div { padding-top: 10px; border-top: 1px solid var(--line); }
.btc-facts dt { font-size: 0.74rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.btc-facts dd { margin: 4px 0 0; font-size: 0.92rem; line-height: 1.55; }
.btc-facts dd p { margin: 0 0 6px; }
.btc-facts dd > :last-child { margin-bottom: 0; }
.btc-sample { padding: 8px 10px; background: var(--bg); border-radius: 8px; font-variant-numeric: tabular-nums; }
.btc-api, .btc-none { color: var(--muted); font-size: 0.86rem; }
.btc-incidents { list-style: none; margin: 0; padding: 0; }
.btc-incidents > li + li { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.btc-inc > summary { cursor: pointer; line-height: 1.5; }
.btc-inc > summary time { color: var(--muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 4px; }
.btc-inc > summary .ev { margin-right: 4px; }
.btc-inc > summary:hover .btc-inc-title { color: var(--accent); }
.btc-inc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btc-inc[open] > summary { margin-bottom: 6px; }
.btc-inc > p { margin: 0 0 6px; }
.btc-inc .chg-src { margin: 0; }
.ev-shutdown { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.ev-court { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }
.btc-more { padding-top: 8px; border-top: 1px solid var(--line); }
.btc-more > summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.btc-more > summary .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.btc-more .srcs { margin-top: 6px; }
.btc-meta { margin: 0; color: var(--muted); font-size: 0.82rem; }

@media (max-width: 760px) {
  .btc-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .btc-apart { padding: 12px 14px 14px; }
  .btc-card { padding: 14px; }
  .btc-h { margin-top: 26px; }
}

/* ---- Calendar (task calendar): /calendar/, the dates in config/events.json by month with countdowns, then past
   events; and the overview's events block, which shows the next five and links into it. Reuses the .acc-sec panels,
   .side-box, .ev badges, .countdown and, for past events, the .chg list. ---- */
/* type badges, coloured like those on /changes/; how firm a date is, shown by the badge's outline */
.cal-t-regulation, .cal-t-standards { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.cal-t-court, .cal-t-sanctions { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }
.cal-t-protocol, .cal-t-market { background: color-mix(in srgb, var(--c3) 13%, transparent); border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.cal-t-incident { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.cal-c { background: var(--panel); color: var(--text); }
.cal-c-fixed { border-color: color-mix(in srgb, var(--muted) 75%, transparent); }
.cal-c-expected { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 75%, transparent); }
.cal-c-targeted { border-style: dotted; border-color: var(--muted); }

/* the overview's events block */
.event-list .event-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--muted); font-size: 0.8rem; }
.event-cert { padding: 0 7px; border: 1px solid var(--line); border-radius: 99px; font-size: 0.72rem; line-height: 1.5; }
.events-more { margin-top: 14px; }
.events.events-one { grid-template-columns: minmax(0, 1fr); }

/* the header: the next date */
.cal-next-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 2px 0 6px; color: var(--muted); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.cal-next-when .countdown { font-size: 1.05rem; }
.cal-next-title { margin: 0 0 10px; font-size: 1.08rem; font-weight: 650; line-height: 1.4; }
.cal-next-title a { color: var(--text); text-decoration: none; }
.cal-next-title a:hover { color: var(--accent); text-decoration: underline; }
.cal-next .cal-badges { margin: 0; }

/* the months to jump to */
.cal-jump ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cal-jump a { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--text); font-size: 0.86rem; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.cal-jump a:hover { border-color: var(--accent); color: var(--accent); }
.cal-jump a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-jump .n { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* a month and its dates: the day on a tile, with the countdown under it, beside the entry */
.cal-months { display: flex; flex-direction: column; gap: 26px; }
.cal-month { scroll-margin-top: 16px; }
.cal-month-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 2px; font-size: 0.95rem; color: var(--muted); letter-spacing: 0.02em; }
.cal-month-h .n { font-size: 0.85rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-ev { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 4px 22px; padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.cal-when { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cal-tile { display: flex; flex-direction: column; align-items: center; width: 4.2em; padding: 7px 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); line-height: 1.05; }
.cal-d { font-size: 1.6rem; font-weight: 720; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cal-m { margin-top: 3px; font-size: 0.7rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cal-range { color: var(--muted); font-size: 0.8rem; line-height: 1.3; white-space: nowrap; }
.cal-when .countdown { font-size: 0.85rem; line-height: 1.3; white-space: normal; }
.cal-body { min-width: 0; font-size: 0.94rem; line-height: 1.6; }
.cal-body > p { margin: 0 0 6px; max-width: 92ch; }
.cal-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cal-where { color: var(--muted); font-size: 0.84rem; }
.cal-title { margin: 4px 0 6px; font-size: 1.05rem; line-height: 1.4; }
.cal-rules { font-size: 0.88rem; }
.cal-rules .ic { color: var(--accent); }
.cal-ev:target, .cal-past > .chg:target { background: color-mix(in srgb, var(--accent) 9%, transparent); }

/* past events, on the .chg list */
.cal-past > .chg { scroll-margin-top: 16px; }
.cal-past-when { display: flex; flex-direction: column; gap: 2px; }
.cal-past .cal-title { margin: 2px 0 4px; font-size: 1rem; }
.cal-defs dt .ev { font-weight: 400; }

@media (max-width: 640px) {
  .cal-ev { grid-template-columns: 5.2em minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; }
  .cal-tile { width: 3.9em; padding: 6px 0 7px; }
  .cal-d { font-size: 1.4rem; }
  .cal-jump a { padding: 3px 10px; font-size: 0.84rem; }
}

/* ---- Wallets and tools (/wallets/), task wallets ----
   The header reuses .how-head and .acc-stats, the warning beside it .side-box, the sections .acc-sec and the source
   lists .srcs. Each entry of the directory is a <tbody>: its row of ten columns, then a row with the detail of its
   status and its note; web/wallets.js hides the entries a filter leaves out. Below 1140px wide each entry becomes a
   card, its cells in a grid with the column names as labels. */
.wl-warn { border-top: 3px solid var(--c2); }
.wl-warn p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.55; }
.wl-warn p:last-child { margin-bottom: 0; }
.wl-warn .wl-warn-title { margin: 0 0 8px; font-size: 1rem; font-weight: 700; line-height: 1.35; }

/* the filters, shown by web/wallets.js */
.wl-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin: 0 0 14px; }
.wl-tools[hidden] { display: none; }
.wl-pick { display: flex; flex-direction: column; gap: 4px; }
.wl-pick label { font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.wl-pick select { min-width: 210px; max-width: 100%; font: inherit; font-size: 0.92rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.wl-pick select:hover { border-color: var(--accent); }
.wl-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl-count { margin: 0 0 7px; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.wl-empty { margin-top: 4px; }
.wl-reset { margin-left: 6px; padding: 3px 11px; font: inherit; font-size: 0.85rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.wl-reset:hover { border-color: var(--accent); }

/* the table: the short columns get set widths and Privacy provided takes the rest */
table.wtable { font-size: 0.84rem; font-variant-numeric: normal; }
.wtable thead th { padding: 8px 6px; white-space: normal; vertical-align: bottom; line-height: 1.3; }
.wtable .wl-row > th, .wtable .wl-row > td { padding: 12px 5px 6px; border-bottom: 0; line-height: 1.45; }
.wtable .wl-row > th { text-align: left; vertical-align: top; color: var(--text); font-size: 0.92rem; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: normal; }
.wtable tbody.wl-entry + tbody.wl-entry { border-top: 1px solid var(--line); }
.wtable tbody.wl-entry[hidden] { display: none; }
.wtable .wl-c-name { width: 7.6rem; }
.wtable .wl-c-cat { width: 5.2rem; }
.wtable .wl-c-coins { width: 5.1rem; }
.wtable .wl-c-plat { width: 4.7rem; }
.wtable .wl-c-os { width: 4.2rem; }
.wtable .wl-c-maint { width: 7rem; }
.wtable .wl-c-status { width: 7rem; }
.wtable .wl-c-rel { width: 5.6rem; }
.wtable .wl-c-src { width: 4.9rem; }
.wl-host { display: block; margin-top: 2px; color: var(--muted); font-size: 0.76rem; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
.wl-name .pf-link { margin-left: 6px; }
.wl-unconf { display: inline-block; margin-top: 5px; padding: 0 8px; border: 1px dashed color-mix(in srgb, var(--muted) 65%, transparent); border-radius: 99px; color: var(--muted); font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.wl-kind { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.wl-kind-wallet { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.wl-kind-route { background: color-mix(in srgb, var(--c3) 13%, transparent); border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.wl-kind-tool { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }
.wl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.wl-chips li { padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.03em; line-height: 1.6; }
.wl-none { color: var(--muted); font-style: italic; }
.wl-os-yes, .wl-os-no { font-weight: 600; }
.wl-os-unclear { color: var(--muted); font-style: italic; }
/* status: the opening words of the entry's status, coloured by kind (the key below the table) */
.wl-st { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 0.75rem; font-weight: 600; line-height: 1.45; }
.wl-st-active { color: var(--up); border-color: currentColor; }
.wl-st-development { color: var(--accent); border-color: currentColor; }
.wl-st-halted { color: var(--c2); border-color: currentColor; }
.wl-st-ended { color: var(--down); border-color: currentColor; }
.wl-st-other { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 65%, transparent); }
.wl-legend { margin-top: 16px; }
.wl-rel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-rel .wl-none { white-space: normal; }
.wl-srcs > summary { cursor: pointer; color: var(--accent); white-space: nowrap; }
.wl-srcs > summary:hover { text-decoration: underline; }
.wl-srcs > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wl-srcs .srcs { margin-top: 6px; font-size: 0.78rem; }
.wl-srcs .srcs li { padding: 3px 0; }
/* the row under each entry: the detail of its status, its note and the day it was checked */
.wtable .wl-more > td { padding: 4px 6px 14px; border-bottom: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.wl-more p { margin: 0; max-width: 140ch; }
.wl-more p + p { margin-top: 3px; }
.wl-lbl { margin-right: 6px; color: var(--text); font-size: 0.7rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; }
.wl-checked { white-space: nowrap; }
/* the row is a <details>, open; its summary shows only on phones, where web/wallets.js folds it */
.wl-more-d > summary { display: none; }

/* cards: four columns of short facts, then three, then two on phones; dense packing fills the gaps */
@media (max-width: 1140px) {
  table.wtable { font-size: 0.9rem; }
  .wtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wtable, .wtable tbody, .wtable tr, .wtable .wl-row > th, .wtable td { display: block; width: auto; }
  .wtable tbody.wl-entry { padding: 16px 0 14px; }
  .wtable tbody.wl-entry:first-of-type { padding-top: 6px; }
  .wtable .wl-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px 22px; }
  .wtable .wl-row > th, .wtable .wl-row > td { padding: 0; }
  .wtable .wl-row > th, .wtable .wl-priv, .wtable .wl-src { grid-column: 1 / -1; }
  .wtable .wl-maint { grid-column: span 2; }
  .wtable .wl-row > th { font-size: 1.02rem; }
  .wtable .wl-row > th .wl-host { display: inline; margin: 0 0 0 10px; }
  .wtable td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 0.7rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; }
  .wtable td.wl-src::before { content: none; }
  .wtable .wl-more > td { padding: 12px 0 0; }
}

@media (max-width: 960px) {
  .wtable .wl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wtable .wl-maint { grid-column: auto; }
  .wtable .wl-src { grid-column: span 2; }
}

@media (max-width: 640px) {
  .wtable .wl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .wtable .wl-maint, .wtable .wl-src { grid-column: 1 / -1; }
  .wtable .wl-row > th .wl-host { display: block; margin: 2px 0 0; }
  .wl-more-d > summary { display: list-item; cursor: pointer; color: var(--accent); font-size: 0.86rem; }
  .wl-more-d[open] > summary { margin-bottom: 6px; }
  .wl-pick { flex: 1 1 160px; }
  .wl-pick select { min-width: 0; width: 100%; }
}

/* ---- ABOUT: the About page (/about/, src/about.mjs) ----
   The header band, sections and columns reuse .how-head, .how-toc, .acc-sec and .acc-cols; the source cards reuse
   .files and .file from /data/, with .fmt as the licence badge; the citation line reuses .cite. Added here: the note
   under the lede, the table of checked-on dates, the three boxes on what the site does not do and the contact line. */
.ab-note { margin: 14px 0 0; max-width: 60ch; color: var(--muted); line-height: 1.6; }
table.ab-checks tbody th { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); font-size: 0.92rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
table.ab-checks tbody tr:last-child th { border-bottom: 0; }
.ab-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.ab-nots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-not { padding: 16px 20px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; font-size: 0.94rem; line-height: 1.6; }
.ab-not h3 { margin: 0 0 8px; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ab-not p { margin: 0; }
.fmt.ab-lic { flex: none; letter-spacing: 0.02em; white-space: nowrap; }
.ab-contact { padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-weight: 600; overflow-wrap: anywhere; }
.ab-contact-none { border-style: dashed; color: var(--muted); font-weight: 400; }

@media (max-width: 760px) {
  .ab-nots { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  table.ab-checks th, table.ab-checks td, table.ab-checks tbody th { padding: 8px 6px; }
  table.ab-checks tbody th { white-space: normal; }
  .ab-not { padding: 14px 16px; }
}

/* live ticker */
/* ---- The Live panel at the top of /activity/ (src/ticker.mjs, web/ticker.js, web/ticker-view.mjs): a header line with
   a dot that pulses while the stream is connected and a pill for each chain, then the protocol filter and Pause (hidden
   until the script runs), then the newest transactions in a list that scrolls inside the panel. The protocol badges
   reuse .ev from /changes/ with the site's tints and the filter its .sw swatches; every colour is a token above. ---- */
.acc-sec.tk > .panel-head { margin-bottom: 12px; }
.acc-sec.tk > .panel-head h2 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.tk-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.tk[data-tk-mode="live"] .tk-dot { background: var(--up); animation: tk-pulse 2s ease-out infinite; }
.tk[data-tk-mode="poll"] .tk-dot { background: var(--up); }
.tk[data-tk-mode="loading"] .tk-dot, .tk[data-tk-mode="reconnecting"] .tk-dot { background: var(--c2); }
@keyframes tk-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}
.tk-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tk-pills:empty { display: none; }
.tk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); font-size: 0.78rem; line-height: 1.7; white-space: nowrap; }
.tk-pill::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.tk-pill-st { color: var(--muted); }
.tk-st-connected::before { background: var(--up); }
.tk-st-lagging { border-color: color-mix(in srgb, var(--c2) 55%, transparent); }
.tk-st-lagging::before { background: var(--c2); }
.tk-st-down { border-color: color-mix(in srgb, var(--down) 55%, transparent); }
.tk-st-down::before { background: var(--down); }
/* the filter and Pause, hidden until web/ticker.js runs */
.tk-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0 0 14px; }
.tk-tools[hidden] { display: none; }
.tk-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-filter button, .tk-pause { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--text); font: inherit; font-size: 0.84rem; line-height: 1.5; cursor: pointer; }
.tk-filter button:hover, .tk-pause:hover { border-color: var(--accent); }
.tk-filter button:focus-visible, .tk-pause:focus-visible, .tk-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tk-filter .sw { width: 9px; height: 9px; border-radius: 50%; }
.tk-filter button[aria-pressed="true"] .sw { box-shadow: 0 0 0 1.5px #fff; }
.tk-ctl { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tk-state { margin: 0; color: var(--muted); font-size: 0.86rem; white-space: nowrap; }
.tk-pause { border-radius: 6px; }
.tk-pause[aria-pressed="true"] { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 55%, transparent); }
/* the list: newest first, each row time, protocol, kind, detail and hash */
.tk-list { list-style: none; margin: 0; padding: 0; max-height: 30rem; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tk-row { display: grid; grid-template-columns: 4.6em 8em 6.8em minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 6px 4px; border-top: 1px solid var(--line); font-size: 0.9rem; line-height: 1.45; }
.tk-row:first-child { border-top: 0; }
.tk-row[hidden] { display: none; }
.tk-row time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-row .ev { justify-self: start; }
.tk-kind { white-space: nowrap; }
.tk-detail { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.tk-hash { justify-self: end; font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.82rem; white-space: nowrap; }
.tk-a1 { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tk-a2 { background: color-mix(in srgb, var(--c2) 13%, transparent); border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
.tk-a3 { background: color-mix(in srgb, var(--c3) 13%, transparent); border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.tk-a4 { background: color-mix(in srgb, var(--c4) 11%, transparent); border-color: color-mix(in srgb, var(--c4) 40%, transparent); }
.tk-muted { background: color-mix(in srgb, var(--muted) 14%, transparent); border-color: color-mix(in srgb, var(--muted) 50%, transparent); }
@keyframes tk-in {
  from { opacity: 0; transform: translateY(-6px); background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
  to { opacity: 1; transform: none; background-color: transparent; }
}
.tk-new { animation: tk-in 0.6s ease-out; }
.tk-empty { margin: 12px 0 0; }
.tk-nojs, .tk-note, .tk-src { max-width: 96ch; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .tk[data-tk-mode] .tk-dot, .tk-new { animation: none; }
}

@media (max-width: 640px) {
  .acc-sec.tk > .panel-head h2 { font-size: 1.08rem; }
  .tk-ctl { margin-left: 0; }
  .tk-list { max-height: 26rem; }
  .tk-row { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 3px; padding: 8px 2px; }
  .tk-detail { grid-column: 1 / 3; }
}