/*
 * app.css: create flow, dashboard, gift detail, received, and the shared UI
 * helpers (money, live indicator, recipient input, gift flow, sheet).
 * Uses base.css tokens only. Principal is ink, yield is green, always.
 */

/* ================================================================ page frame */
.app-page { padding-block: var(--s-7) var(--s-8); }
.page-head { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-7); }
.page-head .label, .rc-top .label { display: flex; align-items: center; gap: 10px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* headings and dialogs receive focus only so reading starts there; they are not controls */
.view-host h1[tabindex="-1"]:focus, .cr-step-title:focus, .gd-controls h2:focus, .sheet:focus { outline: none; }
.nowrap { white-space: nowrap; }

.back-link {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-5); padding-block: 6px;
  color: var(--muted); text-decoration: none; font-size: var(--t-small);
  transition: color var(--dur-1);
}
.back-link svg { transition: transform var(--dur-2) var(--ease-out); }
.back-link:hover { color: var(--ink); }
.back-link:hover svg { transform: translateX(-3px); }

.link-btn {
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-2);
}
.link-btn:hover { text-decoration-color: var(--ink); }
.na { color: var(--muted); font-size: var(--t-small); }
.btn.is-blocked { opacity: .5; box-shadow: none; }
.btn.is-blocked:active { transform: none; }
/* surface text keeps contrast on the solid fills in both themes */
.btn--danger-solid { --btn-bg: var(--danger); --btn-fg: var(--surface); --btn-bd: var(--danger); }
.btn--yield { --btn-fg: var(--surface); }
.btn--yield:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--yield) 28%, transparent); }

