/* The phone pass.
 *
 * One file for every page, loaded after each page's own stylesheet, so the
 * answer to "what does this app do on a phone" lives in one place instead
 * of five interpretations of it.
 *
 * The principle throughout: on a phone, chrome shrinks and data does not.
 * A member in a temple foyer wants the four number boxes and the save
 * button; the heading, the buttons and the padding are what give ground to
 * make room. The dashboards keep their charts -- a phone dashboard that
 * drops the data to fit is a page that no longer answers the question that
 * opened it -- but every chart takes the full width and the decoration
 * around it thins out.
 *
 * Three sizes matter and are used consistently:
 *   640px  -- the phone pass proper
 *   400px  -- small phones; type steps down once more
 *   44px   -- the minimum touch target, everywhere, no exceptions
 */

@media (max-width: 640px) {

    /* ---- the page itself ------------------------------------------------ */

    .container {
        padding: var(--spacing-xs);
    }

    /* Cards lose most of their costume. The border radius and the shadow
     * mean something when cards float in a wide page; edge to edge on a
     * phone they are just margin the data cannot use. */
    .card {
        padding: var(--spacing-md) var(--spacing-sm);
        border-radius: 6px;
        margin-bottom: var(--spacing-sm);
    }

    .card h2 {
        font-size: 1.15em;
    }

    /* ---- the heading ---------------------------------------------------- */

    .app-header {
        padding: var(--spacing-md) var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .app-header h1 {
        font-size: 1.35em;
        line-height: 1.2;
    }

    /* The buttons become one row that scrolls sideways under the title,
     * instead of wrapping into a stack four rows tall. A phone heading
     * that is half the viewport before any data arrives is the single
     * biggest thing wrong with a desktop layout on a phone -- and a
     * scrolling row keeps every control reachable without costing more
     * than one line.
     *
     * The gradient on the right edge is the affordance: a row that can
     * scroll and does not look like it is how controls get lost. */
    .header-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Visible, and thin. It was hidden, which was fine while the row held
         * four buttons and the fade at the right edge was enough of a hint.
         * It now holds a dozen, and a scrolling row with no scroll bar and no
         * cut-off button at the edge is simply a row that appears to end --
         * which is how a member came to be stuck in dark mode on a phone,
         * with the theme toggle two-thirds of the way along a row they had no
         * reason to think could move. */
        scrollbar-width: thin;
        width: 100%;
        margin-top: 0;
        padding-bottom: 2px;
        /* Ends further in, so a partly-cut button shows rather than fading to
         * nothing exactly where the evidence of more would be. */
        mask-image: linear-gradient(90deg, #000 86%, transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    }

    /* Safari and Chrome need the same thing said the other way. Slim and
     * low-contrast, so it is an affordance rather than furniture. */
    .header-actions::-webkit-scrollbar {
        height: 4px;
    }

    .header-actions::-webkit-scrollbar-thumb {
        background-color: rgba(120, 130, 140, 0.55);
        border-radius: 2px;
    }

    .header-actions > * {
        flex: none;
    }

    /* Touch targets. 44px is the floor for anything a thumb is aimed at,
     * and it applies to the small "secondary" buttons most of all --
     * they are small on purpose on a desktop and that purpose does not
     * survive contact with a thumb. */
    button,
    .button-link,
    .header-actions > * {
        min-height: 44px;
    }

    .secondary.small,
    button.small {
        min-height: 40px;
    }

    /* Inputs at 16px, exactly. Below that iOS zooms the whole page on
     * focus, and the member is left pinching their way back out after
     * every field. */
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="url"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px;
    }

    /* Forms act like forms: one control per line, full width, and the
     * primary button takes the whole row so the thumb does not have to
     * find it. */
    .field-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    form button[type="submit"],
    .button-row > button:first-child {
        width: 100%;
    }

    .button-row {
        flex-direction: column;
        align-items: stretch;
    }

    /* Tables keep every column and scroll sideways inside their own rail.
     * Dropping columns to fit is deciding for the reader which figures
     * matter, which is not a stylesheet's call. */
    .table-scroll {
        margin-inline: calc(-1 * var(--spacing-sm));
        padding-inline: var(--spacing-sm);
    }

    .data-table {
        font-size: 0.85rem;
    }

    /* Modals become bottom sheets. A centred dialog on a phone floats in
     * the one place a thumb cannot comfortably reach; a sheet rises from
     * where the thumb already is. */
    .modal-content,
    [role="dialog"] .card {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 14px 14px 0 0;
        margin: 0;
    }
}

/* ---- the member page ---------------------------------------------------- */

@media (max-width: 640px) {

    /* The four ordinance boxes as a 2x2 grid. Four in a row are too narrow
     * to read; four stacked put the save button below the fold. Two by two
     * is the whole form and the button on one screen, which is the entire
     * job of this page. */
    .ordinance-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm);
    }

    /* The date and time side by side still -- they are one question. */
    .field-row {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: var(--spacing-sm);
    }

    /* The photo strip gives way first -- it is decoration, and it is the
     * top of the page. A cap rather than a value: the admin's height and
     * the member's own slider still choose anything under it, because a
     * member who made the photos small on their phone meant it. */
    .photo-card .photo-strip img {
        max-height: 64px;
    }

    /* Sign-in: the mode switch buttons split the width evenly and read as
     * the tabs they are. */
    .mode-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .app-header h1 {
        font-size: 1.2em;
    }

    .data-table {
        font-size: 0.8rem;
    }
}

