/* =========================================================================
   V2 Strategy Observability dashboard — stylesheet entrypoint.
   -------------------------------------------------------------------------
   This dashboard is now a CONSUMER of the shared Observability UI Kit. Its
   styles were extracted, verbatim, into the kit (one source of truth, no
   fork — see _shared_ui_kit/ -> ui/kit/):

     kit/kit.css             the design system (tokens + shell + components)
     kit/pattern_tracker.css the pattern-tracker domain widgets (this hybrid
                             dashboard still renders the Pattern hypotheses
                             panel, so it imports the PT domain layer too)

   The union of these two files is the exact rule-set this file used to carry,
   so the dashboard renders byte-identically (the UI guards prove it). A
   restyle of a token in kit.css now changes this dashboard AND every other
   app at once — the whole point of the kit.

   CSS requires @import to precede all other rules; keep these two lines first.
   ========================================================================= */
@import url('kit/kit.css?v=20261019theme1');
@import url('kit/pattern_tracker.css?v=20260612b');

/* =========================================================================
   View modes (Pattern-focused view) + Pause/Refresh toolbar.
   -------------------------------------------------------------------------
   These rules are owned by the hybrid (this file) and layer ON TOP of the
   kit, so the kit stays the single source of truth for the shared design
   system. They are inert in the default view (no `data-view` attribute, or
   data-view="full") — `/` renders byte-identically to before.

   The hybrid reads the `view` URL query param and stamps it onto
   <body data-view="…"> early in bootstrap (app.js). In the Pattern-focused
   view we CSS-HIDE (display:none) the lead-lag / strategy-execution surfaces
   (tagged `.view-leadlag` in index.html) — they are NEVER removed from the
   DOM, so app.js still resolves every element by id (zero null-ref risk).
   ========================================================================= */

/* Pattern-focused view: hide the lead-lag / strategy-execution surfaces
   (Feed freshness, State, Gate control, the ARMED/SAFE banner). The pattern
   panels (Pattern hypotheses + zone legend, Recent decisions, instance card)
   and the price+zones chart + rank pane all stay. */
body[data-view="pattern"] .view-leadlag { display: none !important; }
/* The ARMED/SAFE banner's className is rewritten by app.js (_renderGate sets it
   to "arm-banner arm-armed" etc.), which would strip a `view-leadlag` class — so
   hide it by its STABLE id too (belt-and-suspenders; the id is never rewritten). */
body[data-view="pattern"] #armBanner { display: none !important; }

/* Symmetric (reserved) lead-lag-focused view: hide the pattern-only surface.
   Lead-Lag has its own dedicated app; this is the trivial symmetric hide for
   anyone who loads the hybrid with ?view=leadlag. */
body[data-view="leadlag"] .panel-patterns { display: none !important; }

/* -------------------------------------------------------------------------
   Pause / Refresh toolbar — lives in the price chart head, right-aligned.
   Matches the kit's .chart-kind-toggle / .control-button idiom (tokens, not
   hard-coded colors) so a kit restyle carries through.
   ------------------------------------------------------------------------- */
.chart-pause-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;           /* push to the right edge of the flex head */
    flex: 0 0 auto;
}
.chart-pause-toolbar .pause-btn,
.chart-pause-toolbar .refresh-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 9px;
    line-height: 1.4;
    white-space: nowrap;
}
.chart-pause-toolbar .pause-btn:hover,
.chart-pause-toolbar .refresh-btn:hover { color: var(--text-primary); background: var(--border-color); }
.chart-pause-toolbar .pause-btn:focus-visible,
.chart-pause-toolbar .refresh-btn:focus-visible { outline: 1px solid var(--accent-color); outline-offset: 1px; }
/* PAUSED state: the toggle reads "▶ Live" and glows amber so the frozen view
   is unmistakable (the user is intentionally off the live edge). */
.chart-pause-toolbar .pause-btn.is-paused {
    color: var(--warning-color);
    border-color: var(--warning-color);
    font-weight: 600;
}
/* Behind-count badge ("⏸ frozen · N new"): amber pill, only shown while paused
   with ≥1 suppressed live message. */
.chart-pause-toolbar .pause-badge {
    font-size: 0.66rem;
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
    border-radius: 10px;
    padding: 1px 8px;
    background: rgba(210, 153, 34, 0.08);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Historical opportunities (in-view Opportunity Replay) — the "⏪ Historical"
   trigger + SSE progress chip next to Pause/Refresh, and the launch popover.
   Same token idiom as the pause toolbar.
   ------------------------------------------------------------------------- */
.hist-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.hist-toolbar .hist-btn,
.hist-toolbar .hist-stop-btn,
.hist-popover .hist-run-btn,
.hist-popover .hist-cancel-btn,
.hist-popover .hist-mode-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 9px;
    line-height: 1.4;
    white-space: nowrap;
}
.hist-toolbar .hist-btn:hover,
.hist-toolbar .hist-stop-btn:hover,
.hist-popover .hist-run-btn:hover,
.hist-popover .hist-cancel-btn:hover,
.hist-popover .hist-mode-btn:hover { color: var(--text-primary); background: var(--border-color); }
.hist-toolbar .hist-btn:focus-visible,
.hist-toolbar .hist-stop-btn:focus-visible { outline: 1px solid var(--accent-color); outline-offset: 1px; }
.hist-toolbar .hist-stop-btn { padding: 2px 6px; }

/* Progress chip: thin determinate track that pulses while the plan is unknown
   (before the first per-day load line firms the bar count up). */