.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); max-width: 640px; padding-block: var(--s-7); }
.empty .row { margin-top: var(--s-3); }
.empty-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-3); }
.empty-node {
  padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font: 500 var(--t-micro)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.empty-node.is-principal { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.empty-node.is-yield { background: var(--yield-wash); border-color: transparent; color: var(--yield); }
.flow-arrow { display: inline-flex; color: var(--line-strong); flex: none; }

/* ================================================================ money */
.money { border-radius: 1px; }
.money--sm { font-size: .9375rem; }
.money--md { font-size: 1.25rem; font-weight: 500; }
.money--lg { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; letter-spacing: -.02em; }
.money--xl { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.125rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; }
.money--hero { font-size: clamp(3.25rem, 1.6rem + 5.4vw, 6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.money.is-principal { color: var(--ink); }
.money.is-yield { color: var(--yield); }
.money.is-empty { color: var(--line-strong); }
.money.is-empty .unit { color: var(--line-strong); }
.money--na .num { font: 400 max(.875rem, .42em)/1.3 var(--f-body); letter-spacing: 0; color: var(--muted); }
.money[data-state="label"] .num { color: var(--ink-2); font-weight: 500; }
.money-skel { width: 7ch; height: .85em; }
.money.is-yield.is-tick { animation: yield-tick 1.2s var(--ease-out); }
@keyframes yield-tick {
  0% { background: var(--yield-wash); box-shadow: 0 0 0 4px var(--yield-wash); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}

/* ================================================================ live indicator */
.live-ind {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  font: 500 .75rem/1.3 var(--f-mono); color: var(--muted);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: none; }
.live-label { text-transform: uppercase; letter-spacing: .08em; }
.live-time { letter-spacing: .01em; }
.live-time::before { content: "·"; margin-right: 8px; opacity: .6; }
.live-ind[data-status="live"] .live-label { color: var(--yield); }
.live-ind[data-status="live"] .live-dot, .apy-live .live-dot { background: var(--yield-bright); animation: live-ping 2.4s var(--ease-out) infinite; }
.live-ind[data-status="unavailable"] .live-dot { background: var(--warn); }
.live-ind[data-status="unavailable"] .live-label { color: var(--warn); }
.live-ind[data-status="loading"] .live-dot { animation: pulse 1.2s var(--ease-in-out) infinite; }
@keyframes live-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yield-bright) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.apy-live { display: inline-flex; align-items: center; gap: 8px; }

/* ================================================================ recipient input + chip */
.rcpt { display: flex; flex-direction: column; gap: var(--s-4); }
.rcpt-input { min-height: 56px; font-size: 1.0625rem; }
.rcpt-msg:empty, .rcpt-result:empty { display: none; }

.rcpt-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2),
    filter 380ms var(--ease-out);
}
/* motion blur (user, 2026-09-14): the card settles out of a slight blur, sharp before the scale ends */
.rcpt-card.is-resolving { opacity: .01; transform: scale(.97); filter: blur(2px); transition: none; }
.rcpt-card[data-status="confirmed"].is-confirmed { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 7%, transparent); }
.rcpt-card[data-status="unconfigured"] { align-items: flex-start; border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.rcpt-card[data-status="not_found"], .rcpt-card[data-status="error"] { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.rcpt-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rcpt-card-body .addr { color: var(--ink); font-size: .875rem; }
.rcpt-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.rcpt-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcpt-name .verified { flex: none; color: var(--focus); }
.rcpt-handle { color: var(--muted); font-size: var(--t-small); }
.rcpt-handle-lg { font-size: 1.0625rem; font-weight: 500; overflow-wrap: anywhere; }
.rcpt-note { font-size: var(--t-small); color: var(--ink-2); line-height: 1.45; }
.rcpt-confirm { flex: none; }
.rcpt-confirm svg { margin-left: -2px; }

.check { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: var(--t-small); font-weight: 500; color: var(--ink); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }

.avatar--mono { background: var(--ink); color: var(--surface); }
.avatar--addr { font: 500 calc(var(--size) * .3)/1 var(--f-mono); color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.avatar.skeleton { display: block; }

.rcpt-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.rcpt-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: left; }
.rcpt-chip-main { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcpt-chip-main.mono { font-weight: 500; font-size: .9375rem; }
.rcpt-chip-sub { font-size: var(--t-micro); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcpt-chip.is-unconfirmed { opacity: .55; }
.rcpt-chip.is-old { opacity: .55; }
.rcpt-chip.is-old .rcpt-chip-main { text-decoration: line-through; text-decoration-thickness: 1px; }

@media (max-width: 520px) {
  .rcpt-card { flex-wrap: wrap; }
  .rcpt-card > .btn { width: 100%; }
}

/* ================================================================ create */
/* a major page heading, so it follows the site heading spec (Geist 700, -.04em, tight line-height) */
.cr-title { font: 700 var(--t-h2)/1 var(--f-display); letter-spacing: -.04em; color: var(--ink); }
.cr-step-title { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); letter-spacing: -.022em; }
.cr-grid {
  display: grid; align-items: start; justify-content: space-between; gap: var(--s-8);
  grid-template-columns: minmax(0, 560px) minmax(320px, 400px);
}
.cr-flow { min-width: 0; }

.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: 0 0 var(--s-7); padding: 0; list-style: none; }
.stepper-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 0 4px;
  border-top: 2px solid var(--line); color: var(--muted);
  font-size: var(--t-small); font-weight: 500; text-align: left;
  transition: color var(--dur-2), border-color var(--dur-3) var(--ease-out);
}
.stepper-btn:disabled { cursor: default; }
.stepper-btn:not(:disabled):hover { color: var(--ink); }
.stepper-n {
  position: relative; width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; font-size: .6875rem;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.stepper-item.is-current .stepper-btn { border-color: var(--ink); color: var(--ink); }
.stepper-item.is-current .stepper-n { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.stepper-item.is-done .stepper-btn, .stepper.is-complete .stepper-btn { border-color: var(--ink-2); color: var(--ink-2); }
.stepper-item.is-done .stepper-n, .stepper.is-complete .stepper-n { color: transparent; border-color: var(--ink-2); }
.stepper-item.is-done .stepper-n::after, .stepper.is-complete .stepper-n::after {
  content: ""; position: absolute; width: 9px; height: 5px; top: 7px; left: 6px;
  border-left: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: rotate(-45deg);
}

.cr-step { display: flex; flex-direction: column; gap: var(--s-6); animation: step-in var(--dur-3) var(--ease-out); }
/* motion blur (user, 2026-09-14): strongest at the start, where ease-out moves fastest; sharp by 60% */
@keyframes step-in { from { opacity: .2; transform: translateY(8px); filter: blur(2px); } 60% { filter: blur(0); } }
.cr-step-head { display: flex; flex-direction: column; gap: var(--s-2); }
.cr-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cr-actions .btn:last-child { min-width: 200px; }
.cr-msg:empty, .cr-reason:empty { display: none; }
.cr-reason { margin-top: calc(var(--s-4) * -1); }

.cr-amount-field { gap: var(--s-3); }
.amount-input .cur { font: 500 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1 var(--f-mono); color: var(--muted); }
.cr-amount-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 36px; font-size: var(--t-small); }
.cr-amount-meta .fig { font-weight: 500; }
.cr-max { min-height: 28px; padding: 0 10px; font-size: .8125rem; }
.cr-demo-note { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--demo); font-size: .8125rem; }

.review { border-top: 1px solid var(--line); }
.review-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.review-row dt { color: var(--muted); font-size: var(--t-small); }
.review-row dd { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; text-align: right; }
.review-row--wide dd { align-items: flex-start; text-align: left; color: var(--ink-2); }
.review-sub { font-size: var(--t-micro); color: var(--muted); }
.review-apy { font-size: 1.25rem; font-weight: 500; }
.review-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

.cr-consent { display: flex; flex-direction: column; gap: var(--s-3); }

.cr-demo {
  display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5);
  border-radius: var(--r-lg); background: var(--demo-wash);
  border: 1px solid color-mix(in srgb, var(--demo) 20%, transparent);
}
.cr-demo-head { display: flex; align-items: center; gap: 10px; }
.cr-demo-title { font-weight: 600; color: var(--demo); }
.cr-demo-explain { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.segmented-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.segmented-field legend { padding: 0; margin-bottom: 10px; }
.segmented { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 3px; background: var(--surface); border: 1px solid var(--line); }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented label {
  display: grid; place-items: center; min-height: 40px; padding: 0 8px; border-radius: 2px;
  font-size: var(--t-small); font-weight: 500; color: var(--ink-2); text-align: center; cursor: pointer;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.segmented label:hover { color: var(--ink); }
.segmented input:checked + label { background: var(--ink); color: var(--surface); }
.segmented input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

.txsteps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.txstep { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.txstep-n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: .6875rem; }
.txstep-name { font-weight: 500; }
.txstep-status { font: 500 var(--t-micro)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.txstep[data-status="wallet"] .txstep-n, .txstep[data-status="pending"] .txstep-n { border-color: var(--ink); animation: pulse 1.4s var(--ease-in-out) infinite; }
.txstep[data-status="wallet"] .txstep-status, .txstep[data-status="pending"] .txstep-status { color: var(--ink); }
.txstep[data-status="done"] .txstep-n { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.txstep[data-status="failed"] .txstep-status { color: var(--danger); }
.txstep-link { grid-column: 2 / -1; }
.tx-link, .txstep-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-micro); color: var(--ink-2); }

.cr-create-error { padding: 12px 14px; border-radius: var(--r-md); background: var(--danger-wash); }

.cr-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-block: var(--s-6); animation: step-in var(--dur-3) var(--ease-out); }
.cr-done-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); animation: done-pop 600ms var(--ease-out); }
@keyframes done-pop { 0% { transform: scale(.6); filter: blur(2px); } 60% { transform: scale(1.06); filter: blur(0); } 100% { transform: scale(1); } }

