/* Phone width never scrolls sideways (founder 2026-11-10: "scrolling
 * horizontally is bad UX — adapt all element sizes to the width of the
 * screen"). The agency pages are read in the app's webview at ~390px, so:
 *
 *   1. the page itself can never be dragged sideways (`clip`, not `hidden`:
 *      it creates no scroll container, so sticky headers keep working);
 *   2. a table that does not fit is re-drawn as one block per row — the first
 *      cell is the row's title, every other cell is "column name … value".
 *      phone-fit.js decides WHICH tables (only those that overflow) and writes
 *      each cell's column name into `data-label`;
 *   3. rows of tabs, chips and buttons wrap instead of scrolling.
 *
 * Opt out for a surface that must stay a grid (a calendar, a pasted e-mail):
 * `data-phone-table="keep"` on the table or any ancestor.
 * Colours are inherited so the creative night theme needs nothing extra. */
@media (max-width: 639px) {
    html, body { overflow-x: clip; max-width: 100%; }

    /* media and embeds never set the page's width */
    img, video, canvas, svg[width], iframe, pre { max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }

    /* ── 2. tables that do not fit ─────────────────────────────────────── */
    table.tp-stack,
    table.tp-stack > tbody,
    table.tp-stack > tfoot,
    table.tp-stack > tbody > tr,
    table.tp-stack > tfoot > tr {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    table.tp-stack > colgroup { display: none; }
    /* the header row is spoken, not shown: its words sit beside each value */
    table.tp-stack > thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
    table.tp-stack > tbody > tr,
    table.tp-stack > tfoot > tr { padding: 10px 0; }
    table.tp-stack > tbody > tr > td,
    table.tp-stack > tbody > tr > th,
    table.tp-stack > tfoot > tr > td,
    table.tp-stack > tfoot > tr > th {
        display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
        position: static !important;
        width: auto !important; min-width: 0 !important; max-width: none !important;
        padding: 3px 0 !important; border: 0 !important;
        text-align: right !important; white-space: normal !important;
        overflow-wrap: anywhere;
    }
    table.tp-stack > tbody > tr > td::before,
    table.tp-stack > tfoot > tr > td::before {
        content: attr(data-label);
        flex: 0 0 36%; max-width: 36%;
        text-align: left; font-size: 11px; font-weight: 600; line-height: 1.5;
        letter-spacing: .04em; text-transform: uppercase; opacity: .6;
    }
    table.tp-stack > tbody > tr > td > * { min-width: 0; }
    /* the row's title: first cell, full width, no column name */
    table.tp-stack > tbody > tr > :first-child,
    table.tp-stack > tbody > tr > [data-phone-wide],
    table.tp-stack > tfoot > tr > [data-phone-wide] {
        display: block; text-align: left !important; font-weight: 600;
    }
    table.tp-stack > tbody > tr > :first-child::before,
    table.tp-stack > tbody > tr > [data-phone-wide]::before,
    table.tp-stack > tfoot > tr > [data-phone-wide]::before,
    table.tp-stack td[data-label=""]::before,
    table.tp-stack td:not([data-label])::before { content: none; }
    table.tp-stack > tbody > tr > [data-phone-wide]:not(:first-child) { font-weight: inherit; }
    /* a cell with nothing in it is not a line */
    table.tp-stack td:empty { display: none; }
    /* its old scroll box has nothing left to scroll */
    .tp-stack-box { overflow-x: visible !important; }

    /* ── 3. strips wrap ───────────────────────────────────────────────── */
    .tp-wrap-strip {
        flex-wrap: wrap !important; overflow-x: visible !important;
        white-space: normal !important; row-gap: 6px;
    }
    .tp-wrap-strip > * { max-width: 100%; white-space: normal; scroll-snap-align: none; }

    /* ── 4. named cases ───────────────────────────────────────────────── */
    /* a board of columns (leads, campaigns): the columns stand under each other */
    .tp-phone-col { flex-direction: column !important; min-width: 0 !important; }
    .tp-phone-col > * { width: 100% !important; }
    /* a side panel that pushes the page (manager Spotty, 420px): covers the screen while open */
    .tp-phone-panel.tp-phone-open {
        position: fixed; inset: 0; z-index: 60; width: 100% !important;
    }
    .tp-phone-panel.tp-phone-open > .tp-phone-panel-inner { width: 100% !important; border-left: 0; }
    /* a bar pinned over its field (Finder's example sentences): in the flow, sentences wrap */
    .tp-phone-static { position: static !important; align-items: flex-start !important; gap: 8px !important; }
    .tp-phone-static > * { height: auto !important; text-align: left; }
    table.tp-stack { table-layout: auto !important; }
    table.tp-stack .sticky { position: static !important; }
}