/* =============================================================================
   STASH — /vault (app.css). Adds to stash.css, never redefines a token.
   GREEN RULE: every selector here that touches var(--rate…) contains "rate".
   The accent is used only for: the dial's released arc, the vesting area, the
   harvest anatomy's rising leg, the ledger's gain bars — i.e. the rate and the
   gain that becomes rate. On paper it is a fill only.
   ============================================================================= */

/* ------------------------------------------------------------ page head */
.ap-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 3.5vw, 2.5rem); position: relative; }
.ap-head__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
.ap-head__h1 { font-stretch: 76%; font-weight: 820; font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: .95; letter-spacing: -.02em; text-wrap: balance; }
.ap-head__side .lede { max-width: 36rem; }
.ap-launch { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.ap-launch__k { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.ap-launch__v { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg); line-height: 1.5; }

/* ------------------------------------------------------------ the app section */
.ap-app { padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6.5rem); background: var(--paper); position: relative; }
.ap-app::before { /* engraved hairline grid behind the working area, like the home plate's paper */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(180deg, #000 0, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 70%);
}
.ap-app > .container { position: relative; display: grid; gap: 1rem; }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ap-main, .ap-side { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 1024px) { .ap-side { position: sticky; top: calc(var(--hdr-h) + 16px); } }

.ap-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }

/* ---- vault list ---- */
.ap-list__rack { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.25rem; align-items: end; margin-top: 1rem; }
.ap-rack { display: block; width: 132px; height: auto; }
.ap-rack__bar { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.3; }
.ap-rack__slot { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 4 4; }
.ap-rack__hatch { stroke: var(--line-2); stroke-width: 1; }
.ap-list__rack .vaults-ghost { border-bottom: 1px solid var(--rule-2); }
.ap-list:has(.ledger) .ap-list__rack, .ap-list:has(.ledger) .vaults-slots { display: none; }
.ap-list__mount > .pending { max-width: 60ch; }
.ap-list__src { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--fg-3); }
.ap-list__src code { font-size: var(--fs-mono-xs); color: var(--fg-2); }

/* ---- the selected vault ---- */
.ap-board { padding: clamp(1.1rem, 2.4vw, 1.6rem); }
.ap-board__id { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem 1.5rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.ap-board__name { min-width: 0; flex: 1 1 22rem; }
.ap-board__h { margin-top: .35rem; font-stretch: 80%; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.02; letter-spacing: -.015em; }
.ap-board__sub { margin-top: .5rem; font-size: .93rem; color: var(--fg-2); max-width: 58ch; }
.ap-board__sub a, .ap-board__sub code { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg); }
.ap-board__tools { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.ap-board__at { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); text-align: right; max-width: 22rem; }
.ap-board[data-state="error"] .ap-board__at { color: var(--fg); }
.ap-reread { min-height: 44px; }

.ap-board__viz { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.25rem clamp(1.25rem, 3vw, 2.25rem); align-items: center; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }

/* the dial: an engraved one-way wheel; its outer arc is the released part of the running lock */
.ap-dial { position: relative; margin: 0; width: 220px; max-width: 100%; }
.ap-dial__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ap-dial__plate { fill: var(--paper-2); stroke: var(--line-2); stroke-width: 1; }
.ap-dial__teeth { fill: var(--paper); stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.ap-dial__ring { fill: none; stroke: var(--ink); stroke-width: .6; opacity: .45; }
.ap-dial__ticks { stroke: var(--ink); stroke-width: .8; opacity: .55; }
.ap-dial__well { fill: var(--paper); stroke: var(--ink); stroke-width: 1.1; }
.ap-dial__track { fill: none; stroke: var(--line-2); stroke-width: 7; }
.rate-dial-arc { fill: none; stroke: var(--rate); stroke-width: 7; stroke-linecap: butt; }
.ap-dial__blade { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.ap-dial__pivot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.ap-dial__turn { transform-box: view-box; transform-origin: 120px 120px; }
.ap-dial[data-turning="on"] .ap-dial__turn { animation: ap-turn 60s linear infinite; }
.ap-dial.is-paused .ap-dial__turn { animation-play-state: paused; }
@keyframes ap-turn { to { transform: rotate(360deg); } }
.ap-dial__read { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; text-align: center; width: 96px; pointer-events: none; }
.ap-dial__v { font-family: var(--f-mono); font-weight: 500; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ap-dial__k { margin-top: .3rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); line-height: 1.25; color: var(--fg-3); }
.ap-dial__cap { margin-top: .6rem; display: flex; justify-content: center; }

.ap-vest { min-width: 0; }
.ap-vest__head { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; }
.ap-vest__state { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-2); }
.ap-vest__svg { display: block; width: 100%; height: 120px; margin-top: .8rem; border-left: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); background:
  repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), var(--line) calc(100% / 6 - 1px) calc(100% / 6)); }