/* summary */
.cr-summary { position: sticky; top: 92px; }
.sum { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); }
.sum-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sum-block { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sum-block .money--xl { font-size: 2.5rem; }
.sum-block .money--xl[data-fit="md"] { font-size: 2rem; }
.sum-block .money--xl[data-fit="sm"] { font-size: 1.5rem; }
.sum-recipient { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.sum-k { font-size: var(--t-small); color: var(--muted); }
.sum-note { font: 500 var(--t-micro)/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sum-empty { padding: 4px 0; color: var(--muted); border-bottom: 1px dashed var(--line-strong); }
/* the connector from deposit to recipient: an ink stem that ends in a yield dot */
.sum-pipe { position: relative; width: 2px; height: 40px; margin: 2px 0 6px 12px; border-radius: 1px; background: var(--line-strong); }
.sum-pipe::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--yield-bright); box-shadow: 0 0 0 3px var(--surface);
}
.sum-pipe i { position: absolute; inset: 0; overflow: hidden; border-radius: 1px; }
.sum-pipe i::before { content: ""; position: absolute; left: 0; top: -14px; width: 2px; height: 14px; background: linear-gradient(180deg, transparent, var(--yield-bright)); animation: pipe-drop 2.2s var(--ease-in-out) infinite; }
/* motion blur (user, 2026-09-14): the drop is softest mid-travel, where ease-in-out is fastest */
@keyframes pipe-drop { 50% { filter: blur(.8px); } to { transform: translateY(56px); } }
.sum-rows { margin-top: var(--s-2); border-top: 1px solid var(--line); }
.sum-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.sum-rows dt { color: var(--muted); }
.sum-rows dd { font-weight: 500; text-align: right; }
.sum-rows .fig { font-size: .9375rem; }
.sum-foot { font-size: var(--t-micro); line-height: 1.45; color: var(--muted); }
.sum-bar { display: none; }
.cr[data-step="3"] .sum-rows, .cr[data-step="3"] .sum-foot { display: none; }

/* ================================================================ dashboard */
.db-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.db-title { display: flex; flex-direction: column; gap: var(--s-3); }
.db-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s-4); margin-bottom: var(--s-4); }
.db-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--s-7); border-block: 1px solid var(--line); }
.db-stat { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.db-stat + .db-stat { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.db-stat-sub { font-size: var(--t-micro); color: var(--muted); }

.db-list-h { margin-bottom: var(--s-3); }
.gift-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.gift-li { border-bottom: 1px solid var(--line); }
.gift-row {
  display: grid; align-items: center; gap: 12px var(--s-6);
  grid-template-columns: minmax(0, 1fr) auto 24px;
  grid-template-areas: "tags tags go" "flow nums go";
  margin-inline: -16px; padding: 20px 16px;
  border-radius: var(--r-md); color: inherit; text-decoration: none;
  transition: background-color var(--dur-2);
}
.gift-row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.gift-row--skel { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 24px 0; border-bottom: 1px solid var(--line); }
.gr-tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 400 var(--t-micro)/1.2 var(--f-mono); color: var(--muted); }
.gr-pills { display: inline-flex; gap: 6px; }
.gr-source::after { content: "·"; margin-left: 12px; opacity: .6; }
.gr-flow { grid-area: flow; display: grid; grid-template-columns: auto 28px auto 28px minmax(0, 1fr); align-items: center; gap: var(--s-4); min-width: 0; }
.gr-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gr-cell .label { font-size: .6875rem; }
.gr-arrow { justify-content: center; }
.gift-li[data-status="active"] .gr-arrow--out { color: var(--yield-bright); }
.gr-rcpt { flex-direction: row; align-items: center; gap: 8px; }
.gr-to { display: none; font: 500 .625rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* fixed figure columns so arrows and recipients line up from row to row */
@media (min-width: 721px) {
  .gr-principal { min-width: 11rem; }
  .gr-yield { min-width: 8.5rem; }
}
.gr-nums { grid-area: nums; display: flex; gap: var(--s-6); }
.gr-num { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 110px; }
.gr-k { font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gr-go { grid-area: go; display: grid; place-items: center; color: var(--line-strong); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2); }
.gift-row:hover .gr-go { color: var(--ink); transform: translateX(3px); }
.gift-li[data-status="closed"] .gr-flow, .gift-li[data-status="closed"] .gr-nums { opacity: .6; }

/* ================================================================ gift flow diagram */
/* nodes take their content width; the connectors absorb the rest */
.gflow {
  display: grid; align-items: center; gap: var(--s-4);
  grid-template-columns: auto minmax(40px, 1fr) auto minmax(40px, 1fr) minmax(0, auto);
}
.gflow--lg .money--xl { font-size: clamp(2rem, 1.1rem + 1.6vw, 2.75rem); }
.gflow-node { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gflow-fig { display: flex; align-items: center; min-height: 3.25rem; min-width: 0; }
.gflow-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-height: 1.4em; font-size: var(--t-small); color: var(--muted); }
.gflow-sub-k { color: var(--muted); }
.gflow--lg .rcpt-chip-main { font-size: 1.25rem; }
.gflow-link { position: relative; display: flex; align-items: center; color: var(--line-strong); }
.gflow-line { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 1px; background: var(--line); }
.gflow-line i { position: absolute; top: 0; left: -35%; width: 35%; height: 100%; opacity: 0; background: linear-gradient(90deg, transparent, var(--yield-bright)); }
.gflow-link svg { flex: none; margin-left: -6px; }
.gflow.is-flowing .gflow-link { color: var(--yield-bright); }
.gflow.is-flowing .gflow-line i { opacity: 1; animation: flow-run 2.6s var(--ease-in-out) infinite; }
.gflow.is-flowing .gflow-link + .gflow-node + .gflow-link .gflow-line i { animation-delay: 1.3s; }
.gflow[data-status="closed"] .gflow-fig { opacity: .7; }
@keyframes flow-run { to { left: 100%; } }
@keyframes flow-run-v { to { top: 100%; } }

/* ================================================================ gift detail */
.gd-loading, .rc-loading { display: flex; flex-direction: column; gap: var(--s-5); }
.gd-skel-diagram { display: block; width: 100%; height: 220px; border-radius: var(--r-lg); }
.gd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.gd-head-main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.gd-head h1 { overflow-wrap: anywhere; }
.gd-title-k { color: var(--muted); }
.gd-pills { --row-gap: 8px; }
.gd-pills .label { margin-left: 4px; }
.gd-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); }
.gd-preview { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); font-weight: 500; }
.gd-preview .arrow { transition: transform var(--dur-2) var(--ease-out); }
.gd-preview:hover .arrow { transform: translateX(3px); }
.gd-diagram { margin-block: var(--s-6) var(--s-8); padding: var(--s-7) var(--s-6); }

