/* ======= Responsive overrides for sub-optimal screens =======
   Home for viewport-conditional adjustments surfaced by the Polypane
   cross-size sweep (status.md gate 3). Linked LAST in index.html so these win
   over the base component styles. Each rule uses whichever axis (width/height)
   actually drives its problem, rather than a single shared breakpoint. */

/* Balance-sheet numeric columns (Current value, Hypothetical value, Difference)
   are 22% standard-cols. On a ~half-viewport balance-sheet column at a 1280px
   wide screen that is too few pixels for 7-digit values, so "$1,000,000" clips.
   This is width-driven (a wide-but-short screen does not clip), so the trigger
   is max-width only; 1600px catches 1280/1366/1440-class laptops while leaving a
   maximised browser on a 1920 monitor (~1903px viewport) at full size. Shrink the
   cell font to the small token (as the cash-flow modal columns already do) and
   tighten side padding so the full number fits. Inputs do not inherit font-size,
   so the editable cell sets it explicitly. */
@media (max-width: 1600px) {
    #allocatr-combined-assets-table th.hypo-value-col,
    #allocatr-combined-assets-table td.hypo-value-col,
    #allocatr-combined-assets-table th.difference-col,
    #allocatr-combined-assets-table td.difference-col {
        font-size: var(--font-size-small);
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    #allocatr-combined-assets-table td.hypo-value-col input.hypothetical-value-input {
        font-size: var(--font-size-small);
    }
}

/* About (disclaimer) modal on short screens: compact the content so the whole
   modal fits within the viewport WITHOUT scrolling (the max-height/overflow in
   modals.css is only a safety net and should not engage once this fits). This is
   height-driven -- the two columns sit side-by-side fine, but the headings
   (h2 2rem / h3 1.5rem), paragraph spacing and 32px modal padding stack taller
   than a ~720-800px screen. 950px covers a maximised browser on a 1920x1080
   monitor (~940px viewport) and every smaller screen; taller viewports keep the
   full spacing. Selectors mirror modals.css and win by source order
   (responsive.css loads last). */
@media (max-height: 950px) {
    #disclaimer-modal .modal-content {
        padding: var(--space-5);
    }

    #disclaimer-modal .modal-two-column-layout {
        margin-bottom: var(--space-2);
    }

    /* "Allocatr" title (h2) and section headings (h3): shrinking these and their
       margins recovers the most vertical space. */
    #disclaimer-modal .modal-left-column h2,
    #disclaimer-modal .modal-right-column h2 {
        font-size: 1.4rem;
        margin-bottom: var(--space-2);
    }

    #disclaimer-modal .modal-left-column h3,
    #disclaimer-modal .modal-right-column h3 {
        font-size: 1.1rem;
        margin-bottom: var(--space-2);
    }

    #disclaimer-modal .modal-left-column p,
    #disclaimer-modal .modal-right-column p {
        font-size: var(--font-size-small);
        line-height: 1.4;
        margin-bottom: var(--space-2);
    }

    #disclaimer-modal .modal-footer-actions {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }
}