/* ── range-explorer (tasks 4–5; R7, D12): the range screen ────────────────────
   Every rule for the screen lives here — app.css is not edited (R8). The
   visibility toggle follows the body[data-screen] switch the scanner,
   dashboard and compare screens use. Tokens only (no hex), sharp corners,
   borders not shadows, mono, tabular numbers, no transitions. */
#range-screen{display:none}
body[data-screen="range"] #range-screen{display:grid}
body[data-screen="range"] .container{display:none}
body[data-screen="range"]{--filter-w:0px}
body[data-screen="range"] #filterHandle{display:none}

#range-screen{position:fixed;top:var(--topbar-h,40px);left:var(--rail-w,56px);right:0;bottom:var(--statusbar-h,24px);grid-template-columns:minmax(0,1fr);grid-template-rows:28px minmax(0,1fr) 22px;background:var(--bg-1);z-index:1;font-family:var(--font-mono)}
.rng-toolbar{flex-wrap:nowrap}
.rng-toolbar__name{font-size:.62rem;color:var(--fg-hi);letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.rng-toolbar__tk{font-size:.68rem;color:var(--green);letter-spacing:1px;font-weight:700}
.rng-status{white-space:nowrap}

/* left config · centre chart · right stats, then the bottom detail across centre + right */
.rng-body{--rng-config-w:230px;position:relative;display:grid;grid-template-columns:var(--rng-config-w) minmax(0,1fr) 330px;grid-template-rows:minmax(0,1fr) minmax(0,38%);min-height:0;min-width:0}
.rng-body .mws-panel{border:0;border-radius:0;min-width:0;min-height:0;display:flex;flex-direction:column}
.rng-body .mws-panel__body{min-height:0;overflow:auto}
.rng-body .rng-config{grid-column:1;grid-row:1 / 3;border-right:1px solid var(--border)}
.rng-config .mws-panel__body{display:flex;flex-direction:column;gap:8px;padding:10px}
.rng-body .rng-chart-panel{grid-column:2;grid-row:1}
.rng-chart-panel .mws-panel__body{display:flex;flex-direction:column;gap:6px;padding:8px;overflow:hidden;flex:1 1 auto}
.rng-body .rng-stats{grid-column:3;grid-row:1;border-left:1px solid var(--border)}
.rng-stats .mws-panel__body{padding:8px 10px;font-size:.68rem}
.rng-body .rng-bottom{grid-column:2 / 4;grid-row:2;border-top:1px solid var(--border)}
.rng-bottom .mws-panel__body{padding:6px 10px;display:flex;flex-direction:column;gap:6px;font-size:.68rem}

.rng-field{display:flex;flex-direction:column;gap:3px;font-size:.62rem;color:var(--fg-mute);letter-spacing:1px}
.rng-select{font-size:.68rem;padding:2px 6px;width:100%;box-sizing:border-box}
.rng-row{display:flex;gap:4px}
.rng-num{flex:1;min-width:0;width:100%;box-sizing:border-box;font-size:.68rem;font-variant-numeric:tabular-nums}
.rng-num[aria-invalid="true"]{border-color:var(--red);color:var(--red)}
.rng-seg{display:flex;flex-wrap:wrap}
/* range-explorer-mag7 MD5: the ticker picker's labelled ETF / MAG7 rows */
.rng-tickers{display:flex;flex-direction:column;gap:3px}
.rng-tickers__row{display:flex;align-items:flex-start;gap:6px}
.rng-tickers__tag{flex:0 0 3.2em;padding-top:6px;font-size:.58rem;letter-spacing:1px;color:var(--fg-mute)}
.rng-seg .mws-btn{border-radius:0;position:relative}
.rng-seg .mws-btn + .mws-btn{margin-left:-1px}
.rng-seg .mws-btn.active{z-index:1}
.rng-hint{min-height:14px;font-size:.62rem;color:var(--red);overflow-wrap:anywhere}
.rng-config .mws-btn{align-self:flex-start}

.rng-term{white-space:nowrap}
.rng-mute{color:var(--fg-mute)}
.rng-warn{color:var(--amber)}
.rng-bull{color:var(--green)}
.rng-bear{color:var(--red)}
.rng-msg{color:var(--fg-mute);padding:6px 0;letter-spacing:1px}
.rng-msg--err{color:var(--amber)}
.rng-sub{margin-top:10px;margin-bottom:2px}
.rng-caption{color:var(--fg-mute);font-size:.6rem;margin-top:4px}

.rng-share{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name pct" "kn ci";column-gap:8px;padding:4px 0;border-bottom:1px solid var(--border-dim,var(--border));font-variant-numeric:tabular-nums}
.rng-share .rng-term{grid-area:name;color:var(--fg-2)}
.rng-share__pct{grid-area:pct;text-align:right;font-size:.9rem;font-weight:700}
.rng-share__kn{grid-area:kn;color:var(--fg-mute)}
.rng-share__ci{grid-area:ci;text-align:right;color:var(--fg-mute)}
.rng-share--bull .rng-share__pct{color:var(--green)}
.rng-share--bear .rng-share__pct{color:var(--red)}
.rng-share--warn .rng-share__pct{color:var(--amber)}
.rng-share .rng-share__pct.rng-mute{color:var(--fg-mute);font-size:.68rem;font-weight:400}
.rng-kv{display:flex;justify-content:space-between;gap:8px;padding:1px 0;font-variant-numeric:tabular-nums}
.rng-kv .rng-term{color:var(--fg-mute)}
.rng-kv__v{color:var(--fg-2);text-align:right}
.rng-kv--sub .rng-term{padding-left:10px}

.rng-table{width:100%;font-size:.66rem}
.rng-table th.num,.rng-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.rng-table tr.rng-row--today td{background:var(--bg-3);color:var(--fg-hi)}

.rng-chart-wrap{position:relative;flex:1 1 auto;min-height:220px;background:var(--bg-0);border:1px solid var(--border)}
.rng-chart-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.rng-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--fg-mute);letter-spacing:1px;text-align:center;padding:0 16px;pointer-events:none}
.rng-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:.62rem;color:var(--fg-2);min-height:14px}
.rng-legend__item{display:inline-flex;align-items:center;gap:5px}
.rng-legend__sw{width:10px;height:10px;border:1px solid;display:inline-block}
.rng-sw--ife{border-color:var(--green);background:var(--green-bg)}
.rng-sw--mfe{border-color:var(--cyan);background:var(--cyan-bg)}
.rng-sw--heat{border-color:var(--amber);background:var(--amber-bg)}
.rng-sw--reversal_from_breakout{border-color:var(--red);background:var(--red-bg)}
.rng-sw--pd{height:0;border-width:1px 0 0;border-style:dashed;border-color:var(--fg-2)}
.rng-sw--exp{height:0;border-width:1px 0 0;border-style:dashed;border-color:var(--amber)}