.gd-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); }
.figs { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.fig-row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: var(--s-5); padding: 14px 0; border-bottom: 1px solid var(--line); }
.fig-row dt { color: var(--muted); font-size: var(--t-small); white-space: nowrap; }
.fig-row dd { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; text-align: right; }
.fig-row dd a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.fig-sub { max-width: 36ch; font-size: var(--t-micro); color: var(--muted); overflow-wrap: anywhere; }
.fig-sub:empty { display: none; }
.fig-sub.mono { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

.activity { margin: var(--s-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.activity-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px var(--s-4); padding: 14px 0; border-bottom: 1px solid var(--line); }
.activity-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.activity-to { font-size: var(--t-small); color: var(--muted); }
/* One sentence, not flex items: .nowrap spans keep addresses whole while the text wraps normally. */
.activity-detail { display: block; max-width: 46ch; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.activity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-micro); color: var(--muted); }
.activity-empty { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); }
.gd-history-h { margin-top: var(--s-7); }

.gd-controls { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-strong); }
.gd-controls > .t-muted { margin-top: var(--s-3); max-width: 60ch; }
.gd-controls > .row { margin-top: var(--s-5); }
.gd-ctl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ctl { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.ctl-text { display: flex; flex-direction: column; gap: 4px; max-width: 52ch; }
.ctl-title { font: 600 1.0625rem/1.3 var(--f-body); }
.ctl-panel > * { max-width: 560px; }
.ctl-panel { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); animation: step-in var(--dur-3) var(--ease-out); }
.ctl-panel .hint:empty { display: none; }
.gd-result:empty { display: none; }
.gd-result { margin-top: var(--s-4); font-size: var(--t-small); }

