/* 10-04 member dashboard shell: GerbOps-style left sidebar + market switcher (Futures live, Stocks/Options locked).
   Pure layout layer. js/md-shell-1004.js MOVES the existing nodes (same ids, same listeners) into it. */
:root { --ms-acc: #FF8A3D; --ms-side: 236px; }
html.ms body { background: var(--bg); }
#msShell { display: flex; min-height: 100vh; }
#msSide { flex: 0 0 var(--ms-side); width: var(--ms-side); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: #0d1015; border-right: 1px solid var(--bd); z-index: 20; }
#msMain { flex: 1 1 auto; min-width: 0; }
html.ms .wrap { max-width: 1120px; padding: 22px 28px 64px; }
html.ms header.top, html.ms .mdtabs { display: none; }

.ms-top { padding: 18px 14px 10px; }
#msSide .brand { font-size: 15px; padding: 0 4px 14px; }
#msSide .brand small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* < Futures > bubble */
.ms-mkt { display: flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--bd2); border-radius: 999px; padding: 4px; }
.ms-mkt button { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--mut); cursor: pointer;
  display: grid; place-items: center; padding: 0; }
.ms-mkt button:hover, .ms-mkt button:focus-visible { background: var(--bg2); color: var(--tx); }
.ms-mkt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-mkt .lbl { flex: 1 1 auto; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--tx); }
.ms-mkt .lbl .lk { margin-left: 6px; font-size: 11px; color: var(--mut); }
.ms-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.ms-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--bd2); }
.ms-dots i.on { background: var(--ms-acc); }

/* nav */
#msNav { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ms-sec { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); padding: 12px 11px 6px; }
#msNav .mdtab, #msNav .ms-link { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 11px; border: 0; border-radius: 9px;
  background: none; color: var(--mut); font: inherit; font-size: 13px; text-decoration: none; text-align: left; width: 100%; cursor: pointer; position: relative; }
#msNav .mdtab:hover, #msNav .ms-link:hover { background: var(--panel); color: var(--tx); }
#msNav .mdtab.on { background: var(--panel); color: var(--ms-acc); border: 0; }
#msNav .mdtab.on::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--ms-acc); }
#msNav svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#msNav .mdtab .cnt { margin-left: auto; }
#msNav .ms-ext { margin-left: auto; font-size: 11px; opacity: .6; }
html.ms-locked #msNav .mdtab { opacity: .4; pointer-events: none; }

.ms-foot { padding: 12px 14px 16px; border-top: 1px solid var(--bd); display: flex; flex-direction: column; gap: 8px; }
.ms-foot .statechip { width: 100%; justify-content: center; }

