/* ============================================================
   MASTER VORTEX — date-range selector bar (ranges.js)
   Sits at the bottom of the chart column.
   Palette matches styles.css.
   ============================================================ */

.range-bar{
  /* LAYOUT COMPACTION 2026-10-28: bar 31px -> ~25px. */
  flex:0 0 auto; display:flex; align-items:center; gap:3px;
  padding:2px 6px; border-top:1px solid var(--edge, #16283f);
  background:rgba(7,13,24,.6); overflow-x:auto;
}
.range-btn{
  background:transparent; color:#8fa8c4; border:1px solid transparent; border-radius:6px;
  font-size:11.5px; font-weight:400; padding:2px 6px; cursor:pointer; font-family:inherit;
  white-space:nowrap;
}
.range-btn:hover{color:#fff; border-color:rgba(30,227,8,.5);}
.range-btn.active{background:rgba(30,227,8,.16); color:var(--green, #1ee308); border-color:rgba(30,227,8,.45);}
.range-sep{width:1px; align-self:stretch; background:#16283f; margin:2px 4px;}
.range-flex{flex:1 1 auto; min-width:8px;}
/* Main-chart RESET (CEO reseat, 2026-11-04): the range bar's
   old top RESET button is gone — the main chart's RESET now
   sits at the chart's own bottom-right corner, mirroring the
   per-pane .mc-reset in multichart.css (same spot, same look
   on every chart). .mv-chart-area (styles.css) is
   position:relative, so this anchors to the price chart. */
.main-reset{position:absolute; right:8px; bottom:8px; z-index:6; background:rgba(10,16,24,.85);
  color:var(--green, #1ee308); border:1px solid rgba(30,227,8,.45); border-radius:5px;
  font:700 10px/1 inherit; letter-spacing:.08em; padding:4px 8px; cursor:pointer;}
.main-reset:hover{background:rgba(30,227,8,.16); color:#fff;}
.range-goto{display:flex; align-items:center; gap:6px;}
.range-goto[hidden]{display:none;}
.range-goto input[type="date"]{
  background:#0a1322; color:#e8f4ff; border:1px solid #1d2c42; border-radius:6px;
  padding:3px 5px; font-size:11.5px; font-family:inherit; color-scheme:dark;
}