/* ================================================================ sheet */
.sheet-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-5); }
.sheet-scrim {
  position: absolute; inset: 0; opacity: 0;
  background: color-mix(in srgb, #050706 46%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: opacity var(--dur-2);
}
.sheet {
  position: relative; display: flex; flex-direction: column; gap: var(--s-4);
  width: min(520px, 100%); max-height: calc(100dvh - 48px); overflow: auto;
  padding: var(--s-6); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.sheet-layer.is-open .sheet-scrim { opacity: 1; }
.sheet-layer.is-open .sheet { opacity: 1; transform: none; }
.sheet-grab { display: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.sheet-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; margin: -6px -10px 0 0; border-radius: 50%; color: var(--muted); transition: background-color var(--dur-1), color var(--dur-1); }
.sheet-x:hover { background: var(--surface-2); color: var(--ink); }
.sheet-body, .sheet-content { display: flex; flex-direction: column; gap: var(--s-3); font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.sheet-body b { font-weight: 600; }
.sheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-2); }
.sheet-kv { margin-bottom: var(--s-2); border-block: 1px solid var(--line); }
.sheet-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: 12px 0; }
.sheet-kv > div + div { border-top: 1px solid var(--line); }
.sheet-kv dt { font-size: var(--t-small); color: var(--muted); }
.sheet-kv .money { font-size: 1.25rem; font-weight: 500; }
.sheet-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 0 4px; color: var(--muted); }
.sheet-demo { display: flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--demo); }
.sheet .risk { margin-top: 2px; }