.ap-vest__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; }
.ap-vest__plan { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; opacity: .55; }
.rate-vest-area { fill: var(--rate-60); }
.ap-vest__line { fill: none; stroke: var(--ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.ap-vest__now { stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ap-board[data-state="none"] .ap-vest__plan { animation: ap-draw 3.2s var(--ease) both; stroke-dasharray: 5 6; }
.ap-vest__axis { display: flex; justify-content: space-between; gap: .75rem; margin-top: .45rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.ap-vest__axis span:nth-child(2) { text-align: center; }
.ap-vest__axis span:last-child { text-align: right; }
.ap-vest__note { margin-top: .9rem; font-size: .9rem; line-height: 1.55; color: var(--fg-2); max-width: 60ch; }

.ap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; }
.ap-stat { min-width: 0; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.ap-stat:not(:nth-child(3n + 1)) { padding-left: 1rem; border-left: 1px solid var(--rule); }
.ap-stat dt { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.ap-stat dd { margin: .45rem 0 0; display: grid; gap: .3rem; }
.ap-stat__v { font-family: var(--f-mono); font-weight: 500; font-size: 1.12rem; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ap-stat--rate .ap-stat__v { font-size: 1.3rem; }
.ap-stat__s { font-family: var(--f-mono); font-size: var(--fs-mono-xs); line-height: 1.4; color: var(--fg-3); overflow-wrap: anywhere; }
.ap-board[data-state="none"] .ap-stat__v, .ap-board[data-state="reading"] .ap-stat__v { color: var(--fg-3); }

.ap-board__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem 2rem; padding-top: 1.1rem; }
.ap-flags, .ap-keylist { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.ap-flags li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.ap-flags li i { width: 22px; height: 12px; border-radius: 99px; border: 1.3px solid var(--ink); position: relative; flex: none; }
.ap-flags li i::after { content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transition: transform .3s var(--ease); }
.ap-flags li[data-on="paused"] i { background: var(--ink); }
.ap-flags li[data-on="paused"] i::after { background: var(--paper); transform: translateX(10px); }
.ap-flags b { margin-left: auto; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-mono-s); color: var(--fg-2); }
.ap-keylist li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; border-bottom: 1px dotted var(--rule-2); padding-bottom: .3rem; }
.ap-keylist li span { color: var(--fg-2); }
.ap-keylist code, .ap-keylist a { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg); }

/* ---- the panel (ink) ---- */
.ap-panel { padding: clamp(1.1rem, 2.2vw, 1.5rem); }
.ap-panel__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding-bottom: .9rem; border-bottom: 1px solid var(--line-d); }
.ap-panel__k { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--d1); }
.ap-panel__chain { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--d3); }
.ap-mount { margin-top: 1rem; }
.ap-mount__wait { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--d3); }

.ap-path { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line-d); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; position: relative; }
.ap-path::before { content: ""; position: absolute; top: calc(1rem + 13px); left: 13px; right: 13px; height: 1px; background: var(--line-d-2); }
.ap-path li { position: relative; display: grid; gap: .15rem; font-size: .8rem; line-height: 1.35; color: var(--d3); }
.ap-path b { color: var(--d1); font-weight: 600; font-size: .88rem; margin-top: .35rem; }
.ap-path__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-d-2); background: var(--ink); font-family: var(--f-mono); font-size: .7rem; color: var(--d1); position: relative; }
.ap-panel:has(.sa-steps li) .ap-path { display: none; }

.ap-promises { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-d); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.ap-promises div { min-width: 0; }
.ap-promises dt { font-stretch: 62%; font-weight: 880; font-size: 1.9rem; line-height: 1; color: var(--d1); }
.ap-promises dd { margin: .35rem 0 0; font-size: .76rem; line-height: 1.35; color: var(--d3); }

/* ---- the engine's DOM (stash-app.js skeleton), on ink ---- */
.sa { display: grid; gap: 1rem; }
.sa > *, .sa-form > * { min-width: 0; }
.sa-head { display: grid; gap: .8rem; }
.sa-note { font-size: .9rem; line-height: 1.5; color: var(--d2); }
.sa-vault-name { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.sa-vault-name .sa-sym { font-stretch: 80%; font-weight: 800; font-size: 1.35rem; color: var(--d1); }
.sa-vault-name code, .sa-account { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--d2); }
.sa-label { display: grid; gap: .45rem; font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--d3); }
.sa-select { height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-d-2); background: var(--ink-2); color: var(--d1); font: 500 .95rem var(--f-mono); padding: 0 .75rem; }
.sa-wallet-list { display: grid; gap: .5rem; }
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: 0 1.1rem;
  border-radius: var(--r-pill); border: 1px solid var(--paper); background: var(--paper); color: var(--ink);
  font: 600 .92rem/1 var(--f-display); cursor: pointer; transition: transform .15s var(--ease), background-color .2s, opacity .2s;
}
.sa-btn:hover { background: var(--paper-2); }
.sa-btn:active { transform: scale(.98); }
.sa-btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.sa-btn-quiet, .sa-max { background: transparent; color: var(--d1); border-color: var(--line-d-2); }
.sa-btn-quiet:hover, .sa-max:hover { background: var(--ink-3); border-color: var(--d2); }
.sa-connect { width: 100%; justify-content: flex-start; }
.sa-wallet-icon { width: 20px; height: 20px; border-radius: 4px; }
.sa-account-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .75rem; border-radius: var(--r-card); background: var(--ink-2); border: 1px solid var(--line-d); }
.sa-account-row .sa-btn { margin-left: auto; min-height: 36px; padding: 0 .9rem; font-size: .82rem; }
.sa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d1); box-shadow: 0 0 0 3px var(--line-d); }
.sa-wallet-name { font-size: .82rem; color: var(--d3); }
.sa-network:not([hidden]) { display: grid; gap: .7rem; padding: .9rem 1rem; border-radius: var(--r-card); border: 1px dashed var(--d2); background: var(--ink-2); }
.sa-warn { color: var(--d1); }
.sa-warn::before { content: "\00d7  "; font-family: var(--f-mono); }

