/*
 * The mobile foundation (10/18): everything that makes the site fit a
 * phone and a tablet, in one file, loaded after stylesheet.css.
 *
 * Breakpoints (lib/breakpoints.ts holds the same numbers):
 *   phone    max-width: 639px
 *   tablet   640px to 1024px
 *   desktop  1025px and up — nothing in this file applies there
 *
 * The bar (decided 10/16): 375px phone and 768px tablet, portrait and
 * landscape; no sideways page scroll; tap targets 44px; inputs 16px so
 * iOS does not zoom; every desktop action available. check/qa/mobile.js
 * measures every route against it.
 *
 * Rules that override a page's own stylesheet carry a `body` prefix so
 * they win on specificity whichever file the browser loaded last.
 *
 * Every query is `screen and`: a printed page is 720–960px wide and
 * would otherwise take the tablet rules (review, 10/19). lib/breakpoints.ts
 * keeps the width part alone; matchMedia runs on a screen.
 */

/* =========================================================
   Phone and tablet: tap targets and inputs
   ========================================================= */
@media screen and (max-width: 1024px) {
    /*
     * iOS zooms into any field under 16px. max() keeps a field that is
     * already larger; the header's module picker and the grid search
     * boxes come up from their 0.85rem.
     */
    /*
     * !important because several pages size their own fields by id
     * (#users-grid .k-input-inner, #header-module, #mfa-exempt), and no
     * page may put a field under 16px on a touch screen.
     */
    body input:not([type=checkbox]):not([type=radio]):not([type=range]),
    body select,
    body textarea,
    body .k-input-inner {
        font-size: max(1em, 16px) !important;
    }

    body .btn,
    body button:not(.lcs-grid-resizer),
    body select,
    body input[type=text],
    body input[type=search],
    body input[type=date],
    body input[type=number],
    body input[type=email],
    body input[type=url],
    body input[type=password],
    body input[type=datetime-local],
    body input[type=tel],
    body [role=button] {
        min-height: 44px;
    }

    body input[type=checkbox],
    body input[type=radio] {
        width: 22px;
        height: 22px;
        margin: 11px 8px 11px 0;
        vertical-align: middle;
    }

    /*
     * Phase 6 (10/19): the last controls under 44px, each the tap the
     * check found. Short text links (Reset filters, Open project notes,
     * the settings rows' Rename / Amount / Retire, the dashboards'
     * link buttons) become 44px boxes; buttons are at least 44px wide
     * (the $ / % toggles, the pager, the ⋮ menu, the × of a modal); the
     * grids' header anchors and search box, the request list's sort
     * buttons and the proofreading actions are 44 on a tablet too.
     */
    body a.reset,
    body a.open,
    body a.link-btn,
    body .quick-amount a,
    body .row-actions a,
    body td.row-actions a,
    body .chip-remove,
    body table.no-cards .project-link,
    body .instructions-tip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }

    body button:not(.lcs-grid-resizer),
    body [role=button]:not(.instructions-tip) {
        min-width: 44px;
    }

    /* The hint keeps its 44px hit area without growing the label's line (review, 10/19). */
    body .instructions-tip {
        vertical-align: middle;
        margin-top: -13px;
        margin-bottom: -13px;
    }

    body .money-input input,
    body input.money-input {
        min-width: 72px;
    }

    body .lcs-grid .k-input-inner,
    body .lcs-grid .action-cell .btn,
    body .lcs-grid .action-buttons .btn,
    body .lcs-grid .action-buttons button {
        min-height: 44px !important;
    }

    body .lcs-grid th a.k-link {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
    }

    body .lcs-grid .k-grid-filter-menu {
        width: 44px;
        height: 44px;
    }

    body .lcs-grid .k-pager .k-button {
        min-width: 44px !important; /* #users-grid .k-pager .k-button sets 30px by id */
        height: 44px;
    }

    body .projects-table .main-table th .sort-header {
        min-width: 44px;
        min-height: 44px;
    }

    body .modal-close,
    body .auth-modal-close,
    body .menu-trigger {
        min-width: 44px;
        min-height: 44px;
    }

    /* The rows' ⋮ menu items (Activate, Lock, Delete) are 44px rows. */
    body .menu-popover .menu-item {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* The nav bar's items, which were 8px 16px around 16px text (40px). */
    header nav ul li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /*
     * Nothing scrolls the page sideways; a wide table scrolls inside its
     * wrapper. On html only: on body it would make body the scroll
     * container and unstick the header. check/qa/mobile.js still reads
     * the document's real width, so this hides nothing from it.
     */
    html {
        overflow-x: hidden;
    }
}