/* ================================================================ received */
.rc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.rc-picker { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.select {
  appearance: none; -webkit-appearance: none;
  min-height: 40px; max-width: min(440px, 100%); padding: 0 36px 0 12px;
  font-size: var(--t-small); text-overflow: ellipsis; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.rc-hero { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-8); }
.rc-for { display: flex; align-items: center; gap: 10px; font-size: var(--t-small); color: var(--muted); }
.rc-for .rcpt-chip-main { color: var(--ink); font-weight: 500; }
.rc-headline { max-width: 17ch; overflow-wrap: anywhere; }
.rc-headline .is-yield { color: var(--yield); }
.rc-principal { font-variant-numeric: tabular-nums; white-space: nowrap; }

.rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: start; gap: var(--s-8); }
.rc-main { display: flex; flex-direction: column; gap: var(--s-7); min-width: 0; }
.rc-received { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.rc-received .money--hero .unit { font-size: .28em; }
/* nothing paid yet: a quiet figure, and the claim panel carries the emphasis */
.rc-received.is-empty .money--hero { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -.02em; }
.rc-received.is-empty .money--hero .unit { font-size: .4em; }
.rc-former { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.rc-sub { font-size: var(--t-small); color: var(--muted); }
.rc-underlying { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); padding-block: var(--s-5); border-block: 1px solid var(--line); }
.rc-underlying-fig { display: flex; flex-direction: column; gap: 8px; }
.rc-underlying-note { max-width: 36ch; font-size: var(--t-small); color: var(--ink-2); }
.rc-foot { display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--t-small); color: var(--muted); }
.rc-foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 500; }

.rc-claim { position: sticky; top: 92px; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); }
.rc-claim-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: var(--s-2); }
.rc-claim .btn { margin-top: var(--s-3); }
.rc-claim .btn:disabled { opacity: .38; }
.rc-claim-reason:empty, .rc-claim-result:empty { display: none; }
.rc-claim-result { font-size: var(--t-small); color: var(--ink-2); }
.rc-demo { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--demo); }
.rc-owed { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.rc-owed[hidden] { display: none; }
.rc-owed .btn { margin-top: var(--s-2); }

/* ================================================================ responsive */
@media (max-width: 1080px) {
  .gift-row { grid-template-areas: "tags go" "flow flow" "nums nums"; grid-template-columns: minmax(0, 1fr) 24px; }
  .gr-nums { gap: var(--s-6); }
  .gr-num { align-items: flex-start; min-width: 0; }
}

@media (max-width: 960px) {
  .cr-grid, .rc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .cr-summary { position: static; order: -1; }
  .sum { display: none; }
  .sum-bar {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
    font-size: var(--t-small);
  }
  .sum-bar-amt { font: 600 .9375rem/1 var(--f-mono); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
  .sum-bar-arrow { display: inline-flex; color: var(--yield-bright); }
  .sum-bar-rcpt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .sum-bar-apy { margin-left: auto; white-space: nowrap; color: var(--muted); font-size: .8125rem; }
  .sum-bar-apy .fig { color: var(--yield); font-weight: 500; }
  .stepper { margin-block: var(--s-5) var(--s-6); }

  .rc-claim { position: static; }
  .rc-main { display: contents; }
  .rc-received { order: 1; }
  .rc-claim { order: 2; }
  .rc-underlying { order: 3; }
  .rc-payouts { order: 4; margin-top: var(--s-4); }
  .rc-foot { order: 5; }
  .rc-hero { margin-bottom: var(--s-6); }
  .rc-grid.is-unpaid .rc-claim { order: 1; }
  .rc-grid.is-unpaid .rc-received { order: 2; }

  /* the step question is the real heading on small screens */
  .cr-head { margin-bottom: var(--s-4); gap: var(--s-2); }

}

@media (max-width: 860px) {
  .app-page { padding-block: var(--s-5) var(--s-7); }
  .page-head { margin-bottom: var(--s-5); }
  .gd-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .gd-head-side { align-items: flex-start; }
  .gd-diagram { margin-block: var(--s-5) var(--s-7); padding: var(--s-5); }
  .ctl-row .btn { width: 100%; }
}

@media (max-width: 1000px) {
  .gflow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gflow-link { flex-direction: column; width: 18px; height: 52px; margin: 6px 0 6px 13px; }
  .gflow-line { flex: 1; width: 2px; height: auto; }
  .gflow-line i { left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--yield-bright)); }
  .gflow.is-flowing .gflow-line i { animation-name: flow-run-v; }
  .gflow-link svg { margin: -8px 0 0; transform: rotate(90deg); }
  .gflow-fig { min-height: 0; }
}