.sa-position { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-d); }
.sa-pos-row { min-width: 0; padding: .7rem .75rem .7rem 0; border-bottom: 1px solid var(--line-d); }
.sa-pos-row:nth-child(2n) { padding-left: .75rem; border-left: 1px solid var(--line-d); }
.sa-pos-row dt { font-stretch: 125%; font-weight: 600; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--d3); }
.sa-pos-row dd { margin: .3rem 0 0; font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--d1); overflow-wrap: anywhere; }
.sa-num { font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.sa-pos-row .sa-sym { color: var(--d3); }
.sa-pos-row dd[data-app-pos="shareValueInAssets"] .sa-num { font-size: 1.12rem; }

.sa-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border-radius: var(--r-pill); border: 1px solid var(--line-d-2); background: var(--ink-2); }
.sa-tab { min-height: 42px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--d2); font: 600 .92rem var(--f-display); cursor: pointer; transition: background-color .2s, color .2s; }
.sa-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.sa-tab[disabled] { cursor: not-allowed; opacity: .55; }

.sa-form { display: grid; gap: .6rem; }
.sa-form .sa-label { margin-top: .2rem; }
.sa-amount-row { display: flex; align-items: center; gap: .5rem; min-height: 64px; padding: .4rem .5rem .4rem 1rem; border-radius: var(--r-card); border: 1px solid var(--line-d-2); background: var(--ink-2); transition: border-color .2s, box-shadow .2s; }
.sa-amount-row:focus-within { border-color: var(--d1); box-shadow: 0 0 0 3px var(--line-d); }
.sa-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--d1); font: 500 1.45rem var(--f-mono); font-variant-numeric: tabular-nums; padding: 0; }
.sa-input::placeholder { color: var(--d3); }
.sa-input:disabled { cursor: not-allowed; }
.sa-unit { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--d2); white-space: nowrap; }
.sa-max { min-height: 36px; padding: 0 .8rem; font-stretch: 125%; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.sa-hint, .sa-quote { font-family: var(--f-mono); font-size: var(--fs-mono-s); line-height: 1.5; color: var(--d3); overflow-wrap: anywhere; }
.sa-hint:empty, .sa-quote:empty, .sa-msg:empty { display: none; }
.sa-quote { color: var(--d1); padding: .6rem .75rem; border-radius: var(--r-sm); background: var(--ink-2); border-left: 2px solid var(--d2); }
.sa-quote[data-kind="error"] { border-left-style: dashed; }
.sa-slippage { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sa-slippage legend { float: left; margin-right: .5rem; padding: 0; font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--d3); line-height: 44px; }
.sa-slip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: var(--r-pill); border: 1px solid var(--line-d-2); font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--d2); cursor: pointer; }
.sa-slip input { position: absolute; opacity: 0; pointer-events: none; }
.sa-slip:has(input:checked) { background: var(--d1); border-color: var(--d1); color: var(--ink); }
.sa-slip:has(input:focus-visible) { outline: 2px solid var(--d1); outline-offset: 2px; }
.sa-slip:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.sa-submit { width: 100%; min-height: 54px; font-size: 1rem; margin-top: .2rem; }
.sa[data-disabled="true"] .sa-submit { background: transparent; color: var(--d2); border: 1px dashed var(--line-d-2); opacity: 1; }
.sa[data-disabled="true"] .sa-amount-row, .sa[data-disabled="true"] .sa-tabs, .sa[data-disabled="true"] .sa-slippage { opacity: .5; }
.sa[data-busy="true"] .sa-submit { opacity: .7; }

.sa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: sastep; }
.sa-steps:empty { display: none; }
.sa-step { counter-increment: sastep; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: .7rem; align-items: center; font-size: .88rem; color: var(--d2); overflow-wrap: anywhere; }
.sa-step::before { content: counter(sastep); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-d-2); font-family: var(--f-mono); font-size: .7rem; }
.sa-step .sa-hash { grid-column: 2; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--d3); }
.sa-step[data-state="wallet"], .sa-step[data-state="pending"], .sa-step[data-state="checking"] { color: var(--d1); }
.sa-step[data-state="wallet"]::before, .sa-step[data-state="pending"]::before, .sa-step[data-state="checking"]::before { border-color: var(--d1); border-top-color: transparent; animation: ap-spin 1.1s linear infinite; }
.sa-step[data-state="confirmed"], .sa-step[data-state="done"] { color: var(--d1); }
.sa-step[data-state="confirmed"]::before, .sa-step[data-state="done"]::before { content: "\2713"; background: var(--d1); border-color: var(--d1); color: var(--ink); }
.sa-step[data-state="failed"], .sa-step[data-state="error"] { color: var(--d1); }
.sa-step[data-state="failed"]::before, .sa-step[data-state="error"]::before { content: "\00d7"; border-style: dashed; border-color: var(--d1); }
.sa-step[data-state="unknown"]::before { content: "?"; border-style: dashed; }
@keyframes ap-spin { to { transform: rotate(360deg); } }

.sa-msg { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border-radius: var(--r-card); font-size: .92rem; line-height: 1.5; color: var(--d1); background: var(--ink-2); border: 1px solid var(--line-d-2); overflow-wrap: anywhere; }
.sa-msg::before { content: ""; flex: none; margin-top: .45em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.sa-msg[data-kind="ok"]::before { background: currentColor; }
.sa-msg[data-kind="ok"] { border-color: var(--d2); }
.sa-msg[data-kind="error"] { border-style: dashed; border-color: var(--d1); }
.sa-msg[data-kind="error"]::before { border-radius: 1px; transform: rotate(45deg); background: currentColor; }
.sa-msg a, .sa-msg code { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--d1); }

