/* ⛔ The breakpoints in this file are DELIBERATELY exempt from the house scale.
   Everywhere else in the app uses 600 / 900 / 1200. This file also uses 800, 1000,
   1100, 1101, 1300, 1301, 1400, 1550 and 2000, and those are not drift.

   1701 joined them on 16 Sep 2026 when the ticker went to one line per structure:
   it is the width at which the legs grid gains a third leg slot.

   They encode which structure-ticker columns survive as the window narrows, which is
   real desk knowledge about what a trader can afford to lose at each width, and it is
   written down nowhere else. Flattening them to three breakpoints would silently pick
   winners and losers among the columns.

   Reviewed 14 Sep 2026 during the app-wide design pass and kept on purpose. If you want
   to collapse them, that needs a column priority order from the desk first, not a
   find-and-replace. */

/* A quiet overview first; package evidence and tools appear on demand. */
.st-confirmation { padding:var(--sp-3) 0; border-top:1px solid var(--border-subtle); font:var(--text-sm)/1.5 var(--font-sans); }
.st-confirmation > summary { cursor:pointer; color:var(--accent); }
.st-confirmation p, .st-confirmation small { color:var(--text-muted); }
.st-confirmation-legs > label { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin:var(--sp-3) 0; }
.st-confirmation small { display:block; font-size:var(--text-xs); }
.st-confirmation-net, .st-confirmation-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:14px 0; }
.st-confirmation-net label { display:flex; flex-direction:column; gap:5px; }
#sub-trading .st-confirmation select, #sub-trading .st-confirmation input[type=number] { min-width:100px; max-width:160px; padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); font:var(--text-sm) var(--font-sans); }
#sub-trading .st-confirmation button { padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--accent); font:var(--text-sm) var(--font-sans); cursor:pointer; }
#sub-trading .st-confirmation button:disabled { opacity:.5; cursor:default; }
.st-confirmation-attest { display:flex; align-items:flex-start; gap:var(--sp-2); margin:var(--sp-4) 0; }
.st-confirmation-attest input { margin-top:3px; }
.st-confirmation-review ul { padding-left:var(--sp-5); }
.st-confirmation [hidden] { display:none !important; }
#sub-trading button.ss-tile { appearance:none; text-align:left; border:0; border-right:1px solid var(--border-subtle); border-radius:0; cursor:pointer; }
#sub-trading button.ss-tile:hover { background:var(--surface-tint-1); }
#sub-trading button.ss-tile:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.snapshot-ref-source { display:block; font:var(--text-2xs)/1.4 var(--font-sans); color:var(--text-muted); white-space:nowrap; letter-spacing:0; }
#sub-trading .snapshot-ref-change { color:var(--text-muted); }
.session-focus { display:flex; gap:22px; margin-top:14px; padding:14px 0 0; border-top:1px solid var(--border-subtle); }
.session-focus-label { flex:0 0 110px; color:var(--text-muted); font:var(--text-xs)/1.6 var(--font-sans); padding-top:var(--sp-1); }
.session-focus > div { flex:1; min-width:0; }
#sub-trading .session-focus button { display:flex; width:100%; align-items:baseline; gap:10px; padding:var(--sp-1) 0; border:0; background:none; color:var(--text); text-align:left; font:var(--text-sm)/1.5 var(--font-sans); cursor:pointer; }
.session-focus button > span:first-child { flex:0 0 65px; color:var(--text-muted); font-size:var(--text-xs); }
.session-focus button > span:last-child { margin-left:auto; color:var(--accent); }
#sub-trading .session-focus button:hover { color:var(--accent); }
.trading-brokerage-detail { padding:0 22px 14px; font:var(--text-sm)/1.6 var(--font-sans); }
.trading-brokerage-detail > summary { cursor:pointer; color:var(--text-muted); font-size:var(--text-xs); }
#brokerage-detail-content { padding:var(--sp-4) 0 0; max-width:920px; }
.brokerage-channels { padding:0 22px 14px; }
.brokerage-channels-table { border-collapse:collapse; font:var(--text-sm)/1.5 var(--font-sans); }
.brokerage-channels-table caption { caption-side:top; text-align:left; padding-bottom:var(--sp-1); color:var(--text-muted); font-size:var(--text-xs); }
.brokerage-channels-table caption span { margin-left:var(--sp-2); color:var(--text-muted); font-size:var(--text-2xs); }
.brokerage-channels-table th, .brokerage-channels-table td { padding:3px 0 3px 24px; text-align:right; white-space:nowrap; }
.brokerage-channels-table th:first-child { padding-left:0; text-align:left; }
.brokerage-channels-table thead th { color:var(--text-muted); font-size:var(--text-xs); font-weight:500; border-bottom:1px solid var(--border-subtle); }
.brokerage-channels-table tbody th { font-weight:500; color:var(--text); }
.brokerage-channels-table td { font-family:var(--font-mono); color:var(--text); }
.brokerage-channels-table .bc-total th, .brokerage-channels-table .bc-total td { border-top:1px solid var(--border-subtle); font-weight:600; color:var(--state-good); }
.st-brokerage-totals { display:flex; flex-wrap:wrap; gap:20px 60px; }
.st-brokerage-totals > span { font-size:var(--text-xs); color:var(--text-muted); }
.st-brokerage-totals strong { display:block; margin-top:3px; font:600 var(--text-xl) var(--font-mono); color:var(--state-good); }
.st-inline-control, .st-review-controls label { display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--text-muted); font:var(--text-xs) var(--font-sans); }
#sub-trading .st-inline-control select, #sub-trading .st-review-controls select { height:30px; padding:var(--sp-1) var(--sp-2); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); font:var(--text-sm) var(--font-sans); }
.st-brokerage-breakdown { margin:var(--sp-3) 0; max-height:200px; overflow:auto; }
.st-brokerage-breakdown > div { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--border-subtle); padding:6px 0; }
.st-brokerage-breakdown dd { margin:0; font-family:var(--font-mono); white-space:nowrap; }
.st-brokerage-leaders summary { color:var(--text-muted); cursor:pointer; }
#sub-trading .st-brokerage-leaders button { display:flex; width:100%; justify-content:space-between; gap:18px; text-align:left; color:var(--text); padding:var(--sp-2) 0; border:0; border-bottom:1px solid var(--border-subtle); background:none; font:var(--text-sm)/1.5 var(--font-sans); cursor:pointer; }
.st-brokerage-leaders button strong { flex-shrink:0; color:var(--state-good); font-family:var(--font-mono); }
#sub-trading .st-text-action { color:var(--accent); font:var(--text-xs)/1.5 var(--font-sans); background:none; border:0; padding:5px 0; text-align:left; cursor:pointer; }
.structure-review-queue { border-bottom:1px solid var(--border-subtle); padding:10px 0 12px; font:var(--text-sm)/1.5 var(--font-sans); }
.structure-review-queue > summary { color:var(--text-muted); cursor:pointer; font-size:var(--text-xs); }
.st-review-controls { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); padding:14px 0; }
.st-review-controls > span { margin-left:auto; color:var(--text-muted); font-size:var(--text-xs); }
.st-review-list { max-height:340px; overflow:auto; }
#sub-trading .st-review-list > button { display:flex; width:100%; align-items:center; gap:18px; padding:12px 10px; color:var(--text); border:0; border-bottom:1px solid var(--border-subtle); background:none; text-align:left; font:var(--text-sm)/1.5 var(--font-sans); cursor:pointer; }
#sub-trading .st-review-list > button:hover { background:var(--surface-tint-1); }
.st-review-list button > span:first-child { flex:1; min-width:0; }
.st-review-list small { display:block; font-size:var(--text-xs); color:var(--text-muted); margin-top:3px; }
.st-review-brokerage { flex-shrink:0; color:var(--state-good); text-align:right; font-family:var(--font-mono); }
.st-direction-benchmark { padding:10px 0 0; }
.st-direction-benchmark > summary { cursor:pointer; color:var(--text-muted); font-size:var(--text-xs); }
.st-model-result { display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-3) 0; border-bottom:1px solid var(--border-subtle); }
.st-model-result span, .st-model-result small { color:var(--text-muted); font-size:var(--text-xs); }
.trade-trail-selection { padding:var(--sp-4); margin:var(--sp-3) 0; border:1px solid var(--border); border-radius:var(--radius); }
.st-trail-selection-heading { display:flex; align-items:baseline; justify-content:space-between; gap:18px; font:var(--text-sm)/1.5 var(--font-sans); }
#sub-trading .st-trail-selection-heading > button { background:none; border:0; color:var(--accent); padding:0; flex-shrink:0; font:var(--text-xs) var(--font-sans); cursor:pointer; }
.st-session-trail { padding:10px 0; border-top:1px solid var(--border-subtle); min-width:0; }
.st-session-trail > summary { cursor:pointer; font:var(--text-sm)/1.5 var(--font-sans); }
.st-insight-summary { display:flex; flex-direction:column; gap:var(--sp-1); margin:var(--sp-3) 0 var(--sp-2); font:var(--text-sm)/1.5 var(--font-sans); }
.st-insight-summary > span { font-family:var(--font-mono); }
.st-trail-stats { display:flex; flex-wrap:wrap; gap:5px 18px; color:var(--text-muted); font:var(--text-xs)/1.5 var(--font-sans); }
.st-trail-chart { display:block; width:100%; max-width:480px; height:auto; margin:var(--sp-1) 0; }
.trade-trail-selection .st-trail-layout { display:grid; grid-template-columns:minmax(240px,.85fr) minmax(330px,1.15fr); gap:var(--sp-6); margin-top:var(--sp-3); }
.st-trail-layout > div { min-width:0; }
.st-chart-axis { stroke:var(--border); stroke-width:1; }
.st-chart-line { fill:none; stroke:var(--accent); stroke-width:1.5; }
.st-chart-point { fill:var(--accent); }
.st-chart-strike { stroke:var(--text-muted); stroke-width:2; }
.st-trail-table-wrap { overflow:auto; max-height:240px; }
#sub-trading .st-trail-table { width:100%; table-layout:auto; border-collapse:collapse; }
#sub-trading .st-trail-table th, #sub-trading .st-trail-table td { padding:6px 8px; text-align:left; white-space:nowrap; font:var(--text-xs)/1.5 var(--font-mono); border-bottom:1px solid var(--border-subtle); }
#sub-trading .st-trail-table th { font-family:var(--font-sans); color:var(--text-muted); }
.st-trail-table .is-current { background:var(--surface-tint-1); }
#sub-trading .st-trail-table button { border:0; padding:3px; background:none; color:var(--accent); font:var(--text-xs) var(--font-sans); cursor:pointer; }
.st-strike-context { padding:var(--sp-3) 0; margin:var(--sp-3) 0; border-top:1px solid var(--border-subtle); max-width:560px; }
.st-strike-context > p { display:flex; flex-direction:column; gap:var(--sp-1); font:var(--text-xs)/1.5 var(--font-sans); }
.st-strike-context > p > span { color:var(--text-muted); }
.st-strike-chart { display:block; width:100%; max-width:440px; height:auto; margin:var(--sp-2) 0; }
.st-strike-chart text { fill:var(--text-muted); font:var(--text-xs) var(--font-mono); }
.st-strike-legs { display:flex; flex-wrap:wrap; gap:10px 20px; font:var(--text-xs)/1.5 var(--font-sans); }
.st-strike-legs small { display:block; color:var(--text-muted); font-size:var(--text-xs); }
@media (max-width:800px) {
  .trade-trail-selection .st-trail-layout { grid-template-columns:minmax(0,1fr); gap:4px; }
}
@media (max-width:600px) {
  .session-focus { flex-direction:column; gap:6px; }
  .session-focus-label { flex-basis:auto; }
  #sub-trading .session-focus button { font-size:11px; gap:8px; }
  .session-focus button > span:first-child { flex-basis:48px; font-size:9px; }
  .st-review-controls > span { width:100%; margin:0; }
  #sub-trading .st-review-list > button { gap:10px; padding-inline:0; flex-wrap:wrap; }
  .st-review-list button > span:first-child { flex-basis:100%; }
  .st-review-brokerage { text-align:left; }
  .st-review-list button > span:last-child { margin-left:auto; }
  .st-trail-selection-heading { flex-direction:column; gap:8px; }
  .trade-trail-selection { padding:12px; }
  #sub-trading .st-brokerage-leaders button { flex-wrap:wrap; gap:4px; }
  .trading-brokerage-detail { padding-inline:14px; }
}
#sub-trading { gap:0; width:100%; min-width:0; }
#sub-trading section { scroll-margin-top:90px; }
#sub-trading .trading-top-bar { margin:6px 0 10px; gap:var(--sp-4); }
.trading-page-title h1 { margin:0 0 var(--sp-1); font:var(--text-2xl)/1.3 var(--font-sans); letter-spacing:-.4px; color:var(--text); }
.trading-page-title > span { color:var(--text-muted); font:var(--text-xs) var(--font-sans); }
#sub-trading .trading-session-controls { gap:10px; }
#sub-trading .trading-date-caption { font-size:var(--text-xs); text-transform:none; letter-spacing:0; }
#sub-trading .asx-refresh-btn, #sub-trading .daily-wrap-btn { font:var(--text-xs) var(--font-sans); text-transform:none; letter-spacing:0; padding:var(--sp-2) var(--sp-3); }
.trading-navigation-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; margin-bottom:18px; }
#sub-trading .trading-jumps { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-5); font:var(--text-sm) var(--font-sans); }
#sub-trading .trading-jumps a { color:var(--text-muted); text-decoration:none; padding:5px 0; }
#sub-trading .trading-jumps a:hover { color:var(--accent); }
#sub-trading .asx-freshness-badge { background:none; border:0; padding:0; margin-left:auto; font:var(--text-xs) var(--font-sans); flex-wrap:wrap; white-space:normal; }
#sub-trading .panel { margin-bottom:18px; }
#sub-trading .section-hdr-title { font:var(--text-base) var(--font-sans); letter-spacing:0; text-transform:none; }
#sub-trading .section-hdr { margin-bottom:0; }
#sub-trading .count-badge { font:var(--text-xs) var(--font-mono); }
#section-session-stats { padding:0; overflow:visible; }
#sub-trading .session-stats-bar { display:flex; flex-wrap:wrap; background:none; border:0; border-radius:0; }
#sub-trading #session-stats-bar .ss-tile { flex:1 1 160px; padding:18px 22px; min-width:0; gap:7px; border-left:0; background:none; }
/* The session tape's KPI numerals: the display tier this figure was waiting for.
   Was a hand-set 27px, which sat off the scale; --text-3xl is 28px and is the step
   the token's own comment reserves for "tape and KPI numerals". */
