/*
 * The SENDIT bank (spec 2026-10-18-sendit-bank-design.md, section 9): the header
 * chip and its panel, the trading key's one line, the deposit and withdraw
 * dialogs, the "Move funds to SENDIT" gate in place of a trade button, the
 * legacy rows of wallet-held funds, and /balance/ (round 21). Built from
 * shell.css's tokens; loaded after social.css, whose dialog (.pep-modal) and
 * segmented buttons (.pep-seg) it builds on. Nothing here draws without a bank
 * in the manifest.
 */

/* ------------------------------------------------------------ the chip
 * The SENDIT balance in the top bar (round 21): its name, the total and a small lime "+". Paused: dashed and muted,
 * its name says so. On /balance/: edged in lime, as a lit place. A dot when this device needs something (the words
 * are inside the panel, never colour alone). */
.pep-bank { position: relative; display: inline-flex; }
.pep-bank-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--pep-line);
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel);
  color: var(--pep-text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.pep-bank-chip:hover, .pep-bank-chip[aria-expanded="true"] { border-color: var(--pep-line-strong); background: var(--pep-panel-hover); }
.pep-bank-chip:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-bank-chip-k { color: var(--pep-text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.pep-bank-chip-v { font-size: 14px; font-weight: 700; }
.pep-bank-chip-plus {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pep-brand);
  color: var(--pep-brand-ink);
}
.pep-bank-chip-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pep-warn); box-shadow: 0 0 0 2px var(--pep-ground); }
.pep-bank-chip-here { border-color: var(--pep-brand); }
.pep-bank-chip-paused { border-style: dashed; }
.pep-bank-chip-paused .pep-bank-chip-k { color: var(--pep-warn); }
.pep-bank-chip-paused .pep-bank-chip-v { color: var(--pep-text-2); }
.pep-bank-chip-paused .pep-bank-chip-plus { background: var(--pep-panel-2); color: var(--pep-text-3); }

/* ------------------------------------------------------------ the panel
 * Under the chip on a desktop; a sheet from the screen's foot on a phone (BankChip.jsx puts it in document.body,
 * over the tab bar, with a scrim). The total big, three actions in a row, the assets with their logos, the key's
 * one line, the wallet's one line when it holds funds worth moving, the way to /balance/. */
