/* ── PaidUp · app · the instrument (the design system) ───────────────────
   Dark, still, precise, editorial. Left-aligned and asymmetric. Character
   from structure: hairlines, numbered sections, ruled lists, figures. One
   gold CTA per view. Radii on the ascending scale (cards 16 / controls 12 /
   chips 9, via tokens); the elevation ladder + AA ink/text pairs live in the
   evolved block at the foot of this file. Tokens only, no raw hex. */

/* the design system AA completion (product-local; PROMOTE to canonical tokens.css).
   --ember-text is the ember sibling of --red-text / --trust-text: ember as
   small text on the warm-paper LIGHT ground is only 4.37:1 (raw --ember),
   so light mode darkens it to clear AA; dark mode keeps --ember (passes on
   the dark ground). Mirrors the same definition in the funnel inline style. */
:root { --ember-text: var(--ember); }
@media (prefers-color-scheme: light) { :root { --ember-text: #7A5D14; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--platinum);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ember { color: var(--ember); }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--plat-dim); }
.faint { color: var(--plat-faint); }
.lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--plat-faint); }
.ink-ember { background: var(--grad-ember); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── header ── */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: 16px; height: 56px; }
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand-mark { width: 24px; height: 24px; flex: 0 0 auto; align-self: center; display: block; }
.brand .word { font-family: var(--disp); font-weight: 600; font-size: 17px; letter-spacing: .05em; color: var(--platinum); }
.brand .sub { color: var(--plat-dim); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
/* the 3-view segmented control · the header's only chrome besides the brand.
   iOS-style: a recessed track, one lit segment, ember reserved for the active
   view. This is where the operator switches jobs (book / aging / new). */
.tabs.segmented {
  display: flex; gap: 3px; margin-left: auto; padding: 3px;
  background: var(--obsidian); border: 1px solid var(--line); border-radius: var(--r-control);
}
.tab {
  font-family: var(--body); font-weight: 600; font-size: 12.5px; letter-spacing: 0;
  color: var(--plat-dim); padding: 7px 14px; border: 0;
  border-radius: var(--r-inner); cursor: pointer; background: none;
  transition: color var(--m-base) var(--ease), background var(--m-base) var(--ease), box-shadow var(--m-base) var(--ease);
}
.tab:hover { color: var(--platinum); }
.tab.on { color: var(--platinum); background: var(--graphite-3); box-shadow: var(--e1); }
.tab:focus-visible { outline: none; box-shadow: var(--ring-ember); }

/* mode badge · demoted out of the header into the footer, next to Reset */
.mode-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--plat-faint);
  border: 1px solid var(--line); border-radius: var(--r-chip); padding: 3px 8px;
}
.mode-badge b { color: var(--plat-dim); font-weight: 500; }

/* narrow widths: brand on row one, the segmented control scrolls on row two */
@media (max-width: 619px) {
  .bar { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 0; row-gap: 8px; }
  .tabs.segmented { order: 3; width: 100%; margin-left: 0; }
  .tab { flex: 1 1 0; text-align: center; }
  /* tight 2-up cards: keep the big figures from clipping the cell edge */
  .spec-strip .cell, .aging-strip .cell { padding: 14px 13px; }
}

/* ── the one gold CTA ── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad-ember); color: var(--ember-ink);
  font-weight: 600; padding: 12px 20px; border-radius: var(--r-control);
  border: 1px solid var(--ember-deep); cursor: pointer; font-size: 14.5px;
  transition: filter var(--m-base) var(--ease);
}
.btn-gold:hover { filter: brightness(1.06); }
.btn-gold:disabled { opacity: .5; cursor: not-allowed; filter: none; }
/* secondary · ruled, never gold */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--graphite-2); color: var(--platinum);
  border: 1px solid var(--line-hi); border-radius: var(--r-control);
  padding: 10px 16px; cursor: pointer; font-size: 13.5px;
  transition: border-color var(--m-base) var(--ease);
}
.btn:hover { border-color: var(--ember-deep); }
.btn.sm { padding: 7px 12px; font-size: 12.5px; }
.btn-ghost { background: none; border: none; color: var(--plat-dim); cursor: pointer; font-size: 13px; padding: 6px 0; }
.btn-ghost:hover { color: var(--platinum); }
.tlink { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--plat-dim); cursor: pointer; }
.tlink:hover { color: var(--platinum); }
.tlink .arr { color: var(--ember); }

