/* Header extras: Start/Stop switch, Paper/Live labels. Uses skin tokens only. */

/* ---- Start / Stop as a switch: the filled half is the current state ---- */
html[data-skin][data-theme] .sqx-seg, html[data-skin][data-theme] .sqx-mseg { transition: border-color .2s; }
html[data-skin][data-theme] .sqx-seg[data-run="1"], html[data-skin][data-theme] .sqx-mseg[data-run="1"] { border-color: var(--green) !important; }
html[data-skin][data-theme] .sqx-seg[data-run="0"], html[data-skin][data-theme] .sqx-mseg[data-run="0"] { border-color: var(--red) !important; }

html[data-skin][data-theme] .sqx-seg .header-btn, html[data-skin][data-theme] .sqx-mseg .header-btn { transition: background .2s, color .2s; min-width: 66px; justify-content: center; }
/* inactive half: quiet, outlined text */
html[data-skin][data-theme] .sqx-seg[data-run="1"] .sqx-st, html[data-skin][data-theme] .sqx-mseg[data-run="1"] .sqx-st { background: transparent !important; color: var(--muted2) !important; }
html[data-skin][data-theme] .sqx-seg[data-run="0"] .sqx-go, html[data-skin][data-theme] .sqx-mseg[data-run="0"] .sqx-go { background: transparent !important; color: var(--muted2) !important; }
/* active half: solid colour, high contrast */
html[data-skin][data-theme] .sqx-seg[data-run="1"] .sqx-go, html[data-skin][data-theme] .sqx-mseg[data-run="1"] .sqx-go { background: var(--green) !important; color: #fff !important; font-weight: 700 !important; }
html[data-skin][data-theme] .sqx-seg[data-run="0"] .sqx-st, html[data-skin][data-theme] .sqx-mseg[data-run="0"] .sqx-st { background: var(--red) !important; color: #fff !important; font-weight: 700 !important; }
html:not([data-skin="white"]):not([data-skin="mist"]) .sqx-seg[data-run="1"] .sqx-go,
html:not([data-skin="white"]):not([data-skin="mist"]) .sqx-mseg[data-run="1"] .sqx-go { color: #04140D !important; }
html:not([data-skin="white"]):not([data-skin="mist"]) .sqx-seg[data-run="0"] .sqx-st,
html:not([data-skin="white"]):not([data-skin="mist"]) .sqx-mseg[data-run="0"] .sqx-st { color: #1c0705 !important; }
html[data-skin][data-theme] .sqx-seg .header-btn svg, html[data-skin][data-theme] .sqx-mseg .header-btn svg { color: inherit !important; stroke: currentColor; }
html[data-skin][data-theme] .sqx-seg[data-run="0"] .sqx-go:hover, html[data-skin][data-theme] .sqx-mseg[data-run="0"] .sqx-go:hover { color: var(--green) !important; background: var(--green-dim, rgba(11,127,89,.1)) !important; }
html[data-skin][data-theme] .sqx-seg[data-run="1"] .sqx-st:hover, html[data-skin][data-theme] .sqx-mseg[data-run="1"] .sqx-st:hover { color: var(--red) !important; background: var(--red-dim, rgba(184,50,42,.1)) !important; }

/* ---- Paper / Live labels around the slider ---- */
.sqx-mlab { font: 700 10px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; color: var(--muted); white-space: nowrap; transition: color .2s; }
.sqx-mlab.on.live { color: var(--red); }
.sqx-mlab.on.paper { color: var(--blue, #2B6CB0); }
html:not([data-skin="white"]):not([data-skin="mist"]) .sqx-mlab.on.paper { color: #8DB4D8; }
.sqx-ctl .trading-mode-panel, .sqx-mmode { gap: 8px !important; }
.sqx-ctl .mode-status, .sqx-mmode .mode-status, .sqx-mmode #paperStatusText { display: none !important; }

/* ===== API Pressure Index strip (re-homed under the nav by header_combined.js) ===== */
html #sqxHd #apiGaugeDesktop.sqx-apig,
html #sqxHd #apiGauges.sqx-apig {
  display: flex !important; align-items: center; gap: 14px !important; flex-wrap: nowrap; overflow-x: auto;
  position: static; margin: 0; padding: 4px clamp(12px, 2vw, 28px) !important; min-height: 30px; box-sizing: border-box;
  background: color-mix(in srgb, var(--surface, #12161f) 82%, transparent) !important;
  border: 0 !important; border-bottom: 1px solid var(--border-light, #2d3748) !important;
  font-size: 12px; scrollbar-width: none;
}
html #sqxHd #apiGaugeDesktop.sqx-apig::-webkit-scrollbar { display: none; }
html #sqxHd #apiGaugeDesktop.sqx-apig > span { flex: none; }
html #sqxHd #apiGaugeDesktop.sqx-apig #dkApiSignal { background: transparent !important; }
/* Light/Mist: the updater writes pale dark-theme hexes; map them to readable ones */
html:is([data-skin="white"],[data-skin="mist"]) #sqxHd #apiGaugeDesktop.sqx-apig {
  background: rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30,41,59,.14) !important;
}
html:is([data-skin="white"],[data-skin="mist"]) #apiGaugeDesktop :is([style*="#48bb78"],[style*="72, 187, 120"]) { color: #15803d !important; border-color: #15803d !important; }
html:is([data-skin="white"],[data-skin="mist"]) #apiGaugeDesktop :is([style*="#fc8181"],[style*="252, 129, 129"]) { color: #b91c1c !important; border-color: #b91c1c !important; }
html:is([data-skin="white"],[data-skin="mist"]) #apiGaugeDesktop :is([style*="#718096"],[style*="113, 128, 150"]) { color: #475569 !important; }
html:is([data-skin="white"],[data-skin="mist"]) #apiGaugeDesktop :is([style*="#00d1b2"],[style*="0, 209, 178"]) { color: #0f766e !important; }
html:is([data-skin="white"],[data-skin="mist"]) #apiGaugeDesktop :is([style*="#209cee"],[style*="32, 156, 238"]) { color: #1d4ed8 !important; }
html:is([data-skin="white"],[data-skin="mist"]) #apiGaugeDesktop span[title] { background: rgba(255,255,255,.9) !important; color: #334155 !important; border-color: rgba(30,41,59,.3) !important; }
html:is([data-skin="white"],[data-skin="mist"]) #apiGaugeDesktop [style*="color:#2d3748"] { color: rgba(30,41,59,.35) !important; }

/* PART: gauge in ribbon - API Pressure Index sits inline in the first row on wide screens */
html #sqxHd .sqx-rib > #apiGaugeDesktop.sqx-apig {
  flex: none; overflow: visible; gap: 10px !important; padding: 0 14px !important; min-height: 0; height: 100%;
  background: transparent !important; border: 0 !important; border-right: 1px solid var(--border) !important;
  font-size: 11px; letter-spacing: 0; text-transform: none;
}
html #sqxHd .sqx-rib > #apiGaugeDesktop.sqx-apig .api-score,
html #sqxHd .sqx-rib > #apiGaugeDesktop.sqx-apig [id^="dkApiScore"] { font-size: 12px !important; font-weight: 600 !important; }
/* the thin "|" divider between SPX and NDX reads as clutter at this size */
html #sqxHd .sqx-rib > #apiGaugeDesktop.sqx-apig > span[style*="2d3748"] { display: none; }
html #sqxHd .sqx-rib > #apiGaugeDesktop.sqx-apig > span[title] { width: 14px !important; height: 14px !important; }

/* nav logo mark */
.sqx-logo { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: none; padding: 0; cursor: pointer; }
.sqx-logo .sqx-mark { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; display: block; flex: none; background: #2d3548; }
.sqx-logo .sqx-brand-logo { height: 32px; width: auto; max-width: 165px; object-fit: contain; display: block; flex: none; }