/* locked markets */
#msLocked { display: none; position: relative; max-width: 1120px; margin: 0 auto; padding: 22px 28px 64px; }
html.ms-locked #msLocked { display: block; }
html.ms-locked #msMain > .wrap { display: none; }
.ms-mock { filter: grayscale(1) blur(1.5px); opacity: .38; pointer-events: none; user-select: none; }
.ms-mock h1 { font-size: 18px; margin: 0 0 16px; color: var(--tx); letter-spacing: .04em; }
.ms-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.ms-card { background: var(--panel); border: 1px solid var(--bd); border-radius: 10px; padding: 14px 16px; min-height: 120px; }
.ms-card h3 { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.ms-c3 { grid-column: span 3; } .ms-c4 { grid-column: span 4; } .ms-c5 { grid-column: span 5; } .ms-c7 { grid-column: span 7; } .ms-c8 { grid-column: span 8; } .ms-c12 { grid-column: span 12; }
.ms-kpi b { display: block; font-size: 22px; color: var(--tx); } .ms-kpi span { font-size: 11px; color: var(--mut); }
.ms-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--bd); font-size: 12px; color: var(--ink); }
.ms-row:first-of-type { border-top: 0; }
.ms-bar { height: 8px; border-radius: 4px; background: var(--bd2); }
.ms-chart { height: 150px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), repeating-linear-gradient(90deg, transparent 0 39px, var(--bd) 39px 40px); position: relative; overflow: hidden; }
.ms-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-chart path { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ms-pill { display: inline-block; font-size: 11px; border: 1px solid var(--bd2); border-radius: 999px; padding: 3px 10px; margin: 0 6px 6px 0; color: var(--ink); }

.ms-lock { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); z-index: 2;
  background: #0d1015; border: 1px solid var(--bd2); border-radius: 14px; padding: 22px 22px 20px; text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.ms-lock .ic { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); border: 1px solid var(--bd2); }
.ms-lock .ic svg { width: 20px; height: 20px; fill: none; stroke: var(--ms-acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-lock h2 { margin: 0 0 8px; font-size: 16px; color: var(--tx); }
.ms-lock p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.65; color: var(--mut); }
.ms-lock .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ms-lock .go { background: var(--burn); color: #0A0605; border: 0; font-weight: 700; }

/* phone / small: sidebar becomes a top block, nav scrolls sideways */
@media (max-width: 860px) {
  #msShell { display: block; }
  #msSide { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--bd); }
  .ms-top { display: grid; grid-template-columns: 1fr minmax(0, 210px); align-items: center; gap: 12px; padding: 12px 16px 8px; }
  #msSide .brand { padding: 0; }
  .ms-dots { display: none; }
  /* right-edge fade = "there is more, swipe"; the extra right padding lets the last tab scroll clear of it */
  #msNav { flex-direction: row; overflow-x: auto; padding: 4px 32px 10px 16px; gap: 4px;
           -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
           mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .ms-sec { display: none; }
  #msNav .mdtab, #msNav .ms-link { width: auto; white-space: nowrap; min-height: 38px; flex: none; }
  #msNav .mdtab.on::before { display: none; }
  .ms-foot { flex-direction: row; padding: 0 16px 12px; border-top: 0; }
  html.ms .wrap, #msLocked { padding: 16px 16px 48px; }
  .ms-c3, .ms-c4, .ms-c5, .ms-c7, .ms-c8 { grid-column: span 12; }
}

/* market themes (10-04): every arrow click recolours the shell. Futures = burn orange, Stocks = green, Options = light blue */
html[data-mkt="futures"] { --ms-acc: #FF8A3D; --ms-glow: rgba(242,112,31,.10); --ms-go: linear-gradient(135deg,#FF9A3C 0%,#F2701F 45%,#C8420C 100%); }
html[data-mkt="stocks"]  { --ms-acc: #3DDC84; --ms-glow: rgba(61,220,132,.10); --ms-go: linear-gradient(135deg,#7CF0B0 0%,#3DDC84 45%,#1E9E5A 100%); }
html[data-mkt="options"] { --ms-acc: #7CC8FF; --ms-glow: rgba(124,200,255,.11); --ms-go: linear-gradient(135deg,#B5E1FF 0%,#7CC8FF 45%,#3B8FD6 100%); }
#msMain { background: radial-gradient(70% 50% at 100% 0%, var(--ms-glow, transparent), transparent 70%); transition: background .5s ease; }
#msSide { background: linear-gradient(180deg, var(--ms-glow, transparent), transparent 220px), #0d1015; }
.ms-mkt { border-color: color-mix(in srgb, var(--ms-acc) 45%, var(--bd2)); transition: border-color .4s ease; }
.ms-mkt .lbl { color: var(--ms-acc); transition: color .4s ease; }
#msSide .brand, #msNav .mdtab.on, .ms-lock .ic svg { transition: color .4s ease, stroke .4s ease; }
#msSide .brand { color: var(--ms-acc); }
.ms-lock { border-color: color-mix(in srgb, var(--ms-acc) 40%, var(--bd2)); }
.ms-lock .go { background: var(--ms-go); }
html.ms-locked .ms-mock h1 { color: var(--ms-acc); }