/* The trade panel, the second-bar controls and the trade settings dialog. Builder B owns this file.
   Classes carry the prefix tp- (trade panel) or tb- (trade bar). Shared classes (.btn, .chip, .card, .input, .field,
   .seg, .note, .modal, .num, .addr, .soon, ...) live in styles.css: they are used here, never redefined.
   Colours only through the tokens of styles.css (docs/BLUEPRINT.md section 4.9). Green and red are buy / sell and
   profit / loss only; orange is what is ours. No page may scroll sideways at 375 px.
   Names already taken by the board and the token page (css/terminal.css, css/filters.css) and NOT used here:
   .tp .tp-buy .tp-sell .tp-side .tp-sol .tp-t .tp-tx .tp-usd .tp-w (tape rows), .tr-buy .tr-sell (tape flashes),
   .wl .wl-dev .wl-sniper .wl-bundler .wl-kol (wallet labels). */

/* ---------- the second bar ---------- */
.tb-wide { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.chip.tb-chip { display: none; cursor: pointer; font-family: var(--font-mono); }
.tb-off { border-style: dashed; }
.tb-presets, .tb-speeds { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); }
.tb-p, .tb-s { height: 22px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 700 11.5px/1 var(--font-ui); white-space: nowrap; }
.tb-p { font-family: var(--font-mono); }
.tb-p:hover, .tb-s:hover { color: var(--text); }
.tb-p.on, .tb-s.on { background: var(--brand); color: var(--on-brand); }
.tb-turbo { font-size: 10.5px; }
.tb-slip { cursor: pointer; font-family: var(--font-mono); }
.tb-gear { width: 26px; height: 26px; }
.tb-gear .ico { width: 15px; height: 15px; }
.tb-gear:hover { color: var(--brand-hi); }

/* ---------- trade settings (inside the shared dialog) ---------- */
.tb-settings { display: grid; gap: 4px; }
.tb-settings .seg { margin-bottom: 12px; }
.tb-settings .field { margin-bottom: 10px; }
.tb-h { margin: 10px 0 8px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-hi); }
.tb-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tb-switch { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); cursor: pointer; }
.tb-check { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }

/* ---------- the panel ---------- */
.tp-panel { display: grid; gap: 10px; margin: 0; padding: 14px; border-color: var(--line-2); }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tp-head .seg { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; }
.tp-head .seg-btn { min-height: 34px; font-size: 13.5px; }
.tp-preset { flex: none; cursor: pointer; font-family: var(--font-mono); }
.tp-state:empty, .tp-dry:empty, .tp-pos:empty, .tp-wallet:empty { display: none; }
.tp-state .note { margin: 0; }
.tp-amount { position: relative; display: block; }
.tp-amount-in { min-height: 46px; padding-right: 52px; font-size: 20px; font-weight: 700; }
.tp-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font: 700 12px/1 var(--font-ui); pointer-events: none; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { flex: 1 1 0; justify-content: center; min-width: 46px; min-height: 30px; cursor: pointer; font: 700 12px/1 var(--font-mono); color: var(--text); }
.tp-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-hi); }
.tp-hold, .tp-est, .tp-speed, .tp-fee, .tp-line { margin: 0; }
.tp-est { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.tp-fee { color: var(--brand-hi); font-weight: 700; letter-spacing: 0.02em; }
.tp-go { min-height: 46px; font-size: 15.5px; }
.tp-go.btn-primary { box-shadow: var(--glow); }
.tp-dry-btn .ico { width: 14px; height: 14px; }
.tp-line { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); overflow-wrap: anywhere; }
.tp-line-ok { border-color: var(--up); }
.tp-line-warn { border-color: var(--warn); }
.tp-line-error { border-color: var(--down); }
.tp-dry, .tp-pos { display: grid; gap: 5px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); }
.tp-dry p, .tp-pos p { margin: 2px 0 0; }
.tp-dry-ok { color: var(--brand-hi); }
.tp-dry-no { color: var(--warn); }
.tp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; font-size: 12.5px; }
.tp-row .num { text-align: right; overflow-wrap: anywhere; min-width: 0; }
.tp-pos-h { font: 700 11px/1.3 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tp-pnl { font-weight: 700; }
.tp-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; font-size: 12.5px; }
.tp-wallet-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the one line under the wallet row for a login that signs without asking (its own row at every width) */
.tp-wallet-note { flex: 0 0 100%; margin: 0; }
.tp-unlock { cursor: pointer; }
.tp-soon { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-soon .btn { flex: 1 1 auto; gap: 6px; padding: 4px 8px; }

/* ---------- the width contract: under 560 px the bar is ONE chip ---------- */
@media (max-width: 559px) {
  .tb-wide { display: none; }
  .chip.tb-chip { display: inline-flex; }
  .tb-three { grid-template-columns: 1fr; }
}
/* between 560 and 899 px the bar keeps the presets and the gear; the speed moves into the settings */
@media (min-width: 560px) and (max-width: 899px) {
  .tb-speeds, .tb-turbo { display: none; }
}