/* ============================================================================
   AVENLEO — MONEY  (wallet / deposit / withdraw)
   ----------------------------------------------------------------------------
   The three screens where money actually moves, and therefore the three where
   the interface has to be most obviously exact.

   The balance cards used to be tinted panels — a blue one, a gold one — which
   made the wallet look like a set of coloured tiles rather than a statement.
   They are now the same surface as everything else, distinguished by a rule on
   the leading edge and by which figure is largest. Colour is reserved for the
   earned balance, because "this is the money you can take out" is a genuine
   distinction worth marking.
   ========================================================================== */

/* form (main) + info (aside) split, used by deposit and withdraw */
.money-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.money-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---- balance cards ------------------------------------------------------ */
.bal-summary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.bal-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  box-shadow: var(--edge-highlight);
}
.bal-card--primary { border-left: 2px solid var(--color-primary); }
.bal-card--accent  { border-left: 2px solid var(--color-accent); }
.bal-card__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.bal-card__label .icon { width: 13px; height: 13px; }
.bal-card__value {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
  line-height: 1.05;
}
.bal-card--accent .bal-card__value { color: var(--color-accent-strong); }
.bal-card__sub { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-1); }

/* ---- asset list (wallet) ------------------------------------------------ */
.asset-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.asset-row:last-child { border-bottom: none; }
.asset-row__id { min-width: 0; }
.asset-row__name { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.asset-row__sym { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-faint); }
.asset-row__bal { margin-left: auto; text-align: right; white-space: nowrap; }
.asset-row__crypto { font-family: var(--font-display); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.asset-row__fiat { font-size: var(--text-2xs); color: var(--color-text-faint); }
.asset-row__actions { display: flex; gap: var(--space-2); flex: none; }

/* ---- asset picker ------------------------------------------------------- */
.asset-pick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.asset-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  cursor: pointer;
  font-weight: var(--weight-medium); font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.asset-chip:hover { border-color: var(--color-border-strong); }
.asset-chip[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-fg); }

