/* Greeks Terminal — Strategy Builder design language.
 *
 * NOT A CARD LAYOUT. Professional trading software is built from REGIONS on
 * one continuous ground, divided by hairlines and space. Rounded, shadowed
 * cards floating on a page are the web-dashboard tell; a terminal has a fixed
 * chassis whose contents change. Everything below follows from that.
 *
 * THE RULES
 *
 *   Ground        one surface for the whole workspace. Regions are separated
 *                 by a 1px hairline or by space — never by a container.
 *   Radius        4px on controls, 0 on regions. Large radii read consumer.
 *   Elevation     none, anywhere, except the modal. Depth is a web idiom;
 *                 terminals use alignment and weight instead.
 *   Chrome dim,   labels and rules sit at --dim, values at --ink. The
 *   data bright   interface recedes so the numbers advance.
 *   Baseline      4px grid. Controls 32px, table rows 30px, section gap 20px.
 *   Numerals      mono, tabular, right-aligned, ALWAYS. A column of figures
 *                 that does not align cannot be scanned.
 *   Colour        three signals only: long, short, and one accent for
 *                 selection. Everything else is neutral.
 *   Motion        120ms, opacity and colour only. Nothing translates, nothing
 *                 scales; movement in a dense screen reads as instability.
 *
 * Scoped under .sb2 so none of it can reach the rest of the app.
 */

.sb2{
  --sb2-ground:#12161e;
  --sb2-surface:#191e2a;
  --sb2-lift:#1d2331;
  --sb2-hairline:#232a38;
  --sb2-ink:#e8edf5;
  --sb2-subtle:#79839a;
  --sb2-dim:#4c5568;
  --sb2-act:#2979ff;
  --sb2-long:#00e676;
  --sb2-short:#ff5252;
  --sb2-ease:cubic-bezier(.2,.6,.3,1);
  --sb2-fast:120ms;
  --sb2-row:30px;          /* table row */
  --sb2-ctl:32px;          /* every control, without exception */
  font-feature-settings:"tnum" 1,"cv05" 1;
}

