/* ============================================================
   V9 "Obsidian Terminal" — Trade builder.
   Speaks the SAME ledger language as Sales + Analytics: committed items and
   search results render as the shared hairline `.v9-led-row` rows inside a
   CONTAINED scroll (renderLedgerList — capped height, edge-fade, "More ⌄"
   pill), field labels are mono terminal labels (`.v9-trade-lab`, --v9-text-2xs),
   inputs match `.v9-sales .input`, the review hero reuses `.v9-led-income`, and
   the reconciliation reuses the analytics `.v9-led-eq` equation. The only
   bespoke surface is the WIZARD chrome with no equivalent elsewhere: the step
   progress, the sliding stage, animated reveals, and the sticky money bar.
   Scoped under .v9-trade; accent is rationed to the active step, the cash-IN
   figure, and the one primary action.
   ============================================================ */
.v9-trade {
  display: flex;
  flex-direction: column;
  gap: var(--v9-space-3);
  max-width: 60rem;
  min-height: 100%;
}

/* Re-skin legacy .btn within the V9 scope so the indigo `--brand` never leaks. */
.v9-trade .btn { border-radius: var(--v9-r-sm); font-weight: 500; transition: background var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease), color var(--v9-t-micro) var(--v9-ease); }
.v9-trade .btn-primary { background: var(--v9-accent); color: var(--v9-accent-ink); border: 1px solid var(--v9-accent); }
.v9-trade .btn-primary:hover:not(:disabled) { background: var(--v9-accent-press); border-color: var(--v9-accent-press); }
.v9-trade .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.v9-trade .btn-ghost { background: transparent; color: var(--v9-text-mute); border: 1px solid var(--v9-line); }
.v9-trade .btn-ghost:hover { color: var(--v9-text); border-color: var(--v9-line-strong); background: var(--v9-hover); }

/* Header utility buttons (Clear / Trade Log): compact V9 scale — the legacy .btn
   base is `height: var(--input-height)` with no font-size, so it rendered chunky
   and off-scale next to the rest of the page. Clear is a quiet obsidian chip that
   warns red on hover (it discards the whole trade); red is the palette's --v9-neg. */
.v9-trade-head-actions .btn { height: 1.9rem; padding: 0 var(--v9-space-3); font: 500 var(--v9-text-sm) var(--v9-font-ui); }
.v9-trade-clear { background: var(--v9-surface); color: var(--v9-text-mute); border: 1px solid var(--v9-line); }
.v9-trade-clear:hover { color: var(--v9-neg); border-color: color-mix(in srgb, var(--v9-neg) 50%, var(--v9-line)); background: color-mix(in srgb, var(--v9-neg) 12%, var(--v9-surface)); }
.v9-trade-clear:focus-visible { outline: none; box-shadow: var(--v9-focus-glow); }

/* Inputs / selects / textarea — identical to the Sales + Analytics surfaces. */
.v9-trade .input, .v9-trade .select, .v9-trade .textarea {
  background-color: var(--v9-surface); border: 1px solid var(--v9-line); border-radius: var(--v9-r-sm);
  color: var(--v9-text); font: 400 var(--v9-text-sm) var(--v9-font-ui); color-scheme: dark; width: 100%;
}
.v9-trade .input, .v9-trade .select { height: 2rem; }
.v9-trade .input { padding: 0 var(--v9-space-3); }
.v9-trade .select { padding: 0 1.8rem 0 var(--v9-space-3); }
.v9-trade .textarea { padding: var(--v9-space-2) var(--v9-space-3); min-height: 4.5rem; resize: vertical; line-height: 1.5; }
.v9-trade .input:focus, .v9-trade .select:focus, .v9-trade .textarea:focus { outline: none; border-color: var(--v9-accent); box-shadow: var(--v9-focus-glow); }
.v9-trade .input.is-manual { border-color: var(--v9-accent); }

/* Mono terminal label — the analytics-ledger / sales-toolbar voice. */
.v9-trade-lab { font: 500 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v9-text-faint); }

/* ---- page chrome (header rhythm matches .v9-salespage) ---- */
.v9-trade .section-head { margin-bottom: 0; padding-block-end: 0; }
.v9-trade .section-head h1 { margin: 0; }
.v9-trade-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--v9-space-4); }
.v9-trade-head-actions { display: flex; gap: var(--v9-space-2); flex: 0 0 auto; }

