/* Gamma command bar, navigation, and panel headers. */
.header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-bottom: 6px;
    padding: 6px 46px 6px 8px;
    border: 0;
    border-bottom: 1px solid #181c1f;
    background: #020304;
}

.header::after { display: none; }

.header .header-copy {
    align-self: center;
    gap: 3px;
    padding: 0;
}

.header .eyebrow {
    margin: 0;
    color: #7d858d;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-shadow: none;
}

/* Scale the original title artwork, including its shadows, as a unit. */
.header #page-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 32px;
    line-height: 1.2;
    zoom: 0.5;
    white-space: nowrap;
}

.gex-depth-header #gex-depth-tracer-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 32px;
    line-height: 1.2;
    zoom: 0.375;
}

.header .trifecta-logo {
    width: 22px;
    height: 22px;
    margin: 0 0 0 8px;
    color: #939da7;
}

.header .header-actions {
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: auto;
    padding: 0;
}

.header .controls {
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.header .ticker-active-display {
    height: 28px;
    padding: 0 10px;
    border-right: 1px solid #202529;
    color: #edf0f3;
    font: 700 13px 'JetBrains Mono', monospace;
    letter-spacing: 0;
    text-shadow: none;
}

.header .ticker-active-display.empty { color: #69727c; }

.header .controls button {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 9px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #b9c0c7;
    font: 400 10px 'JetBrains Mono', monospace;
    letter-spacing: 0.025em;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    transform: none;
    opacity: 1;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.header .controls .hidden { display: none; }

.header #gex-find-btn {
    color: #e4bd79;
    background: transparent;
}

.header .cal-icon-btn,
.header .trifecta-add-btn {
    width: 28px;
    min-width: 28px;
    padding: 0;
}

.header .trifecta-add-btn { font-size: 16px; }

.header .controls button:hover {
    background: #0c0f11;
    color: #f1f3f5;
    box-shadow: none;
    transform: none;
}

.header .controls button:disabled,
.header .controls button.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.header .controls button:focus-visible,
.header .back-button:focus-visible,
.view-toggle-btn:focus-visible,
.heat-zoom-btn:focus-visible {
    outline: 1px solid #a2afbc;
    outline-offset: -3px;
}

.gex-mini-chart-band {
    padding: 0;
    border: 0;
    border-bottom: 1px solid #181c1f;
    border-radius: 0;
    background: #020304;
    box-shadow: none;
}

.gex-mini-chart-band::after { display: none; }

.view-toggle-rail {
    margin: 0;
    padding: 0 4px;
    gap: 12px;
    border-bottom: 0;
    background: transparent;
}

.view-toggle,
.heat-zoom-toggle {
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.view-toggle { flex: 0 0 auto; }
.map-topline { min-height: 24px; gap: 8px; font-size: 7px; }
.map-topline .session-badge { font-size: 7px; letter-spacing: 0.04em; }
.map-topline .map-load-status { font-size: 7px; letter-spacing: 0.04em; }
.map-topline .freshness-stamp { text-shadow: none; letter-spacing: 0.04em; }

.view-toggle .view-toggle-btn,
.heat-zoom-btn {
    height: 24px;
    padding: 0 8px;
    border: 0;
    color: #808b95;
    font: 400 8px 'JetBrains Mono', monospace;
    letter-spacing: 0.025em;
    text-shadow: none;
    box-shadow: none;
}

.view-toggle .view-toggle-btn:hover,
.heat-zoom-btn:hover {
    color: #eef1f4;
    background: #0c0f11;
    text-shadow: none;
}

.view-toggle .view-toggle-btn.is-active {
    color: #86d9b0;
    background: transparent;
    box-shadow: inset 0 -2px 0 #70bf99;
    text-shadow: none;
}

.heat-zoom-btn.is-active,
.heat-zoom-btn[data-heat-zoom="trace"].is-active,
.heat-zoom-btn[data-expiry-mode="opex"].is-active {
    color: #e4bd79;
    background: transparent;
    box-shadow: inset 0 -2px 0 #ba965b;
    text-shadow: none;
}

.gex-options-header,
.gex-depth-header,
.gex-strike-trace-header {
    min-height: 44px;
    padding: 6px 9px;
    border-bottom: 1px solid #181c1f;
    background: #030405;
}

.gex-depth-header::after { display: none; }

.gex-depth-header .gex-rail-display-title {
    font-size: 12px;
}

@media (max-width: 1000px) and (min-width: 521px) {
    .view-toggle-rail { flex-wrap: wrap; gap: 0; }
    .view-rail-left { flex-basis: 100%; }
    .view-toggle { margin-left: auto; }
}

@media (max-width: 700px) {
    .header { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-right: 8px; }
    .header .header-copy { width: auto; padding-right: 36px; }
    .header .header-actions { width: 100%; justify-content: flex-end; }
    .header .controls { margin-left: auto; margin-right: 0; justify-content: flex-end; }
}

@media (max-width: 520px) {
    .header #page-title { zoom: 0.4; }
    .view-toggle-rail { gap: 0; padding: 0; }
    .view-rail-left { padding: 0 6px; }
    .view-toggle { width: 100%; border-top: 1px solid #181c1f; }
    .view-toggle .view-toggle-btn { flex: 1 1 0; height: 26px; padding: 0 4px; font-size: 8px; }
    .heat-zoom-toggle-mobile { border-top: 1px solid #181c1f; }
    .heat-zoom-toggle-mobile .heat-zoom-btn { height: 24px; font-size: 8px; }
}

/* PA-docked Tracer only: one compact controls row. */
html.tracer-docked .header { min-height:30px; padding:2px 7px; margin:0; display:flex; }
html.tracer-docked .header-actions { width:100%; }
html.tracer-docked #controls-form { width:100%; display:flex; align-items:center; flex-wrap:nowrap; gap:7px; }
html.tracer-docked #controls-form > .map-meta { margin:0 0 0 auto; padding:0; min-height:0; border:0; background:none; flex:0 1 auto; display:flex; align-items:center; gap:6px; }
html.tracer-docked .tracer-dock-menu { position:relative; flex:none; }
html.tracer-docked .tracer-dock-menu summary { list-style:none; cursor:pointer; color:#aaa; padding:2px 5px; font:16px monospace; }
html.tracer-docked .tracer-dock-menu summary::-webkit-details-marker { display:none; }
html.tracer-docked .tracer-dock-actions { position:absolute; right:0; top:100%; z-index:100; padding:6px; background:#111; border:1px solid #343434; min-width:100px; display:flex; flex-direction:column; align-items:stretch; gap:5px; }
html.tracer-docked .tracer-dock-actions button { margin:0; padding:7px; border:0; text-align:left; }
html.tracer-docked .header,html.tracer-docked .header-actions,html.tracer-docked #controls-form { overflow:visible; }
html.tracer-docked #controls-form > .map-meta > :not(.tracer-candles-meta-item):not(.tracer-annotations-toggle):not(.meta-item:has(#status-spot)) { display:none !important; }
/* The company logo and live spot (with its tick flash) sit right beside the ticker; + / FIND follow; toggles keep right. */
html.tracer-docked #controls-form > .map-meta { display:contents; }
html.tracer-docked #controls-form > .map-meta > .meta-item:has(#status-spot) { display:flex !important; align-items:center; gap:4px; order:1; }
html.tracer-docked #controls-form > .map-meta::before { content:none; }
html.tracer-docked #controls-form > #gex-find-btn { order:2; }
/* The + sits just before the toggles, on the right with them. */
html.tracer-docked #controls-form > #trifecta-add-btn { order:4; margin-left:auto; }
html.tracer-docked #controls-form > .map-meta > .tracer-candles-meta-item,html.tracer-docked #controls-form > .map-meta > .tracer-annotations-toggle { order:4; }
html.tracer-docked #controls-form > .tracer-dock-menu { order:5; }
html.tracer-docked #controls-form #status-symbol,html.tracer-docked #controls-form #gex-mini-radar-toggle { display:none; }
html.tracer-docked #controls-form > .map-meta { flex-wrap:nowrap; white-space:nowrap; }
html.tracer-docked #controls-form .tracer-candles-meta-item { margin:0 0 0 2px; display:flex; align-items:center; }
/* Inside the docked row the toggles sit in the controls bar: keep Tracer's own pixel font (VT323) and state colours
   (grey off · blue CANDLES on · orange HYPERLIQUID+ on), not the bar's generic button style. */
html.tracer-docked #controls-form .tracer-candles-toggle,html.tracer-docked #controls-form .tracer-annotations-toggle { height:auto; margin:0; padding:0; border:0; background:transparent; box-shadow:none; font:400 11px 'VT323',monospace; letter-spacing:.04em; line-height:1; text-transform:uppercase; color:#66717e; opacity:.78; text-shadow:none; }
html.tracer-docked #controls-form .tracer-candles-toggle.is-active { color:#a9ddf6; text-shadow:0 0 5px rgba(96,204,255,.28); opacity:1; }
html.tracer-docked #controls-form .tracer-candles-toggle--hyperliquid.is-active { color:#ffad48; text-shadow:0 0 5px rgba(255,126,38,.46); opacity:1; }
html.tracer-docked #controls-form .tracer-annotations-toggle { color:#8f98a3; opacity:1; }
html.tracer-docked #controls-form .tracer-annotations-toggle[aria-pressed="false"] { color:#66717e; opacity:.78; }
html.tracer-docked #controls-form .tracer-annotations-toggle:hover { color:#c8ced6; }
/* Brand face for Tracer's own TRACER / WALL tabs (as on the Polymarket Odds title); labels stay VT323, numbers JetBrains. */
.tracer-mobile-tab { font-family:'Press Start 2P','VT323',monospace !important; font-size:8px !important; letter-spacing:0 !important; -webkit-font-smoothing:none; }
/* Docked: TRACER / WALL float over the chart's top-left corner (redrawn with the chart, so they ride along),
   and the empty headers strip goes: both rows of height go to the chart. */
html.tracer-docked .tracer-stage { position:relative; }
html.tracer-docked .tracer-mobile-switch { position:absolute; top:6px; left:8px; z-index:6; margin:0; padding:0; gap:12px; border:0; background:none; box-shadow:none; }
/* Plain text tabs, as in Price Action's own tab row: active brighter with a thin underline, no box. */
html.tracer-docked .tracer-mobile-tab { font:400 10px 'JetBrains Mono',monospace !important; letter-spacing:.04em !important; text-transform:uppercase; padding:2px 0 3px !important; margin:0; border:0 !important; border-radius:0; background:none !important; box-shadow:none !important; color:#7a7a7a; cursor:pointer; }
html.tracer-docked .tracer-mobile-tab:hover { color:#cfcfcf; }
html.tracer-docked .tracer-mobile-tab.is-active { color:#e6e6e6; box-shadow:inset 0 -1px #e6e6e6 !important; }
html.tracer-docked #map-headers:empty { display:none; }
/* Docked: the chart fills the pane. The embed reserves 70-100px for the old header; the compact row uses ~36px, so size to that instead of leaving a dead block under the chart. */
html.tracer-docked.terminal-embed[data-terminal-panel=tracer] .tracer-canvas,
html.tracer-docked.terminal-embed[data-terminal-panel=tracer] .tracer-canvas.has-pip { height: calc(100dvh - 36px) !important; }
/* The session note floats faintly over the chart's bottom-left, above the time axis: no row of its own. */
html.tracer-docked .tracer-note { position:absolute; left:8px; bottom:50px; z-index:6; margin:0; padding:0; font-size:9px; line-height:1.2; opacity:.55; background:none; border:0; pointer-events:none; }
/* Docked and 700px+ wide: walls as a side rail beside the chart (as undocked), not a TRACER / WALL tab swap.
   The page's own 900px breakpoint would otherwise switch to tabs inside Price Action. Below 700px the tabs stay. */
@media (min-width: 700px) {
    html.tracer-docked .tracer-mobile-switch { display:none !important; }
    html.tracer-docked .tracer-canvas.has-pip .tracer-mobile-track { display:grid !important; grid-template-columns:minmax(0,1fr) 20px clamp(190px, 25vw, 300px) !important; gap:6px; transform:none !important; transition:none; }
    html.tracer-docked .tracer-canvas.has-pip.pip-count-2 .tracer-mobile-track { grid-template-columns:minmax(0,1fr) 20px clamp(300px, 38vw, 480px) !important; }
    html.tracer-docked .tracer-canvas.has-pip.pip-count-3 .tracer-mobile-track { grid-template-columns:minmax(0,1fr) 20px clamp(380px, 46vw, 600px) !important; }
    html.tracer-docked .tracer-canvas.has-pip .tracer-main-pane { display:contents !important; }
    html.tracer-docked .tracer-canvas.has-pip .tracer-pip-pane { flex:none !important; width:auto !important; max-width:none !important; position:relative; }
    /* MULTI: each pane is its chart with its own wall rail attached (as in single view); scroll sideways pane to pane. */
    html.tracer-docked .tracer-multi-canvas { height:calc(100dvh - 36px) !important; overflow-x:auto !important; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; }
    html.tracer-docked .tracer-multi-layout { display:flex !important; grid-template-columns:none !important; width:max-content !important; min-width:100%; height:100%; }
    html.tracer-docked .tracer-multi-pane { scroll-snap-align:start; }
    html.tracer-docked .tracer-multi-grid { grid-template-columns:repeat(var(--tracer-multi-count, 2), 100vw) !important; width:calc(var(--tracer-multi-count, 2) * 100vw) !important; flex:0 0 calc(var(--tracer-multi-count, 2) * 100vw) !important; }
    html.tracer-docked .tracer-multi-pane.is-mobile-wall-open { display:grid !important; grid-template-columns:minmax(0,1fr) clamp(190px, 25vw, 300px); grid-template-rows:auto minmax(0,1fr); column-gap:6px; }
    html.tracer-docked .tracer-multi-pane.is-mobile-wall-open > .tracer-multi-pane-header { grid-column:1 / -1; }
    html.tracer-docked .tracer-multi-pane.is-mobile-wall-open .tracer-multi-pane-body { display:grid !important; grid-column:1; min-height:0; }
    html.tracer-docked .tracer-multi-pane.is-mobile-wall-open > .tracer-multi-mobile-wall { grid-column:2; grid-row:2; display:flex !important; min-height:0; }
}
/* Toggles: ON = a solid coloured block with dark text (the Bloomberg flash language), OFF = dim bracket text.
   MULTI purple · CANDLES blue · HYPERLIQUID+ orange · INTEL light. */
:is(html, html.tracer-docked #controls-form) :is(.tracer-multi-toggle.is-active, .tracer-candles-toggle.is-active, .tracer-annotations-toggle[aria-pressed="true"]) { padding:1px 5px !important; color:#04110a !important; text-shadow:none !important; opacity:1 !important; }
:is(html, html.tracer-docked #controls-form) :is(.tracer-multi-toggle.is-active, .tracer-candles-toggle.is-active, .tracer-annotations-toggle[aria-pressed="true"])::before,
:is(html, html.tracer-docked #controls-form) :is(.tracer-multi-toggle.is-active, .tracer-candles-toggle.is-active, .tracer-annotations-toggle[aria-pressed="true"])::after { content:none !important; }
:is(html, html.tracer-docked #controls-form) .tracer-multi-toggle.is-active { background:#b58cff !important; }
:is(html, html.tracer-docked #controls-form) .tracer-candles-toggle.is-active { background:#a9ddf6 !important; }
:is(html, html.tracer-docked #controls-form) .tracer-candles-toggle--hyperliquid.is-active { background:#ffad48 !important; }
:is(html, html.tracer-docked #controls-form) .tracer-annotations-toggle[aria-pressed="true"] { background:#c8ced6 !important; }