/* ---- price line color ----
   The mobile price series is a line, so it needs a color of its own. It must NOT be
   --chart-line: that is the Earnings-AVWAP line, and on desktop the price is candles so
   the two never shared a chart. Price is the dominant series and takes the
   high-contrast neutral; AVWAP keeps its purple; estimates keep --chart-marker. */
:root {
    --chart-price: #1c2733;
    --chart-price-top: rgba(28, 39, 51, 0.22);
    --chart-price-bottom: rgba(28, 39, 51, 0.02);
}

[data-theme="dark"] {
    --chart-price: #E8EDF4;
    --chart-price-top: rgba(232, 237, 244, 0.20);
    --chart-price-bottom: rgba(232, 237, 244, 0.02);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --chart-price: #E8EDF4;
        --chart-price-top: rgba(232, 237, 244, 0.20);
        --chart-price-bottom: rgba(232, 237, 244, 0.02);
    }
}

/* ============================================================
   stock-chart-mobile.css — phone layout for the stock page chart.
   Load AFTER ew-charts.css and chart-timeframe.css, which it overrides.
   ============================================================ */

@media (max-width: 700px) {

    /* ---- height ----
       .ew-chart-full is aspect-ratio 1200/715. At 358px of usable width (390px
       viewport minus .stock-page padding) that is a 213px chart, which the 460/137/137
       stretch factors split into a 134px price pane and two 40px sub-panes — under the
       60px floor sizePanes' own fallback path enforces.

       An aspect ratio is the wrong tool here: chart height should follow the VIEWPORT,
       not the width of a narrow column. svh is the small viewport height, so the value
       does not jump when mobile browser chrome hides on scroll. */
    .ew-stock-chart.ew-chart-full {
        aspect-ratio: auto;
        height: min(64svh, 460px);
        max-height: none;
    }

    .ew-stock-chart.ew-chart-basic {
        aspect-ratio: auto;
        height: min(46svh, 320px);
        max-height: none;
    }

    /* older engines without svh */
    @supports not (height: 1svh) {
        .ew-stock-chart.ew-chart-full {
            height: 60vh;
        }

        .ew-stock-chart.ew-chart-basic {
            height: 44vh;
        }
    }

    /* ---- toolbar ----
       Ten 34px buttons plus gaps need ~420px and wrap to three rows above the chart.
       The primary controls stay out; share targets and drawing tools go behind a
       toggle. Drawing is a mouse interaction anyway — placing a two-click trend line
       on a touch screen fights the chart's own pan and zoom. */
    .chart-toolbar {
        flex-wrap: wrap;
        gap: 0.35rem;
        row-gap: 0.35rem;
    }

        .chart-toolbar .chart-btn,
        .chart-toolbar .chart-download-btn {
            width: 38px;
            height: 38px; /* 34px is under the 44px touch target guideline; 38 plus the
                             gap gets the hit area close without a third toolbar row */
        }

        /* the drawing tools and the share fly-out collapse behind #chartMore */
        .chart-toolbar.is-collapsed #drawHLine,
        .chart-toolbar.is-collapsed #drawTrend,
        .chart-toolbar.is-collapsed #drawCircle,
        .chart-toolbar.is-collapsed #showAvwap180,
        .chart-toolbar.is-collapsed #showGap,
        .chart-toolbar.is-collapsed #showQRange,
        .chart-toolbar.is-collapsed #clearDraw {
            display: none;
        }

        .chart-toolbar.is-collapsed.is-open #drawHLine,
        .chart-toolbar.is-collapsed.is-open #drawTrend,
        .chart-toolbar.is-collapsed.is-open #drawCircle,
        .chart-toolbar.is-collapsed.is-open #showAvwap180,
        .chart-toolbar.is-collapsed.is-open #showGap,
        .chart-toolbar.is-collapsed.is-open #showQRange,
        .chart-toolbar.is-collapsed.is-open #clearDraw {
            display: inline-flex;
        }

        /* the share bar breaks to its own full-width row rather than stretching the toolbar */
        .chart-toolbar .share-bar.is-visible {
            order: 99;
            width: 100%;
            margin-top: 0.35rem;
        }

    /* timeframe keeps its right-hand position but stops forcing a wrap on its own */
    .chart-timeframe {
        margin-left: auto;
        gap: 0.35rem;
    }
}