.rng-live{display:flex;flex-direction:column;gap:3px;padding-bottom:6px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.rng-live__hd{display:flex;align-items:center;gap:8px}
.rng-live__state{color:var(--fg-hi)}
.rng-live__price{margin-left:auto;color:var(--fg-2)}
.rng-live__row{display:flex;flex-wrap:wrap;gap:14px;color:var(--fg-2)}

.rng-outbar{display:flex;height:18px;border:1px solid var(--border);background:var(--bg-0);font-size:.6rem;letter-spacing:1px}
.rng-outbar__seg{display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;color:var(--bg-0);font-variant-numeric:tabular-nums}
.rng-seg--bull{background:var(--green)}
.rng-seg--bear{background:var(--red)}
.rng-seg--warn{background:var(--amber)}
.rng-seg--mute{background:transparent;color:var(--fg-mute)}

.rng-tabs{display:flex;border-bottom:1px solid var(--border)}
.rng-tab{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--fg-mute);font-family:var(--font-mono);font-size:.66rem;letter-spacing:1px;padding:4px 10px;cursor:pointer}
.rng-tab:hover{background:var(--bg-4);color:var(--fg-2)}
.rng-tab.active{color:var(--green);border-bottom-color:var(--green)}
.rng-tab:focus-visible{box-shadow:var(--glow-focus);outline:0}
.rng-tabbody{min-height:0}

.rng-timing{display:grid;grid-template-columns:150px minmax(0,1fr) 250px;align-items:end;gap:10px;padding:3px 0;border-bottom:1px solid var(--border-dim,var(--border))}
.rng-timing__name{color:var(--fg-2);align-self:center}
.rng-timing__facts{color:var(--fg-2);align-self:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.rng-hist{display:flex;align-items:flex-end;gap:1px;height:28px}
.rng-hist__bar{flex:1 1 0;min-width:1px;background:var(--fg-dim)}
.rng-hist__bar--median{background:var(--cyan)}
.rng-hist__bar--mode{background:var(--green)}
.rng-glyph--median{color:var(--cyan)}
.rng-glyph--mode{color:var(--green)}
.rng-daily__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:20px}

