/* POTATCHI burns page (burns.html), on the design system in styles.css (docs/design-system.md): tokens, .card, .well,
   .pill, .stat, .disclosure, .tip, .seg, .table, .check, .btn sizes. This file only lays the page out and adds what the
   page needs on top (compact amounts with every digit one tap away, the commitment dashboard, the matched-burn form,
   the history as a table on wide screens and as cards under 640 px).
   Motion: press, expand, progress and one success moment (PotatchiUI.celebrate) after a confirmed burn; nothing loops.
   Nothing moves while loading: every box that data fills has its final size from the first paint (single-line values,
   notes and status lines with room for their longest text, check lines on an invisible copy of their longest wording). */

.bn {
  max-width: calc(1080px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(12px, 3vw, 32px) var(--gutter) clamp(48px, 8vw, 88px);
}
.bn > * + * { margin-top: clamp(28px, 4.4vw, 48px); }
.bn-page [hidden] { display: none !important; }

/* ------------------------------------------------------------------ header -- */
/* the shared .page-head with a page mark instead of the emblem: mark + title on one row, the line and the data status
   under them at full width (proposed for styles.css as .page-head--mark) */
.bn-page .page-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark title" "lede lede" "meta meta"; column-gap: 16px; row-gap: 12px; }
.bn-head__mark { grid-area: mark; align-self: center; }
.bn-page .page-head__title { align-self: center; font-size: var(--step-3x); }
.bn-page .page-head__lede { max-width: 52ch; }
@media (max-width: 600px) { .bn-head__mark { width: 48px; height: 48px; border-radius: var(--radius-md); } .bn-head__mark .icon { width: 24px; height: 24px; } }
@media (max-width: 340px) { .bn-page .page-head__lede { min-height: calc(3 * 1.32em); } }
/* the data status: a pill with the state, how far the data reaches (the block links to the explorer), when it was made.
   Its room is kept for the longest wording at each width (pill line 26 px, text lines 21 px), so the header never moves */
.bn-status { align-items: center; row-gap: 2px; min-height: 27px; }
.bn-status .page-status__state { font-weight: 700; }
.bn-status .pill { font-size: var(--text-xs); }
.bn-status a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(51, 37, 22, .3); text-underline-offset: 3px; white-space: nowrap; }
.bn-status a:hover { text-decoration-color: currentColor; }
.bn-status a .icon { margin-left: 2px; color: var(--ink-3); }
@media (max-width: 860px) { .bn-page .bn-status { min-height: 50px; } }
@media (max-width: 460px) { .bn-page .bn-status { min-height: 73px; } }

/* ---------------------------------------------------------------- sections -- */
.bn-section > * + * { margin-top: var(--space-4); }
.bn-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
/* a status pill right after the title: its left edge never moves when its words change */
.bn-sec__head--start { justify-content: flex-start; gap: 8px 14px; }
.bn-sec__title { display: flex; align-items: center; gap: 12px; font-size: var(--step-2); line-height: 1.2; }
.bn-sec__title .icon { width: 1.05em; height: 1.05em; color: var(--gold-ink); }
.bn-sec__lede { max-width: var(--measure); font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.bn-section > .bn-sec__lede { margin-top: var(--space-2); }
.bn-note { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-3); }
.bn-fine { max-width: 80ch; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-2); }
.bn-section a:not(.btn), .bn-about a:not(.btn) { color: var(--gold-ink); text-underline-offset: 2px; }
.bn-section a:not(.btn):hover { color: var(--ink); }
/* touch targets: the shared toggletip and segmented buttons, grown to 44 px without changing how they look */
.bn-page .tip__btn { width: 44px; height: 44px; margin: -12px -10px; }
.bn-page .seg > button { min-height: 44px; padding: 8px 16px; }
.bn-page .seg { flex-wrap: wrap; border-radius: var(--radius-md); }
.bn-page .seg > button { border-radius: var(--radius-sm); }

/* amounts: a compact label, every digit for screen readers and on hover; detail amounts show every digit, the
   decimals smaller so whole tokens read first */
