/* ============================================================
   MASTER VORTEX — Vortex Runners panel styles (runners.js
   companion). The base rules below are the panel's own contract
   from its rail era (content-sized panel, fixed 283px names
   region, Top-33 grid — CEO layout pass 2026-10-22; design
   revision 2026-10-23) and are kept intact. The STOCK SCANNER
   view section further down re-homes the panel into its own
   full-view frame and stretches it to fill that frame (CEO
   directive 2026-10-27: the rail is watchlist-only; the scanner
   is a top tab between SCREENER and PENNY STOCKS).
   Same tokens as styles.css: black base, electric green
   var(--green), red var(--red). Platform rule: every
   font-weight in this file is 400 — no bold anywhere.
   ============================================================ */

/* Direction-color specificity note: styles.css carries a
   "watchlist: no red" rule, `.watchlist .dn` at specificity
   (0,2,0), which neutralizes down-moves inside the rail. The
   CEO reads direction by color in THIS panel, so panel symbols
   deliberately never use .up/.dn. The symbol is .rn-sym styled
   via `.mv-runners .rn-sym[data-dir="..."]` at (0,3,0) — one
   class + one class + one attribute beats (0,2,0) outright,
   and with no .dn class present the rail rule cannot match a
   panel symbol at all. */

/* The rail split is gone (CEO directive 2026-10-27): nothing
   docks under the watchlist anymore — the old
   .watchlist.has-runners .wl-list floor rule went with it.
   The .wl-list floor in styles.css (min-height:162px, the
   2026-10-26 fix) is now just the rail's own minimum, and
   .wl-list flexes to the full column height. */

.mv-runners{
  flex:0 0 auto; display:flex; flex-direction:column;
  border-top:1px solid var(--edge); background:var(--panel);
}

/* --- head: title + index select + volume select --- */
.mv-runners .rn-head{
  flex:0 0 auto; display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  padding:4px 6px 2px;
}
.mv-runners .rn-title{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--green); font-size:11.5px; font-weight:400; letter-spacing:1.2px;
}
.mv-runners .rn-index{
  flex:0 1 auto; max-width:112px; min-width:0;
  background:#0a1524; color:var(--ink); border:1.5px solid #1c3350; border-radius:7px;
  font-size:11px; font-weight:400; padding:3px 4px; font-family:inherit; cursor:pointer;
}
.mv-runners .rn-index:focus{outline:none; border-color:rgba(30,227,8,.65);}
.mv-runners .rn-vol{
  flex:0 1 auto; max-width:104px; min-width:0;
  background:#0a1524; color:var(--ink); border:1.5px solid #1c3350; border-radius:7px;
  font-size:11px; font-weight:400; padding:3px 4px; font-family:inherit; cursor:pointer;
}
.mv-runners .rn-vol:focus{outline:none; border-color:rgba(30,227,8,.65);}