/* The chassis: one ground, one border, no page-level rounding. */
.sb2{
  background:var(--sb2-ground);
  color:var(--sb2-ink);
  font-family:Inter,-apple-system,"Segoe UI",sans-serif;
  font-size:12px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── three columns ─────────────────────────────────────────────────────── */
.sb2-cols{
  display:grid;
  /* The flanks FLEX between a floor and a cap; the chart takes the rest.
     They used to be pinned at 366px and 330px, so at 1440px the chart got
     398px against 696px of chrome — the payoff diagram was the narrowest
     major element on the screen it exists for. */
  grid-template-columns:minmax(300px,340px) minmax(0,1fr) minmax(250px,300px);
  gap:12px;
  align-items:start;
}
/* Three columns hold to 1200px: 366 + 330 + 2 gaps leaves ~560 for the chart,
   which is still readable. Below that the right rail drops under and reflows
   into cards rather than squeezing the chart further. */
@media (max-width:1200px){
  .sb2-cols{grid-template-columns:minmax(280px,320px) minmax(0,1fr)}
  .sb2-right{grid-column:1 / -1}
  .sb2-right-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
}
@media (max-width:900px){
  .sb2-cols{grid-template-columns:minmax(0,1fr)}
  .sb2-left,.sb2-center,.sb2-right{grid-column:1}
}

/* ── header bar ────────────────────────────────────────────────────────── */
.sb2-head{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:12px;
  background:var(--sb2-surface);border-radius:10px;
}
.sb2-head .sb2-quotes{display:flex;gap:28px;flex-wrap:wrap;margin-left:auto}
@media (max-width:900px){
  .sb2-head .sb2-quotes{margin-left:0;width:100%}
  .sb2-head .sb2-actions{width:100%}
}
.sb2-actions{display:flex;gap:8px;align-items:center}

/* ── buttons ───────────────────────────────────────────────────────────── */
.sb2-btn{
  font-family:Inter,sans-serif;font-size:13px;font-weight:600;
  border:0;border-radius:8px;padding:9px 16px;cursor:pointer;
  transition:background var(--sb2-fast) var(--sb2-ease),
             color var(--sb2-fast) var(--sb2-ease),
             box-shadow var(--sb2-fast) var(--sb2-ease);
}
.sb2-btn--ghost{background:transparent;color:var(--sb2-subtle);
  box-shadow:inset 0 0 0 1px var(--sb2-hairline)}
.sb2-btn--ghost:hover{color:var(--sb2-ink);box-shadow:inset 0 0 0 1px var(--sb2-subtle)}
.sb2-btn--primary{background:var(--sb2-act);color:#fff}
.sb2-btn--primary:hover{background:#1f66e0}
.sb2-btn--wide{width:100%;padding:12px 0}
.sb2-btn--dashed{
  width:100%;background:transparent;color:var(--sb2-subtle);
  box-shadow:inset 0 0 0 1px var(--sb2-hairline);
}
.sb2-btn--dashed:hover{color:var(--sb2-act);box-shadow:inset 0 0 0 1px var(--sb2-act)}
.sb2-btn:focus-visible{outline:2px solid var(--sb2-act);outline-offset:2px}

/* icon-only toolbar buttons */
.sb2-iconbtn{
  width:32px;height:32px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:8px;cursor:pointer;border:0;
  background:transparent;color:var(--sb2-subtle);
  box-shadow:inset 0 0 0 1px var(--sb2-hairline);
  transition:color var(--sb2-fast) var(--sb2-ease),
             box-shadow var(--sb2-fast) var(--sb2-ease);
}
.sb2-iconbtn:hover{color:var(--sb2-ink);box-shadow:inset 0 0 0 1px var(--sb2-subtle)}
.sb2-iconbtn:focus-visible{outline:2px solid var(--sb2-act);outline-offset:2px}

/* ── segmented Buy / Sell ──────────────────────────────────────────────── */
.sb2-seg{display:flex;background:var(--sb2-ground);border-radius:8px;padding:3px;gap:3px}
.sb2-seg > div{
  flex:1;text-align:center;padding:8px 0;border-radius:6px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--sb2-subtle);
  transition:background var(--sb2-fast) var(--sb2-ease),
             color var(--sb2-fast) var(--sb2-ease);
}
.sb2-seg > div:hover{color:var(--sb2-ink)}
.sb2-seg > div.is-buy{background:rgba(0,230,118,.14);color:var(--sb2-long)}
.sb2-seg > div.is-sell{background:rgba(255,82,82,.14);color:var(--sb2-short)}

/* ── qty stepper ───────────────────────────────────────────────────────── */
.sb2-step{
  display:flex;align-items:center;background:var(--sb2-ground);
  border-radius:8px;overflow:hidden;
}
.sb2-step input{
  flex:1;min-width:0;background:transparent;border:0;color:var(--sb2-ink);
  font-family:"JetBrains Mono",monospace;font-size:13px;text-align:center;
  padding:9px 0;-moz-appearance:textfield;
}
.sb2-step input::-webkit-outer-spin-button,
.sb2-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sb2-step input:focus-visible{outline:2px solid var(--sb2-act);outline-offset:-2px}
.sb2-step span{
  width:28px;text-align:center;cursor:pointer;color:var(--sb2-subtle);
  font-size:15px;line-height:1;padding:9px 0;user-select:none;
  transition:color var(--sb2-fast) var(--sb2-ease);
}
.sb2-step span:hover{color:var(--sb2-ink)}

/* ── text inputs ───────────────────────────────────────────────────────── */
.sb2-in{
  width:100%;background:var(--sb2-ground);border:0;border-radius:8px;
  color:var(--sb2-ink);font-family:Inter,sans-serif;font-size:13px;
  padding:10px 12px;
  transition:box-shadow var(--sb2-fast) var(--sb2-ease);
}
.sb2-in::placeholder{color:var(--sb2-dim)}
.sb2-in:focus{outline:none;box-shadow:inset 0 0 0 1px var(--sb2-act)}

/* ── toggle switch ─────────────────────────────────────────────────────── */
/* dcc.Checklist renders <div><label><input type=checkbox><span></span></label></div>.
   The track is drawn on the label and the knob on ::after, so the real input
   stays present and keyboard-reachable — it is only made invisible. */
.sb2-switch label{
  position:relative;display:inline-block;width:38px;height:21px;
  cursor:pointer;vertical-align:middle;margin:0;
}
.sb2-switch input[type=checkbox]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:pointer;z-index:2;
}
.sb2-switch label::before{
  content:"";position:absolute;inset:0;border-radius:99px;
  background:var(--sb2-hairline);
  transition:background var(--sb2-fast) var(--sb2-ease);
}
.sb2-switch label::after{
  content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;
  border-radius:50%;background:#fff;
  transition:transform var(--sb2-fast) var(--sb2-ease);
}
.sb2-switch input[type=checkbox]:checked ~ span,
.sb2-switch:has(input:checked) label::before{background:var(--sb2-act)}
.sb2-switch:has(input:checked) label::after{transform:translateX(17px)}
.sb2-switch input[type=checkbox]:focus-visible + span{outline:2px solid var(--sb2-act);outline-offset:2px}

/* ── tabs ──────────────────────────────────────────────────────────────── */
.sb2-tabs{display:flex;gap:24px;border-bottom:1px solid var(--sb2-hairline)}
.sb2-tab{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--sb2-subtle);padding:0 0 12px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--sb2-fast) var(--sb2-ease),
             border-color var(--sb2-fast) var(--sb2-ease);
}
.sb2-tab:hover{color:var(--sb2-ink)}
.sb2-tab.is-active{color:var(--sb2-act);border-bottom-color:var(--sb2-act)}