.amount__compact { white-space: nowrap; }
.bn-int { white-space: nowrap; }
.bn-frac { font-size: .78em; letter-spacing: .01em; color: var(--ink-3); overflow-wrap: anywhere; }
.bn-page .amount__unit { white-space: nowrap; line-height: 1; }   /* never taller than the number's line */

/* -------------------------------------------------------------- overview -- */
.bn-ov { display: grid; gap: var(--space-4); padding: clamp(16px, 3vw, 28px); }
.bn-ov > * + * { margin-top: 0; }
.bn-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 16px; border: 1px solid var(--bad-line); border-radius: var(--radius-md); background: var(--bad-bg); color: var(--bad); }
.bn-error p { flex: 1 1 260px; font-size: var(--text-md); line-height: 1.5; color: var(--ink); }
.bn-error > .icon { width: 22px; height: 22px; }
.bn-ov__stats { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px 28px; margin: 0; }
.bn-ov__stats dd { margin: 0; }
.bn-ov__hero { grid-row: span 2; align-content: center; padding: 20px 24px; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid #EBD3A4; }
.bn-ov__hero .stat__label { font-weight: 700; color: var(--gold-ink); }
.bn-ov__hero .stat__value { font-size: var(--step-3); line-height: 1.08; }   /* the card hero step: the page-title step overflowed the card with its unit */
.bn-ov__hero .stat__note { font-size: var(--text-sm); color: var(--ink-2); }   /* ink-3 on the gold card was 4.4:1; ink-2 is 5.5:1 */
.bn-ov .stat:not(.bn-ov__hero) { padding: 2px 0; }
.bn-ov .stat:not(.bn-ov__hero) .stat__note { min-height: calc(2 * 1.4em); }
.bn-ov__value { white-space: nowrap; }
/* Burn + Match's two figures only where they mean something: with the card switched off they aren't painted at all
   (from the first paint), unless matched burns exist anyway (the script then sets .bn--bm) */
.bn:has(#match[data-match-enabled="false"]):not(.bn--bm) [data-bm-stat] { display: none; }
/* the same for the commitment's filter and explainer: switched off with no scheduled burn, never painted */
.bn:has(#commitment[data-schedule-enabled="false"]):not(.bn--sched) :is([data-sched-only], button[data-kind="scheduled"]) { display: none; }
@media (max-width: 999px) {
  .bn-ov__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-ov__hero { grid-column: 1 / -1; grid-row: auto; }
}
/* phones: the four smaller figures as rows — label and value on one line, the note under them */
@media (max-width: 639px) {
  .bn-ov__stats { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bn-ov__hero { margin-bottom: 8px; padding: 16px 20px; }
  .bn-ov .stat:not(.bn-ov__hero) { display: grid; grid-template-columns: minmax(0, 1fr) 9.6rem; grid-template-areas: "label value" "note note"; align-items: baseline; column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .bn-ov .stat:not(.bn-ov__hero) .stat__label { grid-area: label; }
  .bn-ov .stat:not(.bn-ov__hero) .stat__value { grid-area: value; font-size: var(--text-lg); text-align: right; }
  .bn-ov .stat:not(.bn-ov__hero) .stat__note { grid-area: note; min-height: 1.4em; }
}

/* the three checks at a glance */
.bn-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.bn-check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.bn-check .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); }
.bn-check[data-tone="ok"] .icon { color: var(--ok); }
.bn-check[data-tone="warn"] .icon { color: var(--warn); }
.bn-check[data-tone="warn"] { color: var(--ink); }
.bn-check[data-tone="info"] .icon { color: var(--info); }
@media (max-width: 899px) { .bn-checks { grid-template-columns: minmax(0, 1fr); } }
/* the smallest phones: a slightly smaller value, so every label keeps one line */
@media (max-width: 380px) {
  .bn-ov .stat:not(.bn-ov__hero) { grid-template-columns: minmax(0, 1fr) 8.6rem; }
  .bn-ov .stat:not(.bn-ov__hero) .stat__value { font-size: var(--text-lg); }
}
/* a line sits on an invisible copy of its longest wording, so it is as tall as it will ever be */
.bn-fit { display: grid; min-width: 0; flex: 1 1 auto; }
.bn-fit > * { grid-area: 1 / 1; min-width: 0; }
.bn-fit__size { visibility: hidden; pointer-events: none; user-select: none; }

/* exact figures, folded into the card: a quiet disclosure (no box inside the box) */
.bn-exact { border: 0; border-radius: 0; background: transparent; }
.bn-exact > summary { min-height: 44px; padding: 8px 0; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); border-radius: var(--radius-sm); }
.bn-exact > summary::after { margin-left: 4px; width: 7px; height: 7px; }
.bn-exact > summary:hover { background: transparent; color: var(--ink); }
.bn-exact > .disclosure__body { padding: 4px 0 4px; display: grid; gap: 12px; }
.bn-exact__list { display: grid; gap: 8px; margin: 0; }
.bn-exact__list > div { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); align-items: center; gap: 4px 16px; }
.bn-exact__list dt { font-size: var(--text-sm); color: var(--ink-2); }
.bn-exact__list dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; min-height: 44px; }
.bn-exact__list code { font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; color: var(--ink); }
.bn-exact__check { max-width: 90ch; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-2); }
.bn-exact__check strong { color: var(--ok); }
.bn-exact__check.is-off strong { color: var(--warn); }
[data-wait] { visibility: hidden; }
@media (max-width: 539px) { .bn-exact__list > div { grid-template-columns: minmax(0, 1fr); } .bn-exact__list dd { min-height: 0; } }