/* ---- launch checklist ---- */
.ap-check__src { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.ap-check__rail { position: relative; }
.ap-check__rail::before { /* the rail behind the three steps: fills as steps are done (config-derived --ap-done) */
  content: ""; position: absolute; left: 14.5px; top: 2.2rem; bottom: 2.6rem; width: 1px; background: var(--line-2);
}
.ap-checklist li { position: relative; }
.ap-checklist li::before { background: var(--paper); position: relative; z-index: 1; }
.ap-ck-what { grid-column: 2; font-size: .84rem; line-height: 1.45; color: var(--fg-2); }
.ap-checklist li[data-state="todo"] .checklist__v { font-family: var(--f-mono); }
.ap-open { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .85rem; align-items: center; padding-top: .9rem; border-top: 1px solid var(--rule); }
.ap-open i { width: 30px; height: 30px; border-radius: 8px; border: 1.3px dashed var(--fg-3); position: relative; z-index: 1; background: var(--paper); display: grid; place-items: center; }
.ap-open i::after { content: ""; width: 10px; height: 12px; border: 1.5px solid var(--fg-2); border-radius: 2px; border-top-width: 5px; }
.ap-open[data-state="done"] i { border-style: solid; border-color: var(--ink); background: var(--ink); }
.ap-open[data-state="done"] i::after { border-color: var(--paper); }
.ap-open > span { display: grid; }
.ap-open b { font-weight: 650; font-size: 1rem; }
.ap-open__v { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg-3); }
.js .ap-check.is-in .ap-checklist li[data-state="todo"]::before { animation: ap-wait 2.4s var(--ease) infinite; animation-delay: calc(var(--n, 0) * .3s); }
.ap-checklist li:nth-child(2) { --n: 1; } .ap-checklist li:nth-child(3) { --n: 2; }
@keyframes ap-wait { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.08); } }

/* ---- the share rate + anatomy (ink panel) ---- */
.ap-rate { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); padding: clamp(1.25rem, 2.6vw, 1.9rem); align-items: start; }
.ap-rate__main { min-width: 0; }
.ap-rate .rate-value { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.ap-rate__formula { grid-column: 1 / -1; }
.ap-anat { margin: 0; min-width: 0; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-card); border: 1px solid var(--line-d); background: var(--ink-2); }
.ap-anat__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.ap-anat__k { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--d2); }
.ap-anat .illus-chip { background: var(--ink-2); }
.ap-anat__svg { display: block; width: 100%; height: auto; margin-top: .6rem; overflow: visible; }
.ap-anat__grid { stroke: var(--line-d-2); stroke-width: 1; stroke-dasharray: 3 5; }
.ap-anat__ev { stroke: var(--line-d-2); stroke-width: 1; }
.rate-anat-area { fill: var(--rate-12); }
.ap-anat__line { fill: none; stroke: var(--d1); stroke-width: 2.2; stroke-linejoin: round; }
.rate-anat-line { stroke: var(--rate); stroke-dasharray: 600; stroke-dashoffset: 600; }
.is-in .rate-anat-line, .ap-rate.is-in .rate-anat-line { animation: ap-draw-line 2.6s var(--ease) .3s forwards; }
@keyframes ap-draw-line { to { stroke-dashoffset: 0; } }
.ap-anat__dot { fill: var(--ink-2); stroke: var(--d1); stroke-width: 1.6; }
.ap-anat__t { fill: var(--d2); font-family: var(--f-mono); font-size: 12px; }
.ap-anat__t--end { text-anchor: end; }
.ap-anat__legend { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .86rem; line-height: 1.45; color: var(--d2); }
.ap-anat__legend b { color: var(--d1); font-weight: 600; }

/* ---- the harvest ledger ---- */
.ap-ledger { padding: clamp(1.1rem, 2.4vw, 1.6rem); }
.ap-ledger__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem 2rem; align-items: end; }
.ap-ledger__h { margin-top: .4rem; font-stretch: 80%; font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.05; letter-spacing: -.015em; }
.ap-ledger__sig { display: grid; gap: .35rem; justify-items: end; text-align: right; }
.ap-ledger__sig code { font-size: var(--fs-mono-xs); color: var(--fg); overflow-wrap: anywhere; }
.ap-ledger__sig span { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.ap-ledger__bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-top: 1.2rem; padding-bottom: 1.2rem; position: relative; border-bottom: 1px solid var(--rule-2); }
.ap-ledger__bars:empty { display: none; }
.rate-ledger-bar { flex: 0 1 34px; min-width: 8px; height: var(--h); background: var(--rate); border: 1px solid var(--ink); border-radius: 3px 3px 0 0; transform-origin: 50% 100%; animation: ap-bar-in .7s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes ap-bar-in { from { transform: scaleY(0); } }
.ap-ledger__bars-k { position: absolute; left: 0; bottom: 0; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.ap-ledger__table { margin-top: .6rem; }
.ap-ledger__table td { white-space: nowrap; }
.ap-ledger__blk { display: block; font-family: var(--f-mono); font-size: var(--fs-mono-xs); font-weight: 400; color: var(--fg-3); }
.ap-ledger__gain { color: var(--fg) !important; font-weight: 600; }
.ap-ghost td { padding: .55rem 0; }
.ap-ghost i { display: block; height: 26px; border-radius: 6px; border: 1px dashed var(--rule-2); background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--line) 7px 8px); }
.ap-ghost + .ap-ghost i { opacity: .5; }
.ap-ledger__note { margin-top: .9rem; font-size: .9rem; color: var(--fg-2); max-width: 70ch; }

/* ------------------------------------------------------------ how to use one */
.ap-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ap-step { display: flex; flex-direction: column; background: var(--paper); }
.ap-step .h3 { margin-top: .6rem; font-size: 1.2rem; }
:where(.ap-step) p { font-size: .92rem; }
.ap-step__top { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; }
.ap-step__n { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg-3); }
.ap-step__params { font-family: var(--f-mono); font-size: var(--fs-mono-xs) !important; line-height: 1.5; color: var(--fg-3) !important; }
.ap-step .sig { margin-top: auto; padding-top: 1rem; }
.ap-step .sig code { font-size: var(--fs-mono-xs); overflow-wrap: anywhere; }