@media (max-width: 720px) {
  .db-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-stat:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .db-stat + .db-stat { padding-left: 0; border-left: 0; }
  .db-stat:nth-child(3) { padding-left: var(--s-4); border-left: 1px solid var(--line); }
  .db-head .btn { width: 100%; }

  .gift-row { margin-inline: 0; padding: 18px 0; border-radius: 0; }
  .gr-source { display: none; }
  .gr-tags { font-size: .6875rem; gap: 6px 8px; }
  .gift-row:hover { background: transparent; }
  /* position -> yield on one line, the recipient on its own line so the handle is never cut */
  .gr-flow { grid-template-columns: auto 16px minmax(0, 1fr); gap: 10px 8px; }
  .gr-arrow--out { display: none; }
  .gr-rcpt { grid-column: 1 / -1; }
  .gr-to { display: inline; }
  .gr-flow .money--md { font-size: 1rem; }
  .gr-flow .money .unit { display: none; }
  .gr-cell .label { font-size: .625rem; letter-spacing: .06em; }
  .gr-rcpt .rcpt-chip { gap: 8px; }
  .gr-rcpt .rcpt-chip-main { font-size: .9375rem; min-width: 15ch; }
  .gr-rcpt .rcpt-chip-sub { display: none; }
  .gr-nums { flex-wrap: wrap; gap: 6px var(--s-5); }
  .gr-num { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }

  .review-row { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-3); }
  .review-row--wide { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cr-actions { flex-wrap: nowrap; }
  .cr-actions .btn { flex: 1; min-width: 0; }
  .cr-actions .btn:last-child { min-width: 0; flex: 2; }
  .cr-demo-note { margin-left: 0; width: 100%; }
  .segmented label { min-height: 44px; font-size: .8125rem; }

  .fig-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fig-row dt { white-space: normal; }
  .fig-row dd { align-items: flex-start; text-align: left; }

  .rc-underlying { align-items: flex-start; }
  .rc-picker { width: 100%; }
  .rc-picker .select { flex: 1; }
}

@media (max-width: 480px) {
  .db-strip { grid-template-columns: minmax(0, 1fr); }
  .db-stat { gap: 4px; padding-block: var(--s-4); }
  .db-stat .money--lg { font-size: min(1.625rem, 12cqi); }
  .db-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .db-stat + .db-stat { border-top: 1px solid var(--line); }
  .db-stat:first-child { border-bottom: 0; }
}
/* figures shrink with their cell instead of running out of it */
.db-stat { container-type: inline-size; }
.db-stat .money--lg { font-size: min(2rem, 12cqi); }

@media (max-width: 640px) {
  .sheet-layer { place-items: end stretch; padding: 0; }
  .sheet {
    width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0;
    padding: var(--s-3) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .sheet-grab { display: block; width: 40px; height: 4px; margin: 0 auto var(--s-2); border-radius: 1px; background: var(--line-strong); }
  .sheet-actions { flex-direction: column-reverse; }
  .sheet-actions .btn { width: 100%; }
}