#sub-trading #session-stats-bar .ss-value { font:var(--text-3xl)/1.15 var(--font-mono); color:var(--text); letter-spacing:-0.02em; }
#sub-trading #session-stats-bar .ss-tile--adm { flex-grow:1.35; background:color-mix(in srgb, var(--state-good) 4%, transparent); }
#sub-trading #session-stats-bar .ss-value--money { color:var(--state-good); }
#sub-trading #session-stats-bar .ss-label { font:var(--text-sm) var(--font-sans); text-transform:none; letter-spacing:0; }
#sub-trading .ss-sub { font:var(--text-xs) var(--font-sans); color:var(--text-muted); }
.session-secondary-bar { display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); padding:0 22px 12px; }
.trading-scope-label { color:var(--text-muted); font:var(--text-xs)/1.5 var(--font-sans); }
.trading-disclosure { font:var(--text-xs)/1.6 var(--font-sans); color:var(--text-muted); position:relative; }
.trading-disclosure > summary { cursor:pointer; white-space:nowrap; }
.trading-disclosure > summary:hover { color:var(--text); }
.trading-disclosure p { margin:var(--sp-2) 0 0; max-width:540px; }
#session-breakdown { text-align:right; }
#session-breakdown-content { display:flex; flex-wrap:wrap; gap:10px; padding-top:10px; text-align:left; }
#session-breakdown-content .ss-tile { padding:var(--sp-2) var(--sp-3); border:0; background:var(--surface-tint-1); }
#sub-trading #section-most-active { display:flex; border:0; border-top:1px solid var(--border-subtle); border-radius:0; background:none; padding:10px 22px; gap:14px; }
#sub-trading .most-active-label { font:var(--text-xs) var(--font-sans); text-transform:none; letter-spacing:0; }
#sub-trading .most-active-chip { border:0; border-radius:var(--radius-sm); background:var(--surface-tint-1); padding:var(--sp-1) var(--sp-2); font:var(--text-xs) var(--font-mono); }
#sub-trading .most-active-chip .ma-vol { color:var(--text-muted); }
#sub-trading .snapshot-filter-bar { display:flex; flex-direction:row; align-items:baseline; gap:10px 18px; flex-wrap:wrap; padding:10px 12px; background:none; border:0; }
#sub-trading .snapshot-toggle-label { display:inline-flex; width:auto; min-height:28px; font:var(--text-xs) var(--font-sans); text-transform:none; letter-spacing:0; }
.snapshot-region-jumps { display:none; }
.snapshot-price-guide { margin-left:auto; text-align:right; }
.snapshot-price-guide p { text-align:left; }
.snapshot-viewport { max-height:360px; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; border-radius:var(--radius); }
.snapshot-viewport--full { max-height:none; overflow:visible; }
.snapshot-viewport:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#sub-trading .snapshot-header { position:sticky; top:0; z-index:2; background:var(--bg-card); }
#sub-trading .snapshot-card { overflow:clip; }
#sub-trading .snapshot-table td { padding:8px 6px; white-space:nowrap; }
#sub-trading .snapshot-table th { padding-inline:6px; }
#sub-trading .snapshot-table col.snap-c-contract { width:18%; }
#sub-trading .snapshot-table col.snap-c-prior, #sub-trading .snapshot-table col.snap-c-last { width:22%; }
#sub-trading .snapshot-table col.snap-c-vs { width:24%; }
#sub-trading .snapshot-table col.snap-c-vol { width:14%; }
.snapshot-table .snapshot-last-time { display:none; }
.snapshot-aligned .snapshot-row-traded, .snapshot-aligned .snapshot-row-settle { height:40px; }
.snapshot-aligned .snapshot-product-group { height:38px; }
.snapshot-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:10px 0 2px; color:var(--text-muted); font:var(--text-xs) var(--font-sans); }
.snapshot-footer button { border:0; background:none; padding:var(--sp-1) 0; color:var(--accent); font:var(--text-xs) var(--font-sans); cursor:pointer; white-space:nowrap; }
#section-structures .structure-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); padding:16px 0 10px; background:none; border:0; }
.structure-asset-tabs { display:flex; gap:3px; padding:3px; background:var(--surface-tint-1); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); }
.structure-asset-tabs button { border:0; border-radius:var(--radius-sm); background:none; padding:7px 12px; color:var(--text-muted); font:var(--text-sm) var(--font-sans); cursor:pointer; }
.structure-asset-tabs button[aria-pressed="true"] { background:var(--bg-card); color:var(--text); box-shadow:var(--shadow-card); }
.structure-asset-tabs span { margin-left:6px; font:var(--text-xs) var(--font-mono); color:var(--text-muted); }
#struct-search { margin-left:auto; flex:0 1 340px; min-width:180px; }
#section-structures .trade-filter-select { font:var(--text-sm) var(--font-sans); height:34px; max-width:100%; padding:6px 10px; }
#struct-filters-toggle { border:1px solid var(--border); background:none; border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); color:var(--text); font:var(--text-sm) var(--font-sans); cursor:pointer; }
#struct-filters-toggle[aria-expanded="true"] { border-color:var(--accent); }
#sub-trading [hidden] { display:none !important; }
.structure-filter-options { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-3); background:var(--surface-tint-1); border-radius:var(--radius); margin:0 0 var(--sp-3); }
#section-structures .struct-low-conf-toggle { margin:0; font:var(--text-xs) var(--font-sans); text-transform:none; letter-spacing:0; padding:6px 0; border:0; background:none; }
.structure-list-caption { display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:0 0 var(--sp-3); font:var(--text-xs)/1.6 var(--font-sans); color:var(--text-muted); }
.structure-list-caption > details { text-align:right; }
.structure-list-caption p { text-align:left; }
#section-structures .eod-structure-review-banner { padding:9px 12px; background:var(--surface-tint-1); border:0; border-left:2px solid var(--state-warn); font:var(--text-xs) var(--font-sans); }
#section-structures .eod-structure-review-banner button { background:none; color:var(--accent); border:0; font:var(--text-xs) var(--font-sans); text-transform:none; }
#section-structures .struct-ticker { table-layout:fixed; font-family:var(--font-sans); }
#section-structures .col-time { width:74px; color:var(--text-muted); }
#section-structures .col-trade { width:476px; }
#section-structures .col-legs { display:table-cell; width:auto; }
#section-structures .col-hedge { width:250px; }
#section-structures .col-size { width:100px; }
#section-structures .col-econ { display:table-cell; width:145px; }
#section-structures .col-view { width:130px; color:var(--text-muted); }
#section-structures .col-brokerage { width:170px; }
#section-structures .struct-ticker > thead > tr > th { padding:8px 10px; font:500 var(--text-sm) var(--font-sans); text-transform:none; letter-spacing:0; white-space:nowrap; }
#section-structures .struct-ticker > tbody > tr > td { padding:5px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; font:var(--text-base)/1.5 var(--font-sans); }
/* One structure is one line. Every cell that used to stack a caption under its
   value now sets it beside it, so a row is a single line of text and twice as
   many packages fit on screen at a larger size. Rows share one height so the
   ticker keeps its rhythm; a table row treats height as a minimum, so a leg grid
   that wraps (a four-quarter strip on a narrow window) can still grow its row. */