/* ---- network options ---------------------------------------------------- */
.net-list { display: grid; gap: var(--space-2); }
.net-opt {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: var(--color-surface-1);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  text-align: left; width: 100%;
}
.net-opt:hover { border-color: var(--color-border-strong); }
.net-opt[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.net-opt__name { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.net-opt__desc { font-size: var(--text-2xs); color: var(--color-text-faint); }
.net-opt__fee { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

/* ---- deposit: address + QR ---------------------------------------------- */
.deposit-box { text-align: center; }
.qr-wrap {
  width: 168px; height: 168px;
  margin: 0 auto var(--space-4);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 10px;
  border: 1px solid var(--color-border);
}
.qr-wrap svg { width: 100%; height: 100%; display: block; }
.addr-box {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 5px 5px 5px var(--space-3);
}
.addr-box__text { font-family: var(--font-mono); font-size: var(--text-xs); text-align: left; flex: 1; min-width: 0; }
.addr-meta { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-2xs); color: var(--color-text-faint); }

/* ---- warnings ----------------------------------------------------------- */
.warn {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
  color: var(--color-text);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.warn .icon { width: 16px; height: 16px; flex: none; color: var(--color-warning); margin-top: 1px; }
.warn strong { color: var(--color-warning); font-weight: var(--weight-semibold); }

/* ---- withdraw: the amount ----------------------------------------------- */
.amount-field { position: relative; }
.amount-field input {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
  padding-right: 92px;
  height: auto;
  padding-top: var(--space-3); padding-bottom: var(--space-3);
}
.amount-field__suffix { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: var(--space-2); }
.amount-field__unit { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; }
.field-row__bal { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---- numbered sections inside a card ------------------------------------ */
.field-group { margin-bottom: var(--space-5); }
.field-group:last-child { margin-bottom: 0; }
.field-group__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.field-group__label .step {
  width: 18px; height: 18px; border-radius: var(--radius-xs);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  display: grid; place-items: center;
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  flex: none; font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .money-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bal-summary { grid-template-columns: minmax(0, 1fr); }
  .asset-row { padding: var(--space-3) var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
  .asset-row__bal { margin-left: auto; }
  .asset-row__actions { width: 100%; }
  .asset-row__actions .btn { flex: 1; }
  .qr-wrap { width: 152px; height: 152px; }
  .amount-field input { font-size: var(--text-xl); }
}

/* Three balances rather than two — available, locked and earned. Same card,
   one more of it; below 900px they stack the way the two-up version does. */
.bal-summary--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bal-summary--three { grid-template-columns: 1fr; } }

/* One line under the balances: what an active level is holding, and when it
   comes back. Not a card, on purpose — it is a sentence about the level, and
   giving it a card would make it look like a third balance again, which is the
   thing this replaced. */
.level-note {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.level-note[hidden] { display: none; }
.level-note .icon { flex: none; color: var(--color-text-faint); }

/* The welcome bonus wears the same sentence, in gold — it is about earned
   money, and gold is what earned money is throughout the product. Border and
   icon only: a filled panel here would out-shout the balances above it. */
.level-note--accent { border-color: var(--color-accent-border); background: var(--color-accent-soft); }
.level-note--accent .icon { color: var(--color-accent-strong); }

/* And in jade the moment a transfer actually lands. The automatic rail has no
   button and no receipt to upload, so this panel is the entire confirmation a
   member gets that their money arrived — the one place on this screen where
   colour is carrying a fact rather than decorating one. */
.level-note--success { border-color: var(--color-success-border); background: var(--color-success-soft); }
.level-note--success .icon { color: var(--color-success); }
.level-note--success b { color: var(--color-text); }

/* ===========================================================================
   PAYING IN NAIRA
   ---------------------------------------------------------------------------
   The deposit screen offers three routes and they are genuinely different
   shapes of thing — a bank transfer, a redirect to a card page, and a chain
   address. So the picker is a list of rows rather than the flat chips the
   asset picker uses: each one needs a line of explanation, and a chip has
   nowhere to put it.

   Everything below is built from the tokens the rest of the product already
   uses. No new colours, no new radii, and the selected state is the same
   primary-soft fill that `.asset-chip` and `.net-opt` already wear, so a
   pressed method reads as pressed without anybody having to learn a new signal.
   =========================================================================== */

.pay-methods { display: grid; gap: var(--space-2); }

.pay-method {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: inherit; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pay-method:hover { border-color: var(--color-border-strong); }
.pay-method[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pay-method > .icon { width: 20px; height: 20px; flex: none; color: var(--color-text-muted); }
.pay-method[aria-pressed="true"] > .icon { color: var(--color-primary-fg); }
.pay-method__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-method__name { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.pay-method__desc { font-size: var(--text-2xs); color: var(--color-text-faint); }
.pay-method__tag { margin-left: auto; flex: none; }
/* The phone-width label. Present in the markup at every width and shown at one,
   because a control that rewrites its own text on resize flickers. */
.pay-method__short { display: none; }

/* Held while a request is in flight — the methods stay legible rather than
   greying out, but nothing switches underneath a payment being opened. */
.pay-methods[aria-disabled="true"] .pay-method { pointer-events: none; opacity: 0.5; }

/* The Naira figure under the amount box. It is the number somebody actually
   transfers, so it is set larger than the label beside it — and the rate sits
   next to it in the same line because "at what rate" is the immediate next
   question, not a footnote. */
.naira-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-2);
}
.naira-line__value {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.naira-line__rate { font-size: var(--text-2xs); color: var(--color-text-faint); text-align: right; }

/* The level prices, as one-tap amounts. Somebody topping up for Pro should not
   have to read $21 off another page and type it in here. */
.quick-amounts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.quick-amount {
  padding: 6px var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-muted);
  font-size: var(--text-xs); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.quick-amount:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.quick-amount[aria-pressed="true"] {
  border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-fg);
}
.quick-amount b { font-weight: var(--weight-semibold); color: inherit; }

/* ------------------------------------------------------- THE VIRTUAL ACCOUNT
   The account number is the one thing on this screen that must be copied
   exactly, so it gets the monospace face and the primary Copy button, and the
   amount above it is set as the largest figure on the page — transferring the
   wrong amount is the only real way to get this wrong. */
.vaccount {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-2); overflow: hidden;
}
.vaccount__amount {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-1);
}
.vaccount__amount-label {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-text-faint); flex: none;
}
.vaccount__amount-value {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); font-variant-numeric: tabular-nums; line-height: 1;
  margin-left: auto;
}
.vaccount__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
}
.vaccount__row:last-child { border-bottom: none; }
.vaccount__row--muted { background: transparent; color: var(--color-text-muted); }
/* The account number. It is the one field where a typo costs somebody money, so
   it is the only row that gets a fill of its own. */
.vaccount__row--key { background: var(--color-surface-1); }
.vaccount__label { font-size: var(--text-xs); color: var(--color-text-faint); flex: none; min-width: 116px; }
.vaccount__value { font-size: var(--text-sm); font-weight: var(--weight-medium); min-width: 0; overflow-wrap: anywhere; }
.vaccount__value--mono {
  font-family: var(--font-mono); font-size: var(--text-base);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.vaccount__row .btn { margin-left: auto; flex: none; }
.vaccount__copy { flex: none; }

/* ------------------------------------------------------------------ THE ACTION
   Foot of the summary card on a desktop; pinned above the bottom bar on a
   phone, where the summary is a screen and a half below the amount box. Same
   element either way, so there is exactly one submit button on the page and
   exactly one thing to disable. */
.pay-bar { margin-top: var(--space-5); }
.pay-bar[hidden] { display: none; }
/* The figure is the summary card's job at this width -- the rows above say it. */
.pay-bar__figure { display: none; }

/* ===========================================================================
   PAYING IN NAIRA — ON A PHONE
   ---------------------------------------------------------------------------
   This is where almost every Naira payment is actually made, and it used to be
   the desktop screen at a narrower width: three tall method rows, an amount box,
   the level chips wrapped over two lines, then a summary card and a card of
   instructions, and only then the button. Deciding to pay meant scrolling past
   everything you had already read to reach it.

   Four changes, in order of how much they matter:

     1. The button is pinned above the bottom bar with the Naira figure beside
        it. It is the same element as the desktop one, moved — not a second
        button kept in step by script.
     2. The three methods become one segmented control. At 360px a row with an
        icon, a name, a description and a tag has about eleven characters of
        room for the name, so the description and the tag go and the short label
        comes in.
     3. The instruction card goes entirely, and the reassurance line under the
        button with it. Both restate what the numbered steps already say, and on
        a phone they are a screen of prose standing between the amount and the
        button.
     4. The account rows stack — label over value, full-width copy button. A
        one-line row at this width put an eleven-digit account number and a
        button on the same line as its label, and wrapped whichever lost.

   640px, not 560: it is the width at which the bottom bar appears, and the
   pinned button has to know where that bar is.
   =========================================================================== */
@media (max-width: 640px) {

  /* ---- the method picker, as one control -------------------------------
     Scoped to `--segmented`, and that scope is the fix for two bugs rather
     than a tidy-up.

     These rules used to apply to every `.pay-methods` on the page. Two things
     are built out of that class: the two- or three-way picker at the top of a
     form, which really is one control and should collapse into a segmented
     strip on a phone — and `#wdSaved`, the list of bank accounts a member has
     saved, which is a list and must stay a list. Applied to the second, the
     rules below hid `__name` and `__desc`, which are the account name and the
     bank, and squeezed however many accounts somebody had into three columns.

     Worse on the picker itself: `#wdDest` had no `__short` in its markup, so
     hiding the other two labels left both buttons completely blank — an empty
     box where the choice between a bank and a crypto payout should be.

     `grid-auto-flow: column` rather than `repeat(3, …)` for the same class of
     reason. Three was the deposit page's method count written into a shared
     rule; the withdraw picker has two, so its second button sat in the middle
     with a third of the control left empty beside it. Auto columns fit
     whatever is actually there. */
  .pay-methods--segmented {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
  }
  .pay-methods--segmented .pay-method {
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    border: none; border-radius: 0;
    border-right: 1px solid var(--color-border);
    min-height: 62px;
  }
  .pay-methods--segmented .pay-method:last-child { border-right: none; }
  .pay-methods--segmented .pay-method[aria-pressed="true"] {
    /* No border to move, so the pressed segment is a fill and a weight — the
       same primary-soft the rest of the product uses for a chosen thing. */
    background: var(--color-primary-soft);
    box-shadow: inset 0 -2px 0 0 var(--color-primary);
  }
  .pay-methods--segmented .pay-method > .icon { width: 18px; height: 18px; }
  .pay-methods--segmented .pay-method__body { align-items: center; gap: 0; width: 100%; }
  .pay-methods--segmented .pay-method__name,
  .pay-methods--segmented .pay-method__desc,
  .pay-methods--segmented .pay-method__tag { display: none; }
  .pay-methods--segmented .pay-method__short {
    display: block;
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .pay-methods--segmented .pay-method[aria-pressed="true"] .pay-method__short {
    font-weight: var(--weight-semibold); color: var(--color-primary-fg);
  }

  /* ---- the saved accounts, as rows ---------------------------------------
     What the list looks like without the segmented rules above: the same
     stacked cards it has on a laptop, a little tighter. The account name is the
     thing being chosen between, so it is the thing that has to be legible. */
  .saved-acct .pay-method { padding: var(--space-3); }
  .saved-acct .pay-method__desc { font-size: var(--text-2xs); }

  /* ---- the amount ------------------------------------------------------ */
  /* 16px or larger, always. Below that iOS zooms the page on focus and leaves
     it zoomed, which is how a form ends up scrolled sideways. */
  .amount-field input { font-size: 1.5rem; padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .naira-line { flex-direction: column; align-items: flex-start; gap: 2px; }
  .naira-line__value { font-size: var(--text-xl); }
  .naira-line__rate { text-align: left; }

  /* The level prices on one line that scrolls, rather than three wrapped rows.
     Edge to edge so the last chip is visibly cut off — that is what says there
     is more of it. */
  .quick-amounts {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5);
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .quick-amounts::-webkit-scrollbar { display: none; }
  .quick-amount { scroll-snap-align: start; padding: var(--space-2) var(--space-4); }

  /* ---- the account, stacked -------------------------------------------- */
  .vaccount__amount { flex-wrap: wrap; padding: var(--space-4) var(--space-4) var(--space-3); }
  .vaccount__amount-label { width: 100%; }
  .vaccount__amount-value { font-size: var(--text-3xl); margin-left: 0; flex: 1; }
  .vaccount__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .vaccount__label { min-width: 0; grid-column: 1; }
  .vaccount__value { grid-column: 1; font-size: var(--text-md); }
  .vaccount__value--mono { font-size: var(--text-xl); letter-spacing: 0.06em; }
  /* Spans both rows of the cell it sits in, so the tap target is the full
     height of the row rather than a 31px button beside a two-line label. */
  .vaccount__row .btn { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; min-height: 40px; }
  .vaccount__row--muted { grid-template-columns: 1fr auto; }
  .vaccount__row--muted .vaccount__label { grid-column: 1; grid-row: 1; }
  .vaccount__row--muted .vaccount__value { grid-column: 2; grid-row: 1; text-align: right; }

  /* ---- the pinned action ----------------------------------------------- */
  .pay-bar {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    /* Under the bottom bar in the stack, never over it. */
    z-index: calc(var(--z-header) - 1);
    display: flex; align-items: center; gap: var(--space-3);
    margin-top: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px -18px rgb(0 0 0 / 0.55);
  }
  .pay-bar[hidden] { display: none; }
  .pay-bar__figure { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: none; }
  .pay-bar__label {
    font-size: var(--text-2xs); color: var(--color-text-faint);
    letter-spacing: var(--tracking-caps); text-transform: uppercase;
  }
  .pay-bar__value {
    font-family: var(--font-display); font-weight: var(--weight-semibold);
    font-size: var(--text-lg); font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .pay-bar .btn { flex: 1; min-width: 0; height: 46px; }

  /* Room for the bar, so the last card is never trapped underneath it. */
  #depMain { padding-bottom: calc(var(--bottomnav-h) + var(--space-13)); }

  /* ---- what a phone does not need -------------------------------------- */
  .dep-steps-card, .pay-assure { display: none; }
}

/* ===========================================================================
   WITHDRAWING TO A BANK
   ---------------------------------------------------------------------------
   The payout screen now has two rails — a bank account in one of three
   countries, or a chain address — and the bank one is the default. Everything
   below is built from components that already exist: the country picker is
   `.asset-chip`, the saved-account list is `.pay-method`, and the fields are
   the ordinary `.field` / `.input` pair. What is added here is the handful of
   things none of those cover.

   No new colours and no new radii. A payout screen is the wrong place to
   introduce a visual idea the rest of the product does not already use.
   =========================================================================== */

/* ---- named, not badged ---------------------------------------------------
   The withdraw screen carries no bank glyph and no coin logo. Every option on
   it is written out, because this is the screen that decides where somebody's
   money goes and a small grey pictogram is not something everyone reads the
   same way — `.coin` in particular sets `font-size: 0` to hide its label behind
   the artwork, so anyone who does not recognise the logo is shown nothing.

   These two rules are what the layout needs once the icons are gone. */

/* The method rows. Without a leading icon the text should still start where the
   eye expects, so the body takes the full width rather than sitting in the gap
   the icon used to leave. */
#wdDest .pay-method__body, .saved-acct .pay-method__body { flex: 1; }

/* An asset chip is now two pieces of text: the name people know and the ticker
   they will see on their exchange. The ticker is monospace so USDT and USDC do
   not blur into each other at a glance. */
.asset-chip__name { font-weight: var(--weight-medium); }
.asset-chip__code {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-faint); letter-spacing: 0.04em;
}
.asset-chip[aria-pressed="true"] .asset-chip__code { color: inherit; opacity: 0.75; }

/* ---- the country ---------------------------------------------------------
   A statement, not a control. Which country a member is paid into follows the
   currency they chose at sign-up, so there is nothing to pick here — and this
   is deliberately NOT drawn as a selected chip, because something that looks
   pressable and is not is worse than something that plainly is not.

   Flat surface, no hover, no cursor change. It reads as a row of information,
   which is what it is. */
.region-fixed {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-1);
}
.region-fixed__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.region-fixed__name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.region-fixed__desc { font-size: var(--text-2xs); color: var(--color-text-faint); }
.region-fixed__cur {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted); letter-spacing: 0.04em;
}

/* ---- a saved account ----------------------------------------------------
   The account number is monospace because it is the field somebody scans to
   check they picked the right one, and proportional digits make two similar
   numbers look alike. */
.saved-acct { display: flex; align-items: center; gap: var(--space-2); }
.saved-acct .pay-method { flex: 1; min-width: 0; }
.saved-acct__num {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-faint); letter-spacing: 0.04em;
}
.pay-method[aria-pressed="true"] .saved-acct__num { color: inherit; opacity: 0.8; }

/* Forget-this-one. A sibling of the row rather than a child, because a button
   inside a button is invalid HTML and browsers unnest it silently.

   It stays out of the way until the row is hovered or focused — a destructive
   control should not be the second thing the eye lands on — but it is never
   `display:none`, so it stays in the tab order and reachable by a screen
   reader at every moment. */
.saved-acct__drop {
  flex: none;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.saved-acct:hover .saved-acct__drop,
.saved-acct:focus-within .saved-acct__drop { opacity: 1; }
@media (hover: none) {
  /* Nothing hovers on a phone, so it is simply always there. */
  .saved-acct__drop { opacity: 1; }
}

/* ---- what actually lands in the bank ------------------------------------
   Set apart from the summary rows above it rather than added to them. It is a
   different kind of statement: every row in `.summary` is USD, and this is the
   one figure on the screen in another currency. Running it in as a sixth row
   would invite somebody to read it as another dollar amount. */
.payout-line {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3);
  align-items: baseline;
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}
.payout-line[hidden] { display: none; }
.payout-line__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.payout-line__value {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); font-variant-numeric: tabular-nums; text-align: right;
}
.payout-line__rate {
  grid-column: 1 / -1; font-size: var(--text-2xs); color: var(--color-text-faint);
}

