/* ============================================================
   MASTER VORTEX — pane chrome compaction (panechrome.js)
   Tablet band 901–1400px ONLY. In that band a pane is
   300–410px wide, so the per-pane timeframe row (.mc-tfs,
   eight buttons, flex-wrap:wrap) collapses into a tall narrow
   column inside .mc-head — measured 157px of header on the
   CEO's iPad, ~20–57% of the pane — and the plot starts far
   down the pane. In the band the row is replaced by a compact
   chip (.mc-tfchip) showing the pane's current timeframe; its
   menu (.mc-tfmenu) is absolutely positioned over the chart
   and reserves ZERO layout height. Slimmer head metrics in the
   band let symbol + state chip + price + tf chip + chart-type
   sit on one line where the pane is wide enough, and wrap to
   one extra slim line where it is not.
   Outside the band nothing changes: the chip and menu are
   display:none and the original .mc-tfs row is untouched.
   ============================================================ */
.mc-tfchip{display:none;}
.mc-tfmenu{display:none;}

@media (min-width:901px) and (max-width:1400px){
  /* FAIL-SAFE: the original timeframe row is hidden ONLY under
     html.pc-on — a class panechrome.js adds after it has built
     the replacement chip. If the JS ever fails to run, the row
     stays exactly as it was and nothing is lost. */
  html.pc-on .mc-tfs{display:none !important;}
  .mc-head{gap:4px; padding:3px 5px;}
  .mc-badge{letter-spacing:.6px; padding:2px 4px;}
  .mc-px{font-size:10.5px;}
  .mc-ct{margin-left:auto; height:20px; padding:0 6px;}
  .mc-tfchip{
    display:inline-flex; align-items:center; gap:4px; flex:none;
    background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:6px;
    font-size:10.5px; font-weight:400; padding:2px 6px; cursor:pointer; font-family:inherit;
    white-space:nowrap; line-height:1.25;
  }
  .mc-tfchip:hover{border-color:rgba(30,227,8,.5); color:#fff;}
  .mc-tfchip.open{border-color:var(--green); color:var(--green);}
  .mc-tfchip-caret{font-size:8px; color:#8fa8c4;}
  .mc-tfmenu{
    position:absolute; right:6px; z-index:36; width:118px;
    max-height:calc(100% - 40px); overflow-y:auto;
    background:#070d18; border:1px solid #1d2c42; border-radius:10px;
    box-shadow:0 14px 40px rgba(0,0,0,.65), 0 0 18px rgba(30,227,8,.08);
    padding:5px 0;
  }
  .mc-tfmenu.open{display:block;}
  .mc-tfmenu-item{
    display:flex; align-items:center; padding:5px 12px; cursor:pointer;
    color:#e8f4ff; font-size:12.5px; line-height:1.35;
  }
  .mc-tfmenu-item:hover{background:rgba(30,227,8,.08);}
  .mc-tfmenu-item.cur{background:rgba(30,227,8,.13); color:var(--green);}
}