/* -------------------------------------------------- 100-Day Burn Commitment -- */
/* Hidden until a commitment contract exists (data-schedule-enabled="false" and no scheduled burns: never painted).
   Switched on, it is on the page from the first paint with every box at its final size, so nothing moves. */
.bn-sched[data-schedule-enabled="false"]:not(.is-shown) { display: none; }
.bn-sched__chip .icon { width: 14px; height: 14px; }
/* the summary sentence: room for the longest one at each width (two lines wide, five on a small phone) */
.bn-sched__line { min-height: calc(2 * 1.5em); max-width: 92ch; font-size: .97rem; line-height: 1.5; color: var(--ink); }
.bn-sched > .bn-sched__line { margin-top: var(--space-2); }
@media (max-width: 899px) { .bn-sched__line { min-height: calc(3 * 1.5em); } }
@media (max-width: 639px) { .bn-sched__line { min-height: calc(4 * 1.5em); } }
@media (max-width: 379px) { .bn-sched__line { min-height: calc(5 * 1.5em); } }

.bn-sched__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.bn-next { display: grid; align-content: start; gap: 4px; padding: 16px 20px; border: 1px solid transparent; }
.bn-next.is-eligible { background: var(--gold-soft); border-color: #E7C98F; }
.bn-next__when { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bn-next__count { min-height: calc(2 * 1.45em); font-size: var(--text-md); line-height: 1.45; color: var(--ink-2); }
.bn-next.is-eligible .bn-next__count { color: var(--gold-ink); font-weight: 700; }
.bn-prog { display: grid; align-content: start; gap: 8px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.bn-prog__count { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.2; }
.bn-prog__of { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--ink-3); }
/* one bar for the 100 installments: burned (confirmed), being confirmed, eligible and not executed, to come */
.bn-prog__bar { display: flex; height: 10px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); }
.bn-prog__bar i { display: block; height: 100%; width: 0; flex: none; transition: width var(--dur-3) var(--ease-out); }
.bn-prog__bar i[data-seg="burned"] { background: var(--gold-ink); }
.bn-prog__bar i[data-seg="confirming"] { background: var(--gold); }
.bn-prog__bar i[data-seg="due"] { background: repeating-linear-gradient(135deg, var(--gold) 0 3px, var(--gold-soft) 3px 6px); }
.bn-prog__note { min-height: calc(2 * 1.45em); font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 639px) { .bn-sched__top { grid-template-columns: minmax(0, 1fr); } }

.bn-sched__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.bn-sched__facts dd { margin: 0; }
.bn-sched__fact { padding: 2px 0; }
.bn-sched__num { font-size: var(--step-2); white-space: nowrap; }
.bn-sched__fact .stat__note { min-height: calc(2 * 1.4em); }
.bn-sched__fact.is-due .stat__label { color: var(--gold-ink); font-weight: 700; }
@media (max-width: 899px) { .bn-sched__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .bn-sched__facts { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 4px; }
  .bn-sched__fact { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; grid-template-areas: "label value" "note note"; align-items: baseline; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .bn-sched__fact .stat__label { grid-area: label; }
  .bn-sched__fact .stat__value { grid-area: value; font-size: var(--text-lg); text-align: right; }
  .bn-sched__fact .stat__note { grid-area: note; min-height: calc(2 * 1.4em); }
}

/* the records: automation, contract, funding, executions — label on the left, the facts and links on the right */
.bn-sched__rows { display: grid; gap: 0; margin: 0; }
.bn-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.bn-row:last-child { border-bottom: 1px solid var(--line); }
.bn-row__label { display: flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); min-height: 26px; }
.bn-row__value { min-width: 0; font-size: var(--text-md); line-height: 1.5; color: var(--ink); }
/* the records' texts keep the room of their longest wording at each width (one line wide, two on tablets, three on phones) */
.bn-row [data-s="last"], .bn-row [data-s="funding"] { min-height: 1.5em; }
.bn-auto { display: grid; gap: 8px; justify-items: start; }
.bn-auto > p { margin: 0; }
.bn-auto__text { min-height: 1.45em; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.bn-links-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.bn-links-inline a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.bn-addr { font-family: var(--font-mono); font-size: var(--text-sm); padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-2); }
.bn-execs { margin-top: 4px; }
.bn-execs > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: var(--gold-ink); list-style: none; }
.bn-execs > summary::-webkit-details-marker { display: none; }
.bn-execs > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.bn-execs[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.bn-execs__list { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.bn-execs__list li { padding: 6px 0; border-top: 1px dashed var(--line); }
.bn-execs__list .pill { vertical-align: 1px; }
.bn-row a, .bn-execs__list a, .bn-status-line a, .bn-txlink a { white-space: nowrap; }   /* a transaction never breaks in the middle */
@media (max-width: 899px) {
  .bn-row [data-s="last"], .bn-row [data-s="funding"] { min-height: calc(2 * 1.5em); }
  .bn-auto__text { min-height: calc(2 * 1.45em); }
}
@media (max-width: 639px) {
  .bn-row { grid-template-columns: minmax(0, 1fr); }
  .bn-row [data-s="last"], .bn-row [data-s="funding"] { min-height: calc(3 * 1.5em); }
  .bn-auto__text { min-height: calc(3 * 1.45em); }
}

/* the one action: consent, the button with its reason, the fee, the status (room for its longest message) */
.bn-act { display: grid; gap: 12px; }
.bn-act > * { margin: 0; }
.bn-consent { min-height: 44px; align-items: center; padding: 6px 0; font-size: var(--text-md); color: var(--ink); }
.bn-consent input { width: 22px; height: 22px; margin: 0; }
.bn-act__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bn-act__why { min-height: 1.45em; flex: 1 1 220px; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.bn-status-line { min-height: calc(2 * 1.5em); max-width: 104ch; font-size: var(--text-md); line-height: 1.5; color: var(--ink-2); }
.bn-status-line.is-ok { color: var(--ok); font-weight: 700; }
.bn-status-line.is-warn { color: var(--warn); }
.bn-status-line.is-error { color: var(--bad); }
.bn-status-line a { color: var(--gold-ink); font-weight: 400; }
.bn-txlink { min-height: 1.5em; font-size: var(--text-sm); line-height: 1.5; }
.bn-txlink a { font-family: var(--font-mono); font-size: var(--text-xs); }
.bn-wallets { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-wallet img { width: 20px; height: 20px; border-radius: var(--radius-xs); }
.bn-sched__act { padding-top: 4px; }
.bn-sched__go[data-ready="true"]:not(:disabled) { border-color: var(--ink); }
.bn-sched__fee { max-width: 72ch; min-height: calc(2 * 1.45em); font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 899px) { .bn-status-line { min-height: calc(3 * 1.5em); } }
@media (max-width: 639px) {
  .bn-status-line { min-height: calc(5 * 1.5em); }
  .bn-sched__fee { min-height: calc(4 * 1.45em); }
  .bn-act__row .btn { width: 100%; }
  .bn-act__why { flex-basis: 100%; }
}

/* secondary progress: the 20 levels of five burns, smaller than the facts above */
.bn-levels { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); }
.bn-levels > * { margin: 0; }
.bn-levels__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bn-levels__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 30px; font-size: var(--text-md); }
.bn-levels__badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 56px; height: 30px; padding: 0 12px; font-size: var(--text-sm); border-radius: var(--radius-pill); background: var(--surface-1); border: 1px solid #E7C98F; color: var(--gold-ink); font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.bn-levels__name { font-family: var(--font-display); font-weight: 600; }
.bn-levels__of { color: var(--ink-3); font-size: var(--text-sm); }
.bn-levels__meter { display: grid; align-items: center; justify-items: end; }
.bn-levels__meter > * { grid-area: 1 / 1; }
.bn-levels__up { visibility: hidden; }
.bn-sched.is-levelup .bn-levels__up { visibility: visible; }
.bn-sched.is-levelup .bn-levels__meter .bn-sched__xp { visibility: hidden; }
.bn-sched__xp { display: grid; grid-template-columns: repeat(5, 18px); gap: 4px; }
.bn-sched__xp i { height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); }
.bn-sched__xp i[data-c="burned"] { background: var(--gold-ink); }
.bn-sched__xp i[data-c="confirming"] { background: var(--gold); }
.bn-sched__xp i[data-c="due"] { background: var(--surface-1); box-shadow: inset 0 0 0 1.5px var(--gold); }
.bn-levels__note { min-height: calc(2 * 1.45em); font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.bn-sched__days { margin: 0; display: grid; gap: 8px; }
.bn-sched__levels { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(2, 34px); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bn-sched__lv { display: grid; align-content: space-between; min-width: 0; padding: 4px 6px 6px; border-radius: var(--radius-sm); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); }
.bn-sched__lv-n { display: flex; align-items: center; justify-content: space-between; gap: 2px; font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1.2; color: var(--ink-3); }
.bn-sched__lv-n .icon { width: 11px; height: 11px; }
.bn-sched__lv-pips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.bn-sched__cell { height: 5px; border-radius: var(--radius-pill); background: var(--surface-3); }
.bn-sched__cell[data-c="burned"] { background: var(--gold-ink); }
.bn-sched__cell[data-c="confirming"] { background: var(--gold); }
.bn-sched__cell[data-c="due"] { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--gold); }
.bn-sched__lv[data-state="cleared"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1px #E7C98F; }
.bn-sched__lv[data-state="cleared"] .bn-sched__lv-n { color: var(--gold-ink); font-weight: 700; }
.bn-sched__lv[data-state="current"] { box-shadow: inset 0 0 0 1.5px var(--gold-ink); }
.bn-sched__lv[data-state="current"] .bn-sched__lv-n { color: var(--ink); font-weight: 700; }
.bn-sched__ends { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: var(--text-xs); color: var(--ink-3); }
.bn-sched__key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bn-sched__key i { display: inline-block; width: 10px; height: 6px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--surface-3); }
.bn-sched__key i.is-burned { background: var(--gold-ink); }
.bn-sched__key i.is-due { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 639px) {
  .bn-sched__levels { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, 32px); }
  .bn-sched__ends { min-height: calc(3 * 1.5em); }
  .bn-sched__key { order: 3; flex-basis: 100%; }
  .bn-levels__note { min-height: calc(3 * 1.45em); }
}

