/* Mobile breakpoint overrides (max-width: 600px) for every page that uses
   pensive_trader.css. Kept as a single spot so the same breakpoint isn't
   scattered across multiple files, and imported last so it can override the
   base/forms/modals/pages rules above it. */

@media (max-width: 600px) {
    body.ticker-search-page {
        min-height: 100svh;
    }

    body.ticker-search-page > .container,
    .container {
        width: calc(100% - 24px);
        max-width: 100%;
        margin: 24px auto;
        padding: 20px 14px;
    }

    .ticker-actions {
        flex-direction: column;
        align-items: center;
    }

    .ticker-actions .action-button {
        width: min(100%, 260px);
    }

    .result,
    .error {
        width: 100%;
        overflow-wrap: anywhere;
    }

    .result h3 {
        font-size: 1.1rem;
    }

    .result ul {
        max-width: 100%;
        padding-left: 1.25rem;
    }

    .result ul ul {
        padding-left: 1.25rem;
    }

    #myModal,
    #watchlistModal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100svh - 16px);
        padding: 4px;
        overflow-y: auto;
    }

    #myModal .modal-close,
    #watchlistModal .modal-close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 6px rgba(15, 23, 42, 0.2);
    }

    #analysisModal {
        position: fixed;
        inset: 0;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100svh - 24px);
        margin: auto;
        padding: 10px;
        border-radius: 16px;
        overflow-y: auto;
    }

    #marketEnvModal {
        position: fixed;
        inset: 0;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100svh - 24px);
        margin: auto;
        padding: 16px 12px;
        border-radius: 16px;
        overflow-y: auto;
    }

    #marketEnvModal .modal-close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 6px rgba(15, 23, 42, 0.2);
    }

    #backtestModal {
        position: fixed;
        inset: 0;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100svh - 24px);
        margin: auto;
        padding: 16px 12px;
        border-radius: 16px;
        overflow-y: auto;
    }

    #backtestModal .modal-close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 6px rgba(15, 23, 42, 0.2);
    }

    #portfolioBacktestModal {
        position: fixed;
        inset: 0;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100svh - 24px);
        margin: auto;
        padding: 16px 12px;
        border-radius: 16px;
        overflow-y: auto;
    }

    #portfolioBacktestModal .modal-close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 6px rgba(15, 23, 42, 0.2);
    }

    .backtest-controls {
        justify-content: flex-start;
        gap: 6px;
    }

    .backtest-controls label {
        font-size: 0.78rem;
    }

    .backtest-controls select,
    .backtest-controls input[type="date"] {
        font-size: 0.78rem;
        padding: 5px 6px;
    }

    /* The "Compare:" label and its radio group wrap onto multiple lines at
       this width, so pin the label to the top instead of the default
       vertical centering (which would otherwise center it against the
       full wrapped block and visually drift it down toward the middle
       option). */
    .backtest-field-mode {
        align-items: flex-start;
    }

    .backtest-mode-control {
        /* Flex-wrap's line-breaking is based on each item's *clamped*
           hypothetical size (after max-width is applied), so a
           `flex-basis: 100%` "always force a new line" trick on the
           ticker input stopped working once its max-width was small
           enough to fit next to the previous option — at some mobile
           widths it would sit on the same row after all, only to be
           pulled out of alignment by the negative margin meant for the
           wrapped case. Grid with a single column sidesteps the ambiguity
           entirely: every child unconditionally gets its own row,
           regardless of viewport width. */
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .backtest-mode-option {
        font-size: 0.78rem;
        gap: 4px;
    }

    .backtest-mode-option input[type="radio"] {
        width: 12px;
        height: 12px;
        /* Override the site-wide mobile `input { min-height: 44px }` rule:
           it inflates this row's box well past the visible dot, so the
           dot (centered within that tall box) renders lower than the
           top-aligned "Compare:" label instead of level with it. */
        min-height: 0;
    }

    .backtest-ticker-input {
        /* Override the site-wide mobile `input { min-height: 44px }` rule,
           which otherwise makes this box noticeably taller/bulkier than
           the compact radio rows it sits next to. */
        min-height: 0;
        font-size: 0.78rem;
        padding: 4px 6px;
        /* Wider than the desktop 8em value would suggest, since this
           renders at a smaller font-size on mobile — this is the width
           that actually fits the "e.g., MSFT" placeholder without
           truncating it. It has its own full-width row to work with here
           (see the grid layout below), so there's no side-by-side
           content to crowd. */
        width: 9em;
        /* Cancel out the desktop rule's `margin-left: -8px` (meant for
           pulling it in next to "Ticker vs. market" on the same line) —
           it has nothing to tuck against here since it's on its own row. */
        margin-left: 0;
        /* Grid's default `justify-items: stretch` would otherwise widen
           this to the full row width; opt back out to its own compact
           size. */
        justify-self: start;
        /* Pull it up closer to "Ticker vs. market" above it. */
        margin-top: -4px;
    }

    #backtest-run-btn {
        font-size: 0.78rem;
        padding: 5px 10px;
    }

    #analysisModal #analysis-modal-container {
        justify-content: flex-start;
        padding: 36px 8px 10px;
        margin: 0;
        border: 0;
        overflow: visible;
    }

    #analysisModal #analysis-title {
        max-width: calc(100% - 20px);
        font-size: 1.15rem;
        line-height: 1.3;
    }

    #analysisModal .analysis-quote-context {
        flex-direction: column;
        gap: 3px;
    }

    #analysisModal .analysis-grid {
        gap: 10px;
    }

    #analysisModal .analysis-cards,
    #analysisModal .analysis-benchmark-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #analysisModal .analysis-card,
    #analysisModal .analysis-detail-section,
    #analysisModal .analysis-factors {
        padding: 10px 12px;
    }

    #analysisModal .analysis-factors li {
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }

    #analysisModal .analysis-factors strong {
        max-width: 48%;
        overflow-wrap: anywhere;
        text-align: right;
    }

    #analysisModal .modal-close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 6px rgba(15, 23, 42, 0.2);
    }

    #myModal .chart-container,
    #watchlistModal .chart-container {
        padding: 10px 4px;
    }

    #myModal #stock-chart {
        height: min(55vh, 360px);
    }

    .plot-status {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    #myModal .chart-container {
        padding-top: 4px;
    }

    .chart-controls {
        gap: 8px;
        margin-bottom: 2px;
    }

    #myModal #stock-chart {
        margin-top: 2px;
    }

    .plot-status {
        /* Keep the base 1.25em min-height reserved here (don't zero it out).
           The shared chart modal (common.js `createChartModal`) toggles this
           element's text every ~2s while auto-refreshing the open chart
           ("Loading chart..." then cleared). Collapsing the reserved space
           to 0 on mobile made the chart and everything below it visibly
           jump up/down on every refresh tick, on both the screener and
           watchlist pages. */
        margin: 4px 0 0;
    }

    #quote-panel {
        transform: translateY(-4px);
        filter: brightness(1.08);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
        touch-action: manipulation;
    }

    #quote-panel:active {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    body.ticker-search-page {
        background-color: transparent !important;
    }

    body.ticker-search-page > .container,
    body.ticker-search-page .welcome {
        background: transparent !important;
        box-shadow: none;
    }

    .container,
    .plot-page-container {
        width: calc(100% - 24px);
        margin: 24px auto;
        padding: 16px;
        border-radius: 8px;
    }

    h2 {
        font-size: 1.35rem;
    }

    .ticker-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Every primary action button (Get Quote, Add, Search, Open Chart, View
       Watchlist, Clear All) shares the `.action-button` class so they all
       get the same height/padding/font-size on mobile, regardless of which
       page or dialog they appear in. Small icon buttons (the × clear/delete/
       modal-close controls) intentionally keep their own circular sizing
       and are not affected by this rule. */
    .action-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: max-content;
        max-width: calc(100vw - 40px);
        text-align: center;
        min-height: 36px;
        padding: 7px 12px;
        font-size: 14px;
        box-sizing: border-box;
    }

    .chart-container,
    .plot-chart-container {
        width: 100%;
        padding: 8px;
        margin: 12px auto;
    }

    .plot-chart-container #stock-chart {
        width: 100%;
        max-width: 100%;
    }
    .chart-container canvas {
        width: 100%;
        height: auto;
        min-height: 260px;
        max-height: 360px;
    }

    #myModal,
    #watchlistModal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100svh - 24px);
        padding: 8px;
    }

    #myModal .chart-container,
    #watchlistModal .chart-container {
        width: 100%;
        padding: 8px;
    }

    #myModal #stock-chart {
        max-height: calc(100vh - 210px);
        height: min(82vw, 420px);
        min-height: 300px;
    }

    input {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    .combo {
        width: auto;
        min-height: 32px;
        padding: 5px 8px;
        font-size: 14px;
    }

    .chart-controls {
        gap: 10px;
        width: auto;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .chart-controls .combo {
        width: auto;
        max-width: none;
        margin: 0;
        flex: 0 1 auto;
    }

    .chart-logo {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    .learn-more-container {
        width: calc(100% - 24px);
        max-width: none;
        margin-top: 12px;
        padding: 16px;
    }

    .learn-more-container h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .learn-more-intro {
        text-align: justify;
    }

    .learn-more-section {
        margin-top: 16px;
        padding: 14px 16px;
    }

    .learn-more-section h2 {
        font-size: 1.1rem;
    }

    .learn-more-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 20px;
    }

    .learn-more-actions .btn {
        width: 100%;
        text-align: center;
        padding: 10px 12px;
    }

    .about-container {
        width: calc(100% - 24px);
        max-width: none;
        margin-top: 12px;
        padding: 16px;
    }

    .about-container h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .about-intro {
        text-align: justify;
    }

    .about-section {
        margin-top: 16px;
        padding: 14px 16px;
    }

    .about-section h2 {
        font-size: 1.1rem;
    }

    .about-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 20px;
    }

    .about-actions .btn {
        width: 100%;
        text-align: center;
        padding: 10px 12px;
    }

    .contact-container {
        width: calc(100% - 24px);
        max-width: none;
        margin-top: 12px;
        padding: 16px;
    }

    .contact-container h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .contact-intro {
        text-align: justify;
    }

    .contact-section {
        margin-top: 16px;
        padding: 14px 16px;
    }

    .contact-section h2 {
        font-size: 1.1rem;
    }

    .contact-form button {
        width: 100%;
    }

    .contact-email {
        text-align: left;
    }
}