.rng-footer{display:flex;align-items:center;gap:16px;padding:0 12px;border-top:1px solid var(--border);background:var(--bg-0);font-size:.6rem;color:var(--fg-2);letter-spacing:1px;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.rng-footer__disc{color:var(--fg-mute)}

/* Collapsible config (round 4) — the scanner #filterPanel / #filterHandle
   pattern: the edge chevron is the SOLE toggle, it sits on the panel's right
   seam when open and flush to the screen's left edge when collapsed — at a
   fixed 140px, over the chart's own left gutter, so it never covers stats
   text in the narrower layouts; instant
   show/hide (terminals don't ease); the chart and stats reclaim the width. */
#range-screen[data-config="collapsed"] .rng-body{--rng-config-w:0px}
#range-screen[data-config="collapsed"] .rng-body .rng-config{display:none}
.rng-config-handle{position:absolute;top:140px;left:var(--rng-config-w);width:16px;height:64px;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--bg-3);border:1px solid var(--border);border-left:0;color:var(--green);font-family:var(--font-mono);font-size:11px;cursor:pointer;padding:0}
.rng-config-handle:hover{background:var(--bg-4)}
.rng-config-handle:focus-visible{box-shadow:var(--glow-focus);outline:0}
@media (max-width:1100px){
  .rng-body{--rng-config-w:200px;grid-template-columns:var(--rng-config-w) minmax(0,1fr);grid-template-rows:minmax(320px,1fr) auto auto;overflow:auto}
  .rng-body .rng-config{grid-row:1 / 4}
  .rng-body .rng-stats{grid-column:2;grid-row:2;border-left:0;border-top:1px solid var(--border)}
  .rng-body .rng-bottom{grid-column:2;grid-row:3}
}
/* At ≤ 768px app.css turns #mws-rail into a bottom tab bar (dashboard-landing,
   2026-10-12): the screen starts at the left edge and ends above the tab bar. */
@media (max-width:768px){
  #range-screen{left:0;bottom:calc(var(--statusbar-h,24px) + var(--mtab-h,44px))}
}
@media (max-width:760px){
  .rng-body{--rng-config-w:0px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(300px,auto) auto auto}
  .rng-body .rng-config{grid-row:1;border-right:0;border-bottom:1px solid var(--border)}
  .rng-body .rng-chart-panel{grid-column:1;grid-row:2}
  .rng-body .rng-stats{grid-column:1;grid-row:3}
  .rng-body .rng-bottom{grid-column:1;grid-row:4}
  .rng-timing{grid-template-columns:110px minmax(0,1fr);}
  .rng-timing__facts{grid-column:1 / 3}
  /* round 5: the stacked layout gives every panel its natural height (the
     body scrolls), so the config is never squashed. The config stays OPEN and
     the handle is hidden here: stacked above the chart, collapsing it would
     save little, and the scanner's ≤768px answer (an overlay drawer opened by
     the handle, app.css) exists because its rail disappears — this screen
     keeps no second pattern. A collapsed preference is kept for wider views. */
  .rng-body > .mws-panel{min-height:auto}
  .rng-body .rng-config .mws-panel__body{overflow:visible}
  #range-screen[data-config="collapsed"] .rng-body .rng-config{display:flex}
  .rng-config-handle{display:none}
  /* round 6 (operator: "wrap it"): the footer wraps onto extra lines instead
     of clipping its right end; the screen's last row grows to fit. */
  #range-screen{grid-template-rows:28px minmax(0,1fr) auto}
  .rng-footer{flex-wrap:wrap;row-gap:2px;column-gap:12px;padding:3px 12px;white-space:normal;overflow:visible}
  .rng-footer > span{min-width:0;overflow-wrap:anywhere}
}

/* chart hover panel (range-chart-hovers): range.js hit-tests the canvas and fills it */
.rng-tip{position:absolute;z-index:3;left:0;top:0;max-width:260px;padding:6px 8px;background:var(--bg-1);border:1px solid var(--border-hot);border-radius:2px;box-shadow:var(--shadow-menu);font-size:.62rem;line-height:1.4;color:var(--fg-2);font-variant-numeric:tabular-nums;pointer-events:none}
.rng-tip[hidden]{display:none}
.rng-tip__hd{color:var(--fg-hi);margin-bottom:2px}
.rng-tip__def{color:var(--fg-2);margin-bottom:4px}
.rng-tip__row{display:flex;justify-content:space-between;gap:12px}
.rng-tip__k{color:var(--fg-mute)}
.rng-tip__v{color:var(--fg-1);text-align:right}
.rng-tip__note{color:var(--fg-mute);margin-top:3px}