.hist-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.hist-progress .hist-progress-track {
    display: inline-block;
    width: 90px;
    height: 5px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.hist-progress .hist-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent-color, #4f8cff);
    transition: width 0.4s ease;
}
.hist-progress .hist-progress-fill.indeterminate {
    width: 35%;
    animation: histSlide 1.1s ease-in-out infinite alternate;
}
@keyframes histSlide { from { margin-left: 0; } to { margin-left: 65%; } }
.hist-progress .hist-progress-text { font-size: 0.66rem; color: var(--text-secondary); }
.hist-progress .hist-progress-text.hist-err-text { color: var(--danger-color, #e05656); }

/* Launch popover, anchored under the chart head's right edge. */
.chart-block-head { position: relative; }
.hist-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 8px;
    z-index: 40;
    min-width: 300px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hist-popover .hist-pop-title { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.hist-popover .hist-pop-title .hist-pop-sub { display: block; font-size: 0.66rem; font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.hist-popover .hist-pop-row { display: flex; flex-direction: column; gap: 3px; font-size: 0.66rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.hist-popover .hist-pop-row select,
.hist-popover .hist-pop-row input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 0.74rem;
    padding: 4px 7px;
    text-transform: none;
    letter-spacing: normal;
}
.hist-popover .hist-pop-mode { flex-direction: row; gap: 6px; }
.hist-popover .hist-mode-btn[aria-pressed="true"] {
    color: var(--accent-color, #4f8cff);
    border-color: var(--accent-color, #4f8cff);
    font-weight: 600;
}
.hist-popover .hist-pop-err { font-size: 0.68rem; color: var(--danger-color, #e05656); white-space: normal; }
.hist-popover .hist-pop-actions { display: flex; gap: 8px; justify-content: flex-end; }
.hist-popover .hist-run-btn { color: var(--accent-color, #4f8cff); border-color: var(--accent-color, #4f8cff); font-weight: 600; }

/* Microstructure overlay toggle (MOCK prototype) — sits in the divergence-pane
   header; hidden until the host emits obi/ati. Mirrors the pause/refresh button
   look. micro-off dims it; the swatches key the OBI (light-blue) / ATI (orange)
   line colors so the operator can read the legend at a glance. */
.micro-toggle {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 9px;
    line-height: 1.4;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
}
.micro-toggle:hover { color: var(--text-primary); background: var(--border-color); }
.micro-toggle:focus-visible { outline: 1px solid var(--accent-color); outline-offset: 1px; }
.micro-toggle.micro-off { opacity: 0.5; }
.micro-toggle .micro-swatch {
    display: inline-block;
    width: 9px; height: 3px; border-radius: 1px;
    vertical-align: middle;
    margin-right: 1px;
}
.micro-toggle .micro-swatch-obi { background: #4fc3f7; }
.micro-toggle .micro-swatch-ati { background: #ff8a65; margin-left: 4px; }

/* =========================================================================
   Price-chart space when the Strategy-state pane is shown (mirrors the lead_lag
   layout: the price block grows, secondary panes are capped).

   kit.css sizes ONE secondary pane at `.chart-block-small { flex: 0 0 32% }` —
   correct for the lead_lag app and for THIS dashboard when only the Divergence
   pane is present (the price chart keeps ~68% of the column). But this dashboard
   has a SECOND secondary pane — the Strategy-state pane (#stateBlock) — which is
   display:none by default and revealed only on IStateRecorder hosts. With BOTH
   panes shown, two blocks at 32% reserve 64% and squeeze the flex:1 price chart
   down to ~36% (the bug: the price chart becomes the cramped minority).

   app.js (_stLoadList) adds `.has-state-pane` to `.charts-col` exactly when it
   reveals #stateBlock. Gating the cap on that class means:
     • the single-pane (feature-off) layout is byte-for-byte unchanged (32%/68%),
     • the two-pane layout shrinks BOTH secondaries so the price chart stays the
       dominant pane (~58%), with a lower wrap floor so the cap still bites on a
       short viewport without Lightweight-Charts collapsing to nothing.

   Scoped here (styles.css is loaded ONLY by the dashboard; lead_lag / replay /
   strategy_console / launcher link kit.css directly) via a child combinator, so
   kit.css's shared 32% default is untouched for every other consumer.
   ========================================================================= */
.charts-col.has-state-pane > .chart-block-small { flex: 0 0 21%; }
.charts-col.has-state-pane > .chart-block-small .chart-wrap { min-height: 130px; }

/* =========================================================================
   Mode banner + microstructure provenance label (live/mock/replay clarity).
   app.js _applyHostFeatures reveals #modeChip from /health top-level `mode`, and
   _resolveSymbolChrome reveals #microSrc (the charted symbol's book-state source)
   from features.microstructure. Color language: LIVE/real = green, MOCK/demo =
   amber, REPLAY / no-live-feed = gray. ========================================= */
.mode-chip {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 10px; border: 1px solid; white-space: nowrap;
    vertical-align: middle; margin-left: 8px;
}
.mode-chip.mode-live   { color: var(--success-color, #3fb950); border-color: var(--success-color, #3fb950); background: rgba(63,185,80,0.12); }
.mode-chip.mode-mock   { color: var(--warning-color, #d9a514); border-color: var(--warning-color, #d9a514); background: rgba(217,165,20,0.12); }
.mode-chip.mode-replay { color: var(--text-secondary, #8b949e); border-color: var(--border-color); background: transparent; }

.micro-src {
    font-size: 0.62rem; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    white-space: nowrap; vertical-align: middle; border: 1px solid var(--border-color);
}
.micro-src-live { color: var(--success-color, #3fb950); border-color: var(--success-color, #3fb950); }
.micro-src-mock { color: var(--warning-color, #d9a514); border-color: var(--warning-color, #d9a514); }
.micro-src-na   { color: var(--text-secondary, #8b949e); }