#section-structures .struct-ticker > tbody > .st-row, #section-structures .struct-ticker > tbody > .st-repeat-group { height:38px; }
#section-structures .struct-ticker > tbody > tr[data-zebra="1"] { background:none; }
#section-structures .struct-ticker > tbody > tr.st-row:hover { background:var(--surface-tint-1); }
#section-structures .struct-ticker > tbody > .st-row > td:first-child { border-left:0; }
#section-structures .struct-ticker > tbody > tr > .col-time { font:var(--text-sm) var(--font-mono); }
#section-structures .col-size, #section-structures .col-econ, #section-structures .col-brokerage { text-align:right; font-variant-numeric:tabular-nums; }
#section-structures .col-size strong, #section-structures .col-econ strong, #section-structures .col-brokerage strong { font:var(--text-base) var(--font-mono); }
#section-structures .col-brokerage strong { color:var(--state-good); }
.st-mobile-label { display:none; }
/* A cell that carries two runs of text side by side wraps them in this line box.
   The <td> itself must stay a table-cell: making it a flex container drops it out
   of the fixed column model and the ticker loses its column widths entirely. */
.st-cell-line { display:flex; align-items:baseline; gap:var(--sp-3); min-width:0; }
.st-cell-line--end { justify-content:flex-end; }
#section-structures .st-expand { display:flex; align-items:baseline; flex-wrap:nowrap; gap:8px; flex:1 1 auto; min-width:0; position:relative; border:0; padding:0 0 0 17px; background:none; text-align:left; color:var(--text); font:var(--text-base)/1.5 var(--font-sans); cursor:pointer; }
.st-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-expand:focus-visible, .st-repeat-group button:focus-visible, .structure-asset-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
.st-caret { position:absolute; left:0; top:3px; color:var(--text-muted); font-size:var(--text-2xs); }
.st-ratio { color:var(--text-muted); font:var(--text-xs) var(--font-mono); border-left:1px solid var(--border); padding-left:10px; }
/* Each leg has the same label / quantity / price / IV positions. The grid
   fills whatever width the legs column has left with as many leg slots as fit,
   so every row in the table shares the same slot positions. */