/* ------------------------------------------------------------ Burn + Match -- */
/* Fixed structure from the first paint: every state only changes text inside boxes that already have their size. */
.bn-match__closed { max-width: 80ch; color: var(--ink-2); font-size: var(--text-md); line-height: 1.55; }
.bn-match__closed strong { color: var(--ink); }
.bn-match__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); grid-template-areas: "main side" "main how"; grid-template-rows: auto 1fr; gap: 16px 28px; align-items: start; }
.bn-match__main { grid-area: main; }
.bn-match__side { grid-area: side; }
.bn-match__how { grid-area: how; display: grid; gap: 12px; padding: 0 4px; }
.bn-match__how > * { margin: 0; }
.bn-match__main { display: grid; gap: 16px; min-width: 0; }
.bn-match__main > * { margin: 0; }
.bn-match__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bn-match__label { font-weight: 700; font-size: var(--text-md); color: var(--ink); }
.bn-match__field { display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--radius-md); background: var(--surface-1); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.bn-match__field:focus-within { border-color: var(--ink); box-shadow: var(--ring); }
.bn-match__input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 52px; padding: 10px 14px; border: 0; background: transparent; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.bn-match__input:focus { outline: none; }
.bn-match__input::placeholder { color: #B7A68E; }
.bn-match__input:disabled { cursor: not-allowed; color: var(--ink-2); }
.bn-match__field:has(.bn-match__input:disabled) { background: var(--surface-2); }
.bn-match__suffix { flex: none; padding-right: 14px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.bn-match__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bn-match__presets .btn { padding-inline: 8px; }
.bn-match__help { min-height: 1.45em; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-3); }

/* what the burn is, before it happens: you + the vault = the total, every digit */
.bn-match__preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 1.25rem; align-items: stretch; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.bn-match__preview > div { position: relative; min-width: 0; padding: 12px 14px; }
/* the + and = sit in the gaps, drawn by CSS: the list holds only dt/dd groups, and screen readers hear three plain
   facts (the second `content` gives the sign empty alternative text where browsers support it) */
.bn-match__preview > div + div::before { content: '+'; content: '+' / ''; position: absolute; left: -.625rem; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--ink-3); }
.bn-match__preview > .is-total::before { content: '='; content: '=' / ''; }
.bn-match__preview dt { font-size: var(--text-sm); color: var(--ink-2); }
.bn-match__preview dd { margin: 4px 0 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.25; color: var(--ink); }
.bn-match__preview .is-total { border-left: 1px solid var(--line); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--gold-soft); }
.bn-match__preview .is-total dt { color: var(--gold-ink); font-weight: 700; }
.bn-match__warn { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border: 1px solid var(--bad-line); border-radius: var(--radius-md); background: var(--bad-bg); color: var(--bad); font-size: var(--text-sm); line-height: 1.5; }
.bn-match__warn .icon { width: 18px; height: 18px; margin-top: 1px; }
.bn-match__warn span { color: var(--ink); }
.bn-match__warn strong { color: var(--bad); }
.bn-match__go { min-width: min(100%, 260px); }