/* ---- "we will remember this" -------------------------------------------- */
.save-note { display: flex; align-items: center; gap: var(--space-2); }
.save-note[hidden] { display: none; }
.save-note .icon { flex: none; color: var(--color-text-faint); }

/* ---- a message under the field it belongs to ---------------------------- */
.field-error { color: var(--color-danger); margin-top: var(--space-2); }

/* ---- PROOF OF PAYMENT ----------------------------------------------------
   Crypto deposits are approved by a person looking at the payment, so the
   screenshot is required and this is the control that asks for it.

   It is deliberately the largest thing in the crypto pane. The people filing
   these deposits are not all comfortable with a phone, and the version of this
   that failed was a small outline button reading "Attach a screenshot" — which
   is invisible next to a filled primary button, does not look like something
   that opens the camera roll, and gives no sign afterwards that anything
   happened. Everything below is a correction to one of those three.

   The words are three lines and no more: what to do, what to upload, and the
   button. A paragraph explaining an upload box is a paragraph nobody reads,
   and it makes the box it is explaining smaller.

   The markup is a <label> wrapping a visually-hidden <input type="file">, so
   the whole card is the control: click, tap, keyboard and screen reader all
   land on the same thing, with no JavaScript in the path. */

/* "Required", at the right-hand end of the step's own heading row.

   A word rather than an asterisk, because an asterisk is a convention somebody
   has to already have been taught. `margin-left: auto` rather than a fixed gap:
   `.field-group__label` is a flex row with its own gap, so this pushes to the
   end of it instead of adding a second, larger space of its own. */