/* ---- progress: a row of step chips (matches .v9-ledger-chip pill family) ---- */
.v9-trade-progress { display: flex; gap: var(--v9-space-2); flex-wrap: wrap; }
.v9-trade-pstep {
  display: inline-flex; align-items: center; gap: 8px; padding: 0.4rem 0.85rem;
  border: 1px solid var(--v9-line); border-radius: var(--v9-r-pill); background: var(--v9-surface);
  color: var(--v9-text-mute); cursor: pointer;
  transition: color var(--v9-t-micro) var(--v9-ease), background-color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease);
}
.v9-trade-pstep:hover { color: var(--v9-text); background: var(--v9-hover); }
.v9-trade-pstep:focus-visible { outline: none; box-shadow: var(--v9-focus-glow); }
.v9-trade-pstep-n { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--v9-line-strong); font: 500 var(--v9-text-2xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-trade-pstep-label { font: 500 var(--v9-text-sm) var(--v9-font-ui); }
.v9-trade-pstep-hint { font: 400 var(--v9-text-2xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-trade-pstep[data-state="active"] { color: var(--v9-accent); border-color: color-mix(in srgb, var(--v9-accent) 55%, var(--v9-line)); background: var(--v9-raised); }
.v9-trade-pstep[data-state="active"] .v9-trade-pstep-n { border-color: var(--v9-accent); color: var(--v9-accent); }
.v9-trade-pstep[data-state="active"] .v9-trade-pstep-hint { color: var(--v9-text-mute); }
.v9-trade-pstep[data-state="done"] .v9-trade-pstep-n { border-color: var(--v9-pos); color: var(--v9-pos); }

/* ---- step stage + slide transition ---- */
.v9-trade-stage { position: relative; }
.v9-trade-step { display: none; }
.v9-trade-step[data-active] { display: grid; gap: var(--v9-space-4); align-content: start; }
@keyframes v9-trade-in-next { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes v9-trade-in-prev { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.v9-trade-step.is-enter-next { animation: v9-trade-in-next var(--v9-t-std) var(--v9-ease); }
.v9-trade-step.is-enter-prev { animation: v9-trade-in-prev var(--v9-t-std) var(--v9-ease); }
@media (prefers-reduced-motion: reduce) { .v9-trade-step.is-enter-next, .v9-trade-step.is-enter-prev { animation: none; } }

.v9-trade-instruction { margin: 0; font: 400 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-text-mute); line-height: 1.5; }

/* ---- reveals (animated dropdowns over the global v9-collapse-body engine) ----
   FLAT, mirroring the approved detail-dock disclosure (.card-detail-disclosure):
   a hairline TOP rule, transparent bg, no box/radius — so the step reads as one
   continuous ruled ledger like Sales/Analytics, not a stack of cards. */
.v9-trade-reveal { border: 0; border-top: 1px solid var(--v9-line); border-radius: 0; background: transparent; overflow: visible; }
.v9-trade-reveal.is-primary { border-top-color: color-mix(in srgb, var(--v9-accent) 32%, var(--v9-line)); }
.v9-trade-reveal-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--v9-space-3); padding: var(--v9-space-3) var(--v9-space-2); background: transparent; border: 0; color: var(--v9-text); cursor: pointer; font: 500 var(--v9-text-sm) var(--v9-font-ui); text-align: left; transition: background-color var(--v9-t-micro) var(--v9-ease); }
.v9-trade-reveal-btn:hover { background: var(--v9-surface); }
.v9-trade-reveal-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v9-text-mute); transition: color var(--v9-t-micro) var(--v9-ease); }
.v9-trade-reveal-btn:hover .v9-trade-reveal-label { color: var(--v9-text); }
.v9-trade-reveal.is-primary .v9-trade-reveal-label { color: var(--v9-accent); }
.v9-trade-reveal-chevron { flex: 0 0 auto; color: var(--v9-text-faint); transition: transform var(--v9-t-std) var(--v9-ease); }
.v9-trade-reveal-btn[aria-expanded="true"] .v9-trade-reveal-chevron { transform: rotate(180deg); }
.v9-trade-reveal-clip { overflow: hidden; min-height: 0; }
.v9-trade-reveal-inner { display: grid; gap: var(--v9-space-3); padding: 0 var(--v9-space-2) var(--v9-space-4); }

/* ---- fields ---- */
.v9-trade-field { display: grid; gap: 5px; min-width: 0; }
.v9-trade-step-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--v9-space-3) var(--v9-space-4); }
.v9-trade-pct { display: inline-flex; align-items: center; gap: 6px; }
.v9-trade-pct .input { width: 5rem; }
.v9-trade-pct > span:last-child { color: var(--v9-text-faint); font: 400 var(--v9-text-sm) var(--v9-font-mono); }
.v9-trade-disc-static { font: 400 var(--v9-text-sm) var(--v9-font-mono); color: var(--v9-text-mute); height: 2rem; display: flex; align-items: center; }
.v9-trade-warn { font: 400 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-neg); }

/* ---- search: input + status + contained-scroll results ---- */
.v9-trade-search-input { width: 100%; }
.v9-trade-search-hint { font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-trade-results { display: grid; gap: var(--v9-space-1); }
.v9-trade-results:empty { display: none; }
.v9-trade-results-status { font: 500 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v9-text-faint); padding: 2px 0; }
.v9-trade-pick-wrap { display: grid; }

