/**
 * Liquidation Heatmap — toggle button + canvas overlay styling.
 *
 * Canvas layout is handled inline by the renderer (absolute positioning
 * inside chart container, pointer-events none). The chart's container
 * gets `position: relative` enforced by the renderer if it's static.
 *
 * Button is mounted by LiquidationHeatmapManager into whichever toolbar
 * element it finds (.chart-toolbar / #chart-toolbar / .chart-controls)
 * or falls back to a floating absolute position over the chart.
 */

.liq-heatmap-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin: 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(20, 20, 28, 0.7);
    color: #888;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    line-height: 1;
}

.liq-heatmap-toggle:hover {
    background: rgba(40, 40, 56, 0.85);
    color: #ccc;
}

.liq-heatmap-toggle.on {
    /* "Live heatmap" indicator — warm orange/yellow so users see at a
       glance when the overlay is consuming bandwidth. */
    background: rgba(240, 218, 24, 0.18);
    color: #f0da18;
    border-color: rgba(240, 218, 24, 0.55);
    box-shadow: 0 0 0 1px rgba(240, 218, 24, 0.15) inset;
}

.liq-heatmap-toggle.on::before {
    /* Solid dot — same trick as the "live" indicator on other panels. */
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f0da18;
    box-shadow: 0 0 6px rgba(240, 218, 24, 0.7);
}

/* ── Depth overlay toggle (sibling to LIQ button) ───────────────────────── */
.depth-overlay-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin: 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(20, 20, 28, 0.7);
    color: #888;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    line-height: 1;
}

.depth-overlay-toggle:hover {
    background: rgba(40, 40, 56, 0.85);
    color: #ccc;
}

.depth-overlay-toggle.on {
    /* Cyan "live depth" indicator — matches the orderbook color scheme. */
    background: rgba(38, 208, 255, 0.18);
    color: #26d0ff;
    border-color: rgba(38, 208, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(38, 208, 255, 0.15) inset;
}

.depth-overlay-toggle.on::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #26d0ff;
    box-shadow: 0 0 6px rgba(38, 208, 255, 0.7);
}

/* Canvas overlay — most properties are set inline by the renderer for
   correct sizing on HiDPI. Class is here mainly for hooks that QA /
   theming might attach later.

   Bug history (2026-05-12)
   ------------------------
   Previously this file had a `@media (prefers-color-scheme: light)`
   block that flipped `mix-blend-mode` to `multiply` for users whose
   OS was in light mode. The terminal's chart is ALWAYS dark themed
   (background = #0a0a14), so `multiply` on a near-black canvas
   maps every band's RGB to ~0 — the heatmap rendered as solid black
   stripes. This hit hardest on macOS Chrome where the OS auto-
   switches light/dark by time of day (light during work hours,
   dark at night), so the user's heatmap mysteriously "worked at
   night, broke during the day". Removed — site theme is dark,
   period. `screen` blend mode stays for the glow look. */
.liq-heatmap-canvas {
    image-rendering: pixelated;       /* keep cell edges crisp at 1:1 */
    opacity: 0.92;                    /* let candles peek through */
    mix-blend-mode: screen;           /* heatmap glows over dark theme */
}