/* Liquidity Wall — standalone REST page. Dark board palette, matching the option-chain surfaces. */
:root {
  --lw-ground: #0D1116;
  --lw-surface: #151A21;
  --lw-sunk: #0A0D12;
  --lw-plot: #10141B;
  --lw-ink: #E4E9EF;
  --lw-ink-soft: #9BA6B4;
  --lw-ink-faint: #6B7583;
  --lw-rule: #242B35;
  --lw-rule-strong: #363F4C;
  --lw-accent: #74BAD6;
  --lw-take: #2FB683;
  --lw-hollow: #C4472B;
  --lw-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

body {
  background: var(--lw-ground);
  color: var(--lw-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
}

#liquidityWallRoot {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 22px 72px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lw-head { display: flex; flex-direction: column; gap: 6px; }
.lw-eyebrow {
  font-family: var(--lw-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lw-ink-faint);
}
.lw-head h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.lw-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.lw-field { display: flex; flex-direction: column; gap: 5px; }
.lw-field-lab {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lw-ink-faint);
  font-weight: 600;
}
.lw-select {
  font-family: var(--lw-mono);
  font-size: 13px;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--lw-surface);
  color: var(--lw-ink);
  border: 1px solid var(--lw-rule-strong);
}
.lw-select:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; }

.lw-slices { display: flex; flex-wrap: wrap; gap: 6px; }
.lw-slices button {
  font-family: var(--lw-mono);
  font-size: 13px;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--lw-surface);
  color: var(--lw-ink-soft);
  border: 1px solid var(--lw-rule-strong);
}
.lw-slices button:hover { border-color: var(--lw-accent); color: var(--lw-ink); }
.lw-slices button:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; }
.lw-slices button[aria-pressed="true"] {
  background: var(--lw-accent);
  border-color: var(--lw-accent);
  color: #08121A;
}