/* ---- short viewports ----
   Matches the JS breakpoint: a phone in landscape is ~844px wide but ~390px tall, so a
   width-only rule would hand it the desktop layout on a chart with no height. */
@media (max-height: 520px) and (max-width: 1000px) {
    .ew-stock-chart.ew-chart-full,
    .ew-stock-chart.ew-chart-basic {
        aspect-ratio: auto;
        height: 86svh;
        max-height: none;
    }

    .chart-toolbar {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

        .chart-toolbar.is-collapsed #drawHLine,
        .chart-toolbar.is-collapsed #drawTrend,
        .chart-toolbar.is-collapsed #drawCircle,
        .chart-toolbar.is-collapsed #showAvwap180,
        .chart-toolbar.is-collapsed #showGap,
        .chart-toolbar.is-collapsed #showQRange,
        .chart-toolbar.is-collapsed #clearDraw {
            display: none;
        }

        .chart-toolbar.is-collapsed.is-open #drawHLine,
        .chart-toolbar.is-collapsed.is-open #drawTrend,
        .chart-toolbar.is-collapsed.is-open #drawCircle,
        .chart-toolbar.is-collapsed.is-open #showAvwap180,
        .chart-toolbar.is-collapsed.is-open #showGap,
        .chart-toolbar.is-collapsed.is-open #showQRange,
        .chart-toolbar.is-collapsed.is-open #clearDraw {
            display: inline-flex;
        }

    #chartMore {
        display: inline-flex;
    }
}

/* the More button only exists on mobile; JS inserts it, CSS hides it elsewhere */
#chartMore {
    display: none;
}

@media (max-width: 700px) {
    #chartMore {
        display: inline-flex;
    }

        #chartMore.is-open {
            background: var(--ew-gold, #DDB785);
            border-color: var(--ew-gold, #DDB785);
            color: var(--ew-dark, #050505);
        }
}

/* ---- estimates fill on mobile ----
   estArea reads --epstop / --epsbottom, so this is a pure token override: no JS change.

   Dark mode is the problem case. The price line is near-white and the estimates
   mountain fills with pale lavender, so a light line runs through a light block on a
   dark background and the price gets lost inside its own chart. On a 300px plot the
   mountain only needs to read as a SHAPE — its axis is hidden and nobody looks a value
   up off it — so the fill drops to a hint and the 1px outline does the work.

   The HUE comes from the theme, not from here: --ew-color is the gold in light mode and
   --ew-lavendar the dark-mode equivalent. An earlier pass hardcoded a purple rgba for
   both, which turned the light-mode mountain purple. Only the alpha is set here. */
@media (max-width: 700px), (max-height: 520px) and (max-width: 1000px) {
    :root {
        --epstop: color-mix(in srgb, var(--ew-color, #DDB785) 16%, transparent);
        --epsbottom: color-mix(in srgb, var(--ew-color, #DDB785) 0%, transparent);
    }

    [data-theme="dark"] {
        --epstop: color-mix(in srgb, var(--ew-lavendar, #B2A9DD) 10%, transparent);
        --epsbottom: color-mix(in srgb, var(--ew-lavendar, #B2A9DD) 0%, transparent);
    }
}

@media (prefers-color-scheme: dark) {
    @media (max-width: 700px), (max-height: 520px) and (max-width: 1000px) {
        :root:not([data-theme="light"]) {
            --epstop: color-mix(in srgb, var(--ew-lavendar, #B2A9DD) 10%, transparent);
            --epsbottom: color-mix(in srgb, var(--ew-lavendar, #B2A9DD) 0%, transparent);
        }
    }
}