/* ============================================================
   chart-drawing.css — drawing tools on the stock chart.
   Load AFTER ew-charts.css (which defines .chart-btn).
   ============================================================ */

/* The armed tool.
   ew-stock-chart.js has always toggled a plain `active` class on these buttons, but
   nothing styled it — so with the horizontal-line and trend tools there was no way to
   tell which mode you were in, and clicking a second time to toggle off looked like
   nothing happened. With a third tool that ambiguity gets worse, so the state is now
   visible. Gold fill matches the D/W timeframe convention in chart-timeframe.css. */
.chart-btn.active,
.chart-btn.active:hover {
    background: var(--ew-gold, #DDB785);
    border-color: var(--ew-gold, #DDB785);
    color: var(--ew-dark, #050505);
}

/* While a tool is armed the chart takes a crosshair (set inline by the JS). The button
   keeps a pointer so it is obviously still clickable to disarm. */
.chart-btn.active {
    cursor: pointer;
}

/* The circle glyph is a stroked ellipse rather than a font character, so it needs the
   same sizing the other icon buttons get from ew-charts.css. */
#drawCircle svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* ---- earnings overlays ----
   The prior-quarter range needs a colour that is neither the up/down pair (the gap lines
   already use those, since a gap has a direction) nor --chart-line (the AVWAP) nor
   --chart-trend (the drawing tools). */
:root {
    --chart-qrange: #7a5cc8;
}

[data-theme="dark"] {
    --chart-qrange: #B2A9DD;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --chart-qrange: #B2A9DD;
    }
}

/* The 180-day AVWAP needs a line colour that is none of: the up/down pair (gap lines),
   --chart-line (Earnings AVWAP), --chart-qrange (prior quarter), --chart-marker
   (estimates) or --chart-price (the mobile price line). Teal is clear of all of them. */
:root {
    --chart-avwap180: #0F7B8A;
}

[data-theme="dark"] {
    --chart-avwap180: #4FC3D9;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --chart-avwap180: #4FC3D9;
    }
}

#showGap svg,
#showQRange svg,
#showAvwap180 svg {
    display: block;
    width: 18px;
    height: 18px;
}