/* ---- the dashboards ------------------------------------------------------ */

@media (max-width: 640px) {

    /* The hero number is the reason the page exists and keeps its size
     * relative to everything else -- it shrinks less than the page does. */
    .hero-figure {
        font-size: 44px;
    }

    /* Stat tiles two to a row. One per row wastes half of every row on a
     * number four digits long; three are unreadable. */
    .stat-row,
    .live-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm);
    }

    /* Charts take every pixel of width; their titles tighten. */
    .chart-card h2 {
        font-size: 1.05em;
    }

    .chart-card svg {
        width: 100%;
        height: auto;
    }

    /* The replay controls stack cleanly rather than interleaving. */
    .timelapse-controls {
        flex-wrap: wrap;
    }

    .timelapse-controls input[type="range"] {
        flex: 1 1 100%;
        order: 3;
        /* A scrubber is the most thumb-hostile control there is at
         * desktop height. */
        height: 2.2rem;
    }

    .replay-options {
        grid-template-columns: 1fr;
    }

    /* The season picker in the heading takes the full row on a phone --
     * already handled in dashboard.css; the display panel's checklists
     * go single column here. */
    .section-checks {
        grid-template-columns: 1fr !important;
    }
}

/* ---- the gatekeeper page ------------------------------------------------- */

@media (max-width: 640px) {

    /* The one page whose whole job fits a phone naturally. The card takes
     * the screen, the temple image steps back, and the password field and
     * button are sized for the thumb that is about to use them. */
    .login-card,
    .login-container .card {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .login-temple {
        max-height: 120px;
    }

    .login-card input[type="password"],
    .login-card input[type="text"] {
        min-height: 48px;
    }

    .login-card button[type="submit"],
    #loginButton {
        width: 100%;
        min-height: 48px;
        font-size: 1.05em;
    }
}

/* ---- fine pointers only -------------------------------------------------- */
/*
 * Everything above keys off width, but a few things are about the finger
 * rather than the screen: a phone in landscape is wide and still has no
 * hover. `pointer: coarse` is the honest test for those.
 */
@media (pointer: coarse) {

    /* Tooltips are hover furniture; on touch they fire on tap and swallow
     * the first press. The title attributes stay for assistive tech but
     * nothing should depend on them. */

    /* The calendar's day cells: the tap target is the whole cell, and the
     * cell floor rises to meet the thumb whatever the admin's day size. */
    .calendar-wrap td[data-date] {
        min-height: 44px;
    }

    .appt-badge {
        min-height: 24px;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    /* The quote's manual-advance arrows. */
    #btnQuotePrev,
    #btnQuoteNext {
        min-width: 44px;
        min-height: 44px;
    }
}