/* ── KPI strip — one hairline lattice, not six boxes ───────────────────── */
/* The lattice IS the container background showing through 1px gaps, so the
   column count must divide 6 exactly — `auto-fit` left a bare grey cell
   whenever six items wrapped as 4+2. Three explicit steps, all divisors. */
.sb2-kpis{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:1px;background:var(--sb2-hairline);border-radius:8px;overflow:hidden;
}
@media (max-width:1500px){.sb2-kpis{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.sb2-kpis{grid-template-columns:repeat(2,1fr)}}
.sb2-kpi{background:var(--sb2-surface);padding:12px 14px}

/* ── legs table ────────────────────────────────────────────────────────── */
.sb2-legs{width:100%;border-collapse:collapse}
.sb2-legs tbody tr td{transition:background var(--sb2-fast) var(--sb2-ease)}
.sb2-legs tbody tr:hover td{background:rgba(121,131,154,.07)}
.sb2-legs tbody tr:hover .sb2-del{opacity:1}
.sb2-del{opacity:0;cursor:pointer;color:var(--sb2-dim);
  transition:opacity var(--sb2-fast) var(--sb2-ease),
             color var(--sb2-fast) var(--sb2-ease)}
.sb2-del:hover{color:var(--sb2-short)}

/* ── dropdowns (dcc.Dropdown renders react-select markup) ──────────────── */
.sb2 .Select-control,
.sb2 .Select--single > .Select-control{
  background:var(--sb2-ground)!important;border:0!important;border-radius:8px!important;
  height:38px!important;box-shadow:none!important;
}
.sb2 .Select-value-label,.sb2 .Select-value{color:var(--sb2-ink)!important;
  font-size:13px!important;line-height:38px!important}
.sb2 .Select-placeholder{color:var(--sb2-dim)!important;line-height:38px!important}
.sb2 .Select-arrow{border-color:var(--sb2-subtle) transparent transparent!important}
.sb2 .Select-menu-outer{
  background:var(--sb2-lift)!important;border:0!important;border-radius:8px!important;
  margin-top:4px!important;box-shadow:0 6px 18px rgba(0,0,0,.4)!important;z-index:20;
}
.sb2 .Select-option{background:transparent!important;color:var(--sb2-subtle)!important;
  font-size:13px!important}
.sb2 .Select-option.is-focused{background:rgba(41,121,255,.14)!important;
  color:var(--sb2-ink)!important}
.sb2 .Select-option.is-selected{color:var(--sb2-ink)!important}

/* ── collapse chevron ──────────────────────────────────────────────────── */
.sb2-collapse{cursor:pointer;color:var(--sb2-subtle);
  transition:color var(--sb2-fast) var(--sb2-ease),transform var(--sb2-fast) var(--sb2-ease)}
.sb2-collapse:hover{color:var(--sb2-ink)}
.sb2-collapse.is-closed{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .sb2 *{transition-duration:.01ms!important}
}

/* ── panels & sections ─────────────────────────────────────────────────── */
/* ONE WORKSPACE, NOT A TRAY OF CARDS.
   A border and a shadow on every panel made the page read as separate widgets
   pushed together. Only the chart stage is now elevated, so it is the element
   the eye lands on first; the rails sit flat on the ground and read as part of
   the same surface. This deliberately reverses the previous pass — the brief
   "feel like one professional workspace" outranks the screenshot's borders. */
.sb2-panel{
  background:var(--sb2-surface);
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:12px;
}
.sb2-panel:last-child{margin-bottom:0}

/* The chart stage — the only elevated surface on the page. */
.sb2-stage{
  background:var(--sb2-surface);
  box-shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.22);
  padding:18px 20px 20px;
}

