/* SIMUL8OR MARKETS v0.1 — requires s8-tokens.css + s8-ui.css.
   Markets page: masthead, asset-class sections, symbol strips, chart mount. */
.mk{background:var(--s8-bg);min-height:100%}
.mk-wrap{max-width:1280px;margin:0 auto;padding:0 var(--s8-6)}

/* ── masthead ───────────────────────────────────────── */
.mk-mast{display:grid;gap:var(--s8-3);padding:var(--s8-8) 0 var(--s8-6);border-bottom:1px solid var(--s8-line)}
.mk-mast--center{justify-items:center;text-align:center}
.mk-mast h1{margin:0;font-size:var(--s8-fs-display);font-weight:600;letter-spacing:-.028em;line-height:1.05;color:#fff}
.mk-mast p{margin:0;max-width:62ch;font-size:var(--s8-fs-lg);color:var(--s8-fg-2);text-wrap:pretty}
.mk-mast__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s8-6);flex-wrap:wrap}
.mk-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-3)}
.mk-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--s8-up);box-shadow:0 0 0 3px var(--s8-up-tint)}
.mk-eyebrow--accent{color:var(--s8-accent-fg)}
.mk-clock{display:flex;align-items:center;gap:var(--s8-3);font-size:var(--s8-fs-sm);color:var(--s8-fg-3);font-variant-numeric:tabular-nums}
.mk-clock b{color:var(--s8-fg);font-weight:600}
.mk-sep{width:1px;height:12px;background:var(--s8-line-2)}