/* mini diagrams (engraved line work, moving only where the motion is the point) */
.ap-mini { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--rule); overflow: visible; }
.ap-mini text { font-family: var(--f-mono); font-size: 10.5px; fill: var(--fg-2); }
.ap-mini .am-num { font-size: 12px; font-weight: 600; fill: var(--fg); }
/* the longest caption (/vault step 02): in Martian Mono it ran 30 units past the 260-unit drawing */
.ap-mini .am-cap--long { font-size: 9px; letter-spacing: -.02em; }
.am-ln { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.am-ln-2 { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .6; }
.am-fill { fill: var(--paper); }
.am-dash { stroke-dasharray: 4 4; animation: ap-dash 1.6s linear infinite; }
@keyframes ap-dash { to { stroke-dashoffset: -16; } }
.am-ink { fill: var(--ink); }
.am-travel--a { animation: am-travel-a 3.2s var(--ease-io) infinite; }
@keyframes am-travel-a { 0% { cx: 104px; cy: 62px; opacity: 0; } 10% { opacity: 1; } 45% { cx: 176px; cy: 50px; opacity: 1; } 55% { cx: 176px; cy: 74px; } 90% { cx: 104px; cy: 62px; opacity: 1; } 100% { cx: 104px; cy: 62px; opacity: 0; } }
.am-travel--b { animation: am-travel-b 2.6s var(--ease-io) infinite; }
@keyframes am-travel-b { 0% { cx: 104px; cy: 57px; opacity: 0; } 15% { opacity: 1; } 85% { cx: 166px; cy: 57px; opacity: 1; } 100% { cx: 166px; cy: 57px; opacity: 0; } }
.am-bar { fill: var(--ink); opacity: .85; }
.am-grow { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.is-in .am-grow { animation: am-grow 1.4s var(--ease) .3s forwards; }
@keyframes am-grow { to { transform: scaleX(1); } }
.am-hatch-box { fill: var(--line); stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.am-drop { animation: am-drop 3s var(--ease-io) infinite; }
@keyframes am-drop { 0%, 15% { transform: translateY(-4px); } 50%, 85% { transform: translateY(14px); } 100% { transform: translateY(-4px); } }
.ap-mini.is-paused *, .ap-mini.is-paused { animation-play-state: paused !important; }

/* the order the panel checks things in: each link ticks in turn */
.ap-pre { margin-top: 1.25rem; padding: clamp(1.1rem, 2.4vw, 1.5rem); border-radius: var(--r-panel); background: var(--paper); border: 1px solid var(--rule-2); display: grid; gap: 1rem; }
.ap-pre__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .6rem 1.25rem; align-items: start; }
.ap-pre__k { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding-top: .45rem; }
.ap-pre__chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem .3rem; }
.ap-pre__chain li { display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .7rem 0 .5rem; border-radius: var(--r-pill); border: 1px solid var(--rule-2); background: var(--paper-2); font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-2); white-space: nowrap; }
.ap-pre__chain li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.2px dashed var(--fg-3); display: grid; place-items: center; font-size: 9px; line-height: 1; transition: background-color .3s, border-color .3s, color .3s; transition-delay: calc(var(--i) * 140ms + 200ms); }
.ap-pre__chain li:not(:last-child)::after { content: "\2192"; margin-left: .35rem; color: var(--fg-3); }
.ap-pre.is-in .ap-pre__chain li::before { content: "\2713"; border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.ap-pre.is-in .ap-pre__chain li { color: var(--fg); transition: color .3s; transition-delay: calc(var(--i) * 140ms + 200ms); }
.ap-pre__note { font-size: .9rem; color: var(--fg-2); padding-top: .9rem; border-top: 1px solid var(--rule); }

.ap-more { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ap-more__col p { margin-top: .7rem; color: var(--fg-2); font-size: .98rem; }
.ap-more__col a { font-weight: 600; }
.ap-errs { margin-top: 1rem; }
.ap-errs td { white-space: normal; }
.ap-errs td:first-child { font-family: var(--f-mono); font-size: var(--fs-mono-xs); font-weight: 500; white-space: nowrap; }
.ap-errs td:nth-child(2) { white-space: nowrap; }
.ap-errs td:last-child { min-width: 16rem; font-family: var(--f-display); font-size: .86rem; color: var(--fg); }

/* ------------------------------------------------------------ harvest liquidity */
.ap-liq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1rem; align-items: stretch; }
.ap-depth { margin: 0; display: flex; flex-direction: column; }
.ap-depth__when { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.ap-depth__rows { display: grid; gap: 1.1rem; margin-top: 1.3rem; }
/* the tier column is 3.6rem in Archivo at 62%; without the webfont there is no 62% face and "0.05%"
   is 88 px: it ran 14 px into its values at every width. The column grows to the tier instead */
.ap-depth__row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; align-items: center; }
.ap-depth__tier { grid-row: span 2; min-width: 3.6rem; font-stretch: 62%; font-weight: 880; font-size: 1.6rem; line-height: 1; }
.ap-depth__bar { display: block; height: 16px; border-radius: 4px; background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; }
.ap-depth__bar i { display: block; height: 100%; width: var(--w); background: repeating-linear-gradient(-45deg, var(--ink) 0 3px, rgba(11, 13, 12, .78) 3px 6px); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 120ms + 150ms); }
.ap-depth.is-in .ap-depth__bar i { transform: scaleX(1); }
.ap-depth__v { grid-column: 2; font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg); }
.ap-depth__a { grid-column: 2; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.ap-depth__a a { color: var(--fg-2); }
.ap-depth__a b { font-weight: 600; color: var(--fg); }
.ap-depth__note { margin-top: auto !important; padding-top: 1.1rem; font-size: .88rem !important; }

.ap-floor { margin: 0; padding: clamp(1.1rem, 2.4vw, 1.5rem); display: flex; flex-direction: column; }
.ap-floor__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.ap-floor__k { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--d1); }
.ap-floor__tag { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--d3); }
.ap-floor__svg { display: block; width: 100%; height: auto; margin-top: 1rem; overflow: visible; }
.ap-floor__axis, .ap-floor__tick { stroke: var(--line-d-2); stroke-width: 1; }
/* 3 units nearer their ticks: the chart scales up to 1.9x on one column (740-1020) and the numbers
   reached past the card's left edge there (1.2 px at 1020, webfont) */