/* Supporting rails: flat on the ground, quieter type, tighter rhythm. */
.sb2-rail{
  background:transparent;
  padding:0 0 18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--sb2-hairline);
}
.sb2-rail:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.sb2-notes{
  margin:0;padding-left:16px;font-size:11px;color:var(--sb2-subtle);
  line-height:1.65;
}
.sb2-notes li{margin-bottom:6px}
.sb2-notes li:last-child{margin-bottom:0}

/* Numbered blocks inside the left card, divided by rules rather than by
   five separate cards with five separate borders. */
.sb2-sec{padding:16px 0;border-top:1px solid var(--sb2-hairline)}
.sb2-sec.is-first{border-top:0}
.sb2-sec:last-of-type{padding-bottom:8px}

/* inset value box (underlying, price) */
.sb2-inset{background:var(--sb2-ground);border-radius:8px;padding:10px 12px}

/* net debit / credit line */
.sb2-net{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--sb2-hairline);
}

/* ── scrolling ─────────────────────────────────────────────────────────── */
/* Wide content scrolls inside its own container so the page never does. */
.sb2-legs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sb2 ::-webkit-scrollbar{width:10px;height:10px}
.sb2 ::-webkit-scrollbar-track{background:transparent}
.sb2 ::-webkit-scrollbar-thumb{
  background:var(--sb2-hairline);border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
}
.sb2 ::-webkit-scrollbar-thumb:hover{background-clip:content-box;background-color:var(--sb2-dim)}
.sb2{scrollbar-width:thin;scrollbar-color:var(--sb2-hairline) transparent}

.sb2-th{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sb2-dim);font-weight:600;padding:0 0 10px;white-space:nowrap;
}
.sb2-legs tr.is-spot td{background:rgba(41,121,255,.10)}

/* ── empty state ───────────────────────────────────────────────────────── */
.sb2-empty{text-align:center;padding:34px 12px}
.sb2-empty-ic{color:var(--sb2-dim);display:flex;justify-content:center;margin-bottom:12px}
.sb2-empty-h{font-size:13px;font-weight:600;color:var(--sb2-ink);margin-bottom:4px}
.sb2-empty-p{font-size:11px;color:var(--sb2-subtle);max-width:30ch;margin:0 auto;line-height:1.55}

/* ── skeleton ──────────────────────────────────────────────────────────── */
.sb2-skel{
  background:var(--sb2-hairline);border-radius:4px;position:relative;overflow:hidden;
}
.sb2-skel::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(232,237,245,.07),transparent);
  animation:sb2-shimmer 1.35s ease-in-out infinite;
}
@keyframes sb2-shimmer{100%{transform:translateX(100%)}}