.lw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lw-tile {
  background: var(--lw-surface);
  border: 1px solid var(--lw-rule);
  border-radius: 10px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lw-lab {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lw-ink-faint);
  font-weight: 600;
}
.lw-val {
  font-family: var(--lw-mono);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.lw-sub { font-size: 12px; color: var(--lw-ink-faint); }
.lw-tile.lw-take .lw-val { color: var(--lw-take); }
.lw-tile.lw-hollow .lw-val { color: var(--lw-hollow); }

.lw-plot {
  background: var(--lw-plot);
  border: 1px solid var(--lw-rule);
  border-radius: 12px;
  padding: 16px 14px 10px;
}
.lw-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.lw-ax { font-family: var(--lw-mono); font-size: 10.5px; fill: #7A8797; }
.lw-grid { stroke: #20262F; stroke-width: 1; }
.lw-axis-line { stroke: #39424F; stroke-width: 1; }
.lw-take-dot { fill: var(--lw-take); fill-opacity: 0.8; stroke: #0B0E14; }
.lw-hollow-bar { fill: var(--lw-hollow); fill-opacity: 0.9; }

.lw-readout {
  font-family: var(--lw-mono);
  font-size: 13px;
  color: var(--lw-ink-soft);
  background: var(--lw-sunk);
  border-radius: 8px;
  padding: 10px 14px;
  font-variant-numeric: tabular-nums;
  min-height: 21px;
}

.lw-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 12.5px;
  color: var(--lw-ink-soft);
  align-items: center;
}
.lw-key > span { display: inline-flex; align-items: center; gap: 7px; }
.lw-sw { width: 15px; height: 11px; border-radius: 2px; display: inline-block; }
.lw-sw-ramp { background: linear-gradient(90deg, #2B2258, #2B5CBA, #FF8A2A, #FFE066); }
.lw-sw-take { background: var(--lw-take); width: 12px; height: 12px; border-radius: 50%; }
.lw-sw-hollow { background: var(--lw-hollow); height: 3px; width: 18px; }

.lw-msg {
  background: var(--lw-surface);
  border: 1px solid var(--lw-rule);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--lw-ink-soft);
  font-size: 15px;
}
.lw-err { border-color: var(--lw-hollow); }
.lw-stale { border-color: #B98B12; }
.lw-stale strong { color: #E8C34A; }
.lw-nodata { fill: #4A5462; }
.lw-stale-cap { fill: #E8C34A; }
.lw-tile.lw-suspect { border-color: #B98B12; }
.lw-tile.lw-suspect .lw-sub { color: #E8C34A; }
.lw-degraded-cap { fill: #C4472B; }
.lw-sw-stale { background: #E8C34A; height: 3px; width: 18px; }
.lw-sw-degraded { background: #C4472B; height: 3px; width: 18px; }

.lw-fresh {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 13px; color: var(--lw-ink-soft);
  background: var(--lw-surface); border: 1px solid var(--lw-rule);
  border-radius: 10px; padding: 10px 14px;
}
.lw-fresh-chip {
  font-family: var(--lw-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px;
  background: #16303C; color: var(--lw-accent);
}
.lw-fresh-sep { color: var(--lw-ink-faint); }
.lw-fresh-warn { border-color: #B98B12; }
.lw-fresh-warn .lw-fresh-chip { background: #3A2F0E; color: #E8C34A; }
.lw-fresh-bad { border-color: var(--lw-hollow); }
.lw-fresh-bad .lw-fresh-chip { background: #3A1810; color: #FF7B5E; }
.lw-fresh-unknown .lw-fresh-chip { background: #262D38; color: var(--lw-ink-soft); }
.lw-sw-nodata { background: #4A5462; height: 3px; width: 18px; }
.lw-err strong { color: var(--lw-hollow); }

.lw-foot { color: var(--lw-ink-faint); font-size: 13px; line-height: 1.65; max-width: 76ch; }
.lw-foot p { margin: 0 0 8px; }
.lw-foot p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .lw-slices button { transition: none; }
}

/* Wall trajectory: the direction of the wall across periods. Dark underlay then bright stroke,
   the same two-pass treatment the ribbon's wall line uses, so the path stays legible over both
   the dark (empty) and yellow (deep) ends of the depth ramp it crosses. */
.lw-traj-under { fill: none; stroke: #0b0e14; stroke-width: 5; stroke-opacity: 0.65;
  stroke-linejoin: round; stroke-linecap: round; }
.lw-traj { fill: none; stroke: #eaf2ff; stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; }

/* Zoom affordances. The plot is grabbable only while a window is active (see wireZoom): offering a
   grab cursor on the un-zoomed chart would advertise a pan that does nothing. */
.lw-zoom { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12px;
           color: var(--lw-ink-soft); flex-wrap: wrap; }
.lw-zoom-hint { color: var(--lw-ink-faint); }
.lw-zoom-tag { background: var(--lw-sunk); color: var(--lw-accent); border-radius: 3px;
               padding: 2px 7px; font-size: 11px; letter-spacing: 0.08em; }
.lw-zoom-reset { background: none; border: 1px solid var(--lw-rule); color: var(--lw-ink-soft);
                 border-radius: 4px; padding: 3px 9px; font: inherit; font-size: 11px;
                 cursor: pointer; }
.lw-zoom-reset:hover { color: var(--lw-ink); border-color: var(--lw-rule-strong); }
.lw-plot { touch-action: none; }
.lw-plot.lw-dragging { cursor: grabbing; }

/* BOTH: calls left, puts right, one shared time axis. Stacks below 900px rather than shrinking two
   charts past readability -- a 300px-wide wall chart carries no information. */
.lw-both { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.lw-half { min-width: 0; }
.lw-half-head { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
                color: var(--lw-ink-soft); margin: 0 0 8px; }
.lw-both-call .lw-half-head { color: var(--lw-take); }
.lw-both-put .lw-half-head { color: var(--lw-hollow); }
@media (max-width: 900px) { .lw-both { grid-template-columns: 1fr; } }

/* Cross-highlight band. Sits UNDER the bars (appended before them) so it never hides the data it
   is pointing at, and is pointer-transparent so it cannot steal the hover that positions it. */
.lw-hl { fill: rgba(120, 220, 255, 0.10); stroke: rgba(120, 220, 255, 0.45); stroke-width: 1;
         pointer-events: none; }

/* Multi-strike lattice: one row per strike, shared depth ruler. */
.lw-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
           border: 1px solid var(--lw-line); border-radius: 999px; font-size: 12px;
           font-variant-numeric: tabular-nums; }
.lw-chip-x { background: none; border: 0; color: var(--lw-ink-soft); cursor: pointer;
             font-size: 13px; line-height: 1; padding: 0 2px; }
.lw-chip-x:hover { color: var(--lw-ink); }
.lw-chip-hint { font-size: 11px; color: var(--lw-ink-soft); margin-left: 4px; }
.lw-lattice-note { font-size: 11px; color: var(--lw-ink-soft); margin: 0 0 8px; }
.lw-lat-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start;
              margin-bottom: 10px; }
.lw-lat-both { grid-template-columns: 56px 1fr 1fr; }
.lw-lat-strike { font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 10px;
                 color: var(--lw-ink); }
.lw-lat-cell { min-width: 0; }
@media (max-width: 900px) { .lw-lat-both { grid-template-columns: 56px 1fr; } }

/* Not-today's-expiry warning. Amber, not red: a later chain is not an error — on a day with no
   same-day expiration it is the correct thing to look at. It is a fact the reader must weigh. */
.lw-expiry-warn { border-left: 3px solid var(--lw-hollow); border-radius: 0;
                  color: var(--lw-ink); }

/* Tradeable-wall badge. Green while the wall stands, amber when the size left without price
   getting through (withdrawn is NOT a break), red once price is 5+ pts beyond it. */
.lw-wallbadge { border-left: 3px solid var(--lw-take); border-radius: 0; padding: 8px 12px;
                margin: 8px 0; font-size: 13px; color: var(--lw-ink);
                background: rgba(53,196,140,0.07); }
.lw-wall-gone   { border-left-color: var(--lw-hollow); background: rgba(255,165,58,0.07); }
.lw-wall-broken { border-left-color: #FF6A76; background: rgba(255,106,118,0.09); }

/* Tabs: Wall (the two-slot board) / Advance (the session depth page). Same pill as the period
   slices, but role=tab + aria-selected, so the selected one is the filled pill. */
.lw-tabs { display: flex; gap: 6px; }
.lw-tabs button {
  font-family: var(--lw-mono); font-size: 13px; padding: 7px 18px; border-radius: 999px; cursor: pointer;
  background: var(--lw-surface); color: var(--lw-ink-soft); border: 1px solid var(--lw-rule-strong);
}
.lw-tabs button:hover { border-color: var(--lw-accent); color: var(--lw-ink); }
.lw-tabs button:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; }
.lw-tabs button[aria-selected="true"] { background: var(--lw-accent); border-color: var(--lw-accent); color: #08121A; }

/* Wall board. Resistance = call ask (warm), support = put bid (cool); the state colours are
   semantic and separate from both. */
.lw-wt { display: flex; flex-direction: column; gap: 14px;
  --lw-wt-res: #E0713A; --lw-wt-res-dim: rgba(224,113,58,.16);
  --lw-wt-sup: #3FA7D6; --lw-wt-sup-dim: rgba(63,167,214,.16);
  --lw-wt-spot: #F5C542; --lw-wt-ok: #4CAF7A; --lw-wt-warn: #E5484D; --lw-wt-thin: #9AA4B1; }
.lw-wt-eyebrow { font-family: var(--lw-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lw-ink-faint); }
.lw-wt-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lw-wt-side { background: var(--lw-surface); border: 1px solid var(--lw-rule); border-radius: 8px; padding: 10px 12px;
  min-height: 96px; display: flex; flex-direction: column; gap: 6px; }
.lw-wt-side > .lw-wt-eyebrow { display: flex; justify-content: space-between; }
.lw-wt-slot { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: 6px; background: var(--lw-sunk); border-left: 3px solid transparent; }
.lw-wt-slot.lw-wt-res { border-left-color: var(--lw-wt-res); }
.lw-wt-slot.lw-wt-sup { border-left-color: var(--lw-wt-sup); }
/* A retired wall is carried by DECORATION, never by fading (the page-wide no-faded-states rule):
   a dashed rail and a hatch behind it, with the numbers still fully readable — they are the last
   true reading of that wall. */
.lw-wt-slot.lw-wt-gone { border-left-style: dashed;
  background: repeating-linear-gradient(135deg, var(--lw-sunk) 0 6px, var(--lw-surface) 6px 8px); }
.lw-wt-slot.lw-wt-gone .lw-wt-band { color: var(--lw-ink-soft); }
.lw-wt-k { font-family: var(--lw-mono); font-weight: 600; font-size: 13px; }
.lw-wt-slot.lw-wt-res .lw-wt-k { color: var(--lw-wt-res); }
.lw-wt-slot.lw-wt-sup .lw-wt-k { color: var(--lw-wt-sup); }
.lw-wt-band { font-family: var(--lw-mono); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lw-wt-band small { color: var(--lw-ink-soft); font-size: 12px; font-weight: 400; margin-left: 8px; }
.lw-wt-meta { font-family: var(--lw-mono); font-size: 12px; color: var(--lw-ink-soft); display: flex; gap: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.lw-wt-state { display: inline-flex; align-items: center; gap: 5px; }
.lw-wt-state::before, .lw-wt-dot { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; }
.lw-wt-state-holding { color: var(--lw-wt-ok); }
.lw-wt-state-thin { color: var(--lw-wt-thin); }
.lw-wt-state-eaten, .lw-wt-state-breached { color: var(--lw-wt-warn); }
.lw-wt-state-retired { color: var(--lw-ink-faint); }
.lw-wt-empty { color: var(--lw-ink-faint); font-size: 12px; padding: 6px 8px; }

.lw-wt-ladder { background: var(--lw-surface); border: 1px solid var(--lw-rule); border-radius: 8px; overflow-x: auto; }
.lw-wt-lhead, .lw-wt-row { display: grid; grid-template-columns: 26px 1fr 216px 1fr 26px; align-items: center;
  column-gap: 8px; padding: 0 10px; }
.lw-wt-lhead { height: 30px; border-bottom: 1px solid var(--lw-rule); }
.lw-wt-lhead .lw-wt-eyebrow { text-align: center; }
.lw-wt-rows { position: relative; }
.lw-wt-row { height: 30px; }
.lw-wt-row + .lw-wt-row { border-top: 1px solid rgba(36,43,53,.6); }
.lw-wt-strike { font-family: var(--lw-mono); font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
/* The strike column draws the HOME PAGE's strike cell (option-chain.css .strike-cell, .gex-strength-fill /
   -axis / -arrow, .uw-gex-value, .strike-lifecycle-badge). What is the home page's, verbatim: the cell
   ground per state (blue-black / red-black / grey / stale) with its inset ring and its 1px vertical grain; the hatched gradient fills and their glows (blue rightward for
   dealers long gamma, red leftward for short, grey centred for neutral, flat grey full-width for stale);
   the axis colour; the ←/→ pill (18px, dark ring, the three ink colours); the text mask over the fill;
   the badge (shape, ring, weight, tracking) and its three colour pairs. What is fitted to THIS ladder, on purpose: the cell is
   26px tall inside a 30px row (the home cell is a 44px table row), so the axis inset is 3px not 4px,
   the mask ring 4px not 5px, the glyph 14px/600 and the value 12px/500 sit on one flex line, and the
   cell clips (overflow hidden) so a glow cannot bleed into the bar columns beside it; the fill and
   pill have no width/left transition (this board repaints once a second and does not animate);
   and there is NO opacity anywhere — the home fill's .92 alpha and its hot-pulse are dropped, and a
   stale reading is the flat grey band plus grey figures, never a fade (the page's no-faded-states
   rule). */
.lw-wt-gcell { position: relative; isolation: isolate; height: 26px; overflow: hidden; border-radius: 4px;
  --lw-gmask: #191A25; text-align: left;
  background: linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), var(--lw-gmask); }
/* the cell GROUND and inset ring per state — option-chain.css .strike-cell.gamma-positive / -negative /
   -neutral / -stale, verbatim (the text mask stays #191A25 in every state, as it does there) */
.lw-wt-g-pos { background: linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), #111A2A;
  box-shadow: inset 0 0 0 1px rgba(180,224,255,.72); }
.lw-wt-g-neg { background: linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), #23131A;
  box-shadow: inset 0 0 0 1px rgba(255,186,194,.68); }
.lw-wt-g-neu { background: linear-gradient(135deg, rgba(160,172,184,.4), rgba(39,48,60,.96)), #27303C; }
.lw-wt-g-stale { background: linear-gradient(135deg, rgba(88,96,108,.58), rgba(25,26,37,.96)), #191A25;
  box-shadow: inset 0 0 0 1px rgba(255,204,102,.5); }
.lw-wt-gfill { position: absolute; top: 0; bottom: 0; z-index: 0; width: 0; pointer-events: none; }
.lw-wt-g-pos .lw-wt-gfill { left: 50%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 8px, transparent 8px 11px),
              linear-gradient(90deg, rgba(46,156,255,.34), rgba(46,156,255,.96));
  box-shadow: 0 0 20px rgba(46,156,255,.28); }
.lw-wt-g-neg .lw-wt-gfill { right: 50%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 8px, transparent 8px 11px),
              linear-gradient(270deg, rgba(255,90,104,.34), rgba(255,90,104,.96));
  box-shadow: 0 0 20px rgba(255,90,104,.28); }
.lw-wt-g-neu .lw-wt-gfill { left: 50%; transform: translateX(-50%); background: rgba(160,172,184,.42); }
.lw-wt-g-stale .lw-wt-gfill { left: 0; width: 100%; background: rgba(88,96,108,.34); }
.lw-wt-gaxis { position: absolute; top: 3px; bottom: 3px; left: 50%; z-index: 1; width: 1px;
  background: rgba(255,255,255,.42); box-shadow: 0 0 0 1px rgba(0,0,0,.22); pointer-events: none; }
.lw-wt-g-none .lw-wt-gfill, .lw-wt-g-none .lw-wt-gaxis { display: none; }
.lw-wt-garrow { position: absolute; top: 2px; left: 50%; z-index: 4; width: 18px; transform: translateX(-50%);
  border-radius: 999px; background: rgba(4,8,16,.72); font-size: 13px; font-weight: 950; line-height: 16px;
  text-align: center; font-style: normal; pointer-events: none; }
.lw-wt-garrow-up { color: #75BEFF; }
.lw-wt-garrow-down { color: #FF7B7B; }
.lw-wt-garrow-flat { color: #D8E4EF; }
.lw-wt-gline { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; height: 100%;
  padding: 0 7px; white-space: nowrap; overflow: hidden; }
.lw-wt-gprice, .lw-wt-gval { background: var(--lw-gmask); box-shadow: 0 0 0 4px var(--lw-gmask); border-radius: 6px; }
.lw-wt-gprice { font-size: 14px; font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.lw-wt-gval { margin-left: auto; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.96);
  font-variant-numeric: tabular-nums; }
/* a stale reading keeps its figures readable: grey by HUE, the last true value, never faded */
.lw-wt-g-stale .lw-wt-gprice, .lw-wt-g-stale .lw-wt-gval { color: #9AA6BA; }
/* the badge: option-chain.css .strike-lifecycle-badge, verbatim */
.lw-wt-gbadge { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 5px;
  border-radius: 8px; font-size: 9px; font-weight: 850; letter-spacing: 0.3px; line-height: 1.4; white-space: nowrap;
  vertical-align: middle; position: relative; z-index: 2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.lw-wt-gbadge-new  { color: #0D3B12; background: rgba(99,153,34,.30); }
.lw-wt-gbadge-pin  { color: #082B4D; background: rgba(55,138,221,.32); }
.lw-wt-gbadge-fade { color: #4A1010; background: rgba(226,75,74,.28); }
.lw-wt-gnote { padding: 6px 10px; border-top: 1px solid var(--lw-rule); font-family: var(--lw-mono); font-size: 11px;
  color: var(--lw-ink-soft); }
.lw-wt-gkey-pos { color: #75BEFF; }
.lw-wt-gkey-neg { color: #FF7B7B; }
.lw-wt-bar { position: relative; height: 16px; }
.lw-wt-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.lw-wt-bar.lw-wt-call i { right: 0; background: var(--lw-wt-res-dim); border-right: 2px solid var(--lw-wt-res); }
.lw-wt-bar.lw-wt-put i { left: 0; background: var(--lw-wt-sup-dim); border-left: 2px solid var(--lw-wt-sup); }
.lw-wt-bar b { position: absolute; top: -1px; font-family: var(--lw-mono); font-size: 11px; font-weight: 500;
  color: var(--lw-ink-soft); font-variant-numeric: tabular-nums; }
.lw-wt-bar.lw-wt-call b { right: 100%; padding-right: 6px; }
.lw-wt-bar.lw-wt-put b { left: 100%; padding-left: 6px; }
.lw-wt-rail { height: 100%; display: flex; align-items: center; justify-content: center; }
.lw-wt-rail i { display: block; width: 4px; height: 100%; border-radius: 2px; }
.lw-wt-rail.lw-wt-res i { background: var(--lw-wt-res); }
.lw-wt-rail.lw-wt-sup i { background: var(--lw-wt-sup); }
.lw-wt-rail.lw-wt-w2 i { width: 7px; }
.lw-wt-rail.lw-wt-w3 i { width: 11px; }
/* Strikes price has already worked through: the rail changes HUE to the rule grey, it is not faded. */
.lw-wt-rail.lw-wt-res.lw-wt-dim i, .lw-wt-rail.lw-wt-sup.lw-wt-dim i { background: var(--lw-rule-strong); }
.lw-wt-spot { position: absolute; left: 10px; right: 10px; height: 0; border-top: 2px solid var(--lw-wt-spot);
  pointer-events: none; }
.lw-wt-spot span { position: absolute; right: 0; top: -9px; background: var(--lw-wt-spot); color: #1A1400;
  font-family: var(--lw-mono); font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; }

.lw-wt-events { background: var(--lw-surface); border: 1px solid var(--lw-rule); border-radius: 8px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px; }
.lw-wt-event { font-family: var(--lw-mono); font-size: 12px; color: var(--lw-ink-soft); white-space: pre;
  font-variant-numeric: tabular-nums; }
.lw-wt-key { font-family: var(--lw-mono); font-size: 11px; }
@media (max-width: 700px) { .lw-wt-banner { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lw-tabs button { transition: none; } }

/* Explicit compare action, and the primary chip marked so the row reads in order. */
.lw-add { font-size: 12px; padding: 3px 10px; }
.lw-chip-primary { border-color: var(--lw-ink-soft); }
.lw-cmp-select { min-width: 8.5em; }
.lw-cmp-select:disabled { opacity: 0.5; }