/* buyz.cash — one card, dark, Zcash gold. No framework, no build step.
   The shape is borrowed from jup.ag (two stacked panes, big numerals, a token
   button that opens a search sheet); the palette is Zcash's own.

   Mobile is the default case, not the afterthought: someone buying ZEC is as
   likely to be holding a phone with a wallet app on it as sitting at a desk.
   Every control is at least 44px tall, every text input is 16px so iOS does not
   zoom on focus, and the picker becomes a bottom sheet under 560px. */

:root {
  --bg: #0b0d10;
  --bg-2: #12151a;
  --pane: #171b21;
  --pane-2: #1d2229;
  --line: #262c35;
  --line-2: #33404f;
  --ink: #eef1f5;
  --ink-2: #99a3b1;
  --ink-3: #6b7583;
  --gold: #f4b728;
  --gold-ink: #1a1405;
  --good: #3fb950;
  --bad: #f85149;
  --radius: 14px;

  /* One 4px scale, so vertical rhythm is a decision rather than an accident.
     Everything below picks from these; nothing invents a 7 or an 18. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* `[hidden]`'s UA rule is `display: none` at the lowest specificity, so any
   class selector that sets `display` silently defeats it — `.rate div
   { display: flex }` was keeping a hidden row on screen. Every `hidden` in this
   file is set from JS and means it, so make it win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* A real bar, not floating text: the hairline is what separates the chrome
   from the page under it. */
.top-bar {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 13, 16, .72);
  backdrop-filter: saturate(140%) blur(10px);
  position: sticky; top: 0; z-index: 20;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(244, 183, 40, .10), transparent 70%),
    var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* Set before first paint by the inline script in index.html. The hero sells
   the product; on a swap already in progress it is just marketing above
   someone's money, pushing the QR they came for down the screen. */
.on-swap-page #swap-view,
.on-swap-page .hero,
.on-swap-page .band,
.on-swap-page #recent-page { display: none; }

/* ── header ─────────────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5);
  /* A header spans the page — logo at its left edge, nav at its right. It was
     briefly constrained to the 460px card column, which parked the wordmark in
     the middle of a 1280px screen. Nothing looks like that. */
  max-width: 1200px; width: 100%; margin: 0 auto;
  min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 28px; height: 28px; display: block; }
.brand-name { font-weight: 650; letter-spacing: -.01em; font-size: 17px; }
.brand-name .dot { color: var(--gold); }
/* Two links, shown. A burger would hide the navigation to save room we have,
   and the whole problem being solved is that nothing signalled there was more
   than the card. */
.nav { margin-left: auto; display: flex; gap: var(--s1); }
.nav a {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 0 var(--s3); border-radius: 999px;
  color: var(--ink-2); text-decoration: none; font-size: 14px;
}
.nav a:hover { color: var(--ink); background: var(--pane); }
.nav a[aria-current="page"] { color: var(--gold); background: var(--pane); }

main {
  flex: 1; width: 100%;
  display: grid; place-items: start center; align-content: start;
  gap: var(--s5);
  padding: var(--s2) var(--s4) var(--s8);
}

/* ── hero ────────────────────────────────────────────────────────────────── */
/* The card is the hero — it is the product, working, on first paint. This
   only has to tell a first-time visitor what the thing is and get out of the
   way, so it is two lines and sized to keep the card near the top of a phone
   screen rather than pushed below the fold. */
.hero { max-width: 460px; width: 100%; }
.hero h1 {
  margin: 0 0 var(--s2);
  font-size: clamp(24px, 6.4vw, 30px);
  line-height: 1.12; letter-spacing: -.03em; font-weight: 650;
}
.hero p {
  margin: 0; max-width: 44ch;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.hero #hero-count { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── card ───────────────────────────────────────────────────────────────── */
.card {
  width: 100%; max-width: 460px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--s3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* ── coin icons ─────────────────────────────────────────────────────────── */
/* Every coin renders as a circle whether or not an icon file exists: the
   monogram is the base layer and the image sits on top, so a missing or
   slow-loading icon is a styled disc with initials, never a broken image or a
   jumping row. */
.coin {
  position: relative; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: #2b3441; color: var(--ink-2);
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: -.02em;
  overflow: visible;
}
.coin img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border-radius: 50%;
  background: #2b3441;
}
.coin .badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--pane); background: var(--pane);
}
.pane-out .coin .badge, .asset-list .coin .badge { border-color: var(--pane-2); }
.coin-lg { width: 34px; height: 34px; font-size: 11px; }