/* ── status chips (functional color, never decorative) ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line-hi); border-radius: var(--r-chip); padding: 3px 7px; color: var(--plat-dim);
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* evolved: color-as-text on its own tint; the AA -text tokens for the two
   pairs that fail (trust, red); amber + green pass as text already */
.chip.DRAFT { color: var(--plat-faint); }
.chip.SENT { color: var(--trust-text); background: var(--tint-trust); border-color: color-mix(in srgb, var(--trust) 38%, transparent); }
.chip.PARTIAL { color: var(--amber); background: var(--tint-amber); border-color: color-mix(in srgb, var(--amber) 38%, transparent); }
.chip.PAID { color: var(--green); background: var(--tint-green); border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.chip.OVERDUE { color: var(--red-text); background: var(--tint-red); border-color: color-mix(in srgb, var(--red) 38%, transparent); }
.chip.gold { color: var(--ember-text); background: var(--tint-ember); border-color: var(--ember-deep); }
.chip.info { color: var(--trust-text); background: var(--tint-trust); border-color: color-mix(in srgb, var(--trust) 38%, transparent); }

/* ── next-action banner (no surface is a dead end) ── */
.next {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 2px solid var(--ember);
  border-radius: var(--r-card); background: var(--graphite-2);
  padding: 16px 18px; margin: 22px 0 8px;
}
.next .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--plat-faint); }
.next .v { font-size: 16px; color: var(--platinum); margin-top: 3px; }

/* ── spec strip (summary figures, ruled, asymmetric) ── */
.spec-strip { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-top: 20px; }
.spec-strip .cell { padding: 15px 18px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.spec-strip .cell:nth-child(2n) { border-right: none; }
.spec-strip .cell:nth-last-child(-n+2) { border-bottom: none; }
.spec-strip .v { font-family: var(--disp); font-size: clamp(13.5px, 4vw, 21px); letter-spacing: -.02em; }
.spec-strip .v.over { color: var(--red-text); }
.spec-strip .k { color: var(--plat-dim); font-size: 12px; margin-top: 6px; }

/* ── section headings · calm humanist, hairline rule (no numbered eyebrow) ── */
section.doc { padding: 26px 0 8px; }
.doc-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.doc-title { margin: 0; font-family: var(--body); font-weight: 600; font-size: clamp(17px, 3.4vw, 20px); letter-spacing: -.01em; color: var(--platinum); }
.doc-meta { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--plat-faint); }

/* ── the book summary band · spec figures + the collections verdict, one
   glanceable block above the ledger hero ── */
.summary-band {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite);
  box-shadow: var(--e2), var(--e-inset); overflow: hidden; margin-top: 20px;
}
.summary-band .spec-strip { margin-top: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.summary-band .meter { padding: 14px 18px 16px; border-top: 1px solid var(--line); }

/* ── the book · ruled ledger list ── */
.ledger { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 15px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background var(--m-fast) var(--ease);
}
.row:hover { background: var(--tint-hover); }
.row .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row .who .name { font-size: 15px; color: var(--platinum); font-weight: 500; }
.row .meta { grid-column: 1; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--plat-faint); }
.row .amt { text-align: right; font-family: var(--mono); font-size: 15px; color: var(--platinum); }
.row .amt .bal { display: block; font-size: 11px; color: var(--plat-dim); margin-top: 3px; }
.row .amt .bal.over { color: var(--red-text); }

/* ── invoice detail ── */
.detail-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 6px 0 18px; }
.detail-head h1 { font-family: var(--disp); font-size: clamp(22px, 5vw, 30px); letter-spacing: -.01em; margin: 0 0 8px; }
.detail-head .sub { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--plat-dim); }
.detail-head .right { margin-left: auto; text-align: right; }
.detail-head .right .due { font-family: var(--mono); font-size: 11px; color: var(--plat-faint); margin-top: 8px; }