.st-structure-caption { display:flex; flex-wrap:nowrap; flex:0 0 auto; gap:0 var(--sp-3); margin:0; color:var(--text-muted); font:var(--text-sm)/1.5 var(--font-sans); white-space:nowrap; }
.st-structure-caption > span:first-child { font-variant-numeric:tabular-nums; }
/* Slot width is set by the longest label the grid can hold: an option strike is
   shorter than a futures contract name, and a strip's quarter labels are shorter
   again, so a four-quarter strip still lands on one line. */
.st-leg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:0; align-items:baseline; }
.st-leg-grid--options { grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.st-leg-grid--strip { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); }

.st-leg-item { display:flex; align-items:baseline; gap:var(--sp-2); min-width:0; padding:0 var(--sp-2); border-left:1px solid var(--border-subtle); }
.st-leg-name { display:flex; align-items:baseline; gap:5px; flex:1 1 auto; min-width:0; color:var(--text); font:var(--text-sm)/1.5 var(--font-sans); white-space:nowrap; }
.st-leg-name > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.st-leg-values { display:grid; grid-template-columns:36px minmax(52px,max-content) minmax(46px,max-content); align-items:baseline; gap:0 var(--sp-1); flex:0 0 auto; font:var(--text-base)/1.5 var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
.st-leg-grid:not(.st-leg-grid--options) .st-leg-values { grid-template-columns:36px minmax(52px,max-content); }
.st-leg-qty, .st-leg-iv { white-space:nowrap; }
.st-leg-px { overflow-wrap:normal; }
.st-leg-px { color:var(--text); }
.st-leg-values small { color:var(--text-muted); font:var(--text-2xs) var(--font-sans); }
/* Implied vol is the secondary rail on a leg: a step down in size, and on the
   wide layout without its unit kicker, so a quoted range cannot crowd out the
   strike it belongs to. The column header already reads "... · IV", and the
   kicker comes back on the stacked card below 1100px where there is no header. */
.st-leg-iv { color:var(--text-muted); white-space:nowrap; font-size:var(--text-sm); }
#section-structures .struct-ticker .st-leg-iv small { display:none; }
.st-leg-role { color:var(--accent); font-size:var(--text-2xs); }
#section-structures .col-hedge .st-leg-item--hedge .st-leg-role { display:none; }
.st-leg-side { color:var(--text-muted); font:var(--text-xs) var(--font-sans); }
.st-leg-item--indicative .st-leg-name, .st-leg-item--indicative .st-leg-px { color:var(--text-muted); }
/* The hedge column reuses the leg item, so the futures leg keeps the block it had
   inside the legs grid minus the IV slot. An underlying reference is a print-time
   valuation input rather than a live level: it sits in muted ink under its own
   kicker, with the price held in the same slot a hedge price occupies. */
.col-hedge .st-leg-values { grid-template-columns:36px minmax(52px,max-content); }
.col-hedge .st-leg-item + .st-leg-item { margin-top:var(--sp-2); }
.st-leg-item--underlying .st-leg-name, .st-leg-item--underlying .st-leg-role, .st-leg-item--underlying .st-leg-px { color:var(--text-muted); }
.st-leg-item--underlying .st-leg-px { grid-column:2; }
.st-leg-item--none { color:var(--text-muted); font:var(--text-base)/1.5 var(--font-mono); }
/* The note is a slot in the leg grid, so it keeps the row one line deep and
   lands on the same rail as a leg. */
.st-leg-note { padding:0 var(--sp-2); border-left:1px solid var(--border-subtle); color:var(--text-muted); font:var(--text-sm)/1.5 var(--font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-inline-label { color:var(--text-muted); font-size:var(--text-xs); margin-right:var(--sp-1); }
.st-repeat-count { color:var(--accent); font:var(--text-xs) var(--font-sans); }
#section-structures .struct-ticker > tbody > tr > .col-view { font:var(--text-xs)/1.4 var(--font-sans); }
.st-review-note::before { content:'•'; color:var(--state-warn); margin-right:6px; }
.st-cell-caption { display:inline; margin-left:var(--sp-2); font:var(--text-sm) var(--font-sans); color:var(--text-muted); }
#section-structures .col-brokerage .st-cell-caption { margin:0 var(--sp-2) 0 0; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#section-structures .col-brokerage .st-cell-line > strong { flex:0 0 auto; }
#section-structures .st-attention { color:var(--state-warn); }
#section-structures .st-detail > td { padding:18px 26px 20px; background:var(--surface-tint-1); white-space:normal; overflow:visible; text-overflow:clip; font-size:var(--text-base); }
.st-detail-heading { font:var(--text-sm) var(--font-sans); color:var(--text-muted); margin-bottom:14px; }
#section-structures .st-detail-grid { display:grid; grid-template-columns:minmax(340px, 1.6fr) minmax(260px, 1fr); gap:var(--sp-7); }
#section-structures .st-detail-legs { min-width:0; overflow-x:auto; }
#section-structures .st-detail-legs .sl-legs-table { width:100%; min-width:560px; table-layout:auto; }
#section-structures .sl-legs-table th, #section-structures .sl-legs-table td { padding:9px 10px; white-space:nowrap; font-size:var(--text-sm); }
#section-structures .sl-legs-table th { color:var(--text-muted); font:500 var(--text-xs) var(--font-sans); }
#section-structures .sl-legs-table td:first-child { color:var(--text); max-width:none; overflow:visible; text-overflow:clip; }
#section-structures .sl-legs-table th:first-child, #section-structures .sl-legs-table td:first-child { width:1%; }
#section-structures .st-strip-parent { background:var(--surface-tint-2); }
.st-detail-note { color:var(--text-muted); font:var(--text-xs)/1.6 var(--font-sans); margin:10px 0; }
.st-detail-meta { color:var(--text-muted); font:var(--text-xs)/1.6 var(--font-sans); }
.st-spectator { padding:0 0 14px; margin-bottom:14px; border-bottom:1px solid var(--border-subtle); min-width:0; }
.st-spectator h4 { margin:0 0 7px; font:var(--text-sm) var(--font-sans); }
.st-spectator p { margin:6px 0; color:var(--text-muted); font:var(--text-xs)/1.55 var(--font-sans); }
.st-spectator label { display:block; margin-top:var(--sp-3); color:var(--text-muted); font:var(--text-xs) var(--font-sans); }
.st-spectator select { display:block; width:100%; max-width:100%; margin:6px 0 12px; padding:var(--sp-2); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); color-scheme:dark; font:var(--text-xs) var(--font-mono); }
#sub-trading select option { background:var(--bg-card); color:var(--text); }
.st-scenario-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-2) 0; }
.st-scenario-actions button { border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 10px; background:var(--bg-card); color:var(--text); font:var(--text-sm) var(--font-sans); cursor:pointer; }
.st-scenario-actions .st-save-scenario { border-color:var(--accent); color:var(--accent); }
.st-scenario-actions button:disabled { opacity:.5; cursor:default; }
.st-hedge-fit { display:flex; flex-direction:column; gap:var(--sp-1); margin:var(--sp-3) 0; font:var(--text-sm) var(--font-mono); }
.st-hedge-fit span { color:var(--text-muted); font:var(--text-xs) var(--font-sans); }
.st-evidence, .st-valuation { padding:10px 0; border-bottom:1px solid var(--border-subtle); font:var(--text-sm)/1.6 var(--font-sans); }
.st-evidence summary, .st-valuation summary { cursor:pointer; color:var(--text-muted); }
.st-evidence .st-conf-why { max-width:100%; }
.st-valuation .sl-prem-line { margin-top:var(--sp-3); }
.st-detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); padding-top:14px; margin-top:14px; border-top:1px solid var(--border-subtle); }
.st-detail-actions button, .st-detail-actions select, .st-source-heading button, .tape-structure-link { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font:var(--text-xs) var(--font-sans); padding:7px 10px; cursor:pointer; }
#section-structures .st-detail-actions .st-price-btn { border-color:var(--accent); color:var(--accent); text-transform:none; }
#section-structures .st-detail-actions .sl-copy-btn-full { width:auto; margin:0; }
.st-detail-actions label { display:flex; align-items:center; gap:5px; font:var(--text-xs) var(--font-sans); color:var(--text-muted); }
.st-detail-actions select { max-width:220px; }
.st-action-status { color:var(--state-warn); font-size:var(--text-xs); }
#section-structures .st-repeat-group td { background:var(--surface-tint-1); }
.st-repeat-group button { background:none; border:0; color:var(--text); font:var(--text-sm) var(--font-sans); text-align:left; cursor:pointer; line-height:1.6; }
.st-repeat-group .col-trade > .st-cell-caption { padding-left:var(--sp-5); }
/* A grouped row is a summary of several packages, not one of them, so its "from"
   time keeps its own line rather than being squeezed into the time column beside
   the latest print. A table row treats height as a minimum, so the row grows. */
