/* Chart UI around the canvases - gesture hints, the status line, the
   provenance line - and the expanded view. Plain classes, not Tailwind
   utilities: the Tailwind build is prebuilt, so a utility it hasn't seen
   would silently do nothing. Text tones clear WCAG AA (4.5:1) on the
   panel: slate-400 for labels (7:1), never slate-500 (3.7:1). */

/* Gesture hints say what THIS device can do: a phone has no wheel or hover. */
.chart-hint { font-size: 10px; font-weight: 400; color: #94a3b8; }
.chart-hint--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
    .chart-hint--pointer { display: none; }
    .chart-hint--touch { display: inline; }
}

/* Status line: the bar under the crosshair (else the newest in view), and the window in view. */
.chart-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0 0 0.375rem;
    font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums; /* digits keep their places as the crosshair moves */
    color: #e2e8f0;
    transition: opacity 0.2s ease;
}
.chart-status[hidden] { display: none; }
.chart-status p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.75rem; margin: 0; }
.chart-status-when { font-weight: 600; color: #f1f5f9; }
.chart-status-key { color: #94a3b8; margin-right: 0.25em; }
.chart-status .is-up { color: var(--color-bull); }
.chart-status .is-down { color: var(--color-bear); }
.chart-status.is-stale { opacity: 0.55; } /* a new range is loading: these numbers are on their way out */

/* Provenance: bar size · time zone · source · newest bar · delay. */
.chart-provenance { margin: 0.5rem 0 0; font-size: 11px; line-height: 1.5; color: #94a3b8; }
.chart-provenance[hidden] { display: none; }
.chart-provenance > span:empty { display: none; }
.chart-provenance > span + span::before { content: "\00b7"; margin: 0 0.45em; color: #475569; }
.chart-provenance .is-stale { color: #fbbf24; }

/* Hammer (chartjs-plugin-zoom) computes touch-action: none for its pinch
   recognizer and sets it inline - on a phone, a full-width chart then
   traps the page's vertical scroll. pan-y hands vertical swipes back to
   the page; horizontal drags and pinches still reach the chart (pan-y
   also rules out the browser's own pinch-zoom). !important outranks the
   inline style without forking the vendored plugin. */
#priceChart, #volumeChart, #oscillatorChart { touch-action: pan-y !important; }

/* Lightweight Charts engine (price_chart_engine.js): one surface for price,
   volume and the indicator, so the wrap is the whole chart's height - taller
   with an indicator pane, so price keeps its room either way. */
.bx-chart-wrap { height: 27rem; }
.bx-chart-wrap.has-oscillator { height: 35rem; }
@media (max-width: 640px) {
    .bx-chart-wrap { height: 23rem; }
    .bx-chart-wrap.has-oscillator { height: 30rem; }
}
/* Expanded, price_chart_controls.js sizes the wrap to the room left in the card. */
.bx-chart { position: absolute; inset: 0; transition: opacity 0.2s ease; }
/* The library stacks its own canvases (z-index 1-2): isolated here, the
   legends and the loading / empty / Retry messages after it paint above. */
.bx-chart { z-index: 0; isolation: isolate; }
.bx-chart.is-loading { opacity: 0.35; }
/* Each pane's values, top-left, over a scrim so candles never fight the text. */
.bx-legends { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bx-legend {
    position: absolute;
    left: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    max-width: calc(100% - 96px); /* clear of the price axis */
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(17, 23, 34, 0.78); /* --color-panel */
    font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
}
.bx-legend[hidden] { display: none; }
.bx-legend-title { color: #94a3b8; }
.bx-legend .is-up { color: var(--color-bull); }
.bx-legend .is-down { color: var(--color-bear); }
.chart-provenance a { color: #cbd5e1; text-decoration: underline; text-underline-offset: 2px; }
.chart-provenance a:hover { color: #f1f5f9; }

/* Expanded chart. .analyze-story isolates its stacking context so its
   glow stays behind it - which also traps the fixed card's z-index (50)
   beneath the rail (47/48) and the help button (45) at the root. Release
   it while expanded; the backdrop then covers the rail - opaque, since
   even 4% of the page's bright text read as ghost text around the card.
   (chart.js also makes everything outside the card inert, so focus can't
   wander behind it.) */
body.chart-is-expanded .analyze-story { isolation: auto; }
body.chart-is-expanded .chart-fullscreen-backdrop.active { z-index: 49; background: #05080d; }

@media (prefers-reduced-motion: reduce) {
    .chart-status { transition: none; }
    .bx-chart { transition: none; }
}