/* --- direction tabs --- */
.mv-runners .rn-tabs{flex:0 0 auto; display:flex; gap:4px; padding:0 6px 3px;}
.mv-runners .rn-tab{
  flex:1 1 0; min-width:0; white-space:nowrap;
  background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:7px;
  font-size:10.5px; font-weight:400; letter-spacing:.5px; padding:3px;
  cursor:pointer; font-family:inherit;
}
.mv-runners .rn-tab:hover{border-color:rgba(30,227,8,.5); color:#fff;}
.mv-runners .rn-tab.active[data-dir="runners"]{background:var(--green); color:#03140a; border-color:var(--green);}
.mv-runners .rn-tab.active[data-dir="faders"]{background:var(--red); color:#1a0205; border-color:var(--red);}

/* --- scanner rows: the list never scrolls in its rail-era
   frame — all Top-33 rows render in the panel's fixed region.
   The region holds a STABLE height at every filter tier
   (HOTFIX 2026-10-23: content-sizing made the box collapse to
   nothing when a volume tier returned 0–2 rows — measured list
   283px -> 0px live). DESIGN (CEO order 2026-11-04, as
   corrected in the same call): rows MIRROR THE WATCHLIST ROW.
   LAYOUT CORRECTION (CEO screenshot 2026-11-04 ~5:45pm CT —
   "That looks horrible... stretch out the prices and change
   and last"): the first mirror copied the watchlist's OLD
   two-block row (.wl-id flex block + .wl-vals stack, LAST over
   the change line). In the full-width scanner view that block
   flexed to half the row (symbol floated to the middle), the
   rows were flex-squeezed with overflow hidden, and the
   two-line values stack overflowed its sliver and overlapped
   at the right edge. The watchlist itself had already moved
   on to a flat grid; the scanner now mirrors THAT, verbatim:
   every row is ONE grid on the watchlist's shared tracks —
   SYM | LAST | CHG — the symbol flush left, LAST centered in
   its own track, and CHG a sub-grid carrying $ and % in their
   own sub-tracks, all on a single line at the row's natural
   height (flex:0 0 auto — rows are never stretched or
   squeezed). Column dividers ride the SYM and LAST cells
   (border-right, cells stretched to the full row height),
   exactly like the watchlist's cell-riding lines, so the
   lines run unbroken through the entire scroll height on a
   uniform row background. No company name, no description,
   no extra columns. Type at the scanner view's larger scale
   (symbol 13.5px, values 12.5px). The list is a flex column
   at a FIXED 283px in the base frame: short boards leave
   their remaining slots empty; emptied boards render their
   copy inside .rn-empty, which flexes to fill — the box
   never shrinks, never grows. --- */
.mv-runners .rn-list{flex:0 0 auto; overflow:visible; display:flex; flex-direction:column; height:283px;}
.mv-runners .rn-rows{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
.mv-runners .rn-item{
  flex:0 0 auto; position:relative;
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,.72fr) minmax(0,1.48fr);
  column-gap:6px; align-items:stretch;
  padding:0 8px; cursor:pointer; line-height:1.25;
  border-bottom:1px solid rgba(85,135,210,.6);
  font-variant-numeric:tabular-nums;
}
.mv-runners .rn-item:hover{background:#0a1524;}
.mv-runners .rn-sym{
  display:flex; align-items:center; justify-content:flex-start; min-width:0;
  padding:6px 0; border-right:1px solid rgba(85,135,210,.6);
  font-size:13.5px; font-weight:400; letter-spacing:.2px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mv-runners .rn-sym[data-dir="up"]{color:var(--green);}
.mv-runners .rn-sym[data-dir="down"]{color:var(--red);}
.mv-runners .px{
  display:flex; align-items:center; justify-content:center;
  padding:6px 0; border-right:1px solid rgba(85,135,210,.6);
  font-size:12.5px; font-weight:400; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mv-runners .px.up{color:var(--green);}
.mv-runners .px.dn{color:var(--red);}
.mv-runners .chg{
  font-size:11.5px; font-weight:400; text-align:center;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:baseline; align-content:center;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* Same reading order as the watchlist: the % span is first in
   the DOM; the sub-grid renders the $ first ("+$0.61 +5.25%"). */
.mv-runners .chg .usd{grid-column:1; justify-self:center; font-size:12px;}
.mv-runners .chg .pct{grid-column:2; justify-self:center;}
.mv-runners .chg.up{color:var(--green);}
.mv-runners .chg.dn{color:var(--red);}

/* --- column header: mirrors the watchlist .wl-cols header —
   the identical grid template, so SYM / LAST / CHG sit exactly
   over their columns; SYM flush left, the numbers centered,
   divider lines riding the header cells like the rows --- */
.mv-runners .rn-colhead{
  flex:0 0 auto; display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,.72fr) minmax(0,1.48fr);
  column-gap:6px; align-items:stretch;
  padding:0 8px; border-bottom:1px solid var(--edge);
  color:#5f7699; font-size:10px; font-weight:400; letter-spacing:.4px;
  text-transform:uppercase;
}
.mv-runners .rn-colhead span{display:flex; align-items:center; justify-content:center; padding:2px 0 3px;}
.mv-runners .rn-colhead .rn-ch-sym{justify-content:flex-start; border-right:1px solid rgba(85,135,210,.6);}
.mv-runners .rn-colhead .rn-ch-last{border-right:1px solid rgba(85,135,210,.6);}

/* The empty state fills the whole fixed list region (flex column,
   centered) — a tier that empties the board still shows its copy
   at full height, never a shrunken sliver. */
.mv-runners .rn-empty{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 7px; color:var(--dim);
  font-size:11.5px; font-weight:400; letter-spacing:.3px; text-align:center;
}
/* The feed's ceiling under an emptied board: highest-volume name
   in the served dataset, from the payload — data, not decoration. */
.mv-runners .rn-topvol{
  font-size:11px; font-weight:400; color:#9fb6d8; letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
}

/* --- last-close fallback (CEO 2026-10-23 ~2:45am CT) --------------
   A tier-starved direction renders the close board's Top 33 rows
   in the same columns under a note line. The list height is FIXED
   (the base .rn-list rule) — the note takes its line and the
   rows flex into what remains; the box cannot grow or shrink
   versus a full board. */
.mv-runners .rn-close-note{
  flex:0 0 auto; padding:1px 4px 2px; text-align:center;
  font-size:11px; font-weight:400; color:var(--dim);
  line-height:1.35; letter-spacing:.2px;
}

/* --- foot: payload sessionLabel verbatim + updated time --- */
.mv-runners .rn-foot{
  flex:0 0 auto; padding:2px 6px 3px; border-top:1px solid var(--edge);
  color:var(--dim); font-size:10.5px; font-weight:400; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}

/* --- STOCK SCANNER view frame (CEO directive 2026-10-27) --------
   The view mirrors .scr-view: it replaces .main while open (the
   body class does the swap, exactly like the screener / penny
   views). Inside the frame the panel trades its rail contract
   for the view's — it fills the frame and the names region
   flexes to the full height, so the Top-33 grid stretches over
   the big space with no blank box and no internal scrollbar.
   The panel's own head / tabs / foot keep their shapes, with
   view-sized padding. --- */
body.mv-scanner-open .main{display:none;}
body.mv-scanner-open .tf-group{visibility:hidden;}

.scan-view{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--edge); border-radius:10px;
  margin:10px; overflow:hidden;
}
.scan-view[hidden]{display:none;}

.scan-view .mv-runners{flex:1 1 auto; min-height:0; border-top:none;}
.scan-view .mv-runners .rn-head{padding:10px 14px 6px;}
.scan-view .mv-runners .rn-title{font-size:15px;}
.scan-view .mv-runners .rn-tabs{padding:0 14px 8px;}
.scan-view .mv-runners .rn-tab{padding:7px;}
.scan-view .mv-runners .rn-colhead{padding:0 14px;}
.scan-view .mv-runners .rn-list{flex:1 1 auto; height:auto; overflow-y:auto;}
.scan-view .mv-runners .rn-item{padding:0 14px;}
.scan-view .mv-runners .rn-sym{padding:8px 0;}
.scan-view .mv-runners .px{padding:8px 0;}
.scan-view .mv-runners .rn-foot{padding:5px 14px 7px;}

/* --- narrow screens: the view still replaces .main (the frame
   above holds), so the panel stays flex-filled inside it; the
   touch-target growth below still applies and nothing may
   overflow at 390px. --- */
@media (max-width: 900px){
  .mv-runners{flex:0 0 auto;}
  /* stacked layout: rows are taller (36px touch), so the fixed
     desktop height would under-fill; the rows grow naturally
     and a smaller floor still keeps an emptied board from
     collapsing to a sliver. The watchlist-mirror grid holds:
     SYM | LAST | CHG tracks compress via minmax, never stack. */
  .mv-runners .rn-list{max-height:none; height:auto; min-height:120px;}
  .mv-runners .rn-tab{min-height:34px;}
  .mv-runners .rn-index{min-height:34px; max-width:130px;}
  .mv-runners .rn-vol{min-height:34px; max-width:130px;}
  .mv-runners .rn-item{min-height:36px;}
  .mv-runners .px{font-size:11.5px;}
  .mv-runners .chg{font-size:10.5px;}
  .mv-runners .chg .usd{font-size:11px;}
}