.ap-floor__n { fill: var(--d2); font-family: var(--f-mono); font-size: 11px; transform: translateX(3px); }
.ap-floor__t { fill: var(--d2); font-family: var(--f-mono); font-size: 11.5px; }
.ap-floor__t--hi { fill: var(--d1); }
.ap-floor__quote { stroke: var(--d2); stroke-width: 1.4; stroke-dasharray: 5 5; }
.ap-floor__band { fill: rgba(244, 239, 228, .05); }
.ap-floor__line { stroke: var(--d1); stroke-width: 2.4; }
.ap-floor__dump { stroke: var(--d1); stroke-width: 1.6; stroke-dasharray: 2 4; }
.ap-floor__mark { fill: var(--ink); stroke: var(--d1); stroke-width: 1.8; }
.ap-floor__drop { transform: translateY(-166px); opacity: 0; }
.ap-floor__late, .ap-floor__stamp { opacity: 0; }
.ap-floor__stamp rect { fill: var(--ink); stroke: var(--d1); stroke-width: 1.4; stroke-dasharray: 4 3; }
.ap-floor__stamp text { fill: var(--d1); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.ap-floor.is-in .ap-floor__drop { animation: ap-floor-drop 1.4s var(--ease) .5s forwards; }
.ap-floor.is-in .ap-floor__late { animation: ap-fade 1s var(--ease) 1.6s forwards; }
.ap-floor.is-in .ap-floor__stamp { animation: ap-stamp .6s var(--ease) 2.1s forwards; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ap-floor-drop { 0% { transform: translateY(-166px); opacity: 0; } 20% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ap-fade { to { opacity: 1; } }
@keyframes ap-stamp { 0% { opacity: 0; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
.ap-floor__cap { margin-top: 1rem !important; color: var(--d2) !important; font-size: .9rem !important; }
.ap-floor .prov { color: var(--d3); }

.ap-pools { margin-top: 1rem; padding: clamp(1.1rem, 2vw, 1.4rem); border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--paper-2); }
.ap-pools .ledger { margin-top: .6rem; }

/* ------------------------------------------------------------ before you deposit (ink) */
.ap-risk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.ap-risk .h2 { color: var(--d1); }
.ap-pause { margin: 2rem 0 0; padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--r-card); background: var(--ink-2); border: 1px solid var(--line-d); }
.ap-pause__k { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--d2); }
.ap-pause__track { position: relative; display: grid; grid-template-columns: .8fr 1fr 1fr; height: 44px; margin-top: 1rem; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-d-2); }
.ap-pause__seg { display: flex; align-items: center; padding: 0 .6rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--d2); min-width: 0; }
/* the segment labels wrap inside the 44 px track instead of ending in an ellipsis */
.ap-pause__seg i { font-style: normal; }
/* "pause · 72 h" keeps together: a wrap never leaves "·" opening a line ("no new pause" over "· 72 h") */
.ap-keep { white-space: nowrap; }
.ap-pause__seg--paused { background: repeating-linear-gradient(-45deg, rgba(244, 239, 228, .16) 0 6px, transparent 6px 11px); color: var(--d1); border-inline: 1px solid var(--line-d-2); }
.ap-pause__seg--cool { background: rgba(244, 239, 228, .05); }
.ap-pause__cursor { position: absolute; top: -1px; bottom: -1px; left: 0; width: 2px; background: var(--d1); animation: ap-cursor 9s linear infinite; }

.ap-pause.is-paused .ap-pause__cursor { animation-play-state: paused; }
@keyframes ap-cursor { from { left: 0; } to { left: calc(100% - 2px); } }
.ap-pause__lbls { display: grid; grid-template-columns: .8fr 1fr 1fr; margin-top: .45rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--d3); }
.ap-pause__lbls span:not(:first-child) { padding-left: .4rem; }
.ap-pause__note { margin-top: .9rem; font-size: .88rem; color: var(--d2); }
.ap-risk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ap-risk__list li { position: relative; padding: 1rem 0 1rem 2rem; border-bottom: 1px solid var(--line-d); color: var(--d2); font-size: .98rem; line-height: 1.55; }
.ap-risk__list li:first-child { border-top: 1px solid var(--line-d); }
.ap-risk__list li::before { content: "\00d7"; position: absolute; left: 0; top: 1rem; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-d-2); font-family: var(--f-mono); font-size: .75rem; color: var(--d1); line-height: 1; }
.ap-risk__list b { color: var(--d1); font-weight: 600; }
.ap-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.ap-links .card { background: var(--ink-2); border-color: var(--line-d); }
.ap-links .card:hover { border-color: var(--line-d-2); }