.bn-match__side { display: grid; gap: 16px; padding: 16px 20px; }
.bn-match__side > * { margin: 0; }
.bn-match__facts { display: grid; gap: 12px; margin: 0; }
.bn-match__fact dt { display: flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--ink-2); min-height: 26px; }
.bn-match__fact dd { margin: 0; }
.bn-match__val { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bn-match__sub { min-height: 1.4em; font-size: var(--text-xs); line-height: 1.4; color: var(--ink-3); }
.bn-match__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--ink-2); }
.bn-match__steps li { display: flex; align-items: center; gap: 12px; }
.bn-match__stepdot { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-1); box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: var(--text-xs); font-weight: 700; color: var(--ink-3); }
.bn-match__steps li[data-current="true"] { color: var(--ink); font-weight: 700; }
.bn-match__steps li[data-current="true"] .bn-match__stepdot { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
/* a step done is shown as done — a check in the ink colour, not a success: nothing is burned until step 2 confirms */
.bn-match__steps li[data-done="true"] .bn-match__stepdot { background: var(--ink); box-shadow: none; color: transparent; }
.bn-match__steps li[data-done="true"] .bn-match__stepdot::after { content: ''; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px; border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bn-match__rule, .bn-match__fee { font-size: var(--text-xs); line-height: 1.5; color: var(--ink-2); }

/* closed: the explanation only; nothing to type, nothing to press. Switched off in the page itself (data-match-enabled
   "false") it is closed from the first paint; switched on, the full card is there from the first paint (data-state
   "loading", everything disabled) so nothing moves when the data arrives */
.bn-match:is([data-state="closed"], [data-match-enabled="false"]) .bn-match__grid { display: none; }
.bn-match:not([data-state="closed"]):not([data-match-enabled="false"]) .bn-match__closed { display: none; }
@media (max-width: 859px) {
  .bn-match__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main" "how"; grid-template-rows: none; }
  .bn-match__how { padding: 0; }
  .bn-match__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
}
@media (max-width: 639px) {
  .bn-match__preview { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .bn-match__preview > div + div::before, .bn-match__preview > .is-total::before { content: none; }
  .bn-match__preview > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; }
  .bn-match__preview > div + div { border-top: 1px solid var(--line); }
  .bn-match__preview .is-total { border-left: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .bn-match__preview dd { margin: 0; text-align: right; }
  .bn-match__go { width: 100%; }
}
@media (max-width: 639px) { .bn-match__facts { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------- history -- */
.bn-hist__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: var(--space-2); }
@media (max-width: 639px) {
  .bn-hist__filters .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .bn-hist__filters .seg > button { padding: 6px 4px; font-size: var(--text-sm); line-height: 1.15; }
}
.bn-pending { display: grid; gap: 8px; }
.bn-pending > * { margin: 0; }
.bn-pending__title { font-size: 1rem; }
.bn-pending__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bn-pending__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: var(--text-sm); }
.bn-pending__what { font-weight: 700; color: var(--ink); }
.bn-pending__status { color: var(--ink-2); }
.bn-pending__item.is-confirmed .bn-pending__status { color: var(--ok); }
.bn-pending__item.is-failed .bn-pending__status { color: var(--bad); }
.bn-pending__item a { font-family: var(--font-mono); font-size: var(--text-xs); }

/* the running-total chart: one series (gold ink), a 10 % wash under it, hairline grid, muted ticks */
.bn-chart { margin: 0; }
.bn-chart__cap { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-2); }
.bn-chart__key { flex: none; width: 18px; height: 2px; border-radius: var(--radius-xs); background: var(--gold-ink); }
.bn-chart__box { position: relative; margin-top: 8px; min-height: 228px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--text-sm); }
.bn-chart__box:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.bn-chart__box svg { display: block; width: 100%; height: auto; overflow: visible; }
.bn-chart__box .tick { font-family: var(--font-body); font-size: var(--text-2xs); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.bn-chart__box .grid { stroke: var(--line); stroke-width: 1; }
.bn-chart__box .axis-line { stroke: var(--line-2); stroke-width: 1; }
.bn-chart__box .step { fill: none; stroke: var(--gold-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bn-chart__box .area { fill: var(--gold-ink); fill-opacity: .1; }
.bn-chart__box .dot { fill: var(--gold-ink); stroke: var(--surface-1); stroke-width: 2; }
.bn-chart__box .dot.is-on { r: 6; }
.bn-chart__box .cross { stroke: var(--ink-3); stroke-width: 1; }
.bn-chart__empty { display: grid; place-items: center; min-height: 228px; padding: 16px; border-radius: var(--radius-md); border: 1.5px dashed var(--line-2); text-align: center; }
.bn-chart__tip { position: absolute; z-index: 5; display: grid; gap: 2px; max-width: 240px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--ink); color: var(--cream); font-size: var(--text-xs); line-height: 1.4; box-shadow: var(--elev-3); pointer-events: none; }
.bn-chart__tip strong { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.bn-chart__tipt { opacity: .8; }
@media (max-width: 560px) { .bn-chart__box, .bn-chart__empty { min-height: 196px; } }

/* the hint shows only when the table is really wider than its box; its line is kept either way where that can happen */
.bn-swipe { visibility: hidden; margin-top: 4px; }
.bn-swipe.is-on { visibility: visible; }
@media (min-width: 1100px), (max-width: 639px) { .bn-swipe { display: none; } }

/* the records as a table (wide screens) */
.bn-table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bn-table th { white-space: nowrap; }
.bn-table td { vertical-align: middle; }
.bn-table .num { text-align: right; }
.bn-when span { display: block; white-space: nowrap; }
.bn-when__t { font-size: var(--text-xs); color: var(--ink-3); }
.bn-type { min-width: 10em; }
.bn-type__how { display: block; margin-top: 4px; max-width: 26ch; font-size: var(--text-xs); line-height: 1.4; color: var(--ink-3); }
.bn-burned { min-width: 9em; }
.bn-amt { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bn-split { display: block; margin-top: 3px; font-size: var(--text-xs); line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bn-tx a { font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.bn-run { white-space: nowrap; color: var(--ink-2); }
.bn-fin { white-space: nowrap; }
.bn-kind .icon, .bn-fin .icon { width: 13px; height: 13px; }
.bn-kind:not([data-tone]) .icon { width: 8px; height: 8px; }
.bn-table tr.is-new td, .bn-card.is-new { animation: bn-row 1.4s var(--ease-out) 1; }
.bn-empty { padding: 22px 12px !important; text-align: center !important; white-space: normal !important; color: var(--ink-2); }
/* the same records as cards (phones) */
.bn-cards { display: none; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bn-cards__empty { padding: 20px 12px; border: 1.5px dashed var(--line-2); border-radius: var(--radius-md); text-align: center; color: var(--ink-2); }
.bn-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.bn-card > * { margin: 0; }
.bn-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bn-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bn-card__amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.bn-card__amount .bn-amt { font-weight: 600; }
.bn-card__amount .bn-frac { font-family: var(--font-body); font-size: .55em; font-weight: 700; }
.bn-card__amount .amount__unit { margin-left: .3em; font-size: .55em; font-family: var(--font-body); font-weight: 700; letter-spacing: .06em; color: var(--ink-2); }
.bn-card__how { font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.bn-card__how .bn-split { display: inline; margin: 0; font-size: inherit; }
.bn-card__meta { display: grid; gap: 4px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.bn-card__meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bn-card__meta dt { color: var(--ink-3); }
.bn-card__meta dd { margin: 0; text-align: right; color: var(--ink); }
.bn-card__meta a { font-family: var(--font-mono); font-size: var(--text-xs); display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 639px) {
  .bn-table-wrap { display: none; }
  .bn-cards { display: grid; }
}
.bn-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* ------------------------------------------------- methodology and details -- */
.bn-about > * + * { margin-top: var(--space-3); }
.bn-about > .bn-sec__title { margin-bottom: var(--space-4); }
.bn-about .disclosure__body p { max-width: 80ch; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.bn-about .disclosure__body p + p, .bn-about .disclosure__body p + dl, .bn-about .disclosure__body dl + p { margin-top: 12px; }
.bn-terms { display: grid; gap: 8px; margin: 0; }
.bn-terms > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 14px; font-size: var(--text-sm); line-height: 1.5; }
.bn-terms dt { font-weight: 700; color: var(--ink); }
.bn-terms dd { margin: 0; color: var(--ink-2); }
@media (max-width: 479px) { .bn-terms > div { grid-template-columns: minmax(0, 1fr); } }
.bn-addrs .disclosure__body { display: grid; gap: 16px; }
.bn-contract { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 8px 14px; }
.bn-contract__label { font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
.bn-contract__addr { min-width: 0; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; word-break: break-all; }
.bn-contract__tools { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.bn-contract__status { grid-column: 2; min-height: 0; }
.bn-contract__status:empty { display: none; }
@media (max-width: 639px) { .bn-contract { grid-template-columns: minmax(0, 1fr); } .bn-contract__tools, .bn-contract__status { grid-column: 1; } }
.bn-legal { display: grid; gap: 8px; margin-top: var(--space-5) !important; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bn-legal > * { margin: 0; }

/* ------------------------------------------------------------------ motion -- */
/* a new burn's row is tinted once as it arrives; reduced motion turns it off (styles.css stops every animation) */
@keyframes bn-row { 0% { background-color: rgba(217, 160, 82, .22); } 100% { background-color: rgba(217, 160, 82, 0); } }
@media (prefers-reduced-motion: reduce) {
  .bn-table tr.is-new td, .bn-card.is-new { animation: none; }
  .bn-prog__bar i { transition: none; }
}

/* ---------- wallet routes on a phone without a wallet, and the consent box when a press asks for it (2026-10-29) */
.bn-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bn-app { text-decoration: none; }
.bn-consent.is-asked { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: no-preference) { .bn-consent.is-asked { animation: bn-ask .8s ease-in-out 2; } @keyframes bn-ask { 50% { outline-color: transparent; } } }