/*
 * Shared mobile layout corrections.
 *
 * Every page in this repository carries its own inline <style> block, so there is
 * no single place where layout is defined. This file holds the rules that have to
 * hold on every page, and each page links it directly after navbar.css.
 *
 * Because a page's inline <style> block comes after this link in document order, a
 * rule here with the same specificity would lose. Selectors that have to override a
 * per-page rule are therefore written with one extra element or class in the path
 * (for example "footer .footer-grid" rather than ".footer-grid"). Rules that have
 * no per-page competitor are left at their natural specificity.
 *
 * The problem being corrected: grid and flex items default to min-width auto, so an
 * item cannot shrink below the width of its widest content. A wide table or a long
 * line of code therefore forces its whole column wider than the viewport, and
 * because body carries overflow-x hidden the excess is cut off rather than made
 * scrollable. On a phone this silently removes content from the page. Measured
 * 2026-08-05: 22 of 38 pages, including whole footer link columns.
 *
 * min-width 0 is applied to named layout columns only. Applying it to every
 * descendant collapses flex rows that are sized by their content, which is how the
 * footer icon row lost its width during an earlier pass of this file.
 */

@media (max-width: 768px) {
    /* Layout columns may shrink below their content width. */
    .article-container > *,
    .content-wrapper > *,
    .main-layout > *,
    .article-content,
    .article-sidebar,
    .main-content,
    .sidebar,
    .toc {
        min-width: 0;
    }

    /*
     * Wide data tables scroll inside their own box instead of pushing the page
     * wider. display block is what makes a table honour overflow-x.
     */
    main table,
    article table,
    section table,
    .article-content table,
    .main-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Long lines of sample output scroll rather than widen the page. */
    pre,
    .code-block,
    .code-block pre {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Long identifiers in inline code wrap instead of overflowing. */
    p code,
    li code,
    td code {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /*
     * Footer link columns. Several pages define a four-column footer and never
     * reset it below the desktop breakpoint, which pushes two whole columns off
     * screen. auto-fit with a capped minimum keeps the columns as wide as they can
     * be without ever exceeding the available width.
     */
    footer .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
        gap: 32px;
    }

    /* The copyright and icon row wraps onto more lines rather than compressing. */
    footer .footer-bottom {
        flex-wrap: wrap;
        gap: 16px;
    }

    /*
     * Two-part rows inside articles (a label or date beside its body text) stack
     * when there is no room for them side by side.
     */
    .checklist-item,
    .maturity-level,
    .timeline-item,
    .milestone-item,
    .progress-header,
    .code-header,
    .arch-layers,
    .tool-actions,
    .checkbox-item,
    .threat-header,
    .phase-header,
    .register-row,
    .template-row,
    .legend-item {
        flex-wrap: wrap;
    }

    /*
     * Grids with fixed pixel tracks cannot fit a narrow screen. Keep the shape
     * where it is meaningful (the arrow between a use case and its algorithm) and
     * let the text tracks shrink.
     */
    .decision-box ul > li {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    /*
     * Status pills are nowrap so they stay on one line in a table cell. In the
     * decision list they carry a full algorithm name, which is wider than a phone
     * screen, so there they wrap.
     */
    .decision-box .status {
        white-space: normal;
    }

    .tool-list,
    .specs-grid,
    .related-grid,
    .feature-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    }
}

/*
 * 320px. The rules above take every page to a clean 375, which is the width
 * this project treats as mandatory, but 320 is a real device (iPhone SE, first
 * generation) and six pages still cut content off there. Measured 2026-08-05,
 * one to 49 pixels over.
 *
 * The remaining cause is not a missing breakpoint. Each of those pages already
 * collapses to a single column here. A 1fr track takes its minimum from its
 * content, so one long unbroken token, a product name or an algorithm
 * identifier, holds the column wider than the screen and the excess is clipped.
 * minmax(0, 1fr) lets the track shrink so the text can wrap instead.
 */
@media (max-width: 480px) {
    .mission-grid,
    .why-grid,
    .resources-grid,
    .tool-list,
    .specs-grid,
    .related-grid,
    .feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Grid and flex items stop holding their content width. */
    .mission-content,
    .mission-visual,
    .hero-content,
    .tool-item {
        min-width: 0;
    }

    /* A long token breaks rather than widening the page. */
    h1,
    h2,
    h3,
    h4,
    .hero-content p,
    .article-content p,
    .main-content p,
    .tool-item {
        overflow-wrap: break-word;
    }

    /*
     * Inline diagrams are drawn at a fixed pixel width. Every one of them
     * carries a viewBox, so capping the width scales the drawing rather than
     * cropping it.
     */
    svg[viewBox] {
        max-width: 100%;
        height: auto;
    }
}