/* generic keyframe for the "no vault" planned line */
@keyframes ap-draw { from { stroke-dashoffset: 400; opacity: 0; } to { stroke-dashoffset: 0; opacity: .55; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-side { order: -1; }
  .ap-rate { grid-template-columns: minmax(0, 1fr); }
  .ap-liq, .ap-risk__grid, .ap-more { grid-template-columns: minmax(0, 1fr); }
  .ap-head__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .ap-board__viz { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ap-vest { width: 100%; }
  .ap-dial { width: 200px; }
  .ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-stat:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .ap-stat:nth-child(2n) { padding-left: .9rem; border-left: 1px solid var(--rule); }
  .ap-board__foot { grid-template-columns: minmax(0, 1fr); }
  .ap-board__tools { align-items: flex-start; }
  .ap-board__at { text-align: left; }
  .ap-ledger__head { grid-template-columns: minmax(0, 1fr); }
  .ap-ledger__sig { justify-items: start; text-align: left; }
  .ap-steps { grid-template-columns: minmax(0, 1fr); }
  .ap-pre__row { grid-template-columns: minmax(0, 1fr); }
  .ap-links { grid-template-columns: minmax(0, 1fr); }
  .ap-list__rack { grid-template-columns: 84px minmax(0, 1fr); gap: .9rem; }
  .ap-rack { width: 84px; }
  .ap-list__rack .vaults-ghost { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .35rem; }
  .ap-vest__axis { font-size: .6875rem; }
  .ap-vest__axis span:nth-child(2) { display: none; }
  .ap-pause__seg { font-size: .6875rem; padding: 0 .4rem; }
}
@media (max-width: 420px) {
  .ap-promises dt { font-size: 1.55rem; }
  .ap-path li span:last-child { font-size: .72rem; }
  .sa-position { grid-template-columns: minmax(0, 1fr); }
  .sa-pos-row:nth-child(2n) { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------ reduced motion: final state, no loops */
@media (prefers-reduced-motion: reduce) {
  .ap-dial__turn, .am-dash, .am-travel--a, .am-travel--b, .am-drop, .ap-pause__cursor,
  .sa-step::before, .ap-checklist li::before, .rate-ledger-bar { animation: none !important; }
  .am-travel--a, .am-travel--b { opacity: 0; }
  .am-grow { transform: none; }
  .rate-anat-line { stroke-dashoffset: 0; }
  .ap-floor__drop { transform: none; opacity: 1; }
  .ap-floor__late, .ap-floor__stamp { opacity: 1; }
  .ap-depth__bar i { transform: none; transition: none; }
  .ap-pre__chain li::before, .ap-pre__chain li { transition: none; }
}

/* ------------------------------------------------------------ additions (pass 2) */
.ap-list .vaults-ghost { grid-template-columns: 1fr 1fr 1.1fr .7fr 1.1fr 1.1fr; font-size: .6875rem; }
.ap-dial__cap .illus-chip b, .ap-anat .illus-chip b { font-size: .6875rem; }
.sa-max { font-size: .6875rem; }
.live-strip .lcell__k { font-size: .6875rem; }

.ap-rate__facts { margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-d); }
.ap-rate__facts div { min-width: 0; padding: .95rem .9rem 0 0; }
.ap-rate__facts div + div { padding-left: .9rem; border-left: 1px solid var(--line-d); }
.ap-rate__facts dt { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--d3); }
.ap-rate__facts dd { margin: .4rem 0 0; font-family: var(--f-mono); font-size: .95rem; color: var(--d1); display: grid; gap: .3rem; }
.ap-rate__facts dd span { font-size: var(--fs-mono-xs); line-height: 1.45; color: var(--d3); }

.ap-dec { margin: 1.4rem 0 0; padding: 1.1rem 1.2rem; border-radius: var(--r-card); border: 1px solid var(--rule-2); background: var(--paper); display: grid; gap: .55rem; }
.ap-dec .label { margin-bottom: .2rem; }
.ap-dec__row { display: grid; grid-template-columns: 4.2rem minmax(max-content, 1fr) auto; gap: .8rem; align-items: center; }
.ap-dec__k { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.ap-dec__n { font-family: var(--f-mono); font-size: 1.15rem; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.ap-dec__n i { font-style: normal; }
.ap-dec__n b { font-weight: 500; background: var(--ink); color: var(--paper); border-radius: 2px; padding: 0 1px; margin-left: 1px; }
.ap-dec__row--no .ap-dec__n { color: var(--fg-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.ap-dec__s { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-2); text-align: right; }
.ap-dec__note { margin-top: .4rem !important; padding-top: .7rem; border-top: 1px solid var(--rule); font-size: .88rem !important; }

.ap-links .proof-link { align-items: flex-start; }
/* phones: two-line segment labels keep inside the track */
@media (max-width: 640px) {
  .ap-pause__seg i { line-height: 1.15; }
}
/* small phones: "pause · 72 h" keeps together (see .ap-keep) and is 92 px in the webfont; the cool
   segment makes room for it with a slimmer "open" segment and padding */
@media (max-width: 400px) {
  .ap-pause { padding-inline: .9rem; }
  .ap-pause__track, .ap-pause__lbls { grid-template-columns: .5fr 1fr 1fr; }
  .ap-pause__seg { padding: 0 .25rem; }
}
/* phones: the 9-decimal share amount keeps to its column, nowrap, never cut */
@media (max-width: 420px) {
  .ap-dec__n { letter-spacing: .02em; }
}
/* 360 px and below: value + label + note no longer fit one row beside "1.000000000" in Martian Mono
   (the row's max-content track widened the card's grid to 278 px in a 269 px box and the labels and
   note ran 10 px across its right border at 320): the label goes under its value */
@media (max-width: 360px) {
  .ap-dec__row { grid-template-columns: 4.2rem minmax(min-content, 1fr); row-gap: .15rem; }
  .ap-dec__s { grid-column: 2; text-align: left; }
}
@media (max-width: 760px) {
  .ap-pre__chain li { height: auto; min-height: 30px; padding-block: .3rem; white-space: normal; }
  .ap-rate__facts { grid-template-columns: minmax(0, 1fr); }
  .ap-rate__facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-d); margin-top: .9rem; }
}

/* ====================================================================== THE VAULT LIST (vault.html §1)
   The page opens on the list: title, two sentences, three counts, then the table. Numbers are mono
   and right-aligned so the columns line up. On paper green is a fill behind ink, never ink itself:
   the moving digits of a releasing rate sit on a green wash, the "releasing" pill is green with ink. */
.vl { padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2.5rem, 5vw, 4rem); }
.vl > .container { min-width: 0; }
.vl-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: 1.5rem; }
.vl-h1 { font-stretch: 76%; font-weight: 820; font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: .92; letter-spacing: -.025em; margin-top: .35rem; }
.vl-lede { max-width: 54ch; margin-top: .9rem; color: var(--fg-2); font-size: var(--fs-body); text-wrap: pretty; }
.vl .ap-launch { margin-top: 1rem; }
.vl-stats { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); margin: 0; }
.vl-stats div { display: grid; gap: .3rem; }
.vl-stats dt { font-family: var(--f-mono); font-size: var(--fs-mono-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.vl-stats dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; color: var(--fg); }

.vl-card { min-width: 0; max-width: 100%; background: #FBF9F4; border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.vl-card .scroller { overflow-x: auto; position: relative; } /* keeps the sr-only th label inside the scroll box */
.vl-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.vl-table th { font-family: var(--f-mono); font-size: var(--fs-mono-xs); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); text-align: right; padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.vl-table th:first-child, .vl-table td:first-child { text-align: left; }
.vl-table td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: middle; }
.vl-table tbody tr:last-child td { border-bottom: 0; }
.vl-row { transition: background-color var(--dur-fast) var(--ease); }
.vl-row:hover { background: rgba(11, 13, 12, .025); }
.vl-id { display: flex; align-items: center; gap: .8rem; }
.vl-id b { font-size: 1rem; font-weight: 700; letter-spacing: -.005em; }
.vl-rate-ico { flex: none; width: 2.1rem; height: 2.1rem; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--ink); color: var(--rate); font-family: var(--f-mono); font-size: var(--fs-mono-xs); font-weight: 600; text-transform: uppercase; }
.vl-row--empty .vl-rate-ico { background: transparent; color: var(--fg-3); border: 1px dashed var(--rule-2); }
.vl-num { display: block; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-mono); font-weight: 500; letter-spacing: -.02em; color: var(--fg); white-space: nowrap; }
.vl-sub { display: block; margin-top: .2rem; font-size: var(--fs-mono-xs); color: var(--fg-3); white-space: nowrap; }
.vl-sub a { color: inherit; }
.vl-rate { font-size: .9375rem; }
.vl-rate-tail { background: var(--rate-40); border-radius: 3px; padding-inline: 1px; }
.vl-pill { display: inline-block; font-family: var(--f-mono); font-size: var(--fs-mono-xs); padding: .3rem .55rem; border-radius: var(--r-xs); background: var(--paper-2); color: var(--fg-2); white-space: nowrap; }
.vl-rate-pill { background: var(--rate); color: var(--ink); }
.vl-up { position: relative; }
.vl-go { width: 2.5rem; }
.vl-go a { color: var(--fg-3); text-decoration: none; font-size: 1.05rem; padding: .3rem; }
.vl-go a:hover, .vl-go a:focus-visible { color: var(--fg); }
.vl-empty { padding: .9rem max(1.1rem, calc(100% - 68ch)) 1.1rem 1.1rem; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--fg-2); }
.vl-src { margin-top: .9rem; max-width: 92ch; font-size: var(--fs-small); color: var(--fg-3); }
.vl-src code { font-size: var(--fs-mono-xs); color: var(--fg-2); }

