/* ew-charts.css */
:root {
    --epsline: var(--ew-color);
    --epstop: var(--ew-color-top);
    --epsbottom: var(--ew-color-bottom);
    --eavwapline: #e0e0e0;
    --sentline: #000000;
    --shortline: #000000;
    --macdline: #000000;
    --macdfastline: #000000;
    --chart-bg: var(--ew-light);
    --chart-grid: #E5E9F0;
    /* Gridlines only. --chart-grid still draws the axis borders, which want to stay
       readable; the lines across the plot are reference, not content, and were competing
       with the price. Muted here once, so every chart that reads it changes together. */
    --chart-grid-line: #EDF0F5;
    --chart-axis: #6B7280;
    --chart-up: var(--ew-darkgreen);
    --chart-down: var(--ew-darkred);
    --chart-volume-up: rgba(15, 138, 59, 0.35);
    --chart-volume-down: rgba(198, 40, 40, 0.35);
    --chart-line: #4e2d9e;
    --chart-trend: var(--ew-dark);
    --chart-marker: var(--ew-color);
    --chart-avwap180: #0f7b8a;
    --chart-qrange: #7a5cc8;
    /* Bollinger bands. Separate from --chart-qrange even though they match in
       light mode: the bands go near-white in dark, and the prior-quarter levels
       must not follow them there. */
    --chart-bband: #7a5cc8;
    /* Short interest: one rgb triple, three opacities derived in JS (solid cap
       line, fill top, fill bottom) so there is one value to tune, not three. */
    --chart-short-rgb: 84, 101, 128;
}

[data-theme="dark"] {
    --epsline: var(--ew-lavendar);
    --epstop: var(--ew-lavendar-top);
    --epsbottom: var(--ew-lavendar-bottom);
    --chart-bg: var(--ew-dark);
    --chart-grid: #1E2942;
    --chart-grid-line: #141A26;
    --chart-axis: #9CA8BC;
    --chart-up: var(--ew-brightgreen);
    --chart-down: var(--ew-red);
    --chart-volume-up: rgba(49, 196, 109, 0.32);
    --chart-volume-down: rgba(255, 107, 107, 0.32);
    --chart-line: #4e2d9e;
    --chart-trend: #F4F6FA;
    --chart-marker: #B2A9DD;
    --chart-avwap180: #3FB6C6;
    --chart-qrange: #A98CE8;
    --chart-bband: #f7f7f7;
    --chart-short-rgb: 148, 164, 192;
}

@media (prefers-color-scheme: dark) {
    /* :root:not([data-theme="light"]), not a bare :root. A bare :root inside this
       media query matches whatever the theme attribute says, and it sits later in
       the file than the light block at equal specificity — so a reader on an OS set
       to dark who explicitly picks LIGHT got a light page with a dark chart panel.
       stock-chart-mobile.css and the --sent-spy-line block below already scope it
       this way; this block was the odd one out. */
    :root:not([data-theme="light"]) {
        --epsline: var(--ew-lavendar);
        --epstop: var(--ew-lavendar-top);
        --epsbottom: var(--ew-lavendar-bottom);
        --chart-bg: var(--ew-dark);
        --chart-grid: #1E2942;
        --chart-grid-line: #141A26;
        --chart-axis: #9CA8BC;
        --chart-up: var(--ew-brightgreen);
        --chart-down: var(--ew-red);
        --chart-volume-up: rgba(49, 196, 109, 0.32);
        --chart-volume-down: rgba(255, 107, 107, 0.32);
        --chart-line: #4e2d9e;
        --chart-trend: #F4F6FA;
        --chart-marker: #B2A9DD;
        --chart-avwap180: #3FB6C6;
        --chart-qrange: #A98CE8;
        --chart-bband: #f7f7f7;
        --chart-short-rgb: 148, 164, 192;
    }
}



.ew-chart-wrap {
    position: relative;
}

.ew-stock-chart {
    width: 100%;
}

/* An aspect ratio locks HEIGHT to width. That is right on a wide layout and wrong
   on a narrow one: a chart does not need to get shorter as the screen gets
   narrower, and below roughly 700px it is height, not width, that runs out first.

   .ew-chart-full at 343px resolves to a 204px chart. The 460/137/137 stretch
   factors then leave the price pane 128px and each sub-pane 38px, which is not
   enough for a candle body, let alone two oscillators and their axes.

   min-height puts a floor under it. On a wide screen the ratio already produces
   more than the floor, so these never apply there and no media query is needed.

   The svh term is for a phone in landscape, where a flat pixel floor would be
   taller than the viewport and no two panes could be seen at once. svh rather than
   vh so a mobile browser's collapsing toolbar does not resize the chart mid-scroll.

   NOTE: min-height outranks height. A page sheet that overrides these classes with
   its own height — stock-chart-mobile.css does — has to set its own min-height too,
   or the floor here wins on a portrait phone. */
.ew-chart-basic {
    aspect-ratio: 1200 / 440; /* price-only: matches the standalone chart */
    min-height: min(300px, 62svh);
    max-height: 80vh;
}

.ew-chart-full {
    aspect-ratio: 1200 / 715; /* main 440 + two sub-panes 275 */
    min-height: min(460px, 88svh);
    max-height: 92vh;
}

/* non-subscriber: single pane — wide rectangle */
/*.ew-chart-basic {
    aspect-ratio: 16 / 7;*/ /* width:height ratio — wide */
/*max-height: 80vh;*/ /* don't exceed viewport on very wide screens */
/*}*/

/* subscriber: 3 panes — taller overall (main + 2 sub-panes) but still proportional */
/*.ew-chart-full {
    aspect-ratio: 16 / 12;*/ /* taller to fit the extra panes, but ratio-locked */
/*max-height: 92vh;
}*/

/*.ew-stock-chart {
    width: 100%;
    height: 700px;
}*/

/*.chart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;*/ /* kill any inherited padding that changes height */
/*box-sizing: border-box;*/ /* border counts inside the fixed size */
/*border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;*/ /* prevents text line-height from inflating height */
/*}*/

/*.chart-btn:hover {
        background: var(--surface);
        color: var(--accent);
    }

    .chart-btn svg {
        display: block;*/ /* removes inline-SVG baseline gap */
/*width: 18px;
        height: 18px;
    }*/

/* ew-charts.css — chart container, logo, buttons, share bar */



.ew-chart-logo {
    position: absolute;
    top: 24px;
    left: 36px;
    width: 150px;
    height: auto;
    opacity: 0.65;
    pointer-events: none;
    z-index: 2;
}

/* Icon buttons — download + share, unified sizing */
.chart-btn,
.chart-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
}

    .chart-btn:hover,
    .chart-download-btn:hover {
        background: var(--surface);
        color: var(--accent);
    }

    .chart-btn svg,
    .chart-download-btn svg {
        display: block;
        width: 18px;
        height: 18px;
    }

.share-bar {
    display: none;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .share-bar.is-visible {
        display: flex;
        flex-wrap: wrap;
    }

/* SPY / benchmark line: near-black in light mode, near-white in dark */
:root {
    --sent-spy-line: #050505;
}

[data-theme="dark"] {
    --sent-spy-line: #f7f7f7;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sent-spy-line: #f7f7f7;
    }
}