/* ============================================================================
   exotic — Trade Widget · styles (shared)
   ----------------------------------------------------------------------------
   The reusable trade widget's presentation, extracted so it can be linked by
   BOTH the kit.html specimen and the app pages that mount it. It styles itself from a small set of --w-* variables
   that fall back to sensible values, so it renders correctly even if the exotic
   token sheet isn't present. When tokens.css IS loaded it inherits the real
   brand colors and fonts (and follows the host's dark-mode token overrides).
   ========================================================================== */
.tw{
  /* portable palette — prefers the app tokens (which re-theme in dark mode),
     falls back to the letter tokens, then to hard-coded light values */
  --w-card:var(--surface, var(--card, #ffffff));
  --w-sunken:var(--surface-2, var(--paper-2, #f4f3ee));
  --w-fill:var(--surface-2, var(--paper-2, #f4f3ee));
  --w-line:var(--hairline, var(--line, #e6e4df));
  --w-line-2:var(--hairline-2, var(--line-2, #efede8));
  --w-ink:var(--ink, #1d1d1f);
  --w-ink-2:var(--ink-2, #555);
  --w-muted:var(--muted, #8a8a8a);
  --w-up:var(--up, #1f9d6b);
  --w-down:var(--down, #d6452f);
  --w-up-bg:var(--up-bg, #e7f5ee);
  --w-down-bg:var(--down-bg, #fdeceb);
  --w-num:var(--font-num, 'Geist Mono', ui-monospace, 'SF Mono', monospace);
  --w-disp:var(--font-sans, 'Schibsted Grotesk', system-ui, -apple-system, sans-serif);
  --w-accent:var(--grad-accent, var(--w-ink));
  --w-grad:var(--grad, linear-gradient(100deg,#7f6ccc,#5f8fd9,#7cb8d9,#7fccb0,#d9c078,#d98d5f));   /* meridian ramp (Day approximation, colorway-themed) */
  --w-crisp:var(--crisp, 0 1px 1px rgba(40,40,60,.09), 0 2px 5px rgba(40,40,60,.09), inset 0 1px 0 rgba(255,255,255,.7));
  /* focus is light — the meridian ring when the tokens are loaded, a quiet
     ink wash when the widget stands alone (D30) */
  --w-focus:var(--focus-ring, 0 0 0 3px color-mix(in oklab, var(--w-ink, #16181d) 8%, transparent));

  width:392px;max-width:100%;
  background:var(--w-card);
  border:1px solid var(--w-line);
  border-radius:var(--rad-4,22px);
  box-shadow:0 1px 2px -1px rgba(40,40,60,.10), 0 20px 44px -30px rgba(40,40,60,.34);
  font-family:var(--w-disp);
  color:var(--w-ink);
  overflow:hidden;
}
.tw *{box-sizing:border-box}
.tw .num{font-family:var(--w-num);font-variant-numeric:tabular-nums}

/* header — instrument context (so the widget stands alone) */
.tw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--w-line-2)}
.tw-inst{display:flex;align-items:center;gap:12px;min-width:0}
/* logos in the brand's language — the real company mark on a uniform rounded-square
   chip (white field, hairline, crisp shadow); the chip is the branding. The mono
   fallback is a prism-gradient monogram. */
.tw-logo{width:38px;height:38px;border-radius:9px;background:#fff;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;border:1px solid var(--w-line);box-shadow:var(--w-crisp)}
.tw-sub{color:var(--w-muted);font-size:.92em;opacity:.85}
.tw-logo img{width:100%;height:100%;object-fit:contain;padding:18%}
.tw-logo.mono{background:var(--w-card)}
.tw-logo .mono-txt{font-family:var(--w-disp);font-weight:600;font-size:15px;letter-spacing:-.02em;text-transform:uppercase;
  background:var(--w-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tw-inst-meta{min-width:0}
.tw-sym{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-0.01em;line-height:1.1}
.tw-badge{font-family:var(--w-num);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--w-ink-2);
  background:var(--w-sunken);border:1px solid var(--w-line);border-radius:999px;padding:3px 8px}
.tw-name{font-size:12.5px;color:var(--w-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-px{text-align:right;flex:0 0 auto}
.tw-px .p{font-family:var(--w-num);font-variant-numeric:tabular-nums;font-size:16px;font-weight:500}
.tw-px .c{font-family:var(--w-num);font-variant-numeric:tabular-nums;font-size:12.5px;margin-top:3px}
.tw-px .c.up{color:var(--w-up)} .tw-px .c.down{color:var(--w-down)}

/* side tabs */
.tw-sides{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:14px 16px 4px}
.tw-sides button{font-family:var(--w-disp);font-size:14.5px;font-weight:600;color:var(--w-muted);
  background:var(--w-sunken);border:1px solid transparent;border-radius:12px;padding:13px 0;cursor:pointer;
  transition:color var(--t-fast,.15s), background var(--t-fast,.15s), box-shadow var(--t-fast,.15s)}
.tw-sides button:hover{color:var(--w-ink)}
.tw-sides button.on[data-side="buy"]{color:var(--w-up);background:var(--w-up-bg);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--w-up) 32%, transparent)}
.tw-sides button.on[data-side="sell"]{color:var(--w-down);background:var(--w-down-bg);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--w-down) 32%, transparent)}

.tw-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:16px}
.tw-grp{display:flex;flex-direction:column;gap:9px}
.tw-flabel{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tw-flabel .lab{font-size:13px;color:var(--w-ink-2);font-weight:500}
.tw-flabel .aux{font-family:var(--w-num);font-size:11.5px;color:var(--w-muted);white-space:nowrap}
.tw-flabel .aux b{color:var(--w-ink-2);font-weight:500}
@keyframes twBpTick{0%{opacity:.4}100%{opacity:1}}
.tw-flabel .aux.bp-tick{animation:twBpTick .5s ease-out}

.tw-field{display:flex;align-items:center;gap:8px;border:1px solid var(--w-line);background:var(--w-fill);
  border-radius:13px;padding:0 7px 0 15px;transition:border-color var(--t-fast,.15s), box-shadow var(--t-fast,.15s)}
.tw-field:focus-within{border-color:color-mix(in oklab, var(--g3,#7cb8d9) 55%, var(--w-line,#e6e4df));box-shadow:var(--w-focus)}
.tw-field input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-family:var(--w-num);
  font-variant-numeric:tabular-nums;font-size:22px;font-weight:500;color:var(--w-ink);padding:14px 0}
.tw-field input::placeholder{color:color-mix(in oklab, var(--w-muted) 70%, transparent)}
.tw-field .reset{width:32px;height:32px;display:none;place-items:center;color:var(--w-muted);background:transparent;
  border:0;border-radius:8px;cursor:pointer}
.tw-field .reset:hover{color:var(--w-ink);background:var(--w-sunken)}
.tw-field .reset svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}

/* currency toggle */
.tw-cur{display:flex;gap:2px;background:var(--w-card);border:1px solid var(--w-line);border-radius:9px;padding:3px;flex:0 0 auto}
.tw-cur button{font-family:var(--w-num);font-size:11.5px;color:var(--w-muted);background:transparent;border:0;
  border-radius:6px;padding:6px 11px;cursor:pointer;transition:color var(--t-fast,.15s), background var(--t-fast,.15s)}
.tw-cur button.on{color:var(--w-ink);background:var(--w-sunken)}

/* mode pill (Market / Limit) */
.tw-pill{font-family:var(--w-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--w-muted);
  background:var(--w-sunken);border:1px solid var(--w-line);border-radius:999px;padding:4px 11px;cursor:pointer;
  transition:color var(--t-fast,.15s), border-color var(--t-fast,.15s), background var(--t-fast,.15s)}
.tw-pill:hover{color:var(--w-ink)}
.tw-pill.limit{color:var(--w-ink);border-color:color-mix(in oklab, var(--w-ink) 30%, var(--w-line));background:var(--w-card)}
.tw-note{font-size:12px;color:var(--w-muted);line-height:1.4}

/* price field — estimate (market) vs limit, with mid refresh */
.tw-field.pxf{transition:border-color var(--t-fast,.15s), box-shadow var(--t-fast,.15s)}
.tw-field .px-est{font-family:var(--w-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--w-muted);
  background:var(--w-sunken);border:1px solid var(--w-line);border-radius:999px;padding:4px 9px;flex:0 0 auto;white-space:nowrap}
.tw-field.pxf.est input{color:var(--w-ink-2)}
.tw-field .px-mid{display:none;align-items:center;font-family:var(--w-num);font-size:10.5px;letter-spacing:.01em;color:var(--w-ink);
  background:var(--w-card);border:1px solid var(--w-line);border-radius:8px;padding:8px 11px;margin-right:2px;cursor:pointer;
  flex:0 0 auto;white-space:nowrap;transition:border-color var(--t-fast,.15s), background var(--t-fast,.15s), color var(--t-fast,.15s)}
.tw-field .px-mid:hover{border-color:color-mix(in oklab, var(--w-ink) 30%, var(--w-line));background:var(--w-sunken)}
@keyframes twPxFlash{0%{box-shadow:0 0 0 3px color-mix(in oklab, var(--w-accent) 34%, transparent)}100%{box-shadow:0 0 0 3px transparent}}
.tw-field.pxf.flash{animation:twPxFlash .55s ease-out}

/* slider — an XSlider surface (x-slider.css). Neutral instrument: an
   ink wash for the fill, a crisp ink edge-line as the cursor — and a slight
   nitro charge (amber from the prism ramp) that builds with the value. */
.tw .xsld{--xs-fill:color-mix(in oklab, var(--w-ink) 9%, transparent);
  --xs-fill-hot:color-mix(in oklab, var(--w-ink) 12%, transparent);
  --xs-heat:var(--g4, var(--w-ink));--xs-heat-lo:var(--g3, var(--g4, var(--w-ink)))}

/* one card: the typed field on top, the slider as a slim strip along its
   bottom. The card owns the border and focus ring; the strip owns nothing
   but its fill wash — and the rubber band stretches the whole card. */
.tw-fieldstack{border:1px solid var(--w-line);background:var(--w-fill);border-radius:13px;
  overflow:hidden;will-change:transform;transition:border-color var(--t-fast,.15s), box-shadow var(--t-fast,.15s)}
.tw-fieldstack:focus-within{border-color:color-mix(in oklab, var(--g3,#7cb8d9) 55%, var(--w-line,#e6e4df));
  box-shadow:var(--w-focus)}
.tw-fieldstack .tw-field{border:0;background:transparent;border-radius:0}
.tw-fieldstack .tw-field:focus-within{border-color:transparent;box-shadow:none}
.tw-fieldstack .xsld[data-size]{height:24px;border-top:1px solid var(--w-line-2)}
.tw-fieldstack .xsld-band{border-radius:0;background:transparent;box-shadow:none}
.tw-fieldstack .xsld:hover .xsld-band, .tw-fieldstack .xsld.drag .xsld-band{
  background:color-mix(in oklab, var(--w-ink) 3%, transparent)}
.tw-fieldstack .xsld.focus .xsld-band{box-shadow:inset 0 2px 0 -1px color-mix(in oklab, var(--w-ink) 35%, transparent)}
.tw-fieldstack .xsld-label{left:15px}
.tw-fieldstack .xsld-value input{font-size:11px}
.tw-fieldstack .xsld-ticks i{height:6px}
.tw-fieldstack .xsld-ticks i.lit{height:7px}
.tw-notches{display:flex;justify-content:space-between;font-family:var(--w-num);font-size:10px;color:var(--w-muted)}
/* guest leverage scale: labels sit at their TRUE track fractions — evenly
   distributing 1/2/3/5 meant no label matched the value under the handle */
.tw-notches.lev-scale{position:relative;height:20px;justify-content:flex-start}
.tw-notches.lev-scale button{position:absolute;top:0;transform:translateX(-50%)}
.tw-notches.lev-scale button:first-child{transform:none;padding-left:0}
.tw-notches.lev-scale button:last-child{transform:translateX(-100%);padding-right:0}
.tw-notches button{background:none;border:0;cursor:pointer;font-family:var(--w-num);font-size:10px;color:var(--w-muted);padding:2px 5px;border-radius:6px;transition:color .12s, background .12s}
.tw-notches button:hover{color:var(--w-ink);background:var(--w-sunken)}
.tw-notches button:first-child{padding-left:0}
.tw-notches button.mx{color:var(--w-up);font-weight:600;padding-right:0}
.tw-notches button.mx:hover{background:none;filter:brightness(1.06)}
.tw-lev{font-family:var(--w-num);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;color:var(--w-ink)}

/* summary */
.tw-eff{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:11px;
  background:var(--w-sunken);font-size:12.5px;color:var(--w-ink-2)}
.tw-eff b{font-family:var(--w-num);font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--w-ink);font-weight:600}
.tw-summary{display:flex;flex-direction:column;gap:11px;padding-top:15px;border-top:1px solid var(--w-line-2)}
.tw-srow.lev{align-items:center}
.lev-edit{display:inline-flex;align-items:baseline;gap:1px;border:1px solid var(--w-line);background:var(--w-fill);
  border-radius:8px;padding:5px 10px;transition:border-color var(--t-fast,.15s), box-shadow var(--t-fast,.15s)}
.lev-edit:focus-within{border-color:color-mix(in oklab, var(--g3,#7cb8d9) 55%, var(--w-line,#e6e4df));box-shadow:var(--w-focus)}
.lev-edit input{width:30px;text-align:right;border:0;background:transparent;outline:none;font-family:var(--w-num);
  font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;color:var(--w-ink);padding:0}
.lev-edit .x{font-family:var(--w-num);font-size:13.5px;font-weight:600;color:var(--w-ink-2)}
.tw-srow{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--w-ink-2)}
.tw-srow .v{font-family:var(--w-num);font-variant-numeric:tabular-nums;color:var(--w-ink)}
.tw-srow .v.down{color:var(--w-down)}

/* plain-language liquidation education (opt-in via cfg.edu) — the canonical
   note recipe (D20): 12.5px/1.55, --rad-2, 11px 13px; tint = sunken + hairline */
.tw-edu{font-size:12.5px;line-height:1.55;color:var(--w-ink-2);background:var(--w-sunken);
  border:1px solid var(--w-line-2);border-radius:var(--rad-2,12px);padding:11px 13px;text-wrap:pretty}

/* buying-power cap — you're fully sized at this max leverage; the note points
   at the leverage presets, which pulse once as they expand into view */
.tw-capnote{font-size:12px;line-height:1.45;font-weight:500;margin-top:1px;
  color:color-mix(in oklab, var(--w-up) 78%, black)}
.tw.theme-dark .tw-capnote{color:color-mix(in oklab, var(--w-up) 74%, white)}
.tw-levg.cap .lab{color:color-mix(in oklab, var(--w-up) 78%, black)}
.tw.theme-dark .tw-levg.cap .lab{color:color-mix(in oklab, var(--w-up) 74%, white)}
.tw-levg.cap .tw-notches.lev{border-radius:12px;animation:tw-cap-pulse 1.5s ease-out}
@keyframes tw-cap-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--w-up) 50%, transparent)}
  55%{box-shadow:0 0 0 4px color-mix(in oklab, var(--w-up) 20%, transparent)}
  100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){
  .tw-levg.cap .tw-notches.lev{animation:none;box-shadow:0 0 0 2px color-mix(in oklab, var(--w-up) 28%, transparent)}}

/* CTA */
.tw-cta{width:100%;border:0;border-radius:var(--rad-2,12px);padding:16px 0;font-family:var(--w-disp);font-size:15.5px;font-weight:600;
  color:#fff;cursor:pointer;transition:filter var(--t-fast,.15s), transform .12s, opacity var(--t-fast,.15s);margin-top:2px}
.tw-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
/* deepened one step so 15.5px/600 white text clears AA (D13 — the flow's recipe) */
.tw-cta.buy{background:color-mix(in oklab, var(--w-up) 88%, black)}
.tw-cta.sell{background:color-mix(in oklab, var(--w-down) 88%, black)}
.tw.theme-dark .tw-cta.buy{background:color-mix(in oklab, var(--w-up) 72%, black)}
.tw.theme-dark .tw-cta.sell{background:color-mix(in oklab, var(--w-down) 72%, black)}
/* disabled recolors instead of washing out — green is earned (D16); it must
   beat the buy/sell fills above, the dark theme's too */
.tw-cta:disabled, .tw.theme-dark .tw-cta:disabled{opacity:1;cursor:not-allowed;transform:none;filter:none;
  background:var(--w-sunken,#f0f1f4);color:var(--w-muted,#8a8f98)}
/* press physics (D15) — the house two-speed press: it lands fast (70ms),
   the release relaxes at the normal pace (../base.css grammar) */
.tw-cta:active{transform:scale(.98);transition-duration:var(--t-press,.07s)}
.tw-sides button:active,.tw-cur button:active,.tw-chips button:active,.tw-pill:active,
.tw-notches button:active,.tw-rail button:active,.tw-tpsl .stp button:active,.tw-more:active{
  transform:scale(.96);transition-duration:var(--t-press,.07s)}
/* the auction beat (D29) — "Placing…" wears the flow's tick-dot; currentColor
   so it stays visible on the disabled (recolored) fill too */
.tw-cta .tick-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:8px;vertical-align:2px;animation:twPulse .5s ease-in-out infinite alternate}
@keyframes twPulse{from{opacity:.35}to{opacity:1}}
@keyframes twCtaPulse{0%{box-shadow:0 0 0 0 color-mix(in oklab, currentColor 40%, transparent)}100%{box-shadow:0 0 0 16px transparent}}
.tw-cta.pulse{animation:twCtaPulse .9s ease-out}

/* quick-amount chips — the calm way into a first trade */
.tw-chips{display:flex;gap:7px}
.tw-chips button{font-family:var(--w-num);font-size:11.5px;color:var(--w-ink-2);background:var(--w-card);
  border:1px solid var(--w-line);border-radius:999px;padding:6px 13px;cursor:pointer;
  transition:color var(--t-fast,.15s), border-color var(--t-fast,.15s)}
.tw-chips button:hover{color:var(--w-ink);border-color:color-mix(in oklab, var(--w-ink) 30%, var(--w-line))}

/* (the flip notch now lives inside XSlider as .xsld-detent) */

/* ---- merged console: position strip · action rail · impact ---- */
/* split mode: the position is its own card above the action panel */
.tw.tw-poscard{padding-bottom:14px}
.tw-poscard .tw-pos{background:none;padding:0;margin:16px 16px 0}
.tw-poscard .tw-impact{margin:12px 16px 0;background:var(--w-sunken)}
.tw-pos{display:flex;flex-direction:column;gap:5px;margin:14px 16px 0;padding:13px 14px;
  border-radius:12px;background:var(--w-sunken)}
.tw-pos .pr{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tw-pos .k{font-family:var(--w-num);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--w-muted)}
/* direction tag speaks the square voice — same shape as holdings/orders (D17) */
.tw-pos .tg{font-family:var(--w-num);font-size:10px;font-weight:600;letter-spacing:.04em;border-radius:var(--rad-1,8px);padding:3px 9px}
.tw-pos .tg.up{color:var(--w-up);background:var(--w-up-bg)} .tw-pos .tg.down{color:var(--w-down);background:var(--w-down-bg)}
.tw-pos .pl{font-family:var(--w-disp);font-size:20px;font-weight:650;letter-spacing:-.01em}
.tw-pos .pl.up{color:var(--w-up)} .tw-pos .pl.down{color:var(--w-down)}
.tw-pos .val{font-family:var(--w-num);font-size:14px;font-weight:600;color:var(--w-ink);font-variant-numeric:tabular-nums}
.tw-pos .sub{font-family:var(--w-num);font-size:10.5px;color:var(--w-muted)}
.tw-rail{display:flex;gap:6px;padding:10px 16px 4px;overflow-x:auto;scrollbar-width:none}
.tw-rail::-webkit-scrollbar{display:none}
.tw-rail button{flex:1 0 auto;font-family:var(--w-disp);font-size:13px;font-weight:600;color:var(--w-muted);
  background:var(--w-sunken);border:1px solid transparent;border-radius:11px;padding:10px 12px;cursor:pointer;
  transition:color var(--t-fast,.15s), background var(--t-fast,.15s), box-shadow var(--t-fast,.15s)}
.tw-rail button:hover{color:var(--w-ink)}
.tw-rail button.on{color:var(--w-ink);background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--w-ink) 35%, transparent)}
.tw-rail button.on.up{color:var(--w-up);background:var(--w-up-bg);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--w-up) 32%, transparent)}
.tw-rail button.on.down{color:var(--w-down);background:var(--w-down-bg);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--w-down) 32%, transparent)}
/* impact — the position's numbers, now → after this modification. Arrows
   grow on the summary's own values; strike the old, embolden the new. */
.tw-impact{display:flex;flex-direction:column;gap:7px;background:var(--w-sunken);border-radius:12px;padding:11px 13px}
.tw-impact .ir,.tw-pos .ir{display:flex;justify-content:space-between;gap:12px;font-family:var(--w-num);font-size:11px;color:var(--w-muted)}
.tw-impact .ir .v,.tw-pos .ir .v{color:var(--w-ink);font-variant-numeric:tabular-nums;text-align:right}
.tw-pos .ir{margin-top:4px}
.tw-impact .v s,.tw-pos s{text-decoration:none;color:var(--w-muted);font-weight:400}
.tw-impact .v i,.tw-pos i{font-style:normal;color:var(--w-muted);padding:0 4px}
.tw-impact .v b,.tw-pos b{font-weight:600;color:var(--w-ink)}
.tw-impact .v.warn b,.tw-pos .v.warn b{color:var(--w-down)}
.tw-pos .ix{display:none;flex-direction:column;gap:7px;border-top:1px solid var(--w-line-2);padding-top:9px;margin-top:8px}
.tw-pos.x .ix{display:flex}
.ix-btn{border:0;background:none;font-family:var(--w-num);font-size:10.5px;color:var(--w-muted);cursor:pointer;text-align:left;padding:0;margin-top:6px}
.ix-btn:hover{color:var(--w-ink)}

/* modal-panel banner — TP/SL setting and order modify */
.tw-mode{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 16px 0;
  padding:9px 13px;border-radius:var(--rad-2,12px);background:var(--w-sunken);border:1px solid var(--w-line-2);
  font-family:var(--w-num);font-size:11px;color:var(--w-ink-2)}
.tw-mode b{color:var(--w-ink);font-weight:600}
.tw-mode-x{border:0;background:none;color:var(--w-muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.tw-mode-x:hover{color:var(--w-ink)}
/* the big variant IS the Buy/Sell tab, repurposed: same type, radius and
   tint as an active side tab — the panel's one mode, already selected */
.tw-mode.big{justify-content:flex-start;margin:14px 16px 0;padding:13px 14px;border-radius:12px;
  border:1px solid transparent;background:var(--w-sunken);
  font-family:var(--w-disp);font-size:14.5px;font-weight:600;color:var(--w-ink)}
.tw-mode.big.up{color:var(--w-up);background:var(--w-up-bg);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--w-up) 32%, transparent)}
.tw-mode.big.down{color:var(--w-down);background:var(--w-down-bg);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--w-down) 32%, transparent)}
.tw-mode.big .tg{font-family:var(--w-num);font-size:10px;font-weight:600;letter-spacing:.04em;
  border-radius:999px;padding:3px 9px;background:var(--w-card)}
.tw-mode.big .tw-mode-x{margin-left:auto;font-size:18px;color:inherit;opacity:.55}
.tw-mode.big .tw-mode-x:hover{opacity:1}

/* existing-position strip — context before you add or offset */
.tw-hold{display:flex;align-items:baseline;gap:8px;margin:12px 16px 0;padding:9px 13px;
  background:var(--w-sunken);border:1px solid var(--w-line-2);border-radius:var(--rad-2,12px);
  font-family:var(--w-num);font-size:11px;color:var(--w-muted)}
.tw-hold b{color:var(--w-ink);font-weight:500}
.tw-hold .pl{margin-left:auto;font-weight:600}
.tw-hold .pl.up{color:var(--w-up)} .tw-hold .pl.down{color:var(--w-down)}

/* position-context note under the CTA area */
.tw-ctx{font-family:var(--w-num);font-size:11px;color:var(--w-muted);text-align:center}

/* over-margin warning — calm, instructive; same note recipe (D20),
   tint = down-bg, no border */
.tw-warn{font-size:12.5px;line-height:1.55;color:var(--w-down);background:var(--w-down-bg);
  border-radius:var(--rad-2,12px);padding:11px 13px;text-wrap:pretty}

/* take profit / stop loss (expanded, optional) */
.tw-tpsl .tpsl-row{display:flex;align-items:center;gap:9px}
.tw-tpsl .tpsl-row + .tpsl-row{margin-top:8px}
.tw-tpsl .k{font-family:var(--w-num);font-size:9.5px;font-weight:600;letter-spacing:.06em;flex:0 0 26px;
  text-align:center;border-radius:6px;padding:4px 0}
.tw-tpsl .k.up{color:var(--w-up);background:var(--w-up-bg)}
.tw-tpsl .k.down{color:var(--w-down);background:var(--w-down-bg)}
.tw-tpsl .tin{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--w-line);background:var(--w-fill);
  border-radius:9px;padding:0 9px;flex:0 0 118px}
.tw-tpsl .tin input{width:100%;min-width:0;border:0;background:transparent;outline:none;font-family:var(--w-num);
  font-variant-numeric:tabular-nums;font-size:13px;color:var(--w-ink);padding:8px 0}
.tw-tpsl .tin .sfx{font-family:var(--w-num);font-size:9px;color:var(--w-muted)}
.tw-tpsl .note{font-family:var(--w-num);font-size:10px;color:var(--w-muted);line-height:1.35;min-width:0}
.tw-tpsl .note.bad{color:var(--w-down)}
/* − / + tick steppers — one price tick per press, defaults on first press */
.tw-tpsl .stp{display:inline-flex;border:1px solid var(--w-line);border-radius:9px;overflow:hidden;flex:0 0 auto}
.tw-tpsl .stp button{border:0;background:var(--w-card);color:var(--w-ink-2);font-family:var(--w-num);
  font-size:13px;line-height:1;width:26px;padding:8px 0;cursor:pointer}
.tw-tpsl .stp button + button{border-left:1px solid var(--w-line)}
.tw-tpsl .stp button:hover{color:var(--w-ink);background:var(--w-sunken)}

/* leverage presets + inline custom field, one chip row */
.tw-notches.lev{justify-content:flex-start;gap:6px;align-items:stretch}
.tw-notches.lev button{border:1px solid var(--w-line);border-radius:999px;padding:5px 12px;background:var(--w-card);font-size:10.5px}
.tw-notches.lev button.on{color:var(--w-ink);border-color:color-mix(in oklab, var(--w-ink) 45%, var(--w-line));background:var(--w-sunken)}
.tw-notches.lev .lev-edit{display:inline-flex;align-items:center;gap:1px;border:1px solid var(--w-line);
  border-radius:999px;background:var(--w-card);padding:5px 12px;transition:border-color var(--t-fast,.15s)}
.tw-notches.lev .lev-edit:focus-within,.tw-notches.lev .lev-edit.on{color:var(--w-ink);
  border-color:color-mix(in oklab, var(--w-ink) 45%, var(--w-line));background:var(--w-sunken)}
.tw-notches.lev .lev-edit input{width:22px;text-align:right;border:0;background:transparent;outline:none;
  font-family:var(--w-num);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;color:var(--w-ink);padding:0}
.tw-notches.lev .lev-edit .x{font-family:var(--w-num);font-size:10.5px;font-weight:600;color:var(--w-ink-2)}

/* more/fewer options toggle */
.tw-more{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;background:none;border:0;
  padding:4px 0 0;cursor:pointer;font-family:var(--w-num);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--w-muted);transition:color var(--t-fast,.15s)}
.tw-more:hover{color:var(--w-ink)}
.tw-more .chev{font-size:13px}

/* compact detail variant — leaner for tight embeds */
.tw.detail-compact .tw-name{display:none}
.tw.detail-compact .tw-body{gap:13px}

/* bare variant — drop the card chrome so the widget sits flush inside a host
   panel that already provides borders (e.g. the trading terminal ticket rail) */
.tw.bare{border:0;border-radius:0;box-shadow:none;background:transparent;width:100%}

/* dark theme (explicit tweak) — usually unnecessary when the host sets dark
   tokens on a parent, since the --w-* vars above inherit them automatically */
.tw.theme-dark{
  --w-card:oklch(0.212 0.014 262);
  --w-sunken:oklch(0.150 0.011 262);
  --w-fill:oklch(0.150 0.011 262);
  --w-line:oklch(0.320 0.014 262);
  --w-line-2:oklch(0.270 0.012 262);
  --w-ink:oklch(0.965 0.004 262);
  --w-ink-2:oklch(0.795 0.010 262);
  --w-muted:oklch(0.615 0.012 262);
  --w-up-bg:oklch(0.33 0.05 164);
  --w-down-bg:oklch(0.33 0.05 24);
  /* on the dark card the charge must GLOW, not brown out */
  --xs-heat-gain:32%;
}

/* ---- touch input: the widget's smallest controls grow to thumb size ---- */
@media (pointer:coarse){
  .tw-tpsl .stp button{width:34px;padding:11px 0}
  .tw-chips button{padding:8px 13px}
  .tw-rail button{padding:12px 14px}
  .tw-cur button{padding:7px 10px}
  /* the lone sub-44px targets grow an invisible hit area — the flow's
     ::before extension (D18) */
  .tw-pill,.tw-field .reset{position:relative}
  .tw-pill::before,.tw-field .reset::before{content:"";position:absolute;inset:-4px -2px;border-radius:inherit}
}

/* ---- reduced motion: the tick/flash/pulse decorations go still; color and
   border transitions stay (D24). The tick-dot is a progress cue, not
   decoration — it holds steady instead of pulsing, same as the flow. ---- */
@media (prefers-reduced-motion:reduce){
  .tw-flabel .aux.bp-tick,.tw-field.pxf.flash,.tw-cta.pulse{animation:none}
  .tw-cta .tick-dot{animation:none;opacity:1}
}