.panel { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite-2); overflow: hidden; margin-top: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }
.panel-body { padding: 6px 16px 14px; }

.li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--plat-dim); }
.li .label { color: var(--plat-dim); }
.li .label .q { font-family: var(--mono); font-size: 11px; color: var(--plat-faint); margin-left: 8px; }
.li .amt { font-family: var(--mono); color: var(--platinum); }
.li.credit .amt { color: var(--green); }
.li.total { border-bottom: none; padding-top: 14px; }
.li.total .label { color: var(--platinum); font-weight: 600; font-size: 15px; }
.li.total .amt { color: var(--platinum); font-weight: 600; font-size: 16px; }
.li.sub { font-size: 13px; color: var(--plat-faint); }
.li.sub .amt { color: var(--plat-dim); }

/* the pay control · the one gold CTA on the detail view */
.pay { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px; border-top: 1px solid var(--line); }
.pay .field { display: flex; flex-direction: column; gap: 7px; }
.pay label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }
.pay .input-money { display: flex; align-items: center; border: 1px solid var(--line-hi); border-radius: var(--r-control); background: var(--obsidian); overflow: hidden; }
.pay .input-money span { padding: 0 4px 0 13px; color: var(--plat-dim); font-family: var(--mono); }
.pay .input-money input { flex: 1 1 auto; background: none; border: none; color: var(--platinum); font-family: var(--mono); font-size: 18px; padding: 12px 13px 12px 2px; width: 100%; }
.pay .input-money input:focus { outline: none; }
.pay .methods { display: flex; gap: 6px; }
.fchip { font-family: var(--mono); font-size: 11.5px; color: var(--plat-dim); background: var(--obsidian); border: 1px solid var(--line-hi); border-radius: var(--r-chip); padding: 7px 12px; cursor: pointer; }
.fchip.on { color: var(--ember-text); background: var(--tint-ember); border-color: var(--ember-deep); }
.pay .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pay .quick { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── the lender shelf ── */
.shelf-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.shelf-head .t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }
.shelf { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 620px) { .shelf { grid-template-columns: 1fr 1fr; } }
.lender {
  display: block; text-align: left; width: 100%; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 14px 16px; transition: background var(--m-fast) var(--ease);
}
.shelf .lender:nth-child(2n) { border-right: none; }
.lender:hover { background: var(--tint-hover); }
.lender.on { background: var(--tint-ember); }
.lender .lt { display: flex; align-items: center; gap: 8px; }
.lender .lt strong { font-size: 14.5px; color: var(--platinum); }
.lender .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--plat-faint); margin-top: 5px; }
.lender .from { margin-top: 9px; font-family: var(--mono); font-size: 13px; color: var(--plat-dim); }
.lender .from b { color: var(--platinum); font-size: 16px; font-weight: 500; }
.lender.on .from b { color: var(--ember-text); }

.fin-selected { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px; border-top: 1px solid var(--line); }
.fin-selected .mo { font-family: var(--disp); font-size: 26px; color: var(--ember); }
.fin-selected .terms { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.fin-note { padding: 0 16px 14px; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--plat-faint); }
/* ── the financing disclosure · closed by default; line-items + pay is the
   job, the lender shelf reveals only when the operator chooses to finance ── */
.fin-panel { background: var(--graphite-2); }
.fin-summary {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 15px 16px;
  font-family: var(--body); color: var(--platinum);
  transition: background var(--m-base) var(--ease);
}
.fin-summary:hover { background: var(--tint-hover); }
.fin-summary:focus-visible { outline: none; box-shadow: var(--ring-ember); border-radius: var(--r-card); }
.fin-summary .t { font-weight: 600; font-size: 14.5px; }
.fin-summary .fs-hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--plat-faint); }
.fin-summary .fs-caret { margin-left: auto; color: var(--plat-dim); font-size: 20px; line-height: 1; transition: transform var(--m-base) var(--ease); }
.fin-disc.is-open .fs-caret { transform: rotate(90deg); }
.fin-body { border-top: 1px solid var(--line); }