/* ── section ────────────────────────────────────────── */
.mk-sec{padding:var(--s8-8) 0 0}
.mk-sec:last-child{padding-bottom:var(--s8-9)}
.mk-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s8-4);flex-wrap:wrap;padding-bottom:var(--s8-4)}
.mk-sechead h2{margin:6px 0 0;font-size:var(--s8-fs-xl);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.mk-sechead__t{min-width:0}
.mk-sechead__a{display:flex;align-items:center;gap:var(--s8-2)}
.mk-rule{height:1px;background:var(--s8-line);margin-bottom:var(--s8-4)}

/* ── joined symbol strip (direction A) ──────────────── */
.mk-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg) var(--s8-r-lg) 0 0;overflow:hidden}
.mk-cell{position:relative;display:grid;gap:5px;padding:11px var(--s8-3) 12px;background:var(--s8-panel);border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease)}
.mk-cell:hover{background:var(--s8-hover)}
.mk-cell[aria-selected="true"]{background:var(--s8-panel-2)}
.mk-cell[aria-selected="true"]::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--s8-accent)}
.mk-cell__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s8-2)}
.mk-cell__sym{font-family:var(--s8-mono);font-size:var(--s8-fs-sm);font-weight:600;letter-spacing:.06em;color:var(--s8-fg)}
.mk-cell[aria-selected="true"] .mk-cell__sym{color:#fff}
.mk-cell__px{font-size:var(--s8-fs-lg);font-weight:600;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.mk-cell__name{font-size:var(--s8-fs-micro);color:var(--s8-fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── tile strip (direction B) ───────────────────────── */
.mk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--s8-2)}
.mk-tile{display:grid;gap:6px;padding:var(--s8-3);border:1px solid var(--s8-line);border-radius:var(--s8-r);background:var(--s8-panel);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--s8-t-fast) var(--s8-ease),background var(--s8-t-fast) var(--s8-ease)}
.mk-tile:hover{border-color:var(--s8-line-3);background:var(--s8-panel-2)}
.mk-tile[aria-selected="true"]{border-color:var(--s8-accent-line);background:var(--s8-accent-tint)}
.mk-tile__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s8-2)}
.mk-tile__sym{font-family:var(--s8-mono);font-size:var(--s8-fs-sm);font-weight:600;letter-spacing:.06em;color:#fff}
.mk-tile__px{font-size:var(--s8-fs-xl);font-weight:600;letter-spacing:-.025em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.mk-tile__name{font-size:var(--s8-fs-micro);color:var(--s8-fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── change pill ────────────────────────────────────── */
.mk-chg{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:var(--s8-r-sm);border:1px solid transparent;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-chg--up{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
.mk-chg--down{background:var(--s8-down-tint);border-color:var(--s8-down-line);color:var(--s8-down)}
.mk-chg--flat{background:var(--s8-panel-2);border-color:var(--s8-line-2);color:var(--s8-fg-3)}
.mk-chg--bare{border:0;background:none;padding:0;height:auto}

/* ── chart mount ────────────────────────────────────── */
.mk-chart{border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);background:var(--s8-panel);overflow:hidden}
.mk-chart--joined{border-radius:0 0 var(--s8-r-lg) var(--s8-r-lg);border-top:0}
.mk-chart__bar{display:flex;align-items:center;gap:var(--s8-3);padding:0 var(--s8-3);height:var(--s8-toolbar);border-bottom:1px solid var(--s8-line);background:var(--s8-panel-2)}
.mk-chart__sym{display:flex;align-items:baseline;gap:var(--s8-2);min-width:0}
.mk-chart__sym b{font-family:var(--s8-mono);font-size:var(--s8-fs-base);font-weight:600;letter-spacing:.06em;color:#fff}
.mk-chart__sym i{font-style:normal;font-size:var(--s8-fs-xs);color:var(--s8-fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-chart__last{display:flex;align-items:baseline;gap:var(--s8-2);font-variant-numeric:tabular-nums}
.mk-chart__last b{font-size:var(--s8-fs-lg);font-weight:600;letter-spacing:-.02em;color:#fff}
.mk-chart__tools{margin-left:auto;display:flex;align-items:center;gap:var(--s8-2)}
.mk-chart__ohlc{display:flex;align-items:center;gap:var(--s8-4);padding:8px var(--s8-4);border-bottom:1px solid var(--s8-line);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);color:var(--s8-fg-3);font-variant-numeric:tabular-nums}
.mk-chart__ohlc b{color:var(--s8-fg);font-weight:600}
.mk-chart__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 62px;height:var(--mk-chart-h,392px);background:var(--s8-inset)}
.mk-plot{position:relative;display:grid;place-items:center;background-image:linear-gradient(to right,rgba(43,48,58,.55) 1px,transparent 1px),linear-gradient(rgba(43,48,58,.55) 1px,transparent 1px);background-size:88px 56px;border-right:1px solid var(--s8-line)}
.mk-axis{display:grid;align-content:space-between;padding:10px 0;background:var(--s8-inset)}
.mk-axis span{padding-right:10px;text-align:right;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);color:var(--s8-fg-4);font-variant-numeric:tabular-nums}
.mk-ph{display:grid;justify-items:center;gap:7px;padding:var(--s8-4) var(--s8-6);border:1px dashed var(--s8-line-2);border-radius:var(--s8-r);background:rgba(8,9,11,.72)}
.mk-ph b{font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-2)}
.mk-ph span{font-size:var(--s8-fs-xs);color:var(--s8-fg-4)}
.mk-chart__foot{display:flex;align-items:center;gap:var(--s8-4);padding:9px var(--s8-4);border-top:1px solid var(--s8-line);font-size:var(--s8-fs-xs);color:var(--s8-fg-4)}
.mk-chart__foot b{color:var(--s8-fg-2);font-weight:600;font-variant-numeric:tabular-nums}

/* ── split desk (direction C) ───────────────────────── */
.mk-split{display:grid;grid-template-columns:264px minmax(0,1fr);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden;background:var(--s8-panel)}
.mk-split .mk-chart{border:0;border-radius:0}
.mk-railhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s8-2);height:var(--s8-toolbar);padding:0 var(--s8-3);border-bottom:1px solid var(--s8-line);background:var(--s8-panel-2)}
.mk-rail{border-right:1px solid var(--s8-line);background:var(--s8-panel)}
.mk-rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--s8-3);width:100%;padding:9px var(--s8-3);border:0;border-bottom:1px solid var(--s8-line);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease)}
.mk-rrow:hover{background:var(--s8-hover)}
.mk-rrow[aria-selected="true"]{background:var(--s8-panel-2);box-shadow:inset 2px 0 0 var(--s8-accent)}
.mk-rrow__sym{font-family:var(--s8-mono);font-size:var(--s8-fs-sm);font-weight:600;letter-spacing:.06em;color:var(--s8-fg)}
.mk-rrow[aria-selected="true"] .mk-rrow__sym{color:#fff}
.mk-rrow__px{font-size:var(--s8-fs-sm);font-weight:600;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.mk-rrow__name{grid-column:1;font-size:var(--s8-fs-micro);color:var(--s8-fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-rrow__chg{grid-column:2;text-align:right}

/* ── class nav ──────────────────────────────────────── */
.mk-nav{display:flex;align-items:center;gap:var(--s8-2);padding:var(--s8-3) 0;border-bottom:1px solid var(--s8-line);position:sticky;top:0;background:var(--s8-bg);z-index:2}
.mk-nav__sp{flex:1}
@media(max-width:900px){.mk-split{grid-template-columns:1fr}.mk-rail{border-right:0;border-bottom:1px solid var(--s8-line)}.mk-strip{grid-auto-flow:row}}


/* Production integration: Option A uses the existing ticker buttons, chart
   mounts, and scroll controls without duplicating their behavior contracts. */
.s8c.mk{min-height:0}
.s8c-hero.mk-mast{padding-top:clamp(40px,6vw,80px);padding-bottom:0;border-bottom:0}
.s8c .s8c-hero.mk-mast h1{margin:var(--s8-4) 0 0;font-size:var(--s8c-fs-hero);line-height:1.02;letter-spacing:-.028em;font-weight:600}
.mk-sec{padding-top:var(--s8c-gap)}
.mk-sec:last-child{padding-bottom:0}
.mk-sechead{border-bottom:1px solid var(--s8-line)}
.mk-market-strip{position:relative;overflow:hidden;padding-right:40px}
.indices-scroll,.stocks-scroll,.crypto-scroll{position:relative;left:0;display:flex;transition:left var(--s8-t) var(--s8-ease)}
.mk-cell{flex:1 0 150px;min-width:0}
.mk-cell.active{background:var(--s8-panel-2)}
.mk-cell.active::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--s8-accent)}
.mk-cell.active .mk-cell__sym{color:#fff}
.mk-chg.positive{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
.mk-chg.negative{background:var(--s8-down-tint);border-color:var(--s8-down-line);color:var(--s8-down)}
.scroll-button{position:absolute;inset:0 0 0 auto;width:40px;border:1px solid var(--s8-line);border-radius:0 var(--s8-r-lg) 0 0;background:rgba(13,15,18,.94);color:var(--s8-fg-2);font:600 20px/1 var(--s8-mono);cursor:pointer;z-index:2}
.scroll-button:hover,.scroll-button:focus-visible{background:var(--s8-hover);color:#fff;outline:0}
.chart-container{height:600px}
.chart-container>div{height:600px}
.chart-container .sc-chart-container{border:0!important;border-radius:0!important}
.spinner-border{width:28px;height:28px;border:2px solid var(--s8-line-3);border-right-color:var(--s8-accent);border-radius:50%;animation:mk-spin .7s linear infinite}
@keyframes mk-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){
  .mk-strip{grid-auto-flow:column}
  .mk-cell{flex-basis:145px}
  .chart-container,.chart-container>div{height:500px!important}
}
@media(max-width:600px){
  .mk-sechead{align-items:flex-start}
  .mk-cell{flex-basis:132px}
  .mk-cell__name{display:none}
  .chart-container,.chart-container>div{height:420px!important}
}