/* A search-result row reuses the .v9-led-row look; we only neutralise the button
   chrome, re-assert the hairline separator, and prepend a small card thumbnail. */
.v9-trade-pick { appearance: none; -webkit-appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--v9-line); }
.v9-trade-pick:focus-visible { outline: none; box-shadow: var(--v9-focus-glow); }
.v9-trade-pick-thumb { flex: 0 0 auto; width: 1.9rem; height: 2.6rem; border-radius: 3px; overflow: hidden; background: var(--v9-raised); display: inline-flex; align-items: center; justify-content: center; font: 500 var(--v9-text-2xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-trade-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---- custom-item form ---- */
.v9-trade-custom-toggle { justify-self: start; background: transparent; border: 0; font: 500 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-accent); cursor: pointer; padding: 4px 0; }
.v9-trade-custom-toggle:hover { color: var(--v9-accent-press); }
.v9-trade-customform { display: grid; gap: var(--v9-space-3); border: 1px solid var(--v9-line); border-radius: var(--v9-r-md); background: var(--v9-raised); padding: var(--v9-space-4); }
.v9-trade-customform-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v9-space-3); }
.v9-trade-customform-actions { display: flex; justify-content: flex-end; gap: var(--v9-space-2); }

/* ---- committed item lists (ledger rows + tap-to-open adjust disclosure) ---- */
.v9-trade-rows-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v9-space-3); padding-bottom: 6px; border-bottom: 1px solid var(--v9-line); }
.v9-trade-rows-count { font: 400 var(--v9-text-2xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-trade-rows { display: block; }
.v9-trade-item { border-bottom: 1px solid var(--v9-line); }
.v9-trade-item > .v9-led-row { border-bottom: 0; border-radius: 0; }
.v9-trade-item.is-open { background: var(--v9-surface); }
.v9-trade-disc-clip { overflow: hidden; min-height: 0; }
.v9-trade-disc-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--v9-space-3); padding: 2px var(--v9-space-2) var(--v9-space-3); }

/* ---- review step ---- */
.v9-trade-review { display: grid; gap: var(--v9-space-4); align-content: start; }
.v9-trade-hero { display: grid; gap: 4px; padding: var(--v9-space-2) 0; }
.v9-trade-hero .v9-led-income { color: var(--v9-text); }
.v9-trade-hero.is-in .v9-led-income { color: var(--v9-accent); }
.v9-trade-hero.is-out .v9-led-income { color: var(--v9-text-mute); }
.v9-trade-hero.is-even .v9-led-income { font-size: var(--v9-text-lg); letter-spacing: normal; color: var(--v9-text-mute); }
.v9-trade-haggle-delta { margin: 0; font: 400 var(--v9-text-xs) var(--v9-font-ui); color: var(--v9-text-mute); }
.v9-trade-haggle-delta.is-discount strong { color: var(--v9-pos); }
.v9-trade-haggle-delta.is-surcharge strong { color: var(--v9-neg); }
.v9-trade-test { display: flex; align-items: center; gap: var(--v9-space-2); font: 400 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-text-mute); cursor: pointer; }

/* ---- sticky money bar (Back · running gap · Continue/Complete) ---- */
.v9-trade-bar {
  position: sticky; bottom: 0; z-index: 4; margin-top: auto;
  display: flex; align-items: center; gap: var(--v9-space-4);
  padding: var(--v9-space-3) var(--v9-space-2);
  border-top: 1px solid var(--v9-line-strong);
  background: var(--v9-bg); /* solid canvas — flat, no backdrop blur (used nowhere else in V9) */
}
.v9-trade-bar-fig { flex: 1; min-width: 0; display: grid; gap: 1px; }
.v9-trade-bar-amt { font: 400 var(--v9-text-lg) var(--v9-font-mono); font-variant-numeric: tabular-nums; color: var(--v9-text); white-space: nowrap; }
.v9-trade-bar.is-in .v9-trade-bar-amt { color: var(--v9-accent); }
.v9-trade-bar.is-out .v9-trade-bar-amt { color: var(--v9-text-mute); }
.v9-trade-bar-amt.is-even-text { font-size: var(--v9-text-md); color: var(--v9-text-mute); white-space: normal; }
.v9-trade-back, .v9-trade-next { flex: 0 0 auto; }

/* ---- mobile: a form that scrolls normally (NOT the sales log-scroll), stacked ---- */
@media (max-width: 640px) {
  .v9-trade-head { flex-direction: column; align-items: flex-start; gap: var(--v9-space-2); }
  .v9-trade-progress { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .v9-trade-progress::-webkit-scrollbar { display: none; }
  .v9-trade-pstep { flex: 0 0 auto; }
  .v9-trade-pstep-hint { display: none; }
  .v9-trade-customform-row { grid-template-columns: 1fr; }
  .v9-trade-step-fields { grid-template-columns: 1fr; }
  .v9-trade-disc-inner { grid-template-columns: 1fr 1fr; }
}