/* ── save modal ────────────────────────────────────────────────────────── */
.sb2-modal-wrap{
  position:fixed;inset:0;z-index:60;
  background:rgba(6,9,14,.62);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:sb2-fade var(--sb2-fast) var(--sb2-ease);
}
.sb2-modal{
  width:100%;max-width:420px;background:var(--sb2-surface);
  border:1px solid var(--sb2-hairline);border-radius:12px;
  box-shadow:0 18px 48px rgba(0,0,0,.5);
  animation:sb2-rise var(--sb2-fast) var(--sb2-ease);
}
.sb2-modal-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--sb2-hairline);
}
.sb2-modal-h{font-size:15px;font-weight:600;color:var(--sb2-ink)}
.sb2-modal-body{padding:18px}
.sb2-modal-note{font-size:11px;color:var(--sb2-subtle);margin-top:10px;line-height:1.55}
.sb2-modal-foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding:14px 18px;border-top:1px solid var(--sb2-hairline);
}
@keyframes sb2-fade{from{opacity:0}to{opacity:1}}
@keyframes sb2-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .sb2-skel::after{animation:none}
  .sb2-modal-wrap,.sb2-modal{animation:none}
}


/* ── legs table polish ─────────────────────────────────────────────────── */
/* Taller rows, quieter chrome, numerals that line up. The side used to be a
   filled chip on every row — 3 chips of solid colour in a 366px column out-
   shouted the prices they sat next to. It is coloured text now. */
.sb2-legs th{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sb2-dim);font-weight:600;padding:0 0 10px;white-space:nowrap;
}
.sb2-legs td{
  padding:10px 0;font-size:12px;
  border-bottom:1px solid rgba(35,42,56,.55);
}
.sb2-legs tbody tr:last-child td{border-bottom:0}
.sb2-legs tbody tr:hover td{background:rgba(121,131,154,.06)}
.sb2-legs .sb2-side{font-weight:700;font-size:11px;letter-spacing:.04em}
.sb2-legs .sb2-side.is-b{color:var(--sb2-long)}
.sb2-legs .sb2-side.is-s{color:var(--sb2-short)}
.sb2-legs td.num{
  font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--sb2-ink);
}
.sb2-legs td.dim{color:var(--sb2-subtle)}

/* ── whitespace ────────────────────────────────────────────────────────── */
.sb2-cols{gap:20px}
.sb2-sec{padding:18px 0}

/* ═══════════════════════════════════════════════════════════════════════
   TERMINAL PASS — regions replace cards. These rules come last and win.
   ═══════════════════════════════════════════════════════════════════════ */

/* Regions: no radius, no shadow, no border. A panel is a block of the
   chassis, distinguished by its position and its heading. */
.sb2 .sb2-panel,
.sb2 .sb2-stage,
.sb2 .sb2-rail{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin:0;
}

/* The three columns become three REGIONS of one chassis, divided by a rule
   rather than by a gap. This is the single change that stops the page
   reading as three cards side by side. */
.sb2-cols{
  gap:0;
  background:var(--sb2-surface);
  border:1px solid var(--sb2-hairline);
}
.sb2-left{
  padding:18px 20px;
  border-right:1px solid var(--sb2-hairline);
}
.sb2-center{padding:18px 20px}
.sb2-right{
  padding:18px 20px;
  border-left:1px solid var(--sb2-hairline);
}
@media (max-width:1200px){
  .sb2-right{border-left:0;border-top:1px solid var(--sb2-hairline)}
}
@media (max-width:900px){
  .sb2-left{border-right:0;border-bottom:1px solid var(--sb2-hairline)}
}

/* Header sits on the same chassis, divided by the same rule. */
.sb2-head{
  background:var(--sb2-surface);
  border:1px solid var(--sb2-hairline);
  border-bottom:0;
  border-radius:0;
  margin-bottom:0;
  padding:12px 20px;
}

/* ── section headings: a label and a rule that runs to the edge ────────── */
/* The classic terminal device — it reads as structure, not decoration, and
   costs one pseudo-element instead of a container. */
.sb2-h{
  display:flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--sb2-dim);
  margin:0 0 12px;
}
.sb2-h::after{
  content:"";flex:1;height:1px;background:var(--sb2-hairline);
}
.sb2-sec{padding:20px 0 0;border-top:0}
.sb2-sec.is-first{padding-top:0}