/* the economics moved into a quiet popover on the selected lender */
.fin-econ-wrap { position: relative; padding: 0 16px 14px; }
.econ-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--plat-dim);
  background: none; border: 1px solid var(--line-hi); border-radius: var(--r-chip);
  padding: 6px 12px; cursor: pointer; transition: border-color var(--m-base) var(--ease), color var(--m-base) var(--ease);
}
.econ-btn:hover { color: var(--platinum); border-color: var(--plat-faint); }
.econ-btn:focus-visible { outline: none; box-shadow: var(--ring-ember); }
.econ-btn[aria-expanded="true"] { color: var(--platinum); border-color: var(--plat-faint); }
.fin-econ {
  position: absolute; left: 16px; bottom: calc(100% - 6px); z-index: 30;
  min-width: 240px; max-width: min(320px, calc(100vw - 40px));
  display: flex; flex-direction: column; gap: 8px;
  background: var(--graphite); border: 1px solid var(--line-hi); border-radius: var(--r-card);
  box-shadow: var(--e3), var(--e-inset); padding: 13px 15px;
  font-family: var(--mono); font-size: 11px; color: var(--plat-faint);
}
.fin-econ b { color: var(--plat-dim); font-weight: 500; }
.fin-econ .direct { color: var(--green); }

/* the waterfall (prime passed, second-look caught it) */
.waterfall .passed { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 14px 16px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--plat-faint); }
.waterfall .passed .x { color: var(--red-text); margin-left: 5px; }
.waterfall .wf-note { padding: 0 16px 14px; font-family: var(--mono); font-size: 11px; color: var(--plat-dim); }

/* ── AR aging ── */
.aging-strip { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin: 20px 0 6px; }
@media (min-width: 760px) { .aging-strip { grid-template-columns: repeat(4, 1fr); } }
.aging-strip .cell { padding: 15px 18px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.aging-strip .cell:nth-child(2n) { border-right: none; }
@media (min-width: 760px) { .aging-strip .cell { border-bottom: none; } .aging-strip .cell:nth-child(2n) { border-right: 1px solid var(--line); } .aging-strip .cell:last-child { border-right: none; } }
.aging-strip .v { font-family: var(--disp); font-size: clamp(13.5px, 4vw, 20px); letter-spacing: -.02em; }
.aging-strip .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--plat-faint); margin-top: 6px; }
.aging-strip .cell.hot .v { color: var(--red-text); }
.bucket-title { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.bucket-title .bt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-dim); }
.bucket-title .bsum { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--platinum); }

/* ── composer ── */
.composer { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite-2); padding: 18px; margin-top: 18px; }
.composer .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.composer label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }
.composer input, .composer select { background: var(--obsidian); border: 1px solid var(--line-hi); border-radius: var(--r-control); color: var(--platinum); font-family: var(--body); font-size: 14px; padding: 11px 13px; }
.composer input:focus, .composer select:focus { outline: none; border-color: var(--ember-deep); }
.cline { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; margin-bottom: 8px; }
.cline input { font-family: var(--mono); }
.cline .x { background: none; border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--plat-faint); cursor: pointer; padding: 0 10px; }

/* ── footer ── */
footer { padding: 30px 0 50px; border-top: 1px solid var(--line); margin-top: 40px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.foot-brand { font-family: var(--disp); font-weight: 600; letter-spacing: .05em; font-size: 14px; }
.foot-note { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--plat-faint); font-size: 12px; }

.empty { padding: 40px 4px; color: var(--plat-faint); font-family: var(--mono); font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--graphite); border: 1px solid var(--line-hi); border-left: 2px solid var(--green); border-radius: var(--r-control); padding: 12px 18px; font-size: 13.5px; color: var(--platinum); opacity: 0; pointer-events: none; transition: opacity var(--m-base) var(--ease), transform var(--m-base) var(--ease-exit); z-index: 50; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-left-color: var(--red); }