/* =========================================================
   Tablet: the desktop header, tightened
   ========================================================= */
@media screen and (min-width: 640px) and (max-width: 1024px) {
    #main-header {
        padding: 1rem 1.2rem;
    }

    .header-col-1 {
        margin-right: 1.2rem;
    }

    /* The divider column gives way; the account column keeps its natural width, up to half the bar. */
    .header-col-2 {
        flex: 1 1 0;
        width: auto;
        min-width: 12px;
        padding-right: 1.2rem;
    }

    .header-col-3 {
        flex: 0 1 auto;
        width: auto;
        max-width: 52%;
        padding-left: 1.2rem;
    }

    header nav {
        padding: 8px 10px;
    }

    /* The account line's links (User Guide | Profile Settings | Logout) are 44px tall on a tablet. */
    .header-col-3 a,
    .header-col-3 .logout {
        display: inline-block;
        box-sizing: border-box;
        min-width: 44px;
        padding: 13px 4px;
        text-align: center;
    }

    /*
     * The shared tables are table-layout: fixed at 100%: squeezed to a
     * tablet they lose their title column, the one column without a
     * width of its own. The title column gets a width too, so the table
     * is as wide as its columns and scrolls inside .table-scroll. On a
     * phone the rows are cards instead (10/19: projects-table.css,
     * data-grid.css).
     */
    body .table-scroll > table.main-table th.col-title {
        width: 260px;
    }

    body .lcs-grid .table-scroll > table {
        min-width: 800px;
    }

    /*
     * The content column (the 75% item) may shrink below its widest
     * child: without this, System Settings' column kept its content's
     * 652px and ran the page to 973px at 768 (phase 5, 10/19). What is
     * too wide inside then scrolls or wraps in its own rule. The 25%
     * side columns keep their min-content width (review, 10/19).
     */
    body .main-content > .main-item-75 {
        min-width: 0;
    }
}

/* =========================================================
   Phone: the compact header and the slide-out menu
   ========================================================= */