.req-chip {
  flex: none; margin-left: auto;
  padding: 1px var(--space-2);
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-full);
}

/* "Optional", in the same slot and the same shape, saying the opposite.

   The transfer reference is genuinely optional — the receipt is the evidence a
   review runs on — but an unlabelled field next to a labelled one reads as
   required by omission, and somebody who cannot find their session id will sit
   there hunting for it rather than pressing send. Same geometry, quiet colour:
   the shape says "this is a note about the field", the colour says which. */
.req-chip--soft {
  color: var(--color-text-faint);
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

/* ---- the drop zone ---- */
.uploader {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.uploader[hidden] { display: none; }
.uploader:hover { border-color: var(--color-accent); background: var(--color-surface-3); }
/* The input inside is `sr-only`, so the card has to draw the focus ring the
   input itself cannot. Without this the control is invisible to a keyboard. */
.uploader:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* While a file is over it. Set from money/deposit.js on dragenter. */
.uploader.is-over { border-color: var(--color-success); background: var(--color-surface-3); }

.uploader__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}
.uploader__icon .icon { width: 26px; height: 26px; }

/* Deliberately larger than the body text around it. This is the instruction,
   and on a phone held at arm's length it is the only line that has to be
   readable without leaning in. */
.uploader__title {
  font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--color-text); line-height: var(--leading-snug);
}
.uploader__sub {
  font-size: var(--text-xs); color: var(--color-text-subtle);
  max-width: 34ch; line-height: var(--leading-snug);
}