/* ── controls: one height, one radius, no exceptions ───────────────────── */
.sb2 .sb2-btn,
.sb2 .sb2-in,
.sb2 .sb2-step,
.sb2 .sb2-iconbtn,
.sb2 .Select-control{
  border-radius:4px!important;
  min-height:var(--sb2-ctl);
}
.sb2 .Select-control{height:var(--sb2-ctl)!important}
.sb2 .Select-value-label,.sb2 .Select-value,.sb2 .Select-placeholder{
  line-height:var(--sb2-ctl)!important;font-size:12px!important;
}
.sb2 .sb2-btn{padding:0 14px;font-size:12px;height:var(--sb2-ctl)}
.sb2 .sb2-btn--wide{width:100%}
.sb2 .sb2-in{padding:0 10px;font-size:12px;height:var(--sb2-ctl)}
.sb2 .sb2-iconbtn{width:var(--sb2-ctl);height:var(--sb2-ctl)}
.sb2 .sb2-seg{border-radius:4px;padding:2px}
.sb2 .sb2-seg > div{border-radius:3px;padding:0;line-height:28px;font-size:12px}
.sb2 .sb2-step input{padding:0;height:30px;font-size:12px}
.sb2 .sb2-inset{border-radius:4px;padding:0 10px;height:var(--sb2-ctl);
  display:flex;align-items:center}

/* Selection is a 2px accent edge, not a fill. */
.sb2 .sb2-btn--primary{background:var(--sb2-act);color:#fff}
.sb2 .sb2-btn--ghost,.sb2 .sb2-btn--dashed,.sb2 .sb2-iconbtn{
  box-shadow:inset 0 0 0 1px var(--sb2-hairline);
}

/* ── table: terminal density ───────────────────────────────────────────── */
.sb2 .sb2-legs td{
  height:var(--sb2-row);padding:0 0;font-size:12px;
  border-bottom:1px solid rgba(35,42,56,.5);
}
.sb2 .sb2-legs th{padding:0 0 8px;font-size:10px}
.sb2 .sb2-legs td + td,.sb2 .sb2-legs th + th{padding-left:12px}
.sb2 .sb2-legs tbody tr:hover td{background:rgba(121,131,154,.05)}
.sb2 .sb2-legs .sb2-side{font-size:10px;letter-spacing:.06em}

/* ── KPI strip: a measured row, not tiles ──────────────────────────────── */
.sb2 .sb2-kpis{
  background:transparent;gap:0;border-radius:0;
  border-top:1px solid var(--sb2-hairline);
  margin-top:16px;
}
.sb2 .sb2-kpi{
  background:transparent;padding:12px 16px 0 0;
  border-right:1px solid var(--sb2-hairline);
}
.sb2 .sb2-kpi:last-child{border-right:0}
.sb2 .sb2-kpi + .sb2-kpi{padding-left:16px}

/* ── rails: label/value rows on a 24px rhythm ──────────────────────────── */
.sb2-rail{padding:0 0 18px;margin-bottom:18px;
  border-bottom:1px solid var(--sb2-hairline)}
.sb2-rail:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

/* ── motion: opacity and colour only ───────────────────────────────────── */
.sb2 *{transition-duration:var(--sb2-fast)!important}
.sb2 .sb2-card:hover,.sb2 .sb2-panel:hover{transform:none!important}
.sb2 .sb2-legs td.nowrap,.sb2 .sb2-legs th{white-space:nowrap}

/* Read-only readout: sits where a control would, but reads as data, not as
   something clickable. Same height as .sb2-in so the toolbar baseline holds. */
.sb2-readout{
  height:32px; display:flex; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:12px;
  font-variant-numeric:tabular-nums; color:var(--sb2-ink,#e8edf5);
  border-bottom:1px solid rgba(232,237,245,.10);
}

/* A primary button that cannot act yet. Not hidden — a trader should see
   that Save exists and why it is waiting. */
.sb2-btn--primary.is-disabled{
  opacity:.38; cursor:not-allowed;
}