@media screen and (max-width: 639px) {
    #main-header {
        gap: 10px;
        padding: 8px 12px;
    }

    .header-col-1 {
        flex: 1 1 auto;
        gap: 10px;
        margin-right: 0;
        min-width: 0;
    }

    .header-col-1 img {
        height: 36px;
    }

    .header-col-1 #logo-text {
        white-space: normal;
    }

    .header-col-1 #logo-text .logo-org {
        font-size: 0.6rem;
    }

    .header-col-1 #logo-text .logo-product {
        font-size: 1rem;
        line-height: 1.15;
    }

    /* The desktop header's account column and divider live in the drawer instead. */
    .header-col-2,
    #main-header > .header-col-3 {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
        padding: 0 10px;
        border: 1px solid var(--nm-primary-navy);
        border-radius: 4px;
        background: var(--nm-primary-navy);
        color: #fff;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
    }

    .nav-toggle:hover,
    .nav-toggle:focus-visible {
        background: var(--nm-secondary-blue);
        border-color: var(--nm-secondary-blue);
    }

    .nav-toggle .nav-toggle-icon {
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
    }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 190;
        background: rgba(29, 39, 51, 0.55);
    }

    /* The nav bar becomes the drawer: off the right edge until opened. */
    header nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 195;
        width: min(320px, 86vw);
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3);
        transform: translateX(105%);
        transition: transform 0.2s ease-out;
        visibility: hidden;
    }

    header nav.open {
        transform: none;
        visibility: visible;
    }

    @media (prefers-reduced-motion: reduce) {
        header nav {
            transition: none;
        }
    }

    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 10px 10px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        font-weight: 700;
    }

    .nav-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #fff;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
    }

    .nav-drawer-close:hover,
    .nav-drawer-close:focus-visible {
        background: rgba(255, 255, 255, 0.15);
    }

    header nav ul {
        padding: 8px;
    }

    header nav ul li {
        display: block;
    }

    header nav ul li a {
        padding: 10px 12px;
    }

    .nav-drawer-account {
        padding: 12px 8px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .nav-drawer-account .nav-drawer-user {
        display: block;
        padding: 6px 12px 10px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .nav-drawer-account a,
    .nav-drawer-account .logout {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 4px;
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

    .nav-drawer-account a:hover,
    .nav-drawer-account a:focus-visible {
        background: var(--nm-surface);
        color: var(--nm-primary-navy);
    }

    .nav-drawer-account .nav-drawer-module {
        display: block;
        padding: 6px 12px 10px;
    }

    .nav-drawer-account .nav-drawer-module label {
        display: block;
        margin-bottom: 4px;
        font-size: 0.8rem;
        opacity: 0.85;
    }

    .nav-drawer-account select {
        width: 100%;
        max-width: none;
        padding: 8px 10px;
    }

    .nav-drawer-account .header-contact {
        margin-top: 12px;
        padding: 0 12px;
        color: rgba(255, 255, 255, 0.8);
        text-align: left;
    }

    .nav-drawer-account .header-contact a {
        display: inline;
        min-height: 0;
        padding: 0;
        color: #fff;
        text-decoration: underline;
    }

    body.nav-open {
        overflow: hidden;
    }

    /* =====================================================
       Phone: page frame, modals and toasts
       ===================================================== */
    .page-title {
        padding: 1rem 1.2rem;
    }

    /* The 1000px side drawers (.modal-content and its copies) fill the screen. */
    body .modal-content,
    body .modal-content-unpaid,
    body .modal-content-correction,
    body .modal-content-entity {
        width: 100vw;
        padding: 1.2rem;
    }

    /* The centered cards (ConfirmModal, NativeDialog, sign-in, change request): off the edges, never taller than the screen. */
    body .modal-backdrop,
    body .change-dialog-backdrop {
        padding: 12px;
    }

    body .modal-card,
    body .modal-card.wide,
    body .lcs-dialog,
    body .auth-modal-card,
    body .change-dialog {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 18px 16px 16px;
        overflow-y: auto;
    }

    body .lcs-dialog-backdrop {
        padding: 12px;
    }

    body .modal-actions,
    body .lcs-dialog-actions {
        flex-wrap: wrap;
    }

    body .modal-actions .btn,
    body .lcs-dialog-actions .btn {
        flex: 1 1 auto;
    }

    /* One toast style across the pages: a full-width strip under the top edge. */
    body .toast,
    body #toast {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
        text-align: center;
    }

    /*
     * A table that stays a table (no-cards: the Allocations grids, by
     * the 10/16 decision) scrolls inside itself. Shown as a block it
     * keeps its rows and cells but gains a scrollbar of its own, so it
     * never pushes the page wide. Until CardTables has run, every
     * hand-built table is in this state too.
     */
    body table:not(.cards):not(.table-scroll > table):not(.lcs-grid table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* =====================================================
       Phone: every hand-built table is cards (10/19, phase 3)
       =====================================================
       CardTables marks a table .cards and stamps each cell's column
       header on it as data-label. The same markup: the table, rows and
       cells become blocks; each row a card, each cell a field with its
       label over the value; a cell spanning columns (a message, a
       total's caption) spans the card; a cell holding a button, a
       select box or row actions spans it too. Header cells that do
       something (a sort button, a select-all box) form a chip strip;
       the rest are the labels on the cards. The shared tables have
       the same rules in their own stylesheets (projects-table.css,
       data-grid.css). */
    body table.cards,
    body table.cards > thead,
    body table.cards > tbody,
    body table.cards > tfoot {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
        overflow: visible;
        border: 0;
    }

    body table.cards > colgroup {
        display: none;
    }

    body table.cards > thead > tr {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body table.cards > thead > tr::before {
        content: "Sort";
        flex: 0 0 auto;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--nm-text-secondary);
    }

    body table.cards > thead:not(:has(button, input, [role=button])) {
        display: none;
    }

    body table.cards > thead th {
        display: none;
    }

    body table.cards > thead th:has(button, input, [role=button]) {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        width: auto;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--nm-border);
        border-radius: 999px;
        background: var(--nm-surface);
        color: var(--nm-text-primary);
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: visible;
    }

    body table.cards > thead th button {
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
    }

    body table.cards > tbody > tr,
    body table.cards > tfoot > tr {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px 12px;
        margin: 0 0 10px;
        padding: 12px 14px !important;
        border: 1px solid var(--nm-border) !important;
        border-radius: 6px;
        background: var(--nm-surface) !important;
    }

    body table.cards > tfoot > tr {
        background: var(--nm-background) !important;
        font-weight: 700;
    }

    /* A total row reads as a caption and its numbers; its cells need no labels, and the caption spans the card. */
    body table.cards > tfoot > tr > td::before {
        display: none;
    }

    body table.cards > tfoot > tr > td:first-child {
        grid-column: 1 / -1;
    }

    /*
     * !important on the shape: the pages style their cells by class
     * (.dist-table td { border-bottom }, .funding-table td.numeric
     * { text-align: right }) in stylesheets loaded after this one.
     */
    body table.cards > tbody > tr > td,
    body table.cards > tfoot > tr > td,
    body table.cards > tbody > tr > th {
        display: block !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        vertical-align: top;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }

    body table.cards > tbody > tr > td:empty {
        display: none !important;
    }

    body table.cards :where(td[data-label]:not([data-label=""]))::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--nm-text-secondary);
    }

    /* A spanning cell, or one holding a button, a field or the row's actions, takes the whole card. */
    body table.cards td[colspan],
    body table.cards td:has(> button, > .btn, > a.btn, > select, > textarea, > input:not([type=checkbox]), > .row-actions, > .action-cell, > .action-buttons, > .rank-cell),
    body table.cards td.row-actions,
    body table.cards td.actions,
    body table.cards td.fix,
    body table.cards td.details,
    body table.cards td.empty,
    body table.cards td.empty-cell {
        grid-column: 1 / -1;
    }

    body table.cards td.row-actions::before,
    body table.cards td:has(> button, > .btn, > a.btn, > .row-actions, > .action-cell, > .action-buttons)::before {
        display: none;
    }

    body table.cards td.row-actions,
    body table.cards td > .row-actions,
    body table.cards td > .action-cell,
    body table.cards td > .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    body table.cards td > .btn,
    body table.cards td > button,
    body table.cards td > a.btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    body table.cards td > input:not([type=checkbox]):not([type=radio]),
    body table.cards td > select,
    body table.cards td > textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /* A select box leads its card, top right of the first field. */
    body table.cards td.select,
    body table.cards td.select-cell,
    body table.cards td:has(> input[type=checkbox]:only-child) {
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto;
    }

    body table.cards td.select::before,
    body table.cards td.select-cell::before,
    body table.cards td:has(> input[type=checkbox]:only-child)::before {
        display: none;
    }

    body table.cards tr:has(> td.select, > td.select-cell, > td:has(> input[type=checkbox]:only-child)) > td:not(.select):not(.select-cell):first-of-type {
        padding-right: 36px;
    }

    body table.cards td input[type=checkbox] {
        margin: 0;
    }


}

