/* Preflight: one address, two checks. Red and green mean a verdict and nothing else; the one brand colour is the blue of
   things you can press. Display type is Inter Tight 800, prose is the system sans, hashes and code are JetBrains Mono. */
/* Self-hosted, same origin (the CSP's font-src 'self'): Inter Tight 800 for headlines and the verdict words, JetBrains Mono for hashes and addresses. Latin subsets, SIL OFL (fonts-OFL.txt). */
@font-face { font-family: "Inter Tight"; font-weight: 800; font-style: normal; font-display: optional; src: url(inter-tight-800.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: optional; src: url(jetbrains-mono-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: optional; src: url(jetbrains-mono-700.woff2) format("woff2"); }
:root {
  --bg: #eef1f6;
  --surface: #ffffff;
  --ink: #0a1020;
  --muted: #475266;
  --line: #d3d9e4;
  --wash: #e4e9f1;
  --focus: #1b4fd1;
  --brand: #2347f0;  --brand-fg: #ffffff;
  --code-bg: #0b1220; --code-fg: #dbe5f5;

  --critical: #a1103a;  --critical-tint: #fbe4eb;
  --high: #b03800;      --high-tint: #fdeadb;
  --medium: #7d5100;    --medium-tint: #fbf0d0;
  --low: #1a55a3;       --low-tint: #e1ecfa;
  --info: #4f5a6c;      --info-tint: #e9edf2;

  --severe-bg: #8f1a2e;  --severe-fg: #ffffff;  --severe-edge: #6d1222;
  --warning-tint: #fdf3d6;
  --warning-bg: #f3c24d;  --warning-fg: #261a00;  --warning-edge: #c99a1f;
  --clear-bg:   #20395c;  --clear-fg:   #ffffff;  --clear-edge:   #172a45;
  --allow-bg:   #1c5a37;  --allow-fg:   #ffffff;  --allow-edge:   #12402a;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Tight", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070b13;
    --surface: #101826;
    --ink: #e9eef7;
    --muted: #a3afc2;
    --line: #25314a;
    --wash: #18223a;
    --focus: #8cb4ff;
    --brand: #8aa0ff;  --brand-fg: #070b18;
    --code-bg: #05080f; --code-fg: #d3deef;

    --critical: #ff8fa9;  --critical-tint: #3b1623;
    --high: #ffa36b;      --high-tint: #3a2012;
    --medium: #f1c25a;    --medium-tint: #372a0c;
    --low: #86b8ff;       --low-tint: #14263f;
    --info: #a8b3c4;      --info-tint: #212a3b;

    --severe-bg: #8c1730;  --severe-fg: #ffffff;  --severe-edge: #ff5a77;
    --warning-tint: #2d2308;
    --warning-bg: #40300a;  --warning-fg: #ffeab5;  --warning-edge: #d9a62e;
    --clear-bg:   #14294a;  --clear-fg:   #deebfc;  --clear-edge:   #4d7fc4;
    --allow-bg:   #11633a;  --allow-fg:   #ffffff;  --allow-edge:   #4fd18a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
}
code { font-family: var(--mono); font-size: 0.9em; }
button, textarea, input { font: inherit; color: inherit; }
a { color: var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip { position: absolute; left: 1rem; top: -4rem; padding: 0.5rem 0.9rem; background: var(--surface); border: 2px solid var(--focus); border-radius: 6px; z-index: 20; }
.skip:focus { top: 0.75rem; }

.wrap { width: min(74rem, 100% - 2.5rem); margin-inline: auto; }

/* Header */
.top { padding-block: 1rem 0; }
.bar { width: min(74rem, 100% - 2.5rem); margin-inline: auto; display: flex; align-items: center; gap: 0.5rem 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.brand b { font: 800 1.3rem/1 var(--display); letter-spacing: 0; }
.logo { width: 1.9rem; height: 1.9rem; }
.logo rect { fill: var(--ink); }
.logo path { fill: none; stroke: var(--bg); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.rule-count { color: var(--muted); font-size: 0.9rem; }
.nav { margin-left: auto; display: flex; gap: 0.25rem 1.4rem; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding-block: 0.3rem; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--ink); }
/* A phone: the section links drop to their own row under the brand, so the page can still be navigated. */
@media (max-width: 44rem) {
  .rule-count { display: none; }
  .bar { flex-wrap: wrap; row-gap: 0.1rem; }
  .nav { flex: 1 1 100%; margin-left: 0; gap: 0.25rem 1.1rem; }
  .nav a { font-size: 0.88rem; padding-block: 0.15rem; }
}
@media (hover: none) { .kbd-hint { display: none; } }

/* Verdict (a scan's result) */
.verdict {
  --v-bg: var(--clear-bg); --v-fg: var(--clear-fg); --v-edge: var(--clear-edge);
  background: var(--v-bg); color: var(--v-fg);
  border: 1px solid var(--v-edge); border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
.verdict-severe { --v-bg: var(--severe-bg); --v-fg: var(--severe-fg); --v-edge: var(--severe-edge); }
.verdict-empty, .verdict-minor { --v-bg: var(--warning-bg); --v-fg: var(--warning-fg); --v-edge: var(--warning-edge); }
.vtarget { margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.8rem; font-size: 1rem; }
.vtarget code { font-size: 1rem; overflow-wrap: anywhere; }
.chip { font-size: 0.8rem; padding: 0.1rem 0.55rem; border: 1px solid currentColor; border-radius: 99px; opacity: 0.85; white-space: nowrap; }
.vhead { margin: 0; font: 800 clamp(2rem, 5.5vw, 3.2rem)/1.02 var(--display); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.vdetail { margin: 0.8rem 0 0; max-width: 40rem; font: 1.08rem/1.5 var(--sans); }
.meta { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); display: flex; flex-wrap: wrap; gap: 0.6rem 2.5rem; }
.meta div { min-width: 0; }
.meta dt { font-size: 0.85rem; opacity: 0.8; }
.meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Severity tally, doubles as the filter */
.tally { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.tcell {
  --sev: var(--info); --sev-tint: var(--info-tint);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  padding: 0.65rem 0.8rem 0.6rem; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sev); border-radius: 8px;
}
.tcell:disabled { cursor: default; border-top-color: var(--line); }
.tcell:disabled .tnum { color: var(--muted); }
.tcell[aria-pressed=true] { background: var(--sev-tint); border-color: var(--sev); border-top-color: var(--sev); box-shadow: inset 0 0 0 1px var(--sev); }
.tnum { font: 800 1.8rem/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--sev); }
.tlabel { font-size: 0.85rem; color: var(--muted); }
.sev-critical { --sev: var(--critical); --sev-tint: var(--critical-tint); }
.sev-high { --sev: var(--high); --sev-tint: var(--high-tint); }
.sev-medium { --sev: var(--medium); --sev-tint: var(--medium-tint); }
.sev-low { --sev: var(--low); --sev-tint: var(--low-tint); }
.sev-info { --sev: var(--info); --sev-tint: var(--info-tint); }

/* Findings: the plain title leads, the rule id is a small tag after it */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1.25rem 0 0; color: var(--muted); }
.filterbar .btn { padding: 0.25rem 0.7rem; font-size: 0.9rem; }
.group { margin-top: 1.6rem; }
.ghead { margin: 0 0 0.5rem; padding: 0.55rem 0; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 0.6rem; font: 800 1.2rem/1.2 var(--sans); letter-spacing: -0.02em; }
@media (min-width: 44rem) { .ghead { position: sticky; top: 0; z-index: 2; } } /* on a phone the bar would sit over the card it names */
.gcount { font: 600 0.95rem/1 var(--sans); color: var(--sev); }
.flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.finding {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--sev); border-radius: 10px;
  padding: 0.95rem 1.15rem 1rem;
}
.fhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.ftitle { order: 1; margin: 0; flex: 1 1 14rem; min-width: 0; font: 700 1.1rem/1.35 var(--sans); overflow-wrap: anywhere; }
.rid { order: 2; font: 600 0.8rem/1 var(--mono); color: var(--muted); padding: 0.2rem 0.45rem; border: 1px solid var(--line); border-radius: 5px; }
.badge { order: 3; font-size: 0.82rem; font-weight: 650; padding: 0.12rem 0.6rem; border-radius: 99px; color: var(--sev); background: var(--sev-tint); border: 1px solid var(--sev); }
.floc { margin: 0.55rem 0 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; color: var(--muted); }
.floc code { overflow-wrap: anywhere; }
.floc .file { color: var(--ink); font-weight: 600; }
.msg { margin: 0.6rem 0 0; max-width: 46rem; font-family: var(--sans); font-size: 1.04rem; overflow-wrap: anywhere; white-space: pre-line; }
.fix { margin: 0.75rem 0 0; padding: 0.55rem 0.8rem; background: var(--wash); border-radius: 8px; overflow-wrap: anywhere; white-space: pre-line; }

/* Errors */
.problem { border: 1px solid var(--critical); border-left-width: 6px; background: var(--surface); border-radius: 10px; padding: 1.4rem 1.5rem; }
.problem h2 { margin: 0 0 0.4rem; font: 800 clamp(1.5rem, 5vw, 2.1rem)/1.1 var(--display); letter-spacing: 0; color: var(--critical); }
.problem p { margin: 0.4rem 0; }
.problem ul { margin: 0.6rem 0; padding-left: 1.2rem; }
.problem li { margin: 0.3rem 0; overflow-wrap: anywhere; }
.problem .hint { color: var(--muted); font-size: 0.95rem; }
.problem-static { padding: 1rem; border: 1px solid var(--critical); border-radius: 8px; }

/* Buttons and hashes */
.btn { cursor: pointer; padding: 0.55rem 1.1rem; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font-weight: 650; }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn:disabled { cursor: progress; opacity: 0.6; }
/* A hash is long and means little to read: it shows its first characters, carries the whole value in its title, and copies on click. */
.hash { position: relative; display: inline-block; max-width: 11ch; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.1em 0.5em; border: 0; border-radius: 5px; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; font: 600 0.95rem/1.4 var(--mono); cursor: copy; }
.hash:empty { display: none; }
.hash[data-copied]::after { content: "Copied"; position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-family: var(--sans); font-weight: 650; }

/* The Swap: one address, two checks. The left card never changes; the right card is the page's one moving part. */
.swap { padding-block: clamp(1rem, 3.5vh, 2.5rem) 1rem; }
.swap h1 { margin: 0; font: 800 clamp(2.35rem, 6.3vw, 4.6rem)/0.98 var(--display); letter-spacing: -0.02em; }
.swap h1 span { display: block; }
.swap h1 span:first-child { color: var(--muted); }
.swap-lede { margin: 0.8rem 0 0; max-width: 56rem; font: 400 clamp(1.12rem, 1.8vw, 1.35rem)/1.4 var(--sans); }
.swap-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin-top: 1.1rem; }
.swap-act-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.9rem; min-width: 0; min-height: 1.5rem; color: var(--muted); font-size: 0.95rem; }
.swap-hint { margin: 0; }
.swap-hint:empty { display: none; }
/* Where the loaded note wraps under the button, the row keeps its two lines from the first paint. */
@media (min-width: 44rem) and (max-width: 60rem) { .swap-act { min-height: 5.5rem; } }
.swap-btn { min-height: 3.4rem; padding: 0.8rem 2rem; border: 0; border-radius: 99px; background: var(--brand); color: var(--brand-fg); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.swap-btn:disabled { cursor: not-allowed; }
.swap-flips { margin: 0; font-variant-numeric: tabular-nums; }
.swap-flips:empty { display: none; }
.swap-status { margin: 0; }
.swap-status[data-tone=recorded], .swap-status[data-tone=empty] { padding: 0.45rem 0.85rem; max-width: 46rem; color: var(--ink); background: var(--warning-tint); border: 1px solid var(--warning-edge); border-left-width: 5px; border-radius: 8px; }
.swap-status[data-tone=live]::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.5rem; border-radius: 50%; background: var(--allow-edge); }
.swap-tx { margin: 0.6rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
.swap-tx:empty { display: none; }
.swap-tx a { color: var(--focus); }
.swap-detail { margin: 0.4rem 0 0; color: var(--muted); font: 0.82rem/1.4 var(--mono); overflow-wrap: anywhere; }
.swap-detail:empty { display: none; }

.swap-stage { margin-top: 1.2rem; }
.swap-cards { display: grid; gap: 0.9rem; }
/* Side by side each card keeps its own height: stretched to the taller one, the allowlist card (fewer rows) would show a blank band under "Looked at" once a swap adds rows to the Preflight card. */
@media (min-width: 44rem) { .swap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; } }

