/* ================================================================
   MASTER VORTEX — Markets strip (indices bar, top of chart column)
   Palette mirrors styles.css tokens: panel #070d18, edge #16283f,
   green #1ee308, red #ff3b47, ink #e8f4ff, dim #8fa8c4.
   Loaded after styles.css; everything is scoped under .mstrip.
   ================================================================ */

.mstrip{
  /* LAYOUT COMPACTION 2026-10-28: strip 38px -> ~29px. */
  flex:0 0 auto; display:flex; align-items:stretch; gap:0;
  background:var(--panel-2, #0a1322);
  border-bottom:1px solid var(--edge, #16283f);
  min-height:28px; user-select:none;
}

/* Head chip: "MARKETS" label + collapse chevron */
.mstrip .ms-head{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; padding:2px 6px; background:transparent; border:none; border-right:1px solid var(--edge, #16283f);
  color:var(--dim, #8fa8c4); font-family:inherit; cursor:pointer;
}
.mstrip .ms-head:hover{color:var(--ink, #e8f4ff);}
.mstrip .ms-title{font-size:9.5px; font-weight:400; letter-spacing:1.6px; writing-mode:initial;}
.mstrip .ms-chev{font-size:10px; line-height:1; color:var(--green, #1ee308);}
.mstrip.collapsed{min-height:18px;}
.mstrip.collapsed .ms-cells{display:none;}
.mstrip.collapsed .ms-head{flex-direction:row; gap:6px; padding:2px 10px;}

/* Cells row: scrolls horizontally when space is tight (mobile) */
.mstrip .ms-cells{
  flex:1 1 auto; display:flex; align-items:stretch; min-width:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.mstrip .ms-cells::-webkit-scrollbar{display:none;}

.mstrip .ms-cell{
  flex:1 0 auto; min-width:140px; display:flex; align-items:center; gap:6px;
  padding:2px 8px; background:transparent; border:none; border-right:1px solid rgba(22,40,63,.7);
  color:var(--ink, #e8f4ff); font-family:inherit; cursor:pointer; text-align:left;
}
.mstrip .ms-cell:last-child{border-right:none;}
.mstrip .ms-cell:hover{background:rgba(30,227,8,.05);}
.mstrip .ms-cell.active{background:rgba(30,227,8,.09); box-shadow:inset 0 -2px 0 var(--green, #1ee308);}

.mstrip .ms-name{
  display:flex; flex-direction:column; line-height:1.08; white-space:nowrap;
  font-size:11px; font-weight:400; letter-spacing:.3px; color:#fff;
}
.mstrip .ms-proxy{
  font-size:9.5px; font-weight:400; letter-spacing:1.2px; color:var(--dim, #8fa8c4);
}
.mstrip .ms-spark{flex:0 0 auto; opacity:.9; width:54px; height:15px;}
.mstrip .ms-nums{display:flex; flex-direction:column; line-height:1.12; margin-left:auto; text-align:right; white-space:nowrap;}
.mstrip .ms-px{font-size:12px; font-weight:400; color:var(--ink, #e8f4ff);}
.mstrip .ms-chg{font-size:10px; font-weight:400; color:var(--dim, #8fa8c4);}
.mstrip .ms-px.up, .mstrip .ms-chg.up{color:var(--green, #1ee308);}
.mstrip .ms-px.dn, .mstrip .ms-chg.dn{color:var(--red, #ff3b47);}
.mstrip .ms-px.flat, .mstrip .ms-chg.flat{color:var(--dim, #8fa8c4);}

/* Narrow screens: strip stays one scrollable row inside the chart card */
@media (max-width: 900px){
  .mstrip{min-height:42px;}
  .mstrip .ms-cell{min-width:150px; padding:4px 9px; gap:7px;}
  .mstrip .ms-spark{display:none;}
  .mstrip .ms-px{font-size:12.5px;}
  .mstrip .ms-chg{font-size:10.5px;}
}