.pep-bank-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 14px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(80vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius);
  background: var(--pep-panel);
  box-shadow: 0 18px 48px rgb(0 0 0 / 45%);
}
.pep-bank-panel-top { display: grid; gap: 2px; }
.pep-bank-panel-head { margin: 0; color: var(--pep-text-2); font-size: 13px; font-weight: 600; }
.pep-bank-total { margin: 0; font-size: var(--pep-num-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.pep-bank-note { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
/* Deposit, Withdraw and Get test dollars: one row; the faucet's check and its answer under all three. */
.pep-bank-do { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; }
.pep-bank-do .pep-btn { justify-content: center; width: 100%; min-height: 36px; padding: 0 8px; white-space: normal; line-height: 1.15; }
.pep-bank-faucet { display: contents; }
.pep-bank-do .pep-faucet-check,
.pep-bank-do .pep-cash-note { grid-column: 1 / -1; margin: 0; }
.pep-bank-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pep-bank-asset {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--pep-line);
}
.pep-bank-asset:last-child { border-bottom: 0; }
.pep-bank-asset-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pep-bank-asset-name b { font-size: 14px; }
.pep-bank-asset-name span { overflow: hidden; color: var(--pep-text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pep-bank-asset-usd { font-size: 14px; font-weight: 700; }
/* pUSD's row with its small Buy (round 22, BuyDialog.jsx): a fourth column for the pill. */
.pep-bank-asset.pep-bank-asset-buy { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.pep-bank-buy {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: transparent;
  color: var(--pep-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pep-bank-buy:hover { border-color: var(--pep-text-2); background: var(--pep-panel-hover); }
.pep-bank-buy:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-bank-wallet-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  padding: 8px 10px 8px 12px;
  border: 1px dashed var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
}
.pep-bank-wallet-hint p { flex: 1 1 150px; min-width: 0; margin: 0; font-size: 13px; }
.pep-bank-open {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--pep-brand);
  color: var(--pep-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pep-bank-open:hover { color: var(--pep-brand); }
/* Folded details (/balance/'s Trading key). */
.pep-bank-more { border-top: 1px solid var(--pep-line); padding-top: 10px; }
.pep-bank-more > summary { color: var(--pep-text-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.pep-bank-more[open] > summary { margin-bottom: 8px; }
.pep-bank-more > * + * { margin-top: 8px; }

@media (max-width: 899px) {
  .pep-bank-chip-k { display: none; }
  .pep-bank-chip { gap: 6px; padding-left: 10px; }
  .pep-bank-panel.pep-bank-sheet {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 51;
    width: auto;
    max-height: min(88dvh, 720px);
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 48px rgb(0 0 0 / 55%);
  }
  /* The sheet's grip. */
  .pep-bank-sheet::before {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(50% - 18px);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--pep-line-strong);
  }
  .pep-bank-scrim { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 55%); }
}

/* ------------------------------------------------------------ the trading key, in one line
 * A dot in its tone, the words, the one button; the line under it when something is to do (BankStatus.jsx). */
.pep-bank-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
}
.pep-bank-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pep-text-3); }
.pep-bank-tone-ok .pep-bank-status-dot { background: var(--pep-brand); }
.pep-bank-tone-act { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pep-warn) 45%, transparent); }
.pep-bank-tone-act .pep-bank-status-dot { background: var(--pep-warn); }
.pep-bank-tone-muted .pep-bank-status-title { color: var(--pep-text-2); }
.pep-bank-status-title { margin: 0; font-size: 13px; font-weight: 700; }
.pep-bank-status-do { grid-column: 3; white-space: nowrap; }
.pep-bank-status-text,
.pep-bank-status-fail,
.pep-bank-status > .pep-notice { grid-column: 2 / -1; margin: 0; font-size: 12px; }
.pep-bank-status-fail { color: var(--pep-warn); }

/* ------------------------------------------------------------ the dialogs */
.pep-bank-dialog { width: min(460px, 100%); }
.pep-bank-field { display: grid; gap: 6px; }
.pep-bank-field-k { color: var(--pep-text-2); font-size: 13px; font-weight: 600; }
.pep-bank-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  color: var(--pep-text-2);
}
.pep-bank-input:focus-within { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-bank-value { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--pep-text); font: inherit;
  font-size: 20px; font-weight: 700; outline: none; }
.pep-bank-unit { font-size: 13px; font-weight: 600; }
.pep-bank-hint { margin: 0; font-size: 13px; }
.pep-bank-radius { margin: 0; padding: 10px 12px; border-radius: var(--pep-radius-sm); background: var(--pep-brand-soft);
  color: var(--pep-text); font-size: 13px; line-height: 1.45; }
.pep-bank-assets { flex-wrap: wrap; }
.pep-bank-wallet-line { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
/* A transaction's result (round 24, TxResult.jsx): the site's banner in the state's tone (dex.css .pep-callout), its
   glyph beside the words, a ring that turns while it waits; the state's sentence, what moved, then the hash with Copy
   and View on explorer. The dialog's own Close is the only one. */
.pep-bank-tx { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 12px; }
.pep-bank-tx-glyph { box-sizing: border-box; margin-top: 1px; }
.pep-bank-tx-spin { border: 2px solid color-mix(in srgb, var(--pep-tone) 30%, transparent); border-top-color: var(--pep-tone);
  background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .pep-bank-tx-spin { animation: pep-bank-spin 0.9s linear infinite; }
}
@keyframes pep-bank-spin { to { transform: rotate(360deg); } }
.pep-bank-tx-body { display: grid; gap: 6px; min-width: 0; }
.pep-bank-tx-body > p { margin: 0; }
.pep-bank-tx-head { font-size: 15px; }
.pep-bank-tx-head:focus { outline: none; }
.pep-bank-tx-head:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-bank-tx-amt { font-size: 18px; font-weight: 700; }
.pep-bank-tx-hash { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; }
.pep-bank-tx-copy { font-size: 13px; }
.pep-bank-tx-link { color: var(--pep-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap; }
.pep-bank-tx-link:hover { text-decoration-color: var(--pep-brand); }
.pep-bank-tx-link:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: 4px; }
/* Buy pUSD (round 22): the field's label with its Max, the two ways to pay, the live quote, the reason in words. */
.pep-bank-field-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pep-bank-max {
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pep-bank-max:hover:where(:not([disabled])) { border-color: var(--pep-text-2); color: var(--pep-text); }
.pep-bank-max:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-bank-max[disabled] { cursor: default; opacity: 0.5; }
.pep-bank-pay > button { flex: 1 1 0; }
.pep-bank-quote { display: grid; gap: 2px; }
.pep-bank-quote-get { margin: 0; font-size: 16px; font-weight: 700; }
.pep-callout.pep-bank-why { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------ the gate and the legacy rows */
/* "Move funds to SENDIT" in place of a trade button (9.2): the primary action, full width. */
.pep-bank-gate { display: grid; gap: 6px; }
.pep-bank-gate > p { margin: 0; font-size: 13px; }
/* Funds still in the wallet (9.5): a quiet row under the screen's own figures, with its two buttons. */
.pep-bank-legacy {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
}
.pep-bank-legacy > p { margin: 0; font-size: 13px; }
.pep-bank-legacy-do { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------ /balance/
 * The SENDIT balance's page (round 21, pages/balance.jsx) in the leaderboard's look: the hero (plain), the title,
 * the strip (page.css .pep-standing) with the total, the three actions and the key's line; Assets and History as
 * page.css's panels holding ranked tables; Your wallet beside the Trading key. The page's own width picks its
 * layout (the rail beside it takes 300 px or none), not the window's. */
.pep-bal-page { display: grid; gap: 18px; min-width: 0; container: pep-bal / inline-size; }
.pep-standing.pep-bal-standing { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.pep-bal-k { flex: 1 1 220px; }
.pep-bal-k > span:first-child { color: var(--pep-text-2); }
.pep-standing-k b.pep-bal-total { font-size: 34px; letter-spacing: -0.03em; line-height: 1.05; }
.pep-bal-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pep-bal-do .pep-faucet-check,
.pep-bal-do .pep-cash-note { flex: 1 1 100%; margin: 0; }
.pep-btn.pep-bal-act { min-height: 38px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
.pep-bal-standing > .pep-bank-status { flex: 1 1 100%; }
.pep-bal-none p { flex: 1 1 240px; margin: 0; color: var(--pep-text-2); font-size: 14px; }

/* The tables: an asset (logo, name over its line) on the left, the figures right-aligned, the actions at the end. */
.pep-bal-fig { justify-self: end; text-align: right; }
.pep-bal-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pep-bal-name { display: grid; gap: 1px; min-width: 0; }
.pep-bal-name b { font-size: 15px; }
.pep-bal-name span { overflow: hidden; color: var(--pep-text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pep-bal-usd { font-weight: 700; }
.pep-bal-row-do { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pep-bal-asset { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) 176px; }
.pep-bal-wrow { grid-template-columns: minmax(0, 1fr) 76px 96px 136px; gap: 12px; }
.pep-bal-flow { grid-template-columns: 84px minmax(0, 1.6fr) minmax(0, 1fr) 96px; }
.pep-bal-when { color: var(--pep-text-2); font-size: 13px; white-space: nowrap; }
.pep-bal-what { display: grid; gap: 1px; min-width: 0; }
.pep-bal-what b { font-size: 14px; }
.pep-bal-what span { color: var(--pep-text-3); font-size: 12px; }
.pep-bal-amt { font-weight: 700; white-space: nowrap; }
.pep-bal-in { color: var(--pep-up); }

/* Your wallet and the Trading key, side by side; one over the other on a narrow page. */
.pep-bal-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pep-bal-facts { display: grid; margin: 0; }
.pep-bal-facts > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--pep-line); font-size: 14px; }
.pep-bal-facts dt { color: var(--pep-text-2); }
.pep-bal-facts dd { margin: 0; }
.pep-bal-key-do { display: flex; flex-wrap: wrap; gap: 8px; }
.pep-bal-more { padding-top: 12px; }
.pep-bal-revoke { display: grid; gap: 8px; }
.pep-bal-revoke .pep-callout { margin: 0; }
.pep-btn.pep-bal-danger { border-color: var(--pep-down); color: var(--pep-down); }

@container pep-bal (max-width: 899px) {
  .pep-bal-grid { grid-template-columns: minmax(0, 1fr); }
}

/* A phone: no column heads; an asset's name and dollars on one line, its amount under the dollars, its actions
 * under both; a history row's what and amount over its when and transaction. */
@container pep-bal (max-width: 599px) {
  .pep-rt-head.pep-bal-asset,
  .pep-rt-head.pep-bal-wrow,
  .pep-rt-head.pep-bal-flow { display: none; }
  .pep-bal-asset,
  .pep-bal-wrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who usd" "who amount" "do do"; gap: 2px 12px; }
  .pep-bal-who { grid-area: who; }
  .pep-bal-usd { grid-area: usd; }
  .pep-bal-amount { grid-area: amount; color: var(--pep-text-3); font-size: 12px; }
  .pep-bal-price { display: none; }
  .pep-bal-row-do { grid-area: do; justify-content: flex-start; margin-top: 6px; }
  .pep-bal-flow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what amt" "when tx"; gap: 2px 12px; }
  .pep-bal-what { grid-area: what; }
  .pep-bal-amt { grid-area: amt; }
  .pep-bal-when { grid-area: when; font-size: 12px; }
  .pep-bal-tx { grid-area: tx; }
  .pep-bal-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pep-standing.pep-bal-standing { padding: 14px 16px; }
  .pep-bal-do { width: 100%; }
  .pep-bal-do > .pep-btn,
  .pep-bal-do .pep-cash-get { flex: 1 1 0; padding: 0 10px; }
}