.card { --c-bg: var(--surface); --c-fg: var(--ink); --c-edge: var(--line); --c-sub: var(--muted); --c-img: none; display: flex; flex-direction: column; padding: clamp(1.1rem, 3vw, 1.5rem); background: var(--c-bg) var(--c-img); color: var(--c-fg); border: 1px solid var(--c-edge); border-radius: 20px; }
/* The verdict flip is a transform animation; on its own layer it never counts as layout movement. */
#swap-pf { will-change: transform; }
/* Inter Tight's word space is tight at display weight. */
.brand b, .swap h1, .card h2, .story-head h2, .rob-title, .step h3, .vhead, .problem h2 { word-spacing: 0.07em; }
.card[data-tone=trust] { --c-bg: var(--surface); }
.card[data-tone=block] { --c-bg: var(--severe-bg); --c-fg: var(--severe-fg); --c-edge: var(--severe-edge); --c-sub: color-mix(in srgb, var(--severe-fg) 80%, transparent); --c-img: repeating-linear-gradient(135deg, transparent 0 16px, rgb(255 255 255 / 0.06) 16px 32px); }
.card[data-tone=allow] { --c-bg: var(--allow-bg); --c-fg: var(--allow-fg); --c-edge: var(--allow-edge); --c-sub: color-mix(in srgb, var(--allow-fg) 80%, transparent); }
.card[data-tone=warn] { --c-bg: var(--warning-bg); --c-fg: var(--warning-fg); --c-edge: var(--warning-edge); --c-sub: color-mix(in srgb, var(--warning-fg) 78%, transparent); }
.card h2 { margin: 0; font: 800 1.15rem/1.2 var(--display); letter-spacing: 0; }
.card-body { display: flex; flex-direction: column; flex: 1; }
/* The account every check is about, in each card's header: the one address, said twice, because both checks are about it. */
.card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; }
.addr { margin-left: auto; max-width: 100%; padding: 0.15rem 0.7rem; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 99px; font: 600 0.82rem/1.5 var(--mono); letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* Before the address is written in, the chip keeps its line and its width, so the header wraps the same way once it is. */
.swap-cards[data-loading=on] .addr:empty::before { content: "\200b"; }
@media (min-width: 44rem) { .swap-cards[data-loading=on] .addr:empty { min-width: 17.5rem; } }
.addr a { color: inherit; text-decoration: none; }
.addr a:hover { text-decoration: underline; }
.looked { margin: 0.5rem 0 0; color: var(--c-sub); font-size: 0.9rem; line-height: 1.4; }
.hash-none { padding: 0.1em 0.5em; border: 1px dashed color-mix(in srgb, currentColor 45%, transparent); border-radius: 5px; font: 0.85em/1.5 var(--mono); }
/* What a swap would do, a line under the Preflight verdict. It is a condition ("If ..."), never a second verdict. */
.swap-note { margin: 0.5rem 0 0; color: var(--c-sub); font-size: 0.9rem; line-height: 1.4; }
.card-sub { margin: 0.2rem 0 0; color: var(--c-sub); font-size: 0.88rem; line-height: 1.4; }
.word { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; font: 800 clamp(3rem, 8vw, 5rem)/0.95 var(--display); letter-spacing: -0.02em; }
.card[data-tone=trust] .word { color: var(--muted); }
.rules { font: 700 0.95rem/1 var(--mono); letter-spacing: 0; padding: 0.3rem 0.55rem; border: 1.5px solid currentColor; border-radius: 6px; }
.rules:empty { display: none; }
.card-line { margin: 0.6rem 0 0; min-height: 3.1em; font: 1.05rem/1.45 var(--sans); overflow-wrap: anywhere; }
.hashline { margin: auto 0 0; padding-top: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; font-size: 0.9rem; }
.hashline:has(#pf-hash:empty) { display: none; }
.hashline span { color: var(--c-sub); }
.tech { margin-top: 0.7rem; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); color: var(--c-sub); font-size: 0.85rem; }
.tech summary { cursor: pointer; padding-block: 0.5rem; font-weight: 650; }
.tech p { margin: 0 0 0.5rem; line-height: 1.45; overflow-wrap: anywhere; }
.tag { display: inline-block; padding: 0.05rem 0.4rem; border: 1.5px solid currentColor; border-radius: 5px; font: 700 0.75rem/1.4 var(--mono); letter-spacing: 0; vertical-align: 0.05em; }
.tag[data-state=clear] { border-color: transparent; background: color-mix(in srgb, currentColor 22%, transparent); }
.tag[data-state=clear]::before { content: "\2713\00a0"; }
.swap-next { margin: 1.5rem 0 0; font-weight: 650; }
.swap-next a { color: var(--ink); text-underline-offset: 0.25em; }
.fine { margin-top: 1rem; color: var(--muted); font-size: 0.88rem; }
.swap-print { margin: 0.5rem 0 0; max-width: 56rem; line-height: 1.5; }
.swap-also { margin: 1.1rem 0 0; max-width: 56rem; line-height: 1.5; }
#swap-keys { margin-top: 0.6rem; font-weight: 650; }

/* "Rob it": a real testnet transaction, run from this page, against whichever build is live right now. */
.rob { margin-top: 1.5rem; padding: clamp(1rem, 3vw, 1.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.rob-title { margin: 0; font: 800 1.3rem/1.2 var(--display); letter-spacing: 0; }
.rob-lede { margin: 0.5rem 0 0; line-height: 1.5; }
.rob-narrative { margin: 0.6rem 0 0; font-weight: 650; }
.rob-narrative:empty { display: none; }
.rob-btn { min-height: 3.1rem; padding: 0.75rem 1.75rem; border: 0; border-radius: 99px; background: var(--severe-bg); color: var(--severe-fg); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.rob-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.rob-hint { margin: 0; font-size: 0.95rem; color: var(--muted); }
.rob-hint:empty { display: none; }
.rob-status { margin: 0; font-size: 0.92rem; }
.rob-status:empty { display: none; }
.rob-status[data-tone=block] { padding: 0.45rem 0.85rem; color: var(--severe-fg); background: var(--severe-bg); border-radius: 8px; }
.rob-status[data-tone=allow] { padding: 0.45rem 0.85rem; color: var(--allow-fg); background: var(--allow-bg); border-radius: 8px; }
.rob-status[data-tone=warn] { padding: 0.45rem 0.85rem; color: var(--warning-fg); background: var(--warning-bg); border-radius: 8px; }
.rob-tx { margin: 0.6rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
.rob-tx:empty { display: none; }
.rob-tx a { color: var(--focus); }
/* The result of a rob is the page's payoff: a verdict card (same tones, same big word) across the panel, never a second button. */
.rob-card { margin-block: 1.25rem; padding-block: clamp(1.25rem, 3vw, 2rem); }
.rob-card .word { margin-top: 0; font-size: clamp(3.2rem, 11vw, 7.5rem); }
.rob-figure { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; font: 800 clamp(1.7rem, 7.2vw, 3.8rem)/1.15 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rob-figure:empty { display: none; }
.rob-num, .rob-arrow { white-space: nowrap; }
.rob-unit { font-size: 0.5em; letter-spacing: 0.04em; color: var(--c-sub); }
.rob-plain { margin: 0.75rem 0 0; max-width: 48rem; font: 650 clamp(1.05rem, 2.4vw, 1.3rem)/1.4 var(--sans); text-wrap: balance; }
.rob-own { margin: 0.5rem 0 0; max-width: 48rem; color: var(--c-sub); font-size: 0.95rem; line-height: 1.45; overflow-wrap: anywhere; }
.rob-own:empty { display: none; }
.rob-link { margin: 0.9rem 0 0; font-weight: 650; }
.rob-link a { color: inherit; text-underline-offset: 0.25em; }

/* The auditor-free line under the two cards: shown only once the code at the address is not the code the visitor arrived to. */
.swap-pin { margin-top: 0.8rem; padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.25rem; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--ink); border-radius: 12px; }
.pin-line { margin: 0; padding-block: 0.3rem; flex: 1 1 auto; }
.pin-line .hash { font-size: 0.85rem; }
.fold.pin-fold { flex: 0 0 auto; border-top: 0; }
.fold.pin-fold[open] { flex-basis: 100%; }
.fold.pin-fold summary { padding-block: 0.3rem; color: var(--muted); font-size: 0.9rem; }
.fold.pin-fold > p { margin: 0 0 0.6rem; max-width: 46rem; font-size: 0.95rem; line-height: 1.5; }
.pin-fold > .pin-fp { display: none; }

/* The code that ran here before the last swap, shown inside the Preflight card while its live verdict is not a BLOCK. */
.before { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.before-title { margin: 0; font: 800 1.05rem/1.3 var(--sans); }
.before-said { margin: 0.4rem 0 0; line-height: 1.45; }
.before-said .vw { margin-inline: 0.2rem; }
.before-said .rules { margin-left: 0.15rem; font-size: 1rem; }
.before-meta { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; font-size: 0.9rem; }
.before-meta a { color: inherit; text-underline-offset: 0.2em; }
.vw { display: inline-block; padding: 0 0.5rem; border-radius: 6px; font: 800 0.95rem/1.5 var(--sans); letter-spacing: 0.01em; background: var(--wash); color: var(--ink); }
.vw[data-tone=block] { background: var(--severe-bg); color: var(--severe-fg); box-shadow: 0 0 0 2px #fff; }
.vw[data-tone=warn] { background: var(--warning-bg); color: var(--warning-fg); }
.vw[data-tone=allow] { background: var(--allow-bg); color: var(--allow-fg); box-shadow: 0 0 0 2px #fff; }
#swap-pf:has(.before:not([hidden])) .card-line { min-height: 0; }

/* While the first read is under way the verdict words are grey bars that hold the words' room, so nothing moves when they arrive. */
.word { min-height: 0.95em; }
/* The grey bar is the word's own box (its line height, so the card holds the same height), and the cards keep the height a loaded verdict takes. */
.swap-cards[data-loading=on] { min-height: 26.5rem; }
@media (min-width: 75rem) { .swap-cards[data-loading=on] { min-height: 22.8rem; } }
.swap-cards[data-loading=on] :is(#trust-word:empty, #pf-word:empty) { box-sizing: border-box; width: 3.4em; height: 0.95em; border-block: 0.12em solid transparent; border-radius: 0.25em; background: color-mix(in srgb, currentColor 12%, transparent) padding-box; }
@media (prefers-reduced-motion: no-preference) {
  .swap-cards[data-loading=on] :is(#trust-word:empty, #pf-word:empty) { animation: pulse 1.6s ease-in-out infinite; }
}

/* A phone: the button and both verdicts share the first screen. The two verdicts are two short tiles side by side, the verdict word
   big; what each one means sits below them, full width. (The cards turn into their parts: the head is the tile, the body is the detail.) */
@media (max-width: 44rem) {
  .swap { padding-top: 0.6rem; }
  .swap h1 { font-size: 2rem; }
  .swap-lede { margin-top: 0.5rem; font-size: 1rem; line-height: 1.35; }
  .swap-act { margin-top: 0.75rem; gap: 0.35rem 1rem; }
  .swap-btn { flex: 1 1 100%; min-height: 3rem; padding-block: 0.6rem; }
  .swap-act-note { min-height: 2.6em; font-size: 0.8rem; line-height: 1.3; }
  .rob { margin-top: 1rem; padding: 0.9rem 1rem; }
  .rob-title { font-size: 1.1rem; }
  .rob-lede { font-size: 0.92rem; line-height: 1.4; }
  .rob-btn { flex: 1 1 100%; min-height: 2.9rem; padding-block: 0.55rem; }
  .rob-status { font-size: 0.82rem; line-height: 1.3; }
  .rob-card { margin-block: 0.9rem; padding: 0.9rem 1rem; }
  .rob-card .word { font-size: 3.4rem; }
  .swap-stage { margin-top: 0.8rem; }
  .swap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.6rem; }
  .swap-cards[data-loading=on] { min-height: 25.4rem; }
  .swap-cards .card { display: contents; }
  .swap-cards .card-head { grid-row: 1; min-width: 0; padding: 0.7rem 0.8rem 0.55rem; background: var(--c-bg) var(--c-img); color: var(--c-fg); border: 1px solid var(--c-edge); border-radius: 16px; transition: background-color 0.35s, border-color 0.35s, color 0.35s; }
  #swap-trust .card-head { grid-column: 1; }
  #swap-pf .card-head { grid-column: 2; }
  .swap-cards .card h2 { font-size: 0.95rem; }
  .swap-cards .card-top { gap: 0.2rem 0.4rem; }
  .swap-cards .addr { flex: 1 1 100%; margin: 0; padding: 0; border: 0; font-size: 0.62rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .swap-cards .card-sub, .swap-cards .card-head .rules, .swap-cards .more, #swap-trust .noread, #swap-trust .tech { display: none; }
  .swap-cards .word { margin-top: 0.25rem; font-size: 2.4rem; }
  .swap-cards .card-body { grid-column: 1 / -1; min-width: 0; flex: none; padding-left: 0.75rem; border-left: 4px solid var(--c-edge); color: var(--ink); --c-sub: var(--muted); }
  .swap-cards .card-body::before { content: attr(data-label); font-size: 0.82rem; font-weight: 800; }
  .swap-cards .card-line { min-height: 0; margin-top: 0.1rem; font-size: 0.95rem; line-height: 1.35; }
  .swap-cards .looked { padding-top: 0.2rem; margin-top: 0; font-size: 0.82rem; }
  .swap-cards .swap-note { margin-top: 0.3rem; font-size: 0.82rem; }
  .swap-cards .hashline { padding-top: 0.4rem; }
  .before { margin-top: 0.4rem; padding-top: 0.4rem; }
  .before-title { font-size: 0.95rem; }
  .before-said { margin-top: 0.25rem; font-size: 0.95rem; line-height: 1.35; }
  .before-meta { margin-top: 0.3rem; font-size: 0.82rem; }
  #swap-pf:has(.before:not([hidden])) .hashline { display: none; }
  .swap-pin { margin-top: 0.6rem; padding: 0.35rem 0.8rem; }
  .pin-line { font-size: 0.9rem; line-height: 1.35; padding-block: 0.15rem; }
  .pin-inline { display: none; }
  .pin-fold > .pin-fp { display: block; }
  .fold.pin-fold summary { font-size: 0.85rem; padding-block: 0.2rem; }
  /* The button already says "swap it back": the hint and the swap count give way, so the contrast is on a phone's first screen. */
  .swap:has(.before:not([hidden])) :is(.swap-hint, .swap-flips) { display: none; }
}

/* Story sections: revealed as they are scrolled to */
.story { padding-block: clamp(3rem, 9vw, 6rem) 0; }
/* The agent story follows the "Now watch an agent" link above it, so it needs no section-sized gap of its own. */
.swap + .agent { padding-top: clamp(1rem, 3vw, 2rem); }
.story-head h2 { margin: 0; font: 800 clamp(1.9rem, 4.4vw, 3.1rem)/1.04 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.story-tech { margin: 0.5rem 0 0; max-width: 38rem; color: var(--muted); font-size: 0.88rem; }
.story-lead { margin: 0.8rem 0 0; max-width: 38rem; font: 700 1.2rem/1.45 var(--sans); }
.story-sub { margin: 0.8rem 0 0; max-width: 38rem; color: var(--muted); font: 1.15rem/1.5 var(--sans); }
.agent-note { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.agent-note b { color: var(--ink); }
.story-head .btn { margin-top: 1rem; }

.reveal { opacity: 0; transform: translateY(1.25rem); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
@media print { .reveal { opacity: 1; transform: none; } }

/* The agent: a transcript that plays one bubble at a time. Rows keep their space while hidden, so nothing jumps. */
@media (min-width: 62rem) {
  .agent .story-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: end; }
  .agent .story-head > :is(h2, .agent-note) { grid-column: 1; }
  .agent .story-head .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .agent .story-head .fold { grid-column: 1 / -1; }
}
.agent-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
/* Wide: the agent's side (job, page, call) in one column and what the guard does about it in the other, so the story fills the width and neither column pushes the other. */
@media (min-width: 62rem) {
  .agent-steps { display: block; columns: 2; column-gap: 3rem; }
  .agent-steps > .astep { break-inside: avoid; margin-bottom: 1.1rem; }
  .agent-steps > #agent-row-check { break-before: column; }
}
.astep { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; max-width: 100%; }
/* A row that has not played yet is its own faint self, so the story never has a blank half or a gap, and nothing moves when it lights up. */
.astep[data-state=off] { opacity: 0.3; }
.astep[data-state=on] { opacity: 1; }
.astep h3 { margin: 0; font: 650 0.85rem/1.3 var(--sans); color: var(--muted); }
.astep p { margin: 0; overflow-wrap: anywhere; }
.astep code { overflow-wrap: anywhere; }
.astep-aside { color: var(--muted); font-size: 0.85rem; }
.astep-aside b { color: var(--ink); }
#agent-row-task { align-self: flex-end; align-items: flex-end; }
#agent-row-task p { padding: 0.65rem 1.1rem; background: var(--ink); color: var(--bg); border-radius: 1.2rem 1.2rem 0.3rem 1.2rem; font-size: 1.05rem; }
.astep blockquote { margin: 0; padding: 0.9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.3rem 1.2rem 1.2rem 1.2rem; font: 1.02rem/1.55 var(--sans); }
.astep mark { padding: 0.05rem 0.2rem; background: var(--warning-bg); color: var(--warning-fg); border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.astep mark code { font-size: 0.85em; }
#agent-row-call p { padding: 0.7rem 1rem; border: 1px solid var(--line); background: var(--code-bg); color: var(--code-fg); border-radius: 0.3rem 1.2rem 1.2rem 1.2rem; font: 0.92rem/1.5 var(--mono); }
#agent-row-call p::before { content: "> "; opacity: 0.55; }
#agent-row-check { padding: 0.8rem 1.1rem; background: var(--wash); border-radius: 0.3rem 1.2rem 1.2rem 1.2rem; }
#agent-row-check .beat-when { font-size: 1.05rem; }
#agent-row-check .vw { font-size: 0.9rem; }
.acheck { font-size: 0.95rem; }
.acheck.tech { margin-top: 0.15rem; padding: 0; border: 0; color: var(--muted); font-size: 0.82rem; }
.acheck .hash { font-size: 0.8rem; }
/* The two beats: today's ALLOWED is small and quiet, the refusal after the owner's swap is the big red verdict. Each says Live or Recorded. */
.beat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.beat-when { font-weight: 650; }
.src:empty { display: none; }
.src { padding: 0.05rem 0.55rem; border: 1px solid currentColor; border-radius: 99px; font-size: 0.75rem; font-weight: 650; opacity: 0.85; white-space: nowrap; }
.src[data-source=live]::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.35rem; border-radius: 50%; background: currentColor; }
.agent-out { margin-top: 0.4rem; }
.agent-out .beat-when { color: var(--c-sub); }
.agent-out .word { margin-top: 0.1rem; font-size: clamp(3rem, 10vw, 5.6rem); }
.agent-out .card-line { min-height: 0; margin-top: 0.4rem; }
.agent-fold { margin-top: 0.9rem; color: var(--c-sub); border-top-color: color-mix(in srgb, currentColor 30%, transparent); }
.agent-fold summary { color: var(--c-fg); }
.fold.agent-fold > p { color: var(--c-sub); font-size: 0.95rem; line-height: 1.5; max-width: none; }
.fold.agent-fold > .acheck.tech { color: var(--c-sub); font-size: 0.85rem; margin: 0 0 0.6rem; }
.fold.agent-fold > .card-sub { margin: 0.5rem 0 0; font-size: 0.85rem; color: color-mix(in srgb, var(--c-fg) 75%, transparent); }
.agent-log { margin: 0.6rem 0 0; padding: 0.65rem 0.8rem; background: color-mix(in srgb, var(--c-fg) 12%, transparent); border-radius: 8px; color: var(--c-fg); font: 0.78rem/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Folds: details that open in place */
.fold { border-top: 1px solid var(--line); }
.fold summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; font-weight: 650; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: ""; flex: none; width: 0.55em; height: 0.55em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-0.1em); transition: transform 0.2s; }
.fold[open] > summary::after { transform: rotate(-135deg); }
.fold > p { margin: 0 0 1rem; max-width: 40rem; color: var(--muted); font: 1.05rem/1.55 var(--sans); }
.fold > .agent-note, .fold > .hint { font-family: var(--sans); font-size: 0.92rem; margin-top: 0; }
.fold > .agent-note + .agent-note { margin-top: -0.4rem; }
.agent .story-head .fold { margin-top: 1.25rem; }
.fine summary { cursor: pointer; font-weight: 600; }
.keys-fold { max-width: 56rem; margin-top: 0.4rem; border-top: 0; }
.keys-fold summary { padding-block: 0.3rem; color: var(--muted); font-size: 0.92rem; justify-content: flex-start; }
.read-fold { max-width: 38rem; margin-top: 0.6rem; }
.read-fold > p { font-size: 0.95rem; }
#mainnet-read { font-size: 0.88rem; }

/* How it works */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.step { display: flex; flex-direction: column; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.step svg { width: 3.4rem; height: 3.4rem; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { margin: 1.1rem 0 0; font: 800 1.35rem/1.2 var(--display); letter-spacing: 0; }
.step p { margin: 0.5rem 0 0; color: var(--muted); font: 1.05rem/1.5 var(--sans); }
.step p.tag { align-self: flex-start; margin: 0.45rem 0 0; font: 700 0.75rem/1.4 var(--mono); }
.step p.step-tech { margin: 0.6rem 0 1.1rem; font-size: 0.85rem; line-height: 1.45; }
.step a { margin-top: auto; font-weight: 650; }

/* On mainnet today: a compact table of facts, no colour, because none of it is a verdict */
.survey { margin-top: 1.5rem; max-width: 46rem; padding: 0.4rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.survey-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.survey-table caption { padding: 0.5rem 0 0.2rem; text-align: left; color: var(--muted); font-size: 0.82rem; }
.survey-table th, .survey-table td { padding: 0.4rem 0.6rem 0.4rem 0; text-align: left; font-weight: 400; border-top: 1px solid var(--line); }
.survey-table thead th { border-top: 0; color: var(--muted); font-size: 0.82rem; font-weight: 650; }

.survey-table .num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.survey-table thead th:last-child { text-align: right; padding-right: 0; }
.survey-fold { max-width: 46rem; margin-top: 0.75rem; }
.survey-links { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.92rem; }
.survey-table tbody th code { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 30rem) {
  .survey { padding-inline: 0.8rem; }
  .survey-table { font-size: 0.85rem; }
  .survey-table th, .survey-table td { padding-right: 0.4rem; }
  .survey-table .hash { max-width: 8ch; font-size: 0.8rem; }
}
/* On a small phone the fingerprint column stays, shorter, and the key count's heading wraps. */
@media (max-width: 26.25rem) {
  .survey { padding-inline: 0.6rem; }
  .survey-table { font-size: 0.8rem; }
  .survey-table .hash { max-width: 8ch; padding-inline: 0.3em; font-size: 0.72rem; }
  .survey-table thead th:last-child { width: 4.5rem; }
}
@media (max-width: 21.25rem) {
  .survey-table { font-size: 0.72rem; }
  .survey-table .hash { max-width: 5ch; }
  .survey-table thead th:last-child { width: 3.2rem; }
}

/* The scanner */
.bench { margin-top: 2rem; display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 62rem) { .bench { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.75rem; } }
.output { min-width: 0; }
.output:focus { outline: none; }
.input { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; min-width: 0; overflow: hidden; }
.tabs { display: flex; gap: 0.25rem; padding: 0.5rem 0.6rem 0; border-bottom: 1px solid var(--line); background: var(--wash); }
.tabs button {
  cursor: pointer; padding: 0.6rem 0.9rem; margin-bottom: -1px; background: none; font-weight: 650; font-size: 0.95rem; color: var(--muted);
  border: 1px solid transparent; border-radius: 8px 8px 0 0;
}
.tabs button[aria-selected=true] { color: var(--ink); background: var(--surface); border-color: var(--line); border-bottom-color: var(--surface); }
.pane { padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: 0.95rem; }
.choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend, .field { padding: 0; font-weight: 650; font-size: 0.92rem; margin-bottom: 0.4rem; display: block; }
.pane > .field { margin-bottom: -0.4rem; }
.opt { font-weight: 400; color: var(--muted); }
.examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.examples label, .segment label { position: relative; display: block; cursor: pointer; }
.examples input, .segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.example { display: grid; align-content: start; gap: 0.35rem; height: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.example span { order: 1; font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.example b { order: 2; justify-self: start; font: 600 0.75rem/1 var(--mono); color: var(--sev); padding: 0.2rem 0.4rem; border: 1px solid currentColor; border-radius: 5px; }
.example em { order: 3; font-style: normal; font-size: 0.82rem; line-height: 1.35; color: var(--muted); }
.nobreak { white-space: nowrap; }
.examples input:checked + .example { background: var(--sev-tint); border-color: var(--sev); box-shadow: inset 0 0 0 1px var(--sev); }
.segment { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; background: var(--bg); }
.segment span { display: block; padding: 0.4rem 1.2rem; text-align: center; font-weight: 650; font-size: 0.92rem; color: var(--muted); }
.segment input:checked + span { background: var(--ink); color: var(--bg); }
.examples input:focus-visible + .example, .segment input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
textarea, input[type=text] { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.7rem; }
textarea { min-height: 18rem; height: 60vh; max-height: 36rem; resize: vertical; background: var(--code-bg); color: var(--code-fg); border-color: var(--line); font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; tab-size: 4; }
.pair { display: grid; gap: 0.95rem; }
@media (min-width: 30rem) { .pair { grid-template-columns: 1fr 1fr; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.actions .btn:not(.quiet) { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.hint { margin: 0; color: var(--muted); font-size: 0.86rem; }

/* "Check a contract you know": the scanner's bench (input panel, result beside it), with the verdict card for one account */
.check-bench { margin-top: 2rem; display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 62rem) { .check-bench { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.75rem; } }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 30rem) { .chips { grid-template-columns: minmax(0, 1fr); } }
.chip-pick { display: grid; align-content: start; gap: 0.2rem; padding: 0.65rem 0.8rem; text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow-wrap: break-word; }
.chip-pick:hover { border-color: var(--ink); }
.chip-pick span { font: 600 0.85rem/1.3 var(--mono); }
.chip-pick em { font-style: normal; font-size: 0.82rem; line-height: 1.35; color: var(--muted); }
.check .hashline { margin: 0.6rem 0 0; padding-top: 0; }
.facts { margin: 0.8rem 0 0; display: grid; gap: 0.7rem; }
.fact dt { color: var(--c-sub); font-size: 0.85rem; font-weight: 650; }
.fact dd { margin: 0.1rem 0 0; font-size: 0.98rem; line-height: 1.45; overflow-wrap: anywhere; }
.fact a, .check-link a { color: inherit; text-underline-offset: 0.2em; }
.check-link { margin: 0.8rem 0 0; font-size: 0.9rem; }
.legend { margin: 0.7rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; line-height: 1.45; }
.legend b { font-family: var(--mono); }

/* Notices (limits that left files out) and the proof row under each finding */
.notice { margin: 0 0 0.75rem; padding: 0.7rem 1rem; background: var(--warning-tint); border: 1px solid var(--warning-edge); border-left-width: 5px; border-radius: 8px; overflow-wrap: anywhere; }
.proof { margin: 0.7rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; color: var(--muted); font-size: 0.88rem; }
.proof b { color: var(--ink); }
.pf { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem; }
.pf a, .pf code { overflow-wrap: anywhere; }
.proof a { color: var(--focus); }

/* What this is and is not */
.folds { margin-top: 1.5rem; max-width: 46rem; border-bottom: 1px solid var(--line); }
.folds .fold summary { font: 700 1.2rem/1.3 var(--sans); letter-spacing: -0.02em; padding-block: 1.1rem; }

.foot { margin-top: clamp(3rem, 8vw, 5rem); padding-block: 1.75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.foot p { margin: 0; }

@media (max-width: 30rem) {
  .tabs button { padding-inline: 0.65rem; }
  .pane { padding-inline: 0.9rem; }
  .example span { font-size: 0.82rem; }
  textarea { height: 11rem; min-height: 11rem; }
  .tally { gap: 0.3rem; }
  .tcell { padding: 0.5rem 0.4rem 0.45rem; }
  .tnum { font-size: 1.45rem; }
  .tlabel { font-size: 0.74rem; }
  .vtarget code { font-size: 0.88rem; }
  .finding { padding-inline: 0.9rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .tcell, .btn, .tabs button, .segment span, .example { transition: background-color 0.12s, border-color 0.12s; }
  .swap-btn { transition: transform 0.15s, background-color 0.12s; }
  .swap-btn:not(:disabled):hover { transform: translateY(-2px); }
  .card { transition: background-color 0.35s, border-color 0.35s, color 0.35s; }
  .astep { transition: opacity 0.45s, transform 0.45s; }
  .astep[data-state=off] { transform: translateY(0.6rem); }
  .swap-status[data-tone=live]::before { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.35; } }
}