/* Below 600px each vault row becomes a stacked card: same cells, same order, label/value pairs. */
@media (max-width: 599px) {
  .vl-table { min-width: 0; }
  .vl-table, .vl-table tbody, .vl-table tr, .vl-table td { display: block; }
  .vl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vl-table tbody tr { padding: .35rem 1.1rem .5rem; border-bottom: 1px solid var(--rule); }
  .vl-table tbody tr:last-child { border-bottom: 0; }
  .vl-table td, .vl-table tbody tr:last-child td { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); text-align: right; }
  .vl-table td:last-child, .vl-table tbody tr:last-child td:last-child { border-bottom: 0; }
  .vl-table td[data-label]::before { content: attr(data-label); flex: none; font-family: var(--f-mono); font-size: var(--fs-mono-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); text-align: left; grid-row: 1 / span 2; }
  .vl-table td > :not(.vl-id) { grid-column: 2; justify-self: end; }
  .vl-table td:first-child { padding-top: .8rem; }
  .vl-table td:first-child { display: block; }
  .vl-table td:first-child::before { display: none; }
  .vl-table td.vl-go { width: auto; display: block; text-align: right; }
  .vl-table td[colspan] { display: block; text-align: left; }
}

@media (max-width: 760px) {
  .vl-top { grid-template-columns: 1fr; }
  .vl-stats { justify-content: space-between; }
}