/* ── card header ─────────────────────────────────────────────────────────── */
/* ── the slippage pill, in the details list ──────────────────────────────── */
/* Convention across swap UIs (NEAR, Jupiter, Uniswap) is that slippage sits in
   the rate details showing its CURRENT VALUE, not behind a gear in the header.
   A gear hides the one thing you want to read at a glance, and on a phone it is
   a 14px icon competing with a heading for the same corner. */
.rate-pill {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 4px 10px;
  background: var(--pane); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-family: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.rate-pill:hover { border-color: var(--line-2); color: var(--gold); }
.rate-pill .sliders { width: 13px; height: 13px; color: var(--ink-3); flex: 0 0 auto; }
.rate-pill:hover .sliders { color: var(--gold); }
/* The row holding it is taller than a text row, so keep the list even. */
.rate div:has(.rate-pill) { min-height: 38px; }

/* ── sheets (slippage, and anything else that needs a decision) ──────────── */
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 16px 12px;
}
.sheet-head h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.sheet-close {
  background: none; border: 0; color: var(--ink-3);
  font-size: 15px; cursor: pointer; padding: 4px 6px; min-width: 40px; min-height: 40px;
}
.sheet-close:hover { color: var(--ink); }
.sheet-body { padding: 0 16px 16px; }
.sheet-copy { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

.sheet-figure {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--pane); border-radius: 12px; padding: 14px;
  font-size: 13.5px; color: var(--ink-3); margin-bottom: 14px;
}
.sheet-figure strong {
  color: var(--gold); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Three across, wrapping to two rows — the shape every wallet uses for this,
   and each target is comfortably past 44px on a phone. */
.slip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slip-grid button, .slip-custom {
  min-height: 46px; border-radius: 12px;
  background: var(--pane); border: 1px solid var(--line);
  color: var(--ink-2); font-family: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.slip-grid button:hover, .slip-custom:hover { border-color: var(--line-2); color: var(--ink); }
.slip-grid button.is-on {
  background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600;
}
.slip-custom { padding: 0 10px; color: var(--ink-3); }
.slip-custom.is-on { border-color: var(--gold); color: var(--gold); }
.slip-custom input {
  width: 100%; min-width: 0; background: none; border: 0; outline: 0; padding: 0;
  color: var(--ink); font-family: inherit;
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  font-variant-numeric: tabular-nums; text-align: center;
}
.slip-custom input::placeholder { font-size: 14px; color: var(--ink-3); }

.slip-note { margin: 12px 2px 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.slip-note.is-warn { color: #f3d894; }

.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.sheet-actions .cta, .sheet-actions .ghost { margin: 0; min-height: 48px; }

/* ── pay / receive panes ────────────────────────────────────────────────── */
.pane {
  background: var(--pane);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  transition: border-color .15s;
}
.pane:focus-within { border-color: var(--line-2); }
.pane-out { background: var(--pane-2); }

.pane-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px;
}
.pane-note { color: var(--gold); font-size: 11.5px; }

.pane-body { display: flex; align-items: center; gap: 10px; }

.amount {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: none; border: 0; outline: 0; padding: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.amount::placeholder { color: var(--ink-3); }
.amount-out { color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amount-out.is-loading { color: var(--ink-3); }

.asset {
  flex: 0 0 auto; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  background: #222932; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px 5px 6px; cursor: pointer; color: var(--ink);
  font-family: inherit; font-size: 15px; text-align: left;
}
.asset:hover { background: #29323d; }
.asset-fixed { cursor: default; }
.asset-text { display: grid; line-height: 1.25; }
.asset-sym { font-weight: 650; font-size: 14px; }
.asset-chain { font-size: 11px; color: var(--ink-3); }
.chev { width: 10px; height: 6px; color: var(--ink-3); margin-left: 2px; }

/* The foot carries 32px preset chips directly beneath a 44px asset pill, so it
   needs its own top margin and enough height to hold them — at 28px the chips
   overflowed their row and sat ~5px under the pill, which is what made the
   right half of the pane look crowded. */
.pane-foot {
  min-height: 32px; margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* Tapping the dollar figure switches the field to dollars. Most people know
   what they want to spend, not how many DOGE that is — and the conversion is
   the app's job, not theirs. */
.usd-toggle {
  background: none; border: 0; padding: 2px 0; margin: 0;
  color: var(--ink-3); font-family: inherit; font-size: 12px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.usd-toggle:hover { color: var(--ink-2); border-bottom-color: var(--line-2); }
.usd-toggle.is-usd { color: var(--gold); }

.presets { display: flex; gap: 6px; }
.presets button {
  background: #222932; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); font-family: inherit; font-size: 11.5px;
  min-height: 32px; padding: 4px 11px; cursor: pointer;
}
.presets button:hover { color: var(--ink); border-color: var(--line-2); }

/* The hinge straddles the seam between the two panes, so it has to be
   centred ON the boundary rather than hung from it. A zero-height container
   parks the whole 30px button below the line, i.e. sitting inside the receive
   pane — which is what it was doing. The strip carries the 4px gap between the
   panes and the button is absolutely centred within it. */
.arrow { position: relative; z-index: 1; height: 4px; }
.arrow span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink-2);
}
.arrow svg { width: 12px; height: 14px; }

/* ── rate table ─────────────────────────────────────────────────────────── */
.rate { margin: var(--s5) var(--s1) 0; font-size: 13px; display: grid; gap: 2px; }
/* Centre, not baseline: one row holds a 32px pill and the rest hold text, and
   baseline-aligning a button against a line of text leaves the pill sitting
   low. Rows get their own height instead of the list carrying a uniform gap. */
.rate div {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; min-height: 30px;
}
.rate dt { color: var(--ink-3); flex: 0 0 auto; }
/* "Minimum received" is a floor derived from the slippage setting, and a
   number with no stated origin reads as arbitrary. Naming the tolerance next
   to it costs one line and answers the question before it is asked. */
.rate .hint { font-style: normal; opacity: .62; font-size: 11px; }
.rate dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* The rate flips between three readings on tap. No icon: it is a secondary
   control on a card whose primary action is a big gold button, and a glyph
   sitting next to a number reads as part of the number. The cursor and the
   hover colour carry the affordance instead. */
.rate-toggle {
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; font-variant-numeric: tabular-nums;
  cursor: pointer; text-align: right;
  transition: color .15s;
}
.rate-toggle:hover { color: var(--gold); }

/* ── address fields ─────────────────────────────────────────────────────── */
.fields { display: grid; gap: var(--s4); margin-top: var(--s5); }
.field { display: grid; gap: var(--s1); }
/* A name and a hint on separate lines, rather than "Label — fragment" run
   together. The name is what you scan for; the hint is what you read once. */
.field-label { font-size: 13px; font-weight: 550; color: var(--ink); }
.field-label em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: var(--s1); }
.field-hint { font-size: 12px; line-height: 1.45; color: var(--ink-3); margin-bottom: var(--s1); }
.field input {
  width: 100%; min-height: 44px;
  background: var(--pane); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; color: var(--ink);
  font-family: var(--mono);
  font-size: 16px; /* 16px exactly: anything smaller makes iOS zoom on focus */
  outline: 0;
}
.field input:focus { border-color: var(--line-2); }
.field input::placeholder { font-family: inherit; font-size: 14px; color: var(--ink-3); }
/* An email address is prose, not a hash — the mono face is for things you
   compare character by character. */
#email { font-family: inherit; }
.field input.is-bad { border-color: rgba(248, 81, 73, .55); }
.field-problem { font-size: 12px; line-height: 1.45; color: #ffb4ae; margin-top: var(--s1); }

/* ── deadline countdown ──────────────────────────────────────────────────── */
/* The timestamp is the fact; this is the part people act on. */
.countdown { font-style: normal; color: var(--ink-3); font-size: 12px; margin-left: var(--s1); }
.countdown.is-urgent { color: var(--gold); }
.countdown.is-gone { color: var(--bad); }

/* ── recent swaps ────────────────────────────────────────────────────────── */
/* Without an account the /s/ link is the only way back to a swap. This is the
   safety net for closing the tab, so it is quiet but always present. */

.recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.recent-page li a {
  display: flex; align-items: center; gap: var(--s3); min-height: 58px;
  padding: var(--s3) var(--s4);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-2); text-decoration: none; font-size: 13px;
}
.recent-page li a:hover { border-color: var(--line-2); color: var(--ink); }
.rc-what { display: grid; gap: 2px; min-width: 0; }
.rc-what b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.rc-what em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.rc-status {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11.5px; color: var(--ink-3);
  background: var(--pane); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px;
}
.rc-status.is-done { color: var(--good); border-color: rgba(63, 185, 80, .35); }
.rc-status.is-bad { color: var(--bad); border-color: rgba(248, 81, 73, .35); }
.rc-when { font-size: 11.5px; color: var(--ink-3); flex: 0 0 auto; }
.recent-note { margin: var(--s3) var(--s1) 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

@media (max-width: 420px) {
  /* The date is the first thing worth losing when the row gets tight. */
  .rc-when { display: none; }
}

/* ── buttons ────────────────────────────────────────────────────────────── */
/* Never `font: <size> inherit` on a control — `inherit` is not a valid family
   token, so the whole shorthand is dropped and the button falls back to the
   UA's 13px Arial. Set the properties individually. */
.cta {
  width: 100%; margin-top: var(--s5); min-height: 52px;
  background: var(--gold); color: var(--gold-ink);
  border: 0; border-radius: 12px; padding: 14px;
  font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
}
.cta:hover:not(:disabled) { filter: brightness(1.07); }
/* NOT opacity on gold — that renders as a muddy olive that looks like a
   broken button rather than an unavailable one. A disabled control should
   recede into the card, not discolour. */
.cta:disabled {
  background: var(--pane-2); color: var(--ink-3);
  border: 1px solid var(--line); cursor: not-allowed;
}
.cta-wallet { background: #2b3441; color: var(--ink); }

.ghost {
  display: block; min-height: 40px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-2); padding: 10px 12px;
  font-family: inherit; font-size: 13px; line-height: 1.4;
  cursor: pointer; text-decoration: none; text-align: center;
}
.ghost:hover { color: var(--ink); border-color: var(--line-2); }
.row-actions { display: flex; gap: 8px; margin-top: 14px; }
.row-actions > * { flex: 1; }

.err {
  margin: var(--s4) 0 0; padding: 10px 12px;
  background: rgba(248, 81, 73, .10); border: 1px solid rgba(248, 81, 73, .35);
  border-radius: 10px; color: #ffb4ae; font-size: 13px;
}

.fineprint { margin: var(--s4) var(--s1) 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.fineprint strong { color: var(--gold); font-weight: 500; }

/* ── deposit view ───────────────────────────────────────────────────────── */
.steps { display: flex; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.step {
  flex: 1; text-align: center; font-size: 11px; color: var(--ink-3);
  padding-top: 8px; border-top: 2px solid var(--line);
}
.step.is-on { color: var(--gold); border-top-color: var(--gold); }
.step.is-done { color: var(--good); border-top-color: var(--good); }
.step.is-bad { color: var(--bad); border-top-color: var(--bad); }

.send-line { margin: 0 2px 14px; font-size: 14px; color: var(--ink-2); }
.send-line strong { color: var(--ink); }

.qr-wrap { display: grid; place-items: center; gap: 8px; margin-bottom: 14px; }
.qr-note { margin: 0; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.qr-note strong { color: var(--ink-2); font-weight: 500; }
.linkish {
  background: none; border: 0; padding: 2px; margin: 0;
  color: var(--ink-3); font-family: inherit; font-size: 11.5px;
  text-decoration: underline; cursor: pointer;
}
.linkish:hover { color: var(--ink-2); }

/* The memo gets a bordered panel and a full sentence, not a one-line label.
   It applies to one asset in 139 — so on the rare page that shows it, the
   person has almost certainly never seen one before and is one careless paste
   away from losing the deposit for good. */
.memo-panel {
  margin-top: 10px; padding: 12px 12px 12px;
  border: 1px solid rgba(244, 183, 40, .45); border-radius: 12px;
  background: rgba(244, 183, 40, .05);
}
.memo-warn { margin: 0 2px 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.memo-warn strong { color: var(--gold); }
.memo-panel .addr-box { border-color: rgba(244, 183, 40, .35); }

.warn-note {
  margin: var(--s4) 0 0; padding: 10px 12px;
  background: rgba(244, 183, 40, .08); border: 1px solid rgba(244, 183, 40, .35);
  border-radius: 10px; color: #f3d894; font-size: 12.5px; line-height: 1.5;
}
.qr {
  background: #fff; padding: 10px; border-radius: 12px; line-height: 0;
  width: 188px; height: 188px; display: grid; place-items: center;
}
.qr svg, .qr img { width: 100%; height: 100%; display: block; }

.addr-box {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px;
  background: var(--pane); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px 11px 14px;
}
/* Consecutive boxes were flush against each other, reading as one control with
   a seam through it. They are separate things to copy, so they get separate
   edges. */
.addr-box + .addr-box,
.addr-box + .memo-panel,
.qr-wrap + .addr-box { margin-top: var(--s2); }

.addr-label { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); }
.addr-label.warn { color: var(--gold); }
.addr-box code { font-family: var(--mono); font-size: 13px; word-break: break-all; min-width: 0; }
.addr-box.memo { margin-top: 0; }
.memo-panel + .cta, .addr-box + .cta { margin-top: var(--s4); }
.copy {
  align-self: center; min-height: 38px;
  background: #2b3441; border: 0; border-radius: 8px;
  color: var(--ink); padding: 7px 12px;
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.copy:hover { background: #36414f; }

.status {
  margin: 14px 2px 0; font-size: 13px; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex: 0 0 auto;
  animation: pulse 1.6s ease-in-out infinite;
}
.status.is-done::before { background: var(--good); animation: none; }
.status.is-bad::before { background: var(--bad); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status::before { animation: none; } }

/* ── notify ──────────────────────────────────────────────────────────────── */
/* Asked for here rather than on the swap card: before committing it is one
   more field between someone and a quote, and after committing it answers the
   question they now have, which is whether they have to sit and watch. */
.notify {
  margin-top: var(--s5); padding: var(--s4);
  background: var(--pane); border: 1px solid var(--line); border-radius: 12px;
}
.notify .field-label { display: block; margin-bottom: 2px; }
.notify .field-hint { display: block; margin-bottom: var(--s3); }
.notify-row { display: flex; gap: var(--s2); }
.notify-row input {
  flex: 1; min-width: 0; min-height: 44px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: var(--s3); color: var(--ink);
  font-family: inherit; font-size: 16px; outline: 0;
}
.notify-row input:focus { border-color: var(--line-2); }
.notify-row input::placeholder { font-size: 14px; color: var(--ink-3); }
.notify-row button { flex: 0 0 auto; }
.notify-done {
  margin: var(--s5) 0 0; padding: var(--s3) var(--s4);
  background: rgba(63, 185, 80, .08); border: 1px solid rgba(63, 185, 80, .3);
  border-radius: 10px; font-size: 12.5px; color: var(--ink-2);
}

/* ── settled ─────────────────────────────────────────────────────────────── */
.settled { margin-top: var(--s2); }
.settled-amount { margin: 0; font-size: 15px; color: var(--ink-2); }
.settled-amount strong {
  display: block; font-size: 26px; font-weight: 650; color: var(--good);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: var(--s1);
}
.settled-to { margin: var(--s2) 0 0; font-size: 13px; color: var(--ink-3); }
.settled-links { display: grid; gap: var(--s2); margin: var(--s4) 0 0; }
/* The destination link is the proof, so it is the primary action on this
   screen — gold, like the button that started the swap. The origin link is
   supporting evidence and stays quiet. */
.settled-links a {
  display: block; min-height: 48px; padding: var(--s3);
  border-radius: 11px; text-decoration: none; font-size: 14px; text-align: center;
  line-height: 24px; font-weight: 600;
  background: var(--gold); color: var(--gold-ink); border: 1px solid var(--gold);
}
.settled-links a:hover { filter: brightness(1.07); }
.settled-links a.secondary {
  background: var(--pane); border-color: var(--line); color: var(--ink-2);
  font-weight: 400;
}
.settled-links a.secondary:hover { color: var(--gold); border-color: var(--line-2); }

.settled-bad .settled-amount strong { color: var(--bad); }

/* ── lost-swap lookup ────────────────────────────────────────────────────── */
/* Closed by default: it is a recovery path, not a feature, and someone who has
   not lost anything should not have to read past it. */
.lookup { width: 100%; margin-top: var(--s5); font-size: 13px; }
.lookup summary {
  cursor: pointer; color: var(--ink-3); padding: var(--s2) 0;
  list-style: none; min-height: 32px; display: flex; align-items: center;
}
.lookup summary::-webkit-details-marker { display: none; }
.lookup summary::before { content: "＋"; margin-right: var(--s2); opacity: .7; }
.lookup[open] summary::before { content: "－"; }
.lookup summary:hover { color: var(--ink-2); }
.lookup p { margin: 0 0 var(--s3); color: var(--ink-3); line-height: 1.55; font-size: 12.5px; }
.lookup form { display: flex; gap: var(--s2); }
.lookup input {
  flex: 1; min-width: 0; min-height: 44px;
  background: var(--pane); border: 1px solid var(--line); border-radius: 10px;
  padding: var(--s3); color: var(--ink);
  font-family: var(--mono); font-size: 16px; outline: 0;
}
.lookup input:focus { border-color: var(--line-2); }
.lookup input::placeholder { font-family: inherit; font-size: 13px; color: var(--ink-3); }
.lookup button { flex: 0 0 auto; }

/* ── picker dialog ──────────────────────────────────────────────────────── */
dialog {
  width: min(440px, 94vw); max-height: 78dvh;
  padding: 0; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-2); color: var(--ink);
  overflow: hidden;
}
dialog::backdrop { background: rgba(0, 0, 0, .65); }
.picker-head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
#search {
  flex: 1; min-height: 44px;
  background: var(--pane); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; color: var(--ink);
  font-family: inherit; font-size: 16px; outline: 0;
}
#search:focus { border-color: var(--line-2); }
.picker-close {
  background: none; border: 0; color: var(--ink-3);
  font-size: 15px; cursor: pointer; padding: 0 8px; min-width: 40px;
}
.picker-close:hover { color: var(--ink); }

.asset-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; max-height: 56dvh; -webkit-overflow-scrolling: touch; }
.asset-list .group {
  padding: 10px 12px 4px; font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.asset-list button {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: 10px; padding: 8px 12px;
  color: var(--ink); font-family: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.asset-list button:hover, .asset-list button.is-active { background: var(--pane); }
.al-text { display: grid; line-height: 1.3; min-width: 0; }
.al-sym { font-weight: 600; }
.al-chain { color: var(--ink-3); font-size: 12px; }
.al-right { margin-left: auto; text-align: right; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.al-min { display: block; color: var(--gold); font-size: 11px; }
.picker-foot { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }

/* ── desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  main { padding-top: var(--s5); gap: var(--s5); }
  .hero p { font-size: 15px; }
  .card { padding: var(--s4); }
}

@media (min-width: 900px) {
  .hero h1 { font-size: 30px; }
}

/* Under 560px the picker is a bottom sheet — reachable with a thumb, and it
   does not fight the on-screen keyboard the way a centred modal does. */
@media (max-width: 560px) {
  dialog {
    width: 100%; max-width: none; max-height: 88dvh;
    margin: auto auto 0; border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .asset-list { max-height: 62dvh; }
  .row-actions { flex-direction: column; }

  /* Edge-to-edge on a phone: a 14px gutter on each side of a card that is
     already the whole screen is 28px of nothing, and the amount field is the
     widest thing on the page. */
  main { padding-left: var(--s3); padding-right: var(--s3); }
  .top { padding: var(--s2) var(--s3); min-height: 56px; }
  .foot { padding: var(--s5) var(--s3) var(--s6); }
  .card { padding: var(--s3); border-radius: 18px; }

  /* The asset pill and the amount compete for one row. Below 380px the pill's
     chain name is what gives, not the price. */
  .asset-chain { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── the band below the card ─────────────────────────────────────────────── */
/* The card is 460px and the page is not. Rather than leave a wide screen as a
   void either side of it, the content below gets its own wider column and a
   rule to mark the change — two deliberate widths read better than one lonely
   one. Above 900px the two halves sit side by side, which is what finally
   gives the horizontal space a job. */
.band {
  width: 100%;
  max-width: 940px;
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s7);
}
.band-full h2 {
  margin: 0 0 var(--s2);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.band-full > p {
  margin: 0 0 var(--s4);
  font-size: 13px; line-height: 1.6; color: var(--ink-3);
}

.pair-links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pair-links a {
  background: var(--pane); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; color: var(--ink-2); text-decoration: none;
  min-height: 36px; display: inline-flex; align-items: center;
}
.pair-links a:hover { color: var(--gold); border-color: var(--line-2); }
.pair-links .pair-all { color: var(--gold); border-color: rgba(244, 183, 40, .35); }

.faq { margin: 0; display: grid; gap: var(--s4); }
.faq dt { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: var(--s1); }
.faq dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* Chips wrap across the full width and the questions split into two columns —
   a single 940px column of six answers is a very long scroll for a page whose
   point is the card above it. */
@media (min-width: 760px) {
  .faq-cols { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s7); }
}

/* ── recent swaps, on its own page ───────────────────────────────────────── */
.recent-page { width: 100%; max-width: 560px; }
.recent-page h1 {
  margin: 0 0 var(--s5);
  font-size: clamp(22px, 5.5vw, 26px); letter-spacing: -.02em; font-weight: 650;
}
.recent-page > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
/* An empty screen is an invitation to act, not a notice. */
.recent-empty {
  margin: 0; padding: var(--s7) var(--s5);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  text-align: center;
}
.recent-empty p { margin: 0 0 var(--s5); font-size: 14px; color: var(--ink-2); }
.recent-empty .cta { display: inline-block; width: auto; margin: 0; padding: 13px 22px;
  text-decoration: none; min-height: 0; }

/* The caveat belongs after the list, not before it — nobody wants a privacy
   footnote between them and their own swaps. */
.recent-note {
  margin: var(--s5) 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3);
}
.recent-back { margin: var(--s6) 0 0; font-size: 13px; }
.recent-back a { color: var(--gold); }
.on-recent-page #swap-view,
.on-recent-page .hero,
.on-recent-page .band,
.on-recent-page #deposit-view { display: none; }

/* ── footer ─────────────────────────────────────────────────────────────── */
/* Same column as the content above it. A 1200px footer under a centred card
   put the links hard left of everything else. */
.foot {
  max-width: 720px; width: 100%; margin: 0 auto;
  padding: var(--s6) var(--s4) var(--s7);
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.55; color: var(--ink-3);
}
/* Popular pairs, below the fold but in the HTML on first byte — a crawler
   reads them and the page still opens on nothing but the card. */
.foot-pairs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.foot-pairs a {
  background: var(--pane); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; color: var(--ink-3); text-decoration: none;
}
.foot-pairs a:hover { color: var(--gold); border-color: var(--line-2); }

.foot p { margin: 0 0 var(--s2); }
.foot p:last-child { margin: 0; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--gold); }
.foot-quiet { color: #545c68; }

/* ── limit orders ───────────────────────────────────────────────────────── */
/* The mode toggle is a tab strip, not two buttons: switching is free, changes
   nothing you have typed, and both modes buy the same thing. Gold marks the
   active tab because it is the only "you are here" signal on the card. */
.modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--pane); border-radius: 12px; padding: 4px;
  margin: 0 0 14px;
}
.modes button {
  appearance: none; border: 0; border-radius: 9px;
  padding: 9px 10px; min-height: 38px;
  background: none; color: var(--ink-2);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: color .12s, background .12s;
}
.modes button:hover { color: var(--ink); }
.modes button.is-on {
  background: var(--bg-2); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* The price sits where the hinge does, because it is the thing that decides
   whether the two amounts either side of it ever meet. */
.pane-price .amount { font-size: 26px; }
/* Deliberately NOT an .asset pill. The two panes around this one end in a
   chip you can tap to change the coin, and wearing that costume for a unit
   label promises a picker that does not exist. It also inherits
   `padding-left: 6px`, which only makes sense with a 28px coin sitting in it —
   without one the text jams against the left edge, which is what made it look
   broken. A unit is typography, not a control. */
.price-unit {
  flex: 0 0 auto; display: grid; justify-items: end;
  line-height: 1.25; text-align: right;
}
.price-sym { font-weight: 650; font-size: 14px; color: var(--ink-2); }
.price-per { font-size: 11px; color: var(--ink-3); }
/* In the foot, not the head. In the head it sat directly above the unit
   label — two right-aligned blocks in one narrow column, which collided on a
   phone. The foot already has this exact shape in the pay pane: a label on the
   left, a chip on the right. */
.market-btn {
  flex: 0 0 auto; appearance: none; border: 1px solid var(--line);
  background: var(--pane-2); border-radius: 999px;
  padding: 5px 11px; min-height: 30px;
  font-family: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer;
  transition: color .12s, border-color .12s;
}
.market-btn:hover { color: var(--gold); border-color: var(--line-2); }
#price-gap { font-size: 12.5px; color: var(--ink-3); }
#price-gap.is-over { color: var(--gold); }

/* Filled-in-slices is the whole reason this is a bar and not a tick. */
.fill { margin: 0 0 var(--s4); }
.fill-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--ink-2); margin-bottom: 7px;
}
.fill-head #o-fill-pct { font-variant-numeric: tabular-nums; color: var(--ink); }
.fill-track {
  /* Not var(--pane): at 0% the track IS the whole control, and #171b21 on the
     card's #12151a is invisible -- the bar has to read as an empty gauge, not
     as nothing at all. */
  height: 6px; border-radius: 999px; background: #262c35; overflow: hidden;
}
.fill-bar {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--gold); transition: width .4s ease;
}
.fill-bar.is-done { background: var(--good); }

.ghost-bad:hover { color: var(--bad); border-color: var(--bad); }

@media (max-width: 560px) {
  .pane-price .amount { font-size: 23px; }
}

/* The market coming down to the price someone named is the moment the page
   exists to show, so it is the one figure here that gets the gold. */
#o-market.is-hit { color: var(--gold); }

/* The fill bar is a block, not another row of the list above it. */
#o-fill { margin-top: var(--s4); }