/* =========================================================
   Phone and tablet: the table-scroll wrapper
   =========================================================
   Only under 1024px: a scrolling wrapper clips on both axes, and the
   DataGrid draws its column filter menu absolutely inside a header
   cell, which a scrolling wrapper would cut off on the desktop (review,
   10/18). On a tablet the menu is clipped the same way (phase 5); on a
   phone the grid is cards and the menu a bottom sheet (10/19). */
@media screen and (max-width: 1024px) {
    .table-scroll {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   Phone: the detail and record pages (10/19, phase 4)
   =========================================================
   The side-by-side layouts stack, the stat rows go two across, the
   tab strips scroll sideways instead of wrapping, and the statewide
   record's step list becomes a strip. (stylesheet.css also carries the
   old site's ul.tabs and #icip-project-details rules; no React page
   renders that markup, so nothing here for them.) Only under 640px: a tablet keeps
   the desktop layout (the 10/16 decision). */
@media screen and (max-width: 639px) {
    /*
     * The 25/75 (and 50/50) content rows: stylesheet.css lays them out
     * as a flex row that never wraps, so the side panel sat off the
     * right edge (the project pages were 560px wide, collaboration
     * 413px). Each item is the full width, one under the other.
     */
    body .main-content {
        flex-wrap: wrap;
    }

    body .main-content > .main-item {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        padding: 1.2rem;
        border-right: 0;
        border-bottom: 1px solid var(--nm-border);
    }

    body .main-content > .main-item:last-child {
        border-bottom: 0;
    }

    /*
     * The allocation panel keeps its place after the record (drawing it
     * first would put the screen out of step with the Tab order —
     * review, 10/19) and no longer sticks. A side item whose only child
     * is hidden (the panel on a project that was not found) would be an
     * empty strip; it goes.
     */
    body .allocation-panel {
        position: static;
    }

    body .main-content > .main-item:has(> [style*="display: none"]:only-child) {
        display: none;
    }

    /*
     * The stat rows (.dash-item-container: Total Funding, Allocated,
     * Remaining, Projects with Funding above the legislator and
     * governor lists; the review page's figures): two across, since
     * four 25% cells wrapped every label and still ran 6px over.
     */
    body .dash-item-container {
        flex-wrap: wrap;
    }

    body .dash-item-container > .dash-item {
        box-sizing: border-box;
        flex: 0 0 50%;
        width: 50%;
        padding: 1rem 1.2rem;
        font-size: 1.5rem;
        border-right: 1px solid var(--nm-border);
    }

    body .dash-item-container > .dash-item:nth-child(2n) {
        border-right: 0;
    }

    body .dash-item-container > .dash-item:nth-child(n + 3) {
        border-top: 0;
    }

    /* The project page's three funding figures: one across each, so the labels read on one or two lines. */
    body .kpi-row {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Tab strips (DetailTabs on the project, record and ICIP pages)
     * scroll sideways in one row instead of wrapping into two. A thin
     * scrollbar stays as the cue that there is more to the right.
     */
    body .detail-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    body .detail-tabs a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* The statewide record's step list: a strip across the top, not a sticky column. */
    body .sw-steps {
        display: flex;
        position: static;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    body .sw-steps li {
        flex: 0 0 auto;
        border-bottom: 0;
        border-right: 1px solid var(--nm-border);
    }

    body .sw-steps li:last-child {
        border-right: 0;
    }

    body .sw-steps a {
        white-space: nowrap;
    }

    body .sw-steps li.active a {
        border-left: 0;
        padding-left: 16px;
        box-shadow: inset 0 -4px 0 var(--nm-accent-gold);
    }

    /* Two- and three-column field grids go to one column. */
    body .sw-fields,
    body .sw-form,
    body .gov-position {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   Phone and tablet: the request form (10/19, phase 5)
   ========================================================= */
@media screen and (max-width: 1024px) {
    /*
     * The field hints' hover bubbles (340px, absolute) ran off the
     * right edge and widened the page (562px on a phone, 1022px on a
     * tablet) while hidden. A touch screen cannot hover; a tap on the
     * icon opens the same text in the instructions side panel, so the
     * bubble goes.
     */
    body .instructions-tip .instructions-bubble {
        display: none;
    }

    body .info-panel-close {
        width: 44px;
        height: 44px;
    }

    /*
     * The page title's floated status ("Not submitted", .last-saved)
     * hangs below its section until the form hydrates, and the content
     * row (a flex container, so a block formatting context) shrank to
     * fit beside it: 269px of 375 for the first seconds. The row clears.
     */
    body .main-content {
        clear: both;
    }
}

@media screen and (max-width: 639px) {
    /* The floated field pairs and triples (stylesheet.css .width-50/-33/-25) go one under the other. */
    body .width-50,
    body .width-33,
    body .width-25 {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    /* The hint icon is a tap target. */
    body .instructions-tip .instructions-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    /* Other funding sources: the source, amount and remove link wrap instead of squeezing into one row. */
    body .funding-row {
        flex-wrap: wrap;
    }

    body .funding-row .form-item {
        flex: 1 1 100%;
    }

    /* The form's Save / Submit buttons share the width. */
    body .wizard-footer {
        flex-wrap: wrap;
    }

    body .wizard-footer .btn {
        flex: 1 1 auto;
        text-align: center;
    }

    /* The instructions side panel fills the screen but for a strip to tap out on. */
    body .info-panel {
        width: min(360px, 88vw);
        padding: 16px 18px;
    }
}

/* 10/19 (mobile fixes): the stage tabs (Submitted Requests, Proofreading) scroll sideways in their strip instead of shrinking into each other; each tab keeps its width. */
@media screen and (max-width: 639px) {
    body .request-tabs {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    body .request-tabs .request-tab {
        flex: 0 0 auto;
        min-width: 0;
    }
}