#section-structures .st-repeat-group .col-time .st-cell-caption { display:block; margin:0; white-space:nowrap; font-size:var(--text-2xs); }
#trade-source-context { margin:12px 0 18px; padding:14px; border:1px solid var(--accent); border-radius:var(--radius); background:var(--surface-tint-1); }
.st-source-heading { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.st-source-heading strong { flex:1 1 260px; font-size:var(--text-sm); }
#trade-source-context p { font-size:var(--text-xs); color:var(--text-muted); }
.tape-structure-link { margin-left:6px; color:var(--accent); padding:1px 5px; font-size:var(--text-2xs); }
@media (max-width:1000px) {
  #struct-search { flex:1 1 220px; }
  #section-structures .st-detail-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
}
@media (min-width:1101px) and (max-width:1400px) {
  #section-structures .col-time { width:74px; }
  #section-structures .col-trade { width:340px; }
  #section-structures .col-hedge { width:200px; }
  #section-structures .col-size { width:85px; }
  #section-structures .col-econ { width:140px; }
  #section-structures .col-view { width:112px; }
  #section-structures .col-brokerage { width:145px; }
}
/* 1401-1700 is the width at which the legs grid can still hold two leg slots
   side by side, which covers every two-leg package (spread, collar, call
   spread). Above it a third slot fits and a 3-way lands on one line too. */
@media (min-width:1401px) and (max-width:1700px) {
  #section-structures .col-time { width:74px; }
  #section-structures .col-trade { width:414px; }
  #section-structures .col-hedge { width:230px; }
  #section-structures .col-econ { width:140px; }
  #section-structures .col-brokerage { width:165px; }
}
@media (max-width:800px) {
  #sub-trading .trading-session-controls { margin-left:0; flex-wrap:wrap; }
  #sub-trading .asx-freshness-badge { margin-left:0; }
  #sub-trading #session-stats-bar .ss-tile { flex:1 1 45%; padding:16px; }
  #sub-trading #session-stats-bar .ss-tile--adm { flex-basis:100%; order:-1; }
  #sub-trading #session-stats-bar .ss-value { font-size:24px; }
  .session-secondary-bar { padding:0 16px 12px; flex-wrap:wrap; }
  .brokerage-channels { padding:0 16px 12px; overflow-x:auto; }
  .brokerage-channels-table { font-size:var(--text-2xs); }
  .brokerage-channels-table th, .brokerage-channels-table td { padding-left:6px; }
  .brokerage-channels-table tbody th { white-space:normal; }
  #session-breakdown { text-align:left; }
  #sub-trading #section-most-active { padding:10px 16px; }
  .snapshot-viewport { max-height:360px; }
  .snapshot-viewport--full { max-height:none; overflow:auto; }
  #sub-trading .market-snapshot-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100%; align-items:start; }
  .snapshot-region-jumps { display:flex; gap:4px; margin:0 0 10px; }
  .snapshot-region-jumps button { flex:1; border:1px solid var(--border-subtle); border-radius:4px; padding:7px 4px; background:none; color:var(--text-muted); font:11px var(--font-sans); cursor:pointer; }
  .snapshot-region-jumps button:hover, .snapshot-region-jumps button:focus-visible { color:var(--text); border-color:var(--accent); }
  .snapshot-footer { flex-wrap:wrap; }
  .structure-asset-tabs { flex:1 1 100%; }
  .structure-asset-tabs button { flex:1; }
  #struct-search { flex:1 1 160px; min-width:0; }
  #section-structures .structure-filter-options > select { flex:1 1 45%; min-width:0; }
  .structure-list-caption { align-items:flex-start; flex-wrap:wrap; }
  .structure-list-caption > details { text-align:left; }
  .snapshot-price-guide { margin-left:0; text-align:left; }
}
@media (max-width:1100px) {
  #section-structures .struct-ticker > thead { display:none; }
  #section-structures .struct-ticker, #section-structures .struct-ticker > tbody { display:block; }
  /* The desktop row height is set through `.struct-ticker > tbody > .st-row`, which
     out-specifies a bare `.st-row` here, so the stacked card has to release it at
     matching specificity or every card is clipped to one ticker row. */
  #section-structures .struct-ticker > tbody > .st-row, #section-structures .struct-ticker > tbody > .st-repeat-group { height:auto; }
  #section-structures .st-row { display:grid; grid-template-columns:1fr 1fr; height:auto; border-bottom:1px solid var(--border); padding:14px 2px; gap:8px 12px; }
  #section-structures .struct-ticker > tbody > .st-row > td { padding:0; border:0; width:auto; white-space:normal; overflow:visible; text-overflow:clip; }
  #section-structures .col-trade .st-cell-line { display:block; }
  #section-structures .col-brokerage .st-cell-line { flex:1 1 auto; }
  #section-structures .st-expand { flex-wrap:wrap; }
  #section-structures .st-title { white-space:normal; overflow:visible; }
  #section-structures .st-structure-caption { flex-wrap:wrap; white-space:normal; margin:4px 0 0 17px; }
  #section-structures .st-leg-note { margin:5px 0 0; padding-left:12px; border:0; white-space:normal; }
  #section-structures .struct-ticker .st-leg-iv small { display:inline; }
  #section-structures .col-hedge .st-leg-item--hedge .st-leg-role { display:inline; }
  #section-structures .st-row .col-time, #section-structures .st-row .col-trade, #section-structures .st-row .col-legs { grid-column:1 / -1; }
  #section-structures .st-row .col-size { text-align:left; padding-left:17px; }
  #section-structures .st-row .col-econ { display:block; text-align:right; }
  #section-structures .st-row .col-brokerage, #section-structures .st-repeat-group .col-brokerage { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; text-align:right; }
  #section-structures .col-brokerage .st-mobile-label { display:inline; margin-right:auto; color:var(--text-muted); font:11px var(--font-sans); }
  #section-structures .col-brokerage .st-cell-caption { margin:0; }
  #section-structures .col-view { grid-column:1 / -1; display:flex; justify-content:space-between; gap:8px; }
  #section-structures .col-view:empty { display:none; }
  #section-structures .col-view .st-mobile-label { display:inline; }
  #section-structures .st-detail { display:block; }
  #section-structures .struct-ticker > tbody > .st-detail > td { display:block; padding:16px 10px; }
  #section-structures .st-repeat-group { display:grid; grid-template-columns:1fr 1fr; height:auto; gap:8px; padding:14px 8px; }
  #section-structures .st-repeat-group .col-time, #section-structures .st-repeat-group .col-trade, #section-structures .st-repeat-group .col-legs { grid-column:1 / -1; }
  #section-structures .struct-ticker > tbody > .st-repeat-group > td { width:auto; padding:0; border:0; }
  #section-structures .struct-ticker > tbody > .st-row > .col-legs, #section-structures .struct-ticker > tbody > .st-repeat-group > .col-legs,
  #section-structures .struct-ticker > tbody > .st-row > .col-hedge, #section-structures .struct-ticker > tbody > .st-repeat-group > .col-hedge { display:block; padding-left:17px; }
}

@media (min-width:2000px) {
  #section-structures .col-trade { width:500px; }
}
@media (max-width:600px) {
  .st-leg-grid, .st-leg-grid--options, .st-leg-grid--strip { grid-template-columns:1fr; }
  .st-leg-item { padding:0 8px; }
  .st-leg-values, .st-leg-grid:not(.st-leg-grid--options) .st-leg-values { grid-template-columns:60px minmax(90px,max-content) minmax(70px,max-content); }
  .st-leg-grid:not(.st-leg-grid--options) .st-leg-values { grid-template-columns:60px minmax(90px,max-content); }
}



.trading-load-status { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }
.trading-load-status.is-stale { color: var(--amber); }
.trading-load-status button { margin-left: var(--sp-2); color: inherit; background: transparent; border: 1px solid currentColor; border-radius: var(--radius-sm); cursor: pointer; }