@media (min-width: 760px) {
  .spec-strip { grid-template-columns: repeat(4, 1fr); }
  .spec-strip .cell { border-bottom: none; }
  .spec-strip .cell:nth-child(2n) { border-right: 1px solid var(--line); }
  .spec-strip .cell:last-child { border-right: none; }
  .pay { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr auto; }
}

/* ════════════════════════════════════════════════════════════════════
   LEGACY EVOLVED · elevation component language
   The instrument made tangible. Surfaces lift on the warm-black ladder so
   each reads as liftable hardware, not a flat hairline. Usage law: one
   elevation tier per surface, never stacked. Ember stays the lone gold.
   ════════════════════════════════════════════════════════════════════ */

/* ── object surfaces (cards, panels, summary strips, the composer) ──
   graphite-class bg + line edge + card radius + e2, with a top light-catch */
.spec-strip,
.panel,
.composer,
.aging-strip {
  box-shadow: var(--e2), var(--e-inset);
}
/* the figure readout strips lift to a solid primary-surface card */
.spec-strip, .aging-strip { background: var(--graphite); }
/* the collections-health meter sits as the spec-strip's verdict line, inside
   the summary band (no outer margin; the band carries the elevation) */
.summary-band .spec-strip + .meter { margin: 0; }

/* ── the next-action banner · the card standard (status accent card) ──
   left accent border (the ember status color) + graphite bg + r-card + e2 */
.next {
  background: var(--graphite);
  box-shadow: var(--e2), var(--e-inset);
}

/* ── interactive object-rows that read as cards · lift on hover ──
   the ledger row and the lender shelf cell are tappable objects */
.row,
.lender {
  transition: background var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease), transform var(--m-fast) var(--ease);
}
.row:hover {
  background: var(--graphite-3);
  box-shadow: var(--e2);
  transform: translateY(-2px);
}
.lender:hover {
  background: var(--graphite-3);
  box-shadow: var(--e2);
  transform: translateY(-2px);
}
.lender.on { box-shadow: var(--e2); }

/* ── floating / overlay surfaces · they hover above the page ──
   the sticky header reads as a fixed rail; the toast is a true overlay */
header.site { box-shadow: var(--e3); }
.toast { box-shadow: var(--e3), var(--e-inset); }

/* ── inputs · ember focus ring (money input, composer fields) ── */
.pay .input-money:focus-within,
.composer input:focus,
.composer select:focus {
  border-color: var(--ember);
  box-shadow: var(--ring-ember);
}

/* ── buttons · rest carries the lowest tier; press settles ── */
.btn { box-shadow: var(--e1); transition: border-color var(--m-base) var(--ease), box-shadow var(--m-fast) var(--ease), transform var(--m-press) var(--ease-press); }
.btn:hover { box-shadow: var(--e2); }
.btn:active { box-shadow: var(--e-press); transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-ember); }

/* the lender-selection chips and quick-amount chips press like hardware */
.fchip { transition: border-color var(--m-base) var(--ease), color var(--m-base) var(--ease), box-shadow var(--m-fast) var(--ease), transform var(--m-press) var(--ease-press); }
.fchip:focus-visible { outline: none; box-shadow: var(--ring-ember); }
.fchip:active { transform: translateY(1px); }

/* ── the one gold CTA · e2 + a top light-catch (canon); ember focus ring;
   firm press. --e-ember is reserved for the FAB / hot signal, never the CTA. ── */
.btn-gold {
  box-shadow: var(--e2), inset 0 1px 0 color-mix(in srgb, var(--ember-hi) 55%, transparent);
  transition: filter var(--m-base) var(--ease), box-shadow var(--m-fast) var(--ease), transform var(--m-press) var(--ease-press);
}
.btn-gold:hover { box-shadow: var(--e2), inset 0 1px 0 color-mix(in srgb, var(--ember-hi) 70%, transparent); }
.btn-gold:active { transform: translateY(1px); box-shadow: var(--e-press); }
.btn-gold:focus-visible { outline: none; box-shadow: var(--e2), var(--ring-ember); }
.btn-gold:disabled { box-shadow: none; }