/* ════════════════════════════════════════════════════════════════════════════════
   PHONES (≤640px) — 2026-10-05, the owner: "some text and cards are too magnified. Adjust
   the sizing to be readable and fit on the screen without horizontal scrolling."

   Loaded LAST, after every other stylesheet, and nothing here applies above 640px: desktop
   and tablet are exactly as they were. What was wrong on a phone was not a missing mobile
   layout but the DESKTOP one stacked into a single column at full size — 28–36px numbers on
   full-width tiles, a three-row header, 24px card padding inside a 390px screen, and data
   tables wider than the screen that were either clipped at the right edge (the page clips
   sideways overflow) or scrolled sideways inside their cards.

   So, in order:
     1. the type and spacing scale steps down (tokens — everything built on them follows);
     2. form fields stay at 16px, the size below which iPhone Safari zooms the page in on
        focus and leaves it zoomed;
     3. the header becomes two rows; tab strips wrap instead of scrolling;
     4. dashboard tiles and score readouts sit side by side;
     5. button rows wrap; nothing has a minimum width wider than the screen;
     6. a data table too wide for the screen becomes a stack of cards, one per row, each
        value under its column's name (js/modules/mobile-tables.js decides which and labels
        the cells; this file draws them).

   Guarded by e2e/mobile-layout.mjs: no element past the screen edge, no field under 16px,
   no text under the 12.5px floor, at 360 and 390px, on every main screen.
   ════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* ── 1. The scale ───────────────────────────────────────────────────────
       One step down at each size above 14px. rem, as before, so Settings ▸ Text Size still
       scales all of it; the 13px floor (--fs-xs) is untouched. */
    :root {
        --fs-md:   0.9375rem;  /* 15 (16) */
        --fs-base: 0.9375rem;  /* 15 (16) */
        --fs-lg:   1rem;       /* 16 (18) */
        --fs-xl:   1.125rem;   /* 18 (22) */
        --fs-2xl:  1.375rem;   /* 22 (28) */
        --fs-3xl:  1.625rem;   /* 26 (36) */
        --fs-4xl:  2.125rem;   /* 34 (48) */
        --space-4: 12px;       /* 16 */
        --space-5: 14px;       /* 20 */
        --space-6: 16px;       /* 24 — card padding and gap */
        --space-8: 20px;       /* 32 */
        --space-10: 24px;      /* 40 */
        --space-12: 28px;      /* 48 */
    }
    body { font-size: var(--fs-base); }

    /* ── 2. Fields at 16px ──────────────────────────────────────────────────
       Below 16px, focusing a field makes iPhone Safari zoom the whole page in, and it stays
       zoomed after the keyboard closes — every card then looks magnified and the page
       scrolls sideways. Every field, the ACORD 25 facsimile's included (they were 16px
       already; the smaller body size above must not take them under it). */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ── 3. The header: two rows ────────────────────────────────────────────
       Brand and the account button share the first row; the search takes the whole second
       one. It was three rows, because the status dot, a 300px search box and the account
       pill did not fit one 390px row, so the pill wrapped onto a line of its own. */
    .az-header.app-header .app-header-inner,
    .az-header.app-header .app-header-inner.container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand user" "find find";
        align-items: center;
        gap: 6px 10px !important;
        padding: 8px 12px !important;
    }
    .az-header-left {
        grid-area: brand;
        justify-content: flex-start !important;
        flex: none !important;
        min-width: 0;
    }
    .az-header-right {
        grid-area: user;
        margin: 0 !important;
        flex: none !important;
    }
    .app-header-center {
        grid-area: find;
        width: 100%;
        min-width: 0;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    .app-header-center .app-header-search,
    .app-header-center .app-header-customers {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-content: flex-start !important;
    }
    .app-header-center .app-header-search input,
    .app-header-center .app-header-customers input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
    }
    .app-header-center .app-header-search button,
    .app-header-center .app-header-customers button {
        min-height: 40px !important;
        min-width: 44px;
    }
    /* The account button: the initial alone, 40px. The name and email are at the top of its
       menu. */
    .nav-user-btn {
        height: 40px !important;
        min-height: 40px !important;
        min-width: 40px;
        padding: 0 10px !important;
        gap: 4px !important;
        border-radius: 999px !important;
    }
    /* …and the pill drawn round it hugs it, instead of padding it out to a 60px box. */
    .az-header.app-header .nav-user { padding: 0 !important; }
    #navUsernameShort { display: none !important; }
    .az-logo.app-logo { font-size: var(--fs-lg) !important; }

    /* Tab strips WRAP rather than scroll sideways: the report's six pages, the customer's
       tabs, Our agency's tabs, and a carrier's portal tabs. */
    .az-header.app-header .app-header-menu {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 2px 12px 8px !important;
    }
    .nav-tab {
        font-size: var(--fs-sm) !important;
        padding: 6px 10px !important;
    }
    /* The owner (2026-10-26): on phones the Inspections & Crashes tab keeps the name Incidents; the
       longer name took the strip to a third row. Hidden, not just covered, so a screen reader hears
       the name on the screen; the usage log names the tab by its data-usage-label on every screen. */
    .nav-tab > .nav-tab-long { display: none !important; }
    .nav-tab > .nav-tab-phone { display: inline !important; }
    .agency-subtabs,
    #agencyOfficeTabs,
    .carrier-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 6px !important;
    }
    .agency-subtab,
    #agencyOfficeTabs > button,
    .carrier-tabs > a,
    .carrier-tabs > button {
        font-size: var(--fs-sm) !important;
        padding: 6px 10px !important;
        min-height: 36px;
        flex: 0 0 auto !important;
    }

    /* ── Page and cards ─────────────────────────────────────────────────────
       A 12px gutter and 12–14px card padding: the screen goes to the content. */
    .page-content-surface {
        gap: 12px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .page-content-surface .card,
    .page-content-surface .dashboard-section {
        padding: 14px 12px !important;
        border-radius: var(--radius-md);
    }
    .agency-dash-card,
    .agency-tile {
        padding: 12px !important;
    }
    /* The customer view's panels and profile cards (2026-10-13): report-detail.css sets their
       desktop inset with a selector specific enough to beat the card rule above, so the phone
       inset is said again for them here. */
    #pageContent #agencyCustomerView > .dashboard-section,
    #pageContent #agencyCustomerView .agency-tabpanel > .dashboard-section {
        padding: 14px 12px !important;
    }
    .agency-pf-block {
        padding: 12px !important;
    }

    /* ── 4. Readouts side by side ───────────────────────────────────────────
       The agency's four headline tiles were full-width cards, one under the next — over half
       the first screen. Two by two, and the figure a step smaller. */
    .agency-dash-tiles,
    .carrier-dash-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .agency-tile { min-height: 0 !important; }
    .agency-tile-value {
        font-size: var(--fs-2xl) !important;
        line-height: 1.15;
    }
    .agency-tile-sub,
    .agency-tile-link {
        font-size: var(--fs-xs) !important;
    }
    .agency-tile-label { font-size: var(--fs-xs) !important; }

    /* ── A word is never split across lines (the owner, 2026-10-05) ─────────────
       A card's title shared its row with a long note ("Active policies · click a bar for the
       accounts") that would not shrink, so "Premium by line" was squeezed to a letter's width
       and stacked "Pre / miu / m". On a phone the title takes its line and the note wraps under
       it; headings break only BETWEEN words, and one too long for the line is set smaller
       (js/modules/mobile-tables.js, fitHeadings) rather than broken. */
    .agency-dash-head {
        flex-wrap: wrap !important;
        row-gap: 2px !important;
    }
    .agency-dash-title { flex: 0 1 auto; min-width: 0; }
    .agency-dash-note {
        flex: 0 1 auto;
        min-width: 0;
        white-space: normal !important;
        font-size: var(--fs-sm) !important;
    }
    .page-content-surface :is(h1, h2, h3, h4, h5),
    .agency-dash-title,
    .agency-customer-title,
    .agency-h3,
    .agency-h4,
    .section-title,
    .ov-detail-title,
    .subpanel-title {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: manual;
    }

    /* Predictive: current, simulated and change read across one row, not three screens down. */
    .predictive-score-comparison {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr 1fr;
        align-items: start;
        gap: 6px !important;
    }
    .predictive-score-comparison > * { min-width: 0; }
    /* The character is "→"; the stacked layout turned it to point down. In a row it points
       the way it was drawn. */
    .predictive-score-arrow {
        font-size: var(--fs-lg) !important;
        align-self: center;
        transform: none !important;
    }
    #predCurrentScore, #predSimScore, #predDelta,
    .iss-score-value, #alertsCount, .carrier-dash-iss-value {
        font-size: var(--fs-3xl) !important;
    }

    /* The Overview's inspections-and-crashes timeline: a bar chart drawn at least 980px wide,
       which a phone could only scroll sideways. The buckets share the width instead; the
       number over each bar goes (each bar's height and its tooltip still say it). */
    .carrier-timeline-shell {
        overflow-x: visible !important;
        padding: 8px !important;
    }
    .carrier-timeline-track { min-width: 0 !important; }
    .carrier-timeline-histogram {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 6px !important;
    }
    .carrier-timeline-y-axis { font-size: var(--fs-xs) !important; }
    .carrier-timeline-bars {
        grid-auto-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
    }
    .carrier-timeline-bar-group { gap: 2px !important; }
    .carrier-timeline-bar-value { display: none !important; }
    .carrier-timeline-bucket-label {
        font-size: var(--fs-xs) !important;
        line-height: 1.2;
        overflow-wrap: break-word;
    }

    /* THE 12.5px FLOOR. These were set in fixed fractions of a rem (0.66–0.78rem: 10.6–12.5px)
       — small print on a desktop, under the floor on a phone held at arm's length. Every one at
       the floor size. (The ACORD 25 facsimile's own small print is left at the printed form's
       scale.) */
    .agency-role-pill,
    .agency-avatar,
    .agency-office-stat-note,
    .agency-log-count,
    .agency-count-note,
    .agency-carrierpop-naic,
    .agency-carrierpop-ours,
    .agency-carrierpop-addstatus,
    .agency-carrierpop-note,
    .agency-wizard-pill,
    .agency-wizard-pip,
    .agency-wizard-stepof,
    .agency-limit-check,
    .agency-carrier-contact,
    .agency-add-go,
    .agency-cal-owner,
    .agency-chip-sm,
    .agency-contact-shared,
    .agency-roster-empty,
    .agency-cert-big small,
    .agency-ccert-count small,
    .agency-table.agency-ccert-table .agency-sub {
        font-size: var(--fs-xs) !important;
    }

    /* Predictive's Pass / Optional / Inspect bar: the zone names at the small size, so
       "Optional (50-74)" fits its quarter of the bar. */
    .predictive-bar-zone span {
        font-size: var(--fs-xs) !important;
        line-height: 1.15;
        white-space: normal !important;
    }

    /* The report's shared-VIN cards: the VIN and its "Used by 2 carriers" badge, and each
       carrier's name, DOT, place and status, wrap instead of running past the column. */
    .chameleon-vin-header,
    .chameleon-vin-meta,
    .chameleon-carrier-row,
    .chameleon-carrier-main,
    .chameleon-carrier-side {
        flex-wrap: wrap !important;
        min-width: 0;
    }
    .chameleon-vin-list { overflow-x: hidden !important; }
    .chameleon-vin-list code { overflow-wrap: break-word; white-space: normal; }

    /* Saved reports on the home page: a little less inset, so the card fits 360px. */
    .report-history-item {
        padding: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .report-history-header { flex-wrap: wrap; min-width: 0; }
    .report-history-company { font-size: var(--fs-lg) !important; }

    /* ── 5. Nothing wider than the screen ───────────────────────────────────
       Button rows wrap, each button taking half the row; controls lose desktop minimum
       widths; long words and addresses break rather than push the card out. */
    .agency-block-head,
    .agency-block-actions,
    .agency-board-add,
    .agency-searchwrap,
    .agency-log-tools,
    .agency-methods-foot,
    .claims-head {
        flex-wrap: wrap !important;
        min-width: 0;
    }
    .agency-block-actions {
        width: 100%;
        gap: 6px !important;
    }
    .agency-block-actions > .agency-btn,
    .agency-block-actions > button {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        white-space: normal;
    }
    /* The customer list's search over its "+ New customer": one column. NOT wrapping — a
       column that wraps sends its second item into a second column, off the right edge. */
    .agency-board-head {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .agency-board-head > * {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .agency-searchwrap { width: 100%; max-width: 100%; }
    /* "Make a COI" and "+ New customer", half the row each; the (temporary) Contacts button
       under them, the whole width. */
    .agency-board-add { flex-wrap: wrap !important; }
    .agency-board-add > .agency-btn { flex: 1 1 0; min-width: 0; }
    .agency-board-add > #agencyContactsBtn { order: 3; flex: 1 1 100%; }
    .agency-searchwrap .agency-input,
    .agency-select,
    .agency-input,
    .agency-search {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .agency-btn {
        padding: 8px 12px;
        font-size: var(--fs-sm);
    }
    .page-content-surface,
    .agency-dash-card,
    .card,
    .dashboard-section {
        overflow-wrap: break-word;
    }
    /* The Overview's readouts, two to a row: HALVES of the card, not halves of whatever their
       longest word asks for. "1fr" will not go below its content's widest word — which, once
       words stopped breaking anywhere (break-word, not anywhere: see §4), was a right-hand
       column 30px past the screen. */
    .ov-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* …so a readout whose label and value do not fit side by side puts the value under the
       label ("ISS SCORE ?" over "37 PASS"), instead of the two drawing over each other. */
    .ov-side-stack .ov-side-item {
        min-width: 0;
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .ov-side-stack .ov-side-item > .ov-side-label { flex: 1 1 auto; min-width: 0; }
    .ov-side-stack .ov-side-item > .ov-side-label.score-info-label-row { flex-wrap: nowrap; }

    /* The customer's identity strip: back button, name, then its two buttons, stacked. */
    .agency-customer-head {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
        min-height: 0 !important;
    }
    /* flex 0 0 auto: the name block's desktop "flex: 1 1 220px" is a WIDTH in a row and a
       HEIGHT in this column — it left 120px of blank card under the name. */
    .agency-customer-head > * { min-height: 0 !important; margin: 0 !important; flex: 0 0 auto !important; }
    /* The customer's facts two to a line, not one long column of label over dash. */
    .agency-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px !important;
    }
    .agency-customer-head .agency-back { align-self: flex-start; }
    .agency-customer-title { font-size: var(--fs-xl) !important; }

    /* Dialogs use the width there is. */
    .agency-modal-panel,
    .agency-modal-wide {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
    }
    .agency-modal-body { padding: 12px !important; }
    .agency-modal-head,
    .agency-modal-foot { padding: 10px 12px !important; }
    .agency-modal-foot { flex-wrap: wrap; gap: 8px; }
    .agency-form-grid { grid-template-columns: minmax(0, 1fr) !important; }

    /* ── Sign-in pages: the form first ──────────────────────────────────────
       The brand panel and its three feature cards filled the whole first screen, so the
       login boxes were below the fold. The form leads; the panel shrinks to its heading. */
    .auth-page-grid {
        display: flex !important;
        flex-direction: column;
        min-height: 0 !important;      /* the desktop's 680px, side by side, left a blank card */
    }
    .auth-form-panel { order: 1; }
    .auth-brand-panel { order: 2; padding: 16px !important; }
    .auth-brand-panel h1 { font-size: var(--fs-xl) !important; }
    /* The login page's three feature cards are a pitch; the invitation page's two say what
       the invitation grants, and stay (below its form). */
    #authContainer .auth-brand-points { display: none !important; }
    .auth-form-panel h2,
    #inviteHeading { font-size: var(--fs-2xl) !important; }

    /* ── 6. Tables too wide for the screen: a card per row ───────────────────
       Chosen and labelled by js/modules/mobile-tables.js (data-m-reflow on the table,
       data-label on each cell from its column's heading). Each row is a card; each value sits
       under its column's name, two to a line; a cell with no heading (the row's buttons) and
       a cell that spans the row (a group heading, an empty message) take the full width. */
    table[data-m-reflow] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border: 0 !important;
        background: transparent !important;
    }
    table[data-m-reflow] > thead,
    table[data-m-reflow] > colgroup { display: none !important; }
    table[data-m-reflow] > tbody,
    table[data-m-reflow] > tfoot { display: block !important; }
    table[data-m-reflow] > tbody > tr,
    table[data-m-reflow] > tfoot > tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 10px 12px !important;
        margin: 0 0 8px !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px;
        background: var(--surface-alt);
        height: auto !important;
    }
    table[data-m-reflow] > tbody > tr > td,
    table[data-m-reflow] > tbody > tr > th,
    table[data-m-reflow] > tfoot > tr > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: break-word;
        position: static !important;
        height: auto !important;
    }
    /* The column's name in front of its value, on the same line: a label on a line of its own
       doubled every card's height. A value too long for the line wraps under it. */
    table[data-m-reflow] > tbody > tr > td::before,
    table[data-m-reflow] > tbody > tr > th::before,
    table[data-m-reflow] > tfoot > tr > td::before {
        content: attr(data-label);
        display: inline;
        margin-right: 0.4em;
        font-size: var(--fs-xs);
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--text-muted);
    }
    /* The row's first value is its title — the customer, the policy, the date of the entry —
       across the full width, without its column's name. */
    table[data-m-reflow] > tbody > tr > td:first-child,
    table[data-m-reflow] > tbody > tr > th:first-child {
        grid-column: 1 / -1;
        font-weight: 600;
    }
    table[data-m-reflow] > tbody > tr > td:first-child::before,
    table[data-m-reflow] > tbody > tr > th:first-child::before { display: none; }
    /* …except a row NUMBER, which needs its "№" to read as one (the fleet sheet). */
    table[data-m-reflow] > tbody > tr > td.agency-td-num:first-child::before { display: inline; }
    /* A long value (mobile-tables.js marks it) takes the full width rather than half. */
    table[data-m-reflow] > tbody > tr > td[data-m-wide] { grid-column: 1 / -1; }
    /* THE NUMBER DOES NOT BREAK (2026-10-13). The second cell of a customer's entry list is the
       phone number, the email address, the address type or the date — "(630) 291-3572" with
       its label in front is 155px, and the half-width cell is 143: every number on the page
       was split "(630) 291-" over "3572". Full width; the two ticks then share the next row. */
    .agency-entry-table[data-m-reflow] > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; }
    /* No heading (its buttons), or spanning the row: full width, no label. */
    table[data-m-reflow] > tbody > tr > td[data-label=""],
    table[data-m-reflow] > tbody > tr > td[colspan],
    table[data-m-reflow] > tbody > tr > td:only-child {
        grid-column: 1 / -1;
    }
    table[data-m-reflow] > tbody > tr > td[data-label=""]::before,
    table[data-m-reflow] > tbody > tr > td[colspan]::before,
    table[data-m-reflow] > tbody > tr > td:only-child::before { display: none; }
    /* The row's buttons sit in a line. Not a cell spanning the row: that one holds whatever the
       row unfolds into (Predictive's inspection list — a table of its own). */
    table[data-m-reflow] > tbody > tr > td[data-label=""]:not([colspan]) {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }
    /* A row that is only a group heading or a message reads as a heading, not a card. */
    table[data-m-reflow] > tbody > tr:has(> td:only-child) {
        display: block !important;
        padding: 4px 2px !important;
        border: 0 !important;
        background: transparent !important;
    }
    /* No stripes inside a card. Dark mode stripes every other table row's cells
       (body.theme-dark tbody tr:nth-child(even) td), which in a card painted a dark bar behind
       each value; this out-ranks it. */
    html body table[data-m-reflow][data-m-reflow] > tbody > tr > :is(td, th),
    html body table[data-m-reflow][data-m-reflow] > tbody > tr:nth-child(even) > :is(td, th),
    html body table[data-m-reflow][data-m-reflow] > tbody > tr:hover > :is(td, th) {
        background: transparent !important;
    }
    /* Text in a card wraps, whatever the table said about it (the admin's access summaries
       were nowrap pills that ran past the card). */
    table[data-m-reflow] td :is(span, a, strong, em, small, code, div, p, label) {
        white-space: normal !important;
        max-width: 100%;
        overflow-wrap: break-word;
    }
    /* Fields in a card fill their half. */
    table[data-m-reflow] td input:not([type="checkbox"]):not([type="radio"]),
    table[data-m-reflow] td select {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* The box a table scrolled sideways in has nothing left to scroll sideways, and the cards
       carry their own borders. Its HEIGHT is kept: a long list capped in a panel that scrolls
       down (Predictive's inspections) must stay capped, or a phone gets a 27,000px page. */
    [data-m-reflow-wrap] {
        border: 0 !important;
        background: transparent !important;
    }

    /* ── 7. The fleet: four columns of text, a row opened with a tap ─────────
       (the owner, 2026-10-05: "Vehicles and drivers lists are big cards, instead make it into a
       table and show Year, Make, Model, VIN.") agency.js draws the built-in Vehicles and Drivers
       sheets and their Removed archive as Year · Make · Model · VIN or Name · DOB · License # ·
       State in plain text (AGENCY_PHONE_COLUMNS), and the carrier's own Fleet page does the same
       (portal.js); data-compact marks both, data-no-reflow keeps them out of section 6. */
    .agency-fleet-taphint.is-on {
        display: block;
        margin: 0 0 6px;
        font-size: var(--fs-xs);
    }
    table[data-compact] {
        table-layout: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* 13px, the floor: four columns of a fleet across 290px, and a make as long as
       "International" still whole on its line. */
    table[data-compact] :is(th, td) {
        padding: 8px 5px !important;
        vertical-align: top;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: break-word;
        word-break: normal;
        font-size: var(--fs-xs) !important;
        line-height: 1.3;
    }
    table[data-compact] th { vertical-align: bottom; }
    table[data-compact] .agency-cell-text { display: block; }
    /* Codes, not words, in a fixed-width face. A VIN is two lines split where the number splits
       (agency.js agencyVinHtml); one that is not 17 characters, and a licence number, break
       where the line ends — a licence number at its hyphens first. */
    table[data-compact] td:is([data-fkey="vin"], [data-fkey="licenseNumber"]) {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    /* …but not what rides under them (a removal date, a waiting request). */
    table[data-compact] :is(.agency-cell-sub, .fleet-m-only) { font-family: var(--font-family-sans-serif, system-ui, sans-serif); }
    table[data-compact] .fleet-vin > span { display: block; white-space: nowrap; }
    table[data-compact] .fleet-vin-raw { word-break: break-all; }
    table[data-compact] td[data-fkey="licenseNumber"] { overflow-wrap: anywhere; }
    /* A screen narrower than the four columns' shortest (a 320px phone with a long make): the
       table scrolls in its own box rather than pushing the page sideways. */
    .agency-table-wrap:has(> table[data-compact]) { overflow-x: auto; }
    table[data-compact] td[data-fkey="year"] { white-space: nowrap !important; }
    table[data-compact] .agency-cell-sub {
        display: block;
        margin-top: 2px;
        font-size: var(--fs-xs);
        word-break: normal;
        color: var(--text-soft, #475569);
    }
    table[data-compact] tbody tr[data-index],
    table[data-compact] tbody tr[data-fleet-row] { cursor: pointer; }
    table[data-compact] tbody tr[data-index]:active > td,
    table[data-compact] tbody tr[data-fleet-row]:active > td {
        background: var(--surface-sunken, rgba(100, 116, 139, 0.12)) !important;
    }
    /* ── 8. The planner: a task is two lines, opened with a tap ──────────────
       Its words across the whole width; under them, its status on the left and when it is due on
       the right. As three columns (Task · Status · Due) the words had only what Status and Due
       left over — 108px at 390, 78px at 360 — and a renewal ("Renewal: MOBILE LAYOUT TRUCKING
       LLC — Auto Liability", its carrier and policy number under it) stood a word to a line, a
       row 450px tall (2026-10-07). The row's controls give way to their read-only twins
       (.planner-txt), the date says "Due" itself (.planner-m-label), and the opened task carries
       every field (.planner-m-only), so nothing is out of reach. */
    .planner-table :is(.planner-col-owner, .planner-col-timeline, .planner-col-priority, .planner-col-files) { display: none !important; }
    .planner-table, .planner-table > tbody { display: block; width: 100%; }
    .planner-table > thead { display: none; }
    .planner-table tr.planner-row {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
        border-bottom: 1px solid var(--border-subtle);
    }
    /* The ROW is shaded, not its cells: cells of different heights (a one-line chip beside a date
       with its overdue note) left unshaded bands between them. */
    .planner-table tr.planner-row:is(:hover, .is-open) { background: var(--surface); }
    .planner-table tr.planner-row:is(:hover, .is-open) > td { background: transparent; }
    .planner-table tbody tr.planner-row:last-child { border-bottom: 0; }
    .planner-table tr.planner-row > td { display: block; min-width: 0; border-bottom: 0; padding: 0.15rem 0.6rem 0.6rem; }
    .planner-table tr.planner-row > td.planner-col-desc { grid-column: 1 / -1; padding: 0.6rem 0.6rem 0.35rem; }
    .planner-table tr.planner-row > td.planner-col-due { text-align: right; }
    .planner-table tr.planner-detail, .planner-table tr.planner-detail > td { display: block; }
    .planner-row .planner-txt .planner-m-label { display: inline; margin-right: 0.3em; }
    .planner-row .planner-m-hide { display: none; }
    .planner-row .planner-ctl,
    .planner-row .agency-datewrap { display: none !important; }
    .planner-row .planner-txt { display: inline-flex; }
    .planner-row .planner-chip { min-height: 0; padding: 0.2rem 0.4rem; font-size: var(--fs-xs); }
    .planner-row .planner-subcount { display: none; }
    .planner-detail > td { padding: 0.7rem 0.6rem 0.8rem; }
    .planner-drawer-fields { grid-template-columns: 1fr 1fr; }
    .planner-drawer-fields .planner-field-desc { grid-column: 1 / -1; }
    .planner-m-only { display: flex; }
    .planner-sub { grid-template-columns: 7rem minmax(0, 1fr) auto; }
    .agency-planner-tools { width: 100%; }
    .agency-planner-tools > .agency-btn { flex: 1 1 0; }

    /* The phone-only pieces of the carrier's Fleet page (a waiting request, under the VIN). */
    table[data-compact] .fleet-m-only { display: block; margin-top: 4px; }
    table[data-compact] .fleet-row-actions,
    table[data-compact] th:is(.fleet-col-unit, .fleet-col-added, .fleet-col-actions),
    table[data-compact] td:is(.fleet-col-unit, .fleet-col-added) { display: none !important; }
    /* …a truck's new unit number waiting on the agency rides there too, in its own colour (2026-10-21). */
    table[data-compact] .agency-cell-sub.agency-unitreq-sub { color: var(--warning-ink); font-weight: var(--fw-semibold); }
    /* …so the tapped row's dialog is the only way to a removal here, and its link and the fleet
       dialogs' × are a thumb's size, 44px (2026-10-21, the UI verifier: they were 32 and 12×18). The
       ×'s negative margin keeps the head as tall as its words. */
    #fleetAskSwitch { min-height: 44px; }
    /* …and so are Download PDF, Amend unit numbers, the amend bar's buttons and the fleet dialogs' Send
       and Cancel (2026-10-21, the UI verifier: 40px, the site's button height, under the 44px a thumb
       needs). #pageContent: the 40px is design-system.css's #pageContent .agency-btn. */
    #pageContent :is(#fleetPdfBtn, #fleetAmendBtn, #fleetAmendCancel, #fleetAmendSubmit),
    :is(#fleetAmendModal, #fleetAskModal) .agency-modal-foot .agency-btn { min-height: 44px; }
    :is(#fleetAmendModal, #fleetAskModal) .agency-modal-close {
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
        min-width: 44px; min-height: 44px; margin: -10px -12px -10px 0;
    }
    /* AMENDING UNIT NUMBERS ON A PHONE (2026-10-21, the owner: "amend multiple unit numbers"): the
       table becomes a list of the same boxes, each under the truck it names (portal.js
       .fleet-amend-what), at 16px so the phone does not zoom into it, and a thumb's height. */
    .fleet-amend-table, .fleet-amend-table tbody { display: block; width: 100%; }
    .fleet-amend-table thead { display: none; }
    /* The row's room is the cell's own padding, so a band drawn on the cell (dark mode's zebra) is the whole
       row's, not just its words and box (2026-10-21, the UI verifier). */
    .fleet-amend-table tr { display: block; padding: 0; border-top: 1px solid var(--border-subtle); }
    .fleet-amend-table tr:first-child { border-top: 0; }
    .fleet-amend-table td { display: none; }
    .fleet-amend-table td.fleet-amend-cell { display: block; width: auto; min-width: 0; padding: var(--space-3) var(--space-2); border: 0; }
    .fleet-amend-what { display: block; margin-bottom: var(--space-1); font-size: var(--fs-sm); color: var(--text-body); overflow-wrap: anywhere; }
    #pageContent .fleet-amend-table input.fleet-amend-input { font-size: 16px; min-height: 44px; }
    .fleet-amend-actions { width: 100%; }
    .fleet-amend-actions .agency-btn { flex: 1 1 0; }
    .fleet-list-tools .fleet-amend-btn { flex: 1 1 auto; }
    /* A request on a phone: its answer and Withdraw go under its words rather than beside them (2026-10-21):
       beside, a unit-number change's trucks stood a word to a line and the email split mid-word. */
    .fleet-req { flex-direction: column; gap: var(--space-2); }
    .fleet-req-side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
    .fleet-req-main { max-width: 100%; }
    .fleet-req-main .portal-note { overflow-wrap: anywhere; }
    /* A thumb's size, 44px, for Withdraw, the review's Approve ticks and its × and buttons too (2026-10-21,
       the UI verifier: 32px, 32px and 12×18 — the review's from HEAD). */
    .fleet-req-side .agency-linkbtn[data-fleet-withdraw] { display: inline-flex; align-items: center; min-height: 44px; }
    .agency-unitreq-tick { min-height: 44px; }
    #agencyFleetReqModal .agency-modal-foot .agency-btn,
    #agencyFleetReqModal .agency-fleetreq-actions .agency-btn { min-height: 44px; }
    #agencyFleetReqModal .agency-modal-close {
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
        min-width: 44px; min-height: 44px; margin: -10px -12px -10px 0;
    }

    /* The "report loading / ready" card (modules/report-loading.js): the width of the screen
       inside the 16px gutter, not a 380px box against its right edge. */
    .report-load-notice { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* Small phones: the scale steps down once more at the top end only. */
@media (max-width: 380px) {
    :root {
        --fs-2xl: 1.25rem;     /* 20 */
        --fs-3xl: 1.5rem;      /* 24 */
    }
    .agency-block-actions > .agency-btn,
    .agency-block-actions > button {
        flex-basis: 100%;
    }
}

/* ── The foot of every page, and What's changed, on a phone (2026-10-12) ───────────── */
@media (max-width: 640px) {
    #toolContainer > .az-content.app-dashboard-content { min-height: calc(100vh - 80px - 30rem); }
    .site-footer-inner { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem 16px 1rem; }
    .site-footer-bar { padding: 0.6rem 16px; flex-direction: column; gap: 0.15rem; text-align: center; }
    .site-footer-bar .site-footer-sep { display: none; }
    .report-change-row { grid-template-columns: 1fr; gap: 0.4rem; }
    .report-change-row.is-new { padding-left: 0.5rem; }
    .report-change-chip { white-space: normal; }
    .agency-adjust-status { min-width: 0; }
}

/* ── Analytics: the carrier history's charts on a phone (2026-10-14) ──────────────────────
   Each metric's name and figure go ABOVE its chart, on one line: beside it, a 9.5rem column left
   the chart a third of the screen. The window control's slider takes the first line to itself;
   Earlier, Later and the months share the next. */
@media (max-width: 640px) {
    .ch-mc-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
    .ch-mc-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; padding-top: 0; }
    .ch-mc-row.is-strip { margin-bottom: 0.35rem; }
    .ch-mc-plot { height: 84px; }
    .ch-mc-row.is-last .ch-mc-plot { height: 108px; }
    .ch-window { gap: 0.45rem 0.5rem; }
    .ch-window-range { order: 1; flex: 1 1 100%; max-width: none; }
    .ch-window-step { order: 2; }
    .ch-window-label { order: 3; flex: 1 1 auto; text-align: right; }
}

/* ── Pending certificates' Remove all on a phone (2026-10-25) ────────────────────────────
   Both buttons on one line, the mailbox's state under them, so Remove all is not left beside a
   sentence; every press a thumb's size, 44px — Check the mailbox beside it too, and the card's way
   in whether Remove all is there or not, so one line of presses is one height; and the question's
   two answers stacked, No first, each the dialog's width — side by side, "Yes, remove all 12" was
   wider than half a phone. */
@media (max-width: 640px) {
    .agency-req-tools #agencyRequestsState { order: 3; flex: 1 1 100%; }
    #pageContent #agencyRequestsRemoveAllBtn,
    #pageContent #agencyRequestsRefreshBtn,
    #agencyDashHost .agency-req-removeall,
    #agencyDashHost [data-dash-card="requests"] .agency-dash-foot [data-dash-open="requests"] { min-height: 44px; }
    #agencyRequestsClearModal .agency-modal-actions { flex-direction: column; width: 100%; margin-left: 0; }
    #pageContent #agencyRequestsClearModal .agency-modal-actions .agency-btn { width: 100%; min-height: 44px; white-space: normal; }
    /* …and the × on the line saying what it came to (2026-10-25, review): the shared one is 16px. A
       thumb's square here, pulled into the line's own padding, so the line hardly grows for it. */
    #agencyRequestsClearSaid .agency-status-close {
        min-width: 44px; min-height: 44px; margin: -0.55rem -0.85rem -0.55rem 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
}