/* Looks like a button and is not one — a <button> inside a <label> would
   swallow the click that opens the picker. The label around it does the work;
   this is here because a bordered word is what people know to press. */
.uploader__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 var(--space-5); margin-top: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border-radius: var(--radius-md);
}

/* ---- what they chose ----
   A real look at the picture. The mistake this catches is the wrong
   screenshot, and no file name has ever caught that. */
.uploaded {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  overflow: hidden;
}
.uploaded[hidden] { display: none; }
.uploaded__img {
  display: block; width: 100%; max-height: 280px;
  object-fit: contain; object-position: center;
  background: var(--color-surface-3);
}
.uploaded__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.uploaded__tick {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-success); color: var(--color-bg);
}
.uploaded__tick .icon { width: 14px; height: 14px; }
/* Takes the slack, and `min-width:0` so a long file name ellipsises instead of
   pushing the two buttons off the right edge of a phone. */
.uploaded__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uploaded__name {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uploaded__size { font-size: var(--text-2xs); color: var(--color-text-faint); }

/* ---- while a big picture is being read ---- */
.upload-busy {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.upload-busy[hidden] { display: none; }

/* Bigger than `.hint`, because this one is the reason the deposit button will
   not press and it has to be found without hunting. */
.upload-error {
  margin-top: var(--space-3);
  font-size: var(--text-sm); line-height: var(--leading-snug);
  color: var(--color-danger);
}

/* ---- a rail that is not open right now ----------------------------------
   Bank payouts are made by a person, between 8am and 6pm Lagos time, Monday to
   Saturday; an admin can also stop both rails outright. Said above the picker
   rather than under the submit button, because the cost of learning it late is
   a form filled in for nothing.

   Amber rather than red: nothing has gone wrong and nobody has done anything
   incorrect — it is a shut door with an opening time on it. */
.rail-closed {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  font-size: var(--text-sm); line-height: var(--leading-snug);
}
.rail-closed[hidden] { display: none; }
.rail-closed .icon { flex: none; margin-top: 1px; color: var(--color-warning); }
.rail-closed__why { display: block; font-weight: var(--weight-medium); }
.rail-closed__when { display: block; margin-top: 2px; color: var(--color-text-muted); }