/* ============================================================================
   NOVERA.Software — responsive.css (v9.0, batch36)

   The LOCKED responsive adaptation (owner, Waves 1.3 + 2.2 of the mock-up
   review, "NOVERA Responsive Design Requirements"). Rides ON TOP of
   tokens.css (LOCKED design system) + app.css (mobile adaptation) — loaded
   AFTER both. No colours, no type, no radii change here: this file only
   re-lays-out the approved mobile components at larger viewports.

   Breakpoints (fluid between them):
     ≤767   — approved mobile design, untouched (480px centred column)
     ≥768   — tablet portrait: 720px column, transparent headers,
              two-column form zones, floating login panel
     ≥1024  — side rail replaces the bottom nav; content 960px
     ≥1366  — laptop: content 1200px; split views (phase 2 markup)
     ≥1920  — desktop: content 1400px, more air
   Height ≤820 — restricted-height compression so primary actions never
              sink below the fold.

   PHASE 2 hooks (rules present, markup not yet): .split-mail, .split-cal,
   .ev-row.x4, .cal-right .cal-addrow. They match nothing in the current
   pages and stay inert until those features land.
   ========================================================================== */

/* ── base (all widths) ─────────────────────────────────────────────────── */

/* the side rail exists only from the rail breakpoint up */
.siderail {
    display: none;
}

.app-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* two-column form zone (Compose / Event): a plain stacked column on mobile —
   the form's own gap is 12px, mirrored here so wrapping changes nothing */
.form-cols {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* favourite-apps ladder (owner, batch37): mobile 4 · ≥768 five at 5/row ·
   ≥1024 (and up) eight at 4/row — .t5/.t68 are the placeholder tiles for
   the future "recent apps" feature (backlog) */
.app-tile.t5, .app-tile.t68 {
    display: none;
}

/* the 4th card per agenda group appears only at desktop — phase 2 */
.ev-row.x4 {
    display: none;
}

/* the split view's column-2 legend/add row exists only ≥1366 — phase 2 */
.cal-right .cal-addrow {
    display: none;
}

/* the FORTNIGHT calendar view is offered from tablet up (owner, batch37):
   the grid itself is server-rendered — only the toggle chip is width-gated */
.chip-fortnight {
    display: none;
}

/* v9.6 (owner) — the IN-ROW team picker exists only ≥1366; below that the
   standalone .cal-team-top row (under the header) serves as before */
.cal-team-inline {
    display: none;
}

/* v21.1 (batch120, owner: "card tight and card focus-card must be on the
   same row for all views except 01-screens") — the TOP row zone: the
   shortcuts card and Today's focus. On 01-Screen they stack in DOM order;
   from 02-Screen (768) up they share one row, equal columns. */
.dash-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 768px) {
    .dash-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

        .dash-top > .card {
            min-width: 0;
            height: 100%;
        }
}

/* the dashboard row zone (v9.2, owner): rotator + favourite apps stack in
   the mobile order below 1024; from 1024 they share one row — apps LEFT,
   rotator card RIGHT (grid placement flips the DOM order) */
.dash-cols {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* cash-flow chart variants (v9.2, owner): 6 months on phones and 1024–1365,
   NINE months on tablet portrait (768–1023) and 1366–1919, TWELVE at ≥1920
   (v11.3, batch59, owner) — the breakpoint blocks below flip these */
.cf9,
.cf12 {
    display: none;
}

/* the inbox toolbar (search + select-all row): stacked on mobile exactly as
   before; from 1024 the two share one row (select-all left of search) */
.mail-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* owner (batch37) — the inbox list becomes a fixed-height card and the
   emails scroll INSIDE it, so the pager and mail bar always stay in reach.
   Heights per reviewed viewport. */
.mail-list-card {
    /*height: 517px;*/
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* owner (batch37) — the message body is capped so the reply/action rows
   never sink below the fold; long emails scroll inside the card.
   844-high phone → ~367px; the ≥768 rule retunes for taller chrome. */
/* v21.2 (batch121, owner: "fix the min-height in message.cshtml") — the
   reading card's height BAND, one source of truth.

   THE BUG: the card carried an inline `min-height:640px` while this rule set
   a viewport-relative max-height. In CSS a min-height BEATS a max-height, so
   on every screen whose band computes below 640 the card was forced to 640
   and burst out of the space the max-height existed to fit — 390×844 gave
   367px and got 640; 1024×768 and 1366×768 gave 358 and got 640. Only
   1920×1080 (670) was ever big enough for the floor to sit inside it, which
   is why it looked right there and nowhere else.

   THE FIX: the floor is clamped to the ceiling — `min(640px, var(--eml-h))`
   — so it can never win, and the whole band lives in CSS instead of an
   inline style no rule can override. */
.eml-view {
    --eml-h: max(300px, calc(100dvh - 477px));
    min-height: min(640px, var(--eml-h));
    max-height: var(--eml-h);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── ≥768 · tablet portrait ───────────────────────────────────────────── */
@media (min-width: 768px) {
    .app {
        max-width: 768px;
    }

        .app .bottomnav {
            /*max-width: 768px;*/ /* owner */
        }

    .mail-bar {
        max-width: 720px;
    }

    /* owner (batch37): the bars widened with the column and read stretched —
       give both a little more height to keep their proportions */
    .app .bottomnav {
        height: 110px;
        padding-top: 14px;
        padding-bottom: 30px;
    }

    .mail-bar {
        height: 86px;
    }

    /* owner (Wave 1.1): the top banner goes TRANSPARENT — the backdrop blur
       stays, so scrolling content frosts behind it (glassmorphism) */
    .screen-head, .cal-head, .flowhead {
        background: transparent;
    }

    /* owner (batch37): five favourite apps on one row (the 5th is the
       recent-apps placeholder) */
    .apps-row {
        grid-template-columns: repeat(5, 1fr);
    }

    .app-tile.t5 {
        display: flex;
    }

    /* the Fortnight toggle joins Month · Week from tablet up */
    .chip-fortnight {
        display: inline-flex;
    }

    /* owner (batch37): inbox list card height at 768×1024 */
    .mail-list-card {
        height: 640px;
    }

    /* message body cap retuned for the taller viewport (~614px at 1024h) */
    /* v21.2 — only the band changes here; min/max both follow it */
    .eml-view {
        --eml-h: max(340px, calc(100dvh - 410px));
    }

    /* owner (Wave 1.3): the day's items and the Overdue list sit SIDE BY
       SIDE on tablets */
    .agenda-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: start;
    }

        .agenda-cols > .agenda {
            max-width: none;
            margin: 0;
            min-width: 0;
        }

    /* forms and flow pages never stretch edge-to-edge (locked: 680px) —
       the flow header aligns with the same measure */
    .flowhead + form.scroll, form.scroll,
    .scroll.flowcol, .flowhead {
        max-width: 680px;
        margin: 0 auto;
        width: 100%;
    }

    /* owner (Wave 2.2): the MESSAGE page fills the viewport — the email
       body stretches so the action rows close the page (66px flow header,
       ~104px bottom nav while it exists) */
    .scroll.flowcol {
        display: flex;
        flex-direction: column;
        /*min-height: calc(100dvh - 170px);*/
        padding-bottom: 20px; /* the mobile 120px tail is nav clearance we no longer need */
    }

        .scroll.flowcol .email-body {
            flex: 1 1 auto;
        }

    /* owner (Wave 2.2): the two-column form zone starts HERE:
       From|Signature · To|Cc/Bcc · Subject|AI — the reveal rows align to
       their neighbour's input line */
    .form-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
        align-items: start;
    }

        .form-cols > * {
            min-width: 0;
        }

        .form-cols .span2 {
            grid-column: 1 / -1;
        }

        .form-cols > details.airow:not(.span2) {
            margin-top: 32px; /* owner (2026-08-12 v10) */
        }

        /* owner (Wave 2.2): the All-day checkbox cell aligns with its row
       neighbour's input line */
        .form-cols .field.allday {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            min-height: 52px;
        }

    /* LOGIN (pre-auth, no rail): one centred column at every width.
       owner (Wave 2.1): an OUTSIDE border, 8px radius, the panel ending
       ~40px below the language selector — a floating card, not a full-
       height column. Mobile (≤767) keeps the current build. */
    .app.login-app {
        max-width: 520px;
        min-height: 0;
        height: auto;
        margin: 8vh auto;
        border: 1px solid rgba(104,152,232,.30);
        border-radius: 8px;
        padding-bottom: 40px;
        box-shadow: 0 0 60px rgba(0,0,0,.5);
    }

    /* !important: the page carries an inline padding-bottom — the panel's
       own 40px tail below the toggler replaces it */
    .login-app .scroll {
        max-width: 460px;
        margin: 0 auto;
        width: 100%;
        padding-bottom: 0 !important;
    }

    .login-app .app-main {
        min-height: 0;
    }
}

/* owner (batch37) — tablet portrait: the background covers the whole page
   (no darker bands left and right of the 720 column). The BODY paints the
   brand gradient and the column goes transparent; from 1024 the centred
   rail+content body returns with its own panel look. The login panel keeps
   its floating-card face. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    body {
        /*  background: linear-gradient(145deg, #010107 0%, #1E1E1E 50%, #13294B 100%);*/ /* owner */
    }

    .app:not(.login-app) {
        /*background: transparent;*/ /* owner (2026-08-12 v10) */
        box-shadow: none;
    }

    /* v9.2 (owner): tablet portrait shows NINE months of cash flow */
    .cf6 {
        display: none;
    }

    .cf9 {
        display: block;
    }


    .flip-inner {
        height: 350px;
    }

    .flowhead {
        background: transparent;
    }
}

/* restricted height: the login panel compresses so its border (and the
   40px tail below the toggler) stays fully in view. !important where the
   markup carries inline styles. */
@media (min-width: 768px) and (max-height: 820px) {
    /* owner (Wave 2.2): ~50px top margin, EQUAL at the bottom — the panel
       compresses (tagline dropped, smaller marks) so 50+panel+50 fits 768 */
    .app.login-app {
        margin: 50px auto;
    }

    .login-app .scroll > div:first-child {
        margin: 10px auto 6px !important;
        gap: 8px !important;
    }

    .login-app img[src*="novera-icon"] {
        width: 48px !important;
    }

    .login-app img[src*="novera-wordmark"] {
        width: 160px !important;
    }

    .login-app .scroll > div:first-child p {
        display: none;
    }

    .login-app form.card {
        gap: 12px !important;
    }
}

/* ═══ v20.8 (batch117, owner: "We have regressed with the top cards in
   email — 01-screen 2 cards · 04-screen 4 cards · 05-screen five cards")
   THE CHIP-COUNT LADDER — the ONE place any width's card count is set.

   What regressed: the old rules hid cards by POSITION — nth-child(2), (5),
   (6) — positions picked for the six-card v12.7 order (Newest · AI
   priority · Urgent · Needs a reply · FYI · Can wait). The batch113 reorder
   added New email at the front and made it SEVEN cards, so every one of
   those numbers then pointed at a different card: 390 showed 4 instead of
   2, 1366 showed 5 with Newest missing, 1920 showed 6.

   The fix is to stop naming positions to REMOVE and instead say how many
   to KEEP. The order is the owner's own (batch113): New email · Newest ·
   Needs a reply · Urgent · AI priority · FYI · Can wait — so "keep 4" is
   always the first four of that list, and a future reorder cannot rot it.

   01 (≤767) 2 · 02 (768–1023) 3 · 03 (1024–1365) 4 · 04 (1366–1919) 4 ·
   05 (≥1920) 5. The owner set 2 / 4 / 5; 02 and 03 step between them.
   Kept cards always share the row equally (flex: 1 1 0). ═══════════ */
@media (max-width: 767px) {
    .ai-chips .chip:nth-child(n+3) {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .ai-chips .chip:nth-child(n+4) {
        display: none;
    }
}

@media (min-width: 1024px) and (max-width: 1919.98px) {
    .ai-chips .chip:nth-child(n+5) {
        display: none;
    }
}

@media (min-width: 1920px) {
    .ai-chips .chip:nth-child(n+6) {
        display: none;
    }
}

@media (min-width: 768px) {
    .ai-chips .chip {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ── ≥1024 · side rail takes over navigation ──────────────────────────── */
@media (min-width: 1024px) {
    .siderail {
        display: flex;
        position: sticky;
        top: 0;
        height: 100dvh;
        flex: 0 0 292px; /* owner */
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 20px 0;
        border-right: 1px solid rgba(104,152,232,.16);
        background: linear-gradient(180deg, rgba(13,22,42,.72), rgba(10,15,30,.55));
        background: linear-gradient(145deg, #010107 0%, #1E1E1E 50%, #13294B 100% 100% ) !important;
        z-index: 10;
    }

        .siderail .brand {
            margin-bottom: 18px;
        }

            .siderail .brand img {
                width: 40px;
                height: 40px;
            }

        .siderail .rl-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 76px;
            padding: 10px 0;
            border-radius: var(--r-card);
            color: var(--nv-ink-3);
            text-decoration: none;
            font-size: 16px; /* owner (2026-08-11 v10) */
            font-weight: 400; /* owner (2026-08-11 v10) */
            background: transparent;
            border: 0;
            cursor: pointer;
            font-family: inherit;
        }

            .siderail .rl-item.on {
                color: var(--nv-gold-bright);
                background: rgba(232,167,92,.10);
            }

            .siderail .rl-item:hover {
                color: var(--nv-ink);
            }

    /* v19.7 (batch108, owner) — REVERSED: from 1024 the bottom footer nav
       hides again ("confusing and obtrusive" beside the side rail — the
       rail serves navigation on desktop). Below 1024 it stays the master
       control on every page. */
    .bottomnav, .home-indicator { display: none !important; }

    /* no nav from 1024 → no clearance spacer either */
    .nav-clear {
        display: none;
    }

    /* owner (Wave 1.1): rail + content form ONE centred body — the rail is
       anchored to the body's left edge, not the viewport's */
    .app {
        flex-direction: row;
        max-width: 1366px; /* owner (v9.3) — was 1052 (92 rail + 960) */
    }

    /*  ⚠⚠⚠ v31.327 (owner) — AND THE 1366 CAP IS LIFTED FOR THIS ONE PAGE.
        The cap above is an owner ruling for the whole product and stays exactly
        as it is; this is a scoped exception, in the same style as `.acc-app`'s,
        for the one screen whose content is a forty-one-field grid standing
        beside a 390px rail. Capped, the grid at 1920 measured what it measured
        at 1366 and 550px sat empty to the right of the rail.

        ⚠⚠ IT IS NOT UNBOUNDED. Past about 2200px the columns stop gaining
        legibility and start gaining travel — the reader's eye has to cross the
        whole desk to pair a label with a value two columns over. */
    .doc-app.app {
        max-width: 2200px;
    }

    /*  ⚠⚠⚠ AND `.app-main` CARRIES ITS OWN 1410px CAP, which is the one that
        was actually still biting. Measured at 1920 with the outer cap already
        lifted: content 988 + rail 370 + gaps = 1410 exactly, and 238px sat
        dead to the right of the rail. Lifting one cap and not the other moves
        the ceiling without raising it. */
    .doc-app.app .app-main {
        max-width: none;
        box-shadow: 0 0 60px rgba(0,0,0,.5);
         min-height: 95dvh;
    }

    .app-main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 95dvh;
        max-width: 1410px; /* owner (2026-08-12 v10) */
    }

    .app .scroll {
        /*padding-bottom: 40px;*/
    }

    /* the mail bar is fixed to the VIEWPORT — nudge it to the content
       column's centre (rail 92 ÷ 2) */
    .mail-bar {
        max-width: 480px;
        transform: translateX(46px);
        height: 74px;
    }

    /* owner (batch37): EIGHT apps — two rows of four (rows 5–8 are the
       recent-apps placeholders until that feature lands) */
    .apps-row {
        grid-template-columns: repeat(4, 1fr);
    }

    .app-tile.t5, .app-tile.t68 {
        display: flex;
    }

    /* v9.2 (owner): the dashboard row — Favourite Apps LEFT, the rotator
       card RIGHT (DOM keeps rotator-first for the mobile stack) */
    .dash-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: start;
    }

        .dash-cols > * {
            min-width: 0;
        }

        .dash-cols .dash-apps {
            grid-column: 1;
            grid-row: 1;
        }

        .dash-cols .flip {
            grid-column: 2;
            grid-row: 1;
        }

    .dash-pager {
        margin-top: 6px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(104, 152, 232, .22);
    }

    /* owner (batch37): the "+" sat on the content edge — breathing room */
    .cal-addrow {
        padding-right: 12px;
    }

    /* owner (batch37): inbox list card height at 1024×768 */
    .mail-list-card {
        height: 484px;
    }

    /* owner (batch37): select-all + count move onto the search row, LEFT of
       the search box (DOM keeps search first for mobile stacking).
       v10.5 (mock layout): row-reverse → row + explicit order, so the new
       sort dropdown + funnel land RIGHT of the search box as in the mock;
       select-all stays leftmost. */
    .mail-tools {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

        .mail-tools .mt-search {
            flex: 1 1 auto;
            margin: 0;
        }

        .mail-tools .eml-selrow {
            flex: 0 0 auto;
            justify-content: flex-start;
            gap: 14px;
            padding: 0;
            order: -1;
        }

        .mail-tools .mt-extra {
            flex: 0 0 auto;
        }

            .mail-tools .mt-extra .mt-sort select.input {
                flex: 0 0 auto;
            }

    /* v10.6 r8 (owner) — from 1024: the AI side cards are VISIBLE, stacked
       below the digest cards (aligned to .scroll's 20px padding). The
       ≥1366 rule overrides this with the right-column placement,
       so near-breakpoint zoom/window changes degrade to stacking instead of
       the cards vanishing. Phones (<1024) stay without them as before. */
    .mail-app .ai-side {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin: 8px 20px 0;
        max-width: 763px;
    }

    /* ── v10.8 (batch54, Mock B locked) — MAIL FOLDERS PANEL ─────────────
       From 1024 every email page becomes [folders | content]: the panel is
       grid column 1, everything else column 2. (≥1366 adds the 390px AI
       column as column 3.) The side rail collapses to icons only on email
       screens — the folders panel carries the labels now. */
    .mail-app .app-main {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr); /* v10.8 r2 owner: a little wider */
        column-gap: 16px;
        align-content: start;
    }

        .mail-app .app-main > * {
            grid-column: 2;
        }

        .mail-app .app-main > .mail-folders {
            grid-column: 1;
            grid-row: 1 / span 30;
            align-self: start;
            display: flex;
            flex-direction: column;
            gap: 2px;
            position: sticky;
            top: 16px;
            /* v10.8 r4 (owner) — the bordered card applies from 1024, not
               just 1366 (tablet was missing the formatting) */
            margin: 82px 0 0 16px;
            border: 1px solid var(--nv-surface-2);
            border-radius: 6px;
            padding: 20px;
            width: 260px;
        }



    /* rail: icon-only beside the folders panel */
    .mail-app .siderail {
        flex: 0 0 84px;
        max-width: 84px;
    }

        .mail-app .siderail .rl-item .lbl {
            display: none;
        }

        .mail-app .siderail .rl-item {
            justify-content: center;
            margin: 0 8px;
            padding: 10px 0;
        }

    /* v9.2 (owner): FLOW pages (Message / Compose / Event) — one CENTRED
       940px measure for the header, the forms and the message column.
       (Replaces the earlier left-align + 880px rules; the compound
       ".flowhead + form.scroll" selector is kept so the ≥768 rule's
       specificity is matched.) */
    .flowhead + form.scroll, form.scroll,
    .scroll.flowcol, .flowhead {
        max-width: 940px;
        margin: 0 auto;
        width: 100%;
    }

    /* owner (Wave 2.2): no bottom nav from here — the message page keeps
       only the flow header out of the viewport count */
    .scroll.flowcol {
        /*min-height: calc(100dvh - 180px);*/
    }

    /* content containers get a centred measure instead of full bleed */
    .screen-head, .scroll,
    .cal-head, .cal-team, .month, .dow, .grid, .cal-addrow, .agenda, .agenda-cols {
        width: 100%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    /* dialogs grow up a size but stay dialogs. The entity picker centres
       itself (opacity/visibility hiding) — keep it out of the slide-up
       transform rules. */
    .ent-sheet {
        width: min(520px, calc(100vw - 40px));
    }

    .err-pop {
        width: min(440px, calc(100vw - 40px));
    }

    /*  ⚠⚠⚠ v31.242 (owner, P-10) — `.acs-sheet` JOINS `.ent-sheet` IN THE
        EXCLUSION, and the reason is the same one that put `.ent-sheet` here.
        This rule is the PHONE COLUMN's geometry — a 480px sheet that slides up
        from the bottom — and it is (0,2,0) in a file that loads after app.css,
        so a sheet with its own geometry cannot out-specify it by adding one
        class. The account search is a wide, top-anchored dialog with a results
        grid; measured under this rule it rendered 480px wide with the Address
        column clipped and its own `transform` overridden. **A rule that means
        "every sheet except the ones that place themselves" has to name them
        all.** */
    .mail-sheet:not(.ent-sheet):not(.acs-sheet):not(.acs-card) {
        left: 50%;
        right: auto;
        transform: translate(-50%, 102%);
        width: 480px;
    }

    .mail-sheet.open:not(.ent-sheet):not(.acs-sheet):not(.acs-card) {
        transform: translate(-50%, 0);
    }

    /* month grid cells: no more square aspect — capped height */
    .month-grid .day {
        aspect-ratio: auto;
        height: 86px;
    }
}

/* owner (batch37/40): between the rail breakpoint and the laptop split,
   the READ view's mail bar floats as a bordered card top-right (owner-tuned
   top 80 / width 235). From 1366 the bar becomes a REAL second column on
   every email page instead — see the .mail-app rules below. */
@media (min-width: 1024px) and (max-width: 1365.98px) {
    .mail-bar.mail-bar--read {
        position: fixed;
        /*top: 80px;*/
        right: max(20px, calc(50% - 506px));
        left: 23px;
        bottom: 13px;
        margin: 0;
        transform: none;
        max-width: none;
        width: 235px;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 12px 10px;
        background: linear-gradient(160deg,rgba(120,165,240,.09),rgba(255,255,255,.015) 55%),rgba(13,22,42,.66);
        border: 1px solid rgba(104,152,232,.26);
        border-radius: var(--r-card);
        box-shadow: 0 12px 34px rgba(0,0,0,.45);
    }

        .mail-bar.mail-bar--read .mb {
            flex: 0 0 auto;
            padding: 9px 0;
        }
}

/* ── ≥1366 · laptop: split views (phase 2 markup) ─────────────────────── */
@media (min-width: 1366px) {
    .app {
        max-width: 1920px; /* owner (v9.3) — was 1292 */
    }

    /* v11.3 (batch59, owner): NINE months of cash flow from 1366 (the ≥1920
       block upgrades this to twelve) */
    .cf6 {
        display: none;
    }

    .cf9 {
        display: block;
    }

    /* owner (batch37): inbox list card height at 1366×768 */
    .mail-list-card {
        height: 760px;
    }

    /* owner (batch40) — EMAIL pages become TWO COLUMNS at 1366×768 and
       1920×1080 ONLY: column 1 keeps all the main content exactly as
       before; the mail bar (Folders · Compose · Delete …) is column 2 —
       a sticky bordered card, in-flow, on EVERY email page (.mail-app is
       set by the email pages via ViewData["AppClass"]). The fixed sheets /
       scrim / toast are position:fixed, so the grid ignores them. */
    .mail-app .app-main {
        display: grid;
        /* v10.8 r2: [folders 260 | content | AI col 390 (owner)] */
        grid-template-columns: 260px minmax(0, 1fr) 390px;
        column-gap: 16px;
        align-content: start;
    }

        .mail-app .app-main > * {
            grid-column: 2; /* v10.8 — content is the middle column now */
        }

        /* v11.1 (batch57, owner) — compose now carries the AI column too;
           the .compose-app exception is gone */

        .mail-app .app-main > .mail-folders {
            grid-column: 1; /* v10.8 — card formatting comes from the ≥1024 rule */
        }

    /* ⚠⚠⚠ v31.35 (batch232) - ACCOUNT SETUP RECLAIMS THE EMPTY AI COLUMN.
       From 1366 this grid reserves a 390px third track for the AI / mail-bar
       column. **Account Setup renders nothing into it** - no `.ai-side`, no
       `.mail-bar` - so the track was 390px of nothing, and the page paid for
       it: its content column measured 555px at 1366, NARROWER than the 875px
       it gets at 1280, which is why the account card collapsed to 42px.

       Measured, this page, with the track and without it:

           viewport       1366   1433   1600   1920
           with (before)   555    622    688    688
           without (now)   961   1028   1094   1094

       That is the difference between two cramped columns and the three the
       owner locked. ⚠ IT IS SCOPED BY `.acc-app`, WHICH ONLY THIS PAGE SETS -
       every other `.mail-app` page keeps its third column untouched. Any page
       that later renders an `.ai-side` must NOT carry this class. */
    .acc-app.app .app-main {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    /*  ⚠⚠⚠ v31.327 (owner) — THE DOCUMENT PROCESSING SCREEN, SAME DEFECT,
        OPPOSITE HALF. Owner: *"The width of the results area does not span into
        the right column with 6 columns per row as requested."*

        `.acc-app` above reclaims the THIRD track because Account Setup renders
        no `.ai-side`. This page is the mirror image: it renders an `.ai-side`
        and NO folders panel, so it is the FIRST track that is 260px of nothing.

        Measured, this page, at 1920 with the shell's own rules and with these:

            viewport                    1366   1600   1920
            shell's own (before)         716    716    716
            panel track reclaimed        976    976    976
            + the 1366 cap lifted        976   1210   1530

        716px is where six columns each get 119px — narrower than the word
        "Company number" — which is why the grid could not span. */
    /*  ⚠⚠⚠ v31.327 (owner) — AND THE TRACK IS FILLED RATHER THAN COLLAPSED.
        Owner: *"The dead space to the left should contain the menus. Please
        ensure the correct menu is persisted depending on the page."*

        An earlier pass this round collapsed the empty first track to zero,
        which fixed the width and answered the wrong question: the reader had
        not lost 260 pixels, they had lost the module they were working in. The
        page now renders `_FinPanel` into it — Purchases for an AP read, Sales
        for AR, the ledger's panel for Account Setup — so the shell's own
        `260px minmax(0, 1fr) 390px` is exactly right and this page needs no
        template of its own at all.                                           */

        .mail-app .app-main > .mail-bar {
            grid-column: 3; /* v10.8 (hidden ≥1024; kept for the sheets) */
            /* v10.4 (owner) — row 1 only: the AI side cards take the rows
               beneath (was 1 / span 9) */
            grid-row: 1;
            align-self: start;
            position: sticky;
            top: 156px; /* owner */
            left: auto;
            right: auto;
            bottom: auto;
            margin: 16px 20px 0 0;
            transform: none;
            max-width: none;
            width: auto;
            height: auto;
            flex-direction: column;
            align-items: stretch;
            gap: 16px;
            padding: 12px 10px;
            background: linear-gradient(160deg,rgba(120,165,240,.09),rgba(255,255,255,.015) 55%),rgba(13,22,42,.66);
            border: 1px solid rgba(104,152,232,.26);
            border-radius: var(--r-card);
            box-shadow: 0 12px 34px rgba(0,0,0,.45);
            padding: 15px 60px;
        }

            .mail-app .app-main > .mail-bar .mb {
                flex: 0 0 auto;
                padding: 9px 0;
                /* v9.5 (owner): label to the RIGHT of the icon in the panel */
                flex-direction: row;
                justify-content: flex-start;
                gap: 12px;
            }

                /* v9.5 (owner): panel icons up from 24 to 36 */
                .mail-app .app-main > .mail-bar .mb svg {
                    width: 36px;
                    height: 36px;
                }

        /* v10.4 (owner, mock-up 2) — the AI side cards fill column 2 below
           the mail panel: Your AI routine · Upcoming deadlines · At a glance.
           v10.6 r8 — restored to the right column here; the 1024-1365 rule
           below the breakpoint keeps them stacked under the digest instead
           of vanishing when the viewport dips under 1366 (zoom, scrollbar,
           unmaximised window). */
        .mail-app .app-main > .ai-side {
            grid-column: 3; /* v10.8 — third column beside the folders panel */
            grid-row: 1 / span 9; /* v10.8 — starts at the top (bar hidden) */
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 77px 20px 0 0; /* owner (2026-08-12 v10) */
            align-self: start;
            min-width: 0;
        }

    /* v9.6 (owner) — CALENDAR at 1366/1920: the team picker sits on the
       SAME row as the month pager, BETWEEN the pager and the view selector
       (.month is space-between; the picker takes the middle slot). The
       standalone row above the pager hides here. */
    .cal-team-top { display: none; }

    .cal-team-inline {
        display: flex;
        flex: 0 1 320px;   /* flex-basis wins over the container list's width:100% */
        width: auto;
        min-width: 0;
        margin: 0 14px;
        padding: 0;
    }

        .cal-team-inline .input { height: 40px; }

    /* v9.6 (owner) — SIDE RAIL items at 1366/1920 match the mail panel:
       label to the RIGHT of a 36×36 icon, full-width rows in the wide rail */
    .siderail .rl-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        width: auto;
        align-self: stretch;
        margin: 0 14px;
        padding: 10px 14px;
    }

        .siderail .rl-item svg {
            width: 36px;
            height: 36px;
        }

    .screen-head, .scroll,
    .cal-head, .cal-team, .month, .dow, .grid, .cal-addrow, .agenda, .agenda-cols {
        max-width: 1200px;
    }

    /* EMAIL — list + reading pane side by side (phase 2) */
    .split-mail {
        display: grid;
        grid-template-columns: 440px 1fr;
        gap: 16px;
        align-items: start;
    }

        .split-mail .pane-read {
            position: sticky;
            top: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            /* owner (Wave 1.1): the reading pane extends so Reply/Forward
               sit just above the viewport bottom */
            min-height: calc(100dvh - 150px);
        }

            .split-mail .pane-read .email-body {
                flex: 1 1 auto;
            }

    /* owner (Wave 1.2): in the split view the legend + add row heads
       COLUMN 2, closed with a bottom border (phase 2) */
    .split-cal .cal-left .cal-addrow {
        display: none;
    }

    /* column 2 stacks the two agenda groups again */
    .split-cal .agenda-cols {
        display: block;
    }

    .split-cal .cal-right .cal-addrow {
        display: flex;
        margin: 0 0 8px;
        padding: 0 0 12px;
        border-top: 0;
        border-bottom: 1px solid rgba(104,152,232,.18);
    }

    /* CALENDAR — grid left, day agenda + overdue right (phase 2) */
    .split-cal {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 18px;
        align-items: start;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

        .split-cal .cal-left > *, .split-cal .cal-right > * {
            max-width: none;
        }
}

/* ── ≥1920 · desktop ──────────────────────────────────────────────────── */
@media (min-width: 1920px) {
    .app {
        max-width: 1920px; /* owner (v9.3) — was 1512 */
    }

    /* v11.3 (batch59, owner): TWELVE months of cash flow at ≥1920 */
    .cf9 {
        display: none;
    }

    .cf12 {
        display: block;
    }

    .screen-head, .scroll,
    .cal-head, .cal-team, .month, .dow, .grid, .cal-addrow, .agenda, .agenda-cols,
    .split-cal {
        max-width: 1400px;
    }

    .split-mail {
        grid-template-columns: 500px 1fr;
    }

    /* v10.6 r10 (owner) — XL desktop: the side rail widens to match the
       ai-side column (390px max), instead of the old icon-only 112px */
    .siderail {
        flex-basis: 390px;
        max-width: 390px;
    }

    /* v10.8 r2 (owner: "1920 exceptionally wide") — the old two-column XL
       rule put the folders panel in the 1fr track; three columns here too,
       folders stay 260, AI col 390 */
    .mail-app .app-main {
        grid-template-columns: 260px minmax(0, 1fr) 390px;
    }

    .mail-bar {
        transform: translateX(56px);
    }

    /* owner (batch37): EIGHT favourite apps (4 × 2) at desktop too */

    /* owner (batch37): inbox list card height at 1920×1080 */
    .mail-list-card {
        height: 1065px; /* owner (2026-08-12 v10; 1140 → 1065 batch119) */
    }

    /* owner (Wave 1.3): FOUR cards per agenda group in column 2 (phase 2) */
    .ev-row.x4 {
        display: flex;
    }
}

/* ── restricted height (tablet landscape / 768-high laptops) ─────────── */
@media (max-height: 820px) and (min-width: 1024px) {
    .screen-head, .cal-head {
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .screen-head h1, .cal-head h1 {
            font-size: 22px;
        }

    .month {
        padding-top: 8px;
        padding-bottom: 4px;
    }

    .month-grid .day {
        height: 64px;
    }

        .month-grid .day .n {
            font-size: 15px;
        }

    .app .scroll {
        padding-bottom: 24px;
        gap: 10px;
    }

    .card {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .agenda {
        padding-top: 4px;
    }
}

/* ── AI Briefing dashboard (v10.0/10.1, owner) — five tiles across from
   the rail breakpoint; TWO columns at 1024, the mock-up's THREE at 1366 ── */
@media (min-width: 768px) {
    .ai-tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .ai-tiles { grid-template-columns: repeat(5, 1fr); }

    .ai-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: start;
    }
}

@media (min-width: 1366px) {
    .ai-cols { grid-template-columns: 1fr 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   v10.9 r2 (owner) — briefing tiles: "Time saved" is DESKTOP-ONLY; on
   tablets the remaining four share equal columns. At the END of the
   sheet so the earlier 3/5-column rules cannot out-cascade it.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1365px) {
    .ai-tile.t-saved {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    .ai-tiles {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ════════════════════════════════════════════════════════════════════
   v12.0 (batch60 — Calendar Mock A locked) — PLANNER desktop shell.
   The page carries "mail-app cal-app", so the email pages' grid rules
   already place the panel (col 1 ≥1024) and .ai-side (col 3 ≥1366);
   these cal-app rules do the planner-only switching. END placement so
   the hides win the cascade (the .mt-extra lesson).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    /* the panel's team rows + calendar toggles replace these */
    .cal-app .cal-team-top,
    .cal-app .legend-cal {
        display: none !important;
    }

    /* dots → event pills */
    .cal-app .day .dots {
        display: none;
    }

    .cal-app .day .pills {
        display: flex;
    }

    .cal-app .day,
    .cal-app .month-grid .day {
        aspect-ratio: auto;
        min-height: 104px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   v12.3 (batch63, owner) — INBOX DIGEST chip cards per width + the
   Compose-with-AI card spanning both columns on the read page. END
   placement so the hides win the cascade.
   ════════════════════════════════════════════════════════════════════ */

/* 1366–1919 (e.g. 1366×768): the FYI and AI-priority cards and the
   sort-by row leave; Urgent / Needs a reply / Can wait spread evenly.
   The Newest toggle keeps its right-edge slot. */
@media (min-width: 1366px) and (max-width: 1919.98px) {
    /* v20.8 (batch117, owner) — the card COUNT left this block for the
       ladder above; what stays here is the sort-by row hiding, which is
       what this width rule was really about. The old
       `.mail-app .ai-chips .chip:nth-child(2), (5) { display:none
       !important }` was the regression itself: it dropped NEWEST (now
       card 2) and left five cards showing where the owner asked for four. */
    .mail-app .mail-tools .mt-extra,
    .mail-app .mt-extra {
        display: none !important;
    }
}

/* Compose with AI — now a direct child of the page grid (moved out of the
   reading column). Base + ≤1365 keep the reading measure; ≥1366 it spans
   the content AND the AI columns, sitting below whichever runs longer. */
#cwa {
    margin: 12px 20px 0;
}

.mail-app .app-main > .scroll.flowcol {
    padding-bottom: 12px; /* the old 120px clearance now lives below #cwa/.ai-side */
}

@media (min-width: 1024px) {
    .mail-app .app-main > #cwa {
        width: 100%;
        max-width: 940px; /* matches the flow column's centred measure */
        margin: 12px auto 0;
    }
}

@media (min-width: 1366px) {
    .mail-app .app-main > #cwa {
        grid-column: 2 / -1; /* content column + AI column */
        max-width: none;
        width: auto;
        margin: 12px 20px 40px 0;
    }
}

/* ════════════════════════════════════════════════════════════════════
   v12.4 (batch64, owner) — read-page 1024–1365 measure + planner
   re-arrangement (1920 screenshot). END placement for the cascade.
   ════════════════════════════════════════════════════════════════════ */

/* READ page, 1024–1365: the stacked AI cards take the SAME centred 940px
   measure as the reading column and the Compose-with-AI card */
@media (min-width: 1024px) and (max-width: 1365.98px) {
    .mail-app .app-main:has(> .scroll.flowcol) > .ai-side {
        width: 100%;
        max-width: 940px;
        margin: 12px auto 0;
    }
}

/* PLANNER: the day card sits below the grid in the centre column; the
   right column tops with the add button (the grid-bottom addrow and its
   legend serve phones only) */
.cal-day {
    margin: 4px 14px 0;
}

/* v13.2 (batch72, owner) — the day card SPLIT: the day's Events and its AI
   email deadlines are individual cards.
   v13.4 (batch72.2, owner screenshot + decision) — STACKED at every width:
   Events ON TOP of AI email deadlines. The side-by-side 1fr pair repeated
   the grid lesson — the long deadline titles set the track's min-content,
   the pair overflowed the centre column and the Due labels painted over
   the Overdue card. min-width:0 kept as a guard. */
.cal-day2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

    .cal-day2 > .card {
        min-width: 0;
    }

.ai-side .side-add {
    display: none;
}

@media (min-width: 1024px) {
    .cal-app .cal-addrow {
        display: none !important;
    }

    .cal-app .ai-side .side-add {
        display: flex;
        justify-content: flex-end;
    }
}

/* ════════════════════════════════════════════════════════════════════
   v13.0 (batch70, owner) — from 768 to 1365 the stacked right-column
   cards sit TWO-BY-TWO on every mail/calendar page (AI summary · Actions
   · Email history · Quick actions, etc.); phones return to one column.
   END placement so this wins the earlier flex rules.
   v13.3 (batch72.1, owner 768/1024 screenshots) — the GRID version broke
   at these widths: 1fr grid tracks can't shrink below a card's min-content
   (the nowrap deadline titles), so the second column pushed OFF-SCREEN;
   and per-row stretch blew the short "AI email assistant" card up into a
   mostly-empty box. Now TWO BALANCED CSS COLUMNS: each card keeps its
   natural height, packs top-to-bottom, never overflows (the column box
   fixes the width, the inner min-width:0/ellipsis chains do the rest).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1365.98px) {
    .mail-app .ai-side {
        display: block !important;
        columns: 2;
        column-gap: 14px;
    }

        .mail-app .ai-side > * {
            break-inside: avoid;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            margin: 0 0 14px;
        }
}

/* ═══ v21.4 (batch123, owner) — THE PLANNER'S DOCUMENT ROW ════════════════
   From 02-Screen up the picker and the Upload button share the row at half
   each (the inline widths in Event.cshtml). On 01-Screen two 270px minimums
   cannot both fit 390px, so the row WRAPS and each control takes the full
   width — the min-width has to be released for that to happen, which is why
   the phone rule does more than set width:100%. */
@media (max-width: 767px) {
    #evDocFile,
    #evDocUp {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

        /* the row that holds them wraps rather than overflowing the card */
        #evDocFile:not(:only-child) {
            margin-bottom: 2px;
        }

    .ev-docrow {
        flex-wrap: wrap;
    }
}

/* The app's 32px input rule excludes [type=file], so this control was
   rendering at the browser's own height — 36px against the 51px Upload
   button beside it, which is what made the pair look wrong however the
   widths were set. It takes the BUTTON's height, since that is what it
   stands next to, and the app's field skin. */
#evDocFile {
    height: 51px;
    padding: 12px 10px;
    line-height: 24px;
    border-radius: var(--r-input);
}

/* ═══ v23.5 (batch131, owner) — 05-SCREEN: THE RAIL EXPANDS ═══════════════
   "siderail should be expanded with labels visible for 05-Screen." From
   1920 the mail-app's icon-only 84px rail returns to the full 292px rail
   with the labels back under their icons; below 1920 the compact rail
   stands (the folders panel carries the words there). */
@media (min-width: 1920px) {
    .mail-app .siderail {
        flex: 0 0 292px;
        max-width: 292px;
    }

        .mail-app .siderail .rl-item .lbl {
            display: block;
        }
}

/* ═══ v23.6 (batch132, owner) — RAIL ITEMS LEFT-ALIGNED ═══════════════════
   "the items and icons need to be left aligned. This applies to 03-screens."
   From the rail breakpoint up the icon column hugs the LEFT edge instead of
   centring; at ≥1920 (the expanded rail) each item becomes a ROW — icon
   left, label beside it — stretched to the rail's width. */
@media (min-width: 1024px) {
    .mail-app .siderail {
        align-items: flex-start;
    }

        .mail-app .siderail .brand {
            margin-left: 22px;
        }
}

@media (min-width: 1920px) {
    .mail-app .siderail .rl-item {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 14px;
        width: auto;
        align-self: stretch;
        margin: 0 12px;
        padding: 10px 14px;
        text-align: left;
    }
}

/* ═══ v27.4 (owner screenshot, 2026-08-21: "Show Text On Right of Icon")
   THE RAIL KEEPS ONE SHAPE. The row form - icon left, label beside it,
   the item stretched across the rail - already existed, but only from
   1366 up (the v9.6 rule). Between 1024 and 1365 the same rail stacked the
   label UNDER its icon, so the navigation changed grammar halfway through
   the desktop range for no reason the user could see. The row form now
   starts wherever the rail itself starts.

   ⚠ SCOPED AWAY FROM .mail-app ON PURPOSE: there the rail is the compact
   84px icon-only column beside the folders panel (labels hidden until
   1920), and 28px of horizontal margin plus 28px of padding around a 36px
   icon does not fit in 84px. Those pages keep their own rules. */
@media (min-width: 1024px) {
    .app:not(.mail-app) .siderail .rl-item {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        width: auto;
        align-self: stretch;
        margin: 0 14px;
        padding: 10px 14px;
        text-align: left;
    }

        /* .icw is the icon wrapper the rail actually uses - it must not
           shrink when a long label pushes against it */
        .app:not(.mail-app) .siderail .rl-item .icw {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
        }

        /* a long label ellipsises rather than wrapping the row to two lines */
        .app:not(.mail-app) .siderail .rl-item .lbl {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
}

/* ═══ v29.5 (owner) - THE SHEET'S TOP GAP, PER SCREEN ═══════════════════════
   01/02-Screen     134px  to 1023   (v31.12, owner #25)
   03-Screen        20px   (the base, in app.css - now ONLY 1024-1365)
   04-Screen        40px   from 1366, where .ai-side becomes column 3
   05-Screen        340px  from 1920, where the mail rail expands

   ⚠ These live HERE, not in app.css: responsive.css loads last, so a
   breakpoint written there can never be overridden back by the base rule.
   ⚠ `auto` stays on the horizontal side in both - it is what centres the
   sheet, and dropping it (the v26.7 lesson) pins it to the left edge. */
@media (min-width: 1366px) {
    .mail-sheet {
        margin: 40px auto !important;
        --sheet-gap: 40px;   /* v31.41 - shadows the margin; see app.css .acc-more */
    }
}

/*  ⚠⚠⚠ v31.83 (owner) - 05-SCREEN LOST THE TOP OF THE SHEET, AND HERE IS
    THE ARITHMETIC THAT DID IT.

    Owner: *"The accMoreSheet top disappears in 05-Screen ONLY ... I tried
    transform: translate(-50%, 80px) but this impacts 04-Screen also."* His
    fix worked because it pushed the sheet DOWN, which is the right direction
    for the wrong reason - it was compensating, not correcting.

    THE CAUSE, MEASURED. `.acc-more` caps itself at
    `min(60vh, calc(100vh - var(--sheet-gap) - 130px))`, and the sheet sits on
    `bottom: 0` lifted by its own `margin-bottom`. When the `calc` branch
    binds, the sheet's height is `100vh - gap - 130 + 110` of chrome, so:

        top  =  100vh - margin-bottom - height  =  gap - 130 + 110  =  gap - 20

    ...no. With `gap` and `margin` set to the SAME NUMBER the two cancel and
    the top lands at a FIXED **20px**, whatever the window height - measured
    21px at 1920x1080, 1920x900 AND 1920x1200. Twenty pixels is on-screen by
    the letter of it and gone by the look of it: the page header is sticky at
    68px, so the sheet slides under it and the reader sees a sheet with its
    top cut off. **That is the whole defect.** 04-Screen escapes it only
    because its numbers are small enough that the `60vh` branch binds instead.

    THE FIX IS ONE NUMBER, AND IT IS THE `--sheet-gap`, NOT THE MARGIN.
    `--sheet-gap` is what tells the BODY how short to be; the margin is what
    lifts the sheet off the bottom. They were the same value, so the sheet
    grew back into exactly the room the margin had made. Raising the gap ABOVE
    the margin is what buys clearance, and the difference between them IS the
    top gap: 440 - 340 = 100px, which clears the 68px header with room.

    ⚠⚠ THEY ARE NO LONGER "ONE FACT WRITTEN TWICE" AND THE COMMENT ON THE BASE
    RULE IN app.css SAYS THEY ARE. That comment is right for the other three
    bands and wrong for this one; it is corrected there in the same edit.
    ⚠ ONLY THIS BLOCK CHANGES - 01/02/03/04-Screen are untouched, which is
    what was asked. Measured after: top 121px at 1920x1080, 1920x900 and
    1920x1200; every other band unmoved to the pixel. */
@media (min-width: 1920px) {
    .mail-sheet {
        margin: 340px auto !important;
        --sheet-gap: 440px;  /* v31.83 - 340 of margin + 100 of clearance for the sticky page head. ⚠ DELIBERATELY NOT EQUAL TO THE MARGIN; see above. */
    }
}

/* ⚠ 01/02-Screen (owner #25). The base 20px in app.css now serves 03-Screen
   ALONE - this block claims everything below 1024. Written here for the same
   reason as its two siblings above: responsive.css loads last, so the base
   rule can never win it back. */
@media (max-width: 1023.98px) {
    .mail-sheet {
        margin: 134px auto !important;
        --sheet-gap: 134px;  /* v31.41 - shadows the margin; see app.css .acc-more */
    }
}

/* ═══ v31.12 (batch208, owner #23) - 01-SCREEN: FOUR STATUS CHIPS, NOT FIVE ══
   The AP and AR lists carry All · Draft · Awaiting · Posted · Orders. Five do
   not fit a phone, so the fifth wrapped onto a second line and the row grew.
   "All" stands down: it is the DEFAULT state, so on a phone the unfiltered
   list is what the page already opens with, and the four that remain are the
   four that change it.
   ⚠⚠ THIS DOES REMOVE THE ONLY ONE-TAP WAY BACK TO THE UNFILTERED LIST on a
   phone - after tapping Draft, "All" is no longer on screen. The route back is
   re-entering the page from the menu (no status = All). Flagged to the owner;
   if that reads as a trap in use, the fix is to show "All" only WHILE a filter
   is active and stand "Orders" down in its place, which keeps four chips and
   always leaves an escape. */
@media (max-width: 560px) {
    .fin-stchips .chip.st-all {
        display: none;
    }
}

/* ═══ v31.12 (batch208, owner #22) - THE DATE FIELDS ON A REAL PHONE ════════
   ⚠⚠ NOT REPRODUCIBLE IN DEV-TOOLS EMULATION, AND THAT IS THE POINT. The
   overflow the owner sees is iOS Safari's own: `input[type=date]` carries an
   INTRINSIC width from the date text plus the native picker, and on iOS that
   intrinsic width beats `width: 100%` - the field renders wider than the grid
   cell that holds it and pushes the row sideways. Chrome's device emulation
   uses Chrome's date control, which has no such floor, so the row measures
   perfectly here and breaks on the phone.
   `.fin-grid3` already collapses to one column below 768, so this is the last
   piece: let the field shrink, and stop the inner value box from setting its
   own width.
   ⚠ UNVERIFIED ON HARDWARE - this is the standard iOS remedy and it is inert
   on desktop, but only a real device can confirm it. */
input.input[type="date"],
input.input[type="month"],
input.input[type="time"],
input.input[type="datetime-local"] {
    min-width: 0;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

    /* iOS renders the value in its own shadow box, which carries the width the
       outer rule cannot reach. */
    input.input[type="date"]::-webkit-date-and-time-value,
    input.input[type="month"]::-webkit-date-and-time-value,
    input.input[type="time"]::-webkit-date-and-time-value,
    input.input[type="datetime-local"]::-webkit-date-and-time-value {
        text-align: left;
        min-width: 0;
        width: 100%;
    }

/* ═══ v31.13 (batch209, owner R10) - 01-SCREEN: THE PAID PILL GETS ITS OWN ROW
   Owner: "In 01-Screen ONLY, 'Posted invoice' the line presentation seems to
   break when the paid 'Pill' is introduced."
   The posted-to-the-ledger banner is one flex row: tick · status text · Paid
   pill · delete. On a phone the pill and the button are both `flex: 0 0 auto`,
   so the only item that can give is the TEXT - and it was squeezed to roughly
   one word per line, turning a one-line banner into a tall narrow column.
   `.fpb-brk` is an empty flex item that becomes a full-width row break at
   01-Screen, dropping the pill and the delete button to a second row and
   giving the text the whole first row back.
   ⚠ THE BREAK IS INERT ABOVE 560 - it is `display: none`, so every other
   screen keeps the single row the owner asked for in v29.3.
   ⚠ THE BASE `display: none` MUST STAY ABOVE THE MEDIA BLOCK. A media query
   adds no specificity, so the later rule wins on equal selectors - the v31.12
   lesson, one file along. */
.fpb-brk {
    display: none;
}

@media (max-width: 560px) {
    .fin-postbar {
        flex-wrap: wrap;
    }

        .fin-postbar > .fpb-brk {
            display: block;
            flex: 1 0 100%;
            height: 0;
            margin: 0;
        }

        /* ⚠⚠ v31.14 (owner: "the green tick takes an entire row on its own.
           Not a clever user of real-estate for small screens").
           WRAPPING ALONE WAS NOT ENOUGH. The status text is a flex item with
           the default `flex: 0 1 auto`, so its BASIS is its own content width
           - about 380px. That never fits beside the tick, so the whole span
           wrapped to line two and left the tick sitting alone on line one,
           costing a full row to one character.
           `flex: 1 1 0` gives it a basis of ZERO: it can no longer refuse to
           share the line, takes whatever is left beside the tick, and wraps
           its own text INSIDE that box instead of jumping below it. */
        .fin-postbar > .fpb-ok {
            flex: 0 0 auto;
            line-height: 1.4;
        }

        .fin-postbar > .fpb-txt {
            flex: 1 1 0;
            min-width: 0;
        }
}

/*  ══════════════════════════════════════════════════════════════════════════
    v31.86 (batch281, owner) - THE REPORTS SHELL, AND THE /home TOP ROW
    ══════════════════════════════════════════════════════════════════════════ */

/*  ── HISTORY, v31.86 → v31.91: THE ROW WAS BRIEFLY THREE CARDS ────────────
    Owner then: *"The card needs to be placed next to 'Today's focus' card by
    making that card 50% of the column space it occupies currently"* - so
    `1fr · 0.5fr · 0.5fr`, the shortcuts card keeping its full half and Today's
    focus giving up half of ITS half. v31.90 moved that from 1024 to 1366 after
    measuring the 03-Screen overlap it caused, and added a second mount for the
    narrow bands. **v31.92 takes the card out of the row entirely** - the block
    below says why, in the numbers. Kept as a note because "put it back in the
    row" is a live one-line option, not a new idea. ────────────────────────── */
/*  ══════════════════════════════════════════════════════════════════════════
    v31.92 (batch287, owner) - `.dash-top` IS TWO CARDS AGAIN, AND THE AI CARD
    IS FULL WIDTH BELOW IT.

    Owner: *"in AI Tokens in the home page, please add one more column so it
    becomes a 3 column responsive card."*

    ⚠⚠⚠ WHAT THIS BLOCK USED TO HOLD, AND WHY IT IS GONE:
      · a `1fr .5fr .5fr` row from 1366, putting the AI card in the row;
      · a `.tok-wide` / `.tok-stack` pair, one hidden at each width.
    **MEASURED, the row's third slot: 283px at 1366 and 1440, 333px at 1920 and
    2560.** One list column needs about 234px before the entity name clips - at
    1366 it was already clipping to 65px - so three columns want roughly 730px.
    A third of a row has never had half of that, at any width this app supports.

    ⚠⚠ SO THE ROW KEEPS THE TWO EQUAL COLUMNS IT HAS HAD SINCE 768 and the AI
    card takes a full width of its own. Three consequences, all wanted:
      · **Today's focus goes from 333px to 666px at 1920** - the row's `1fr`
        share stops being squeezed by a card that was never comfortable in it;
      · the **03-Screen overlap cannot come back** - it was a symptom of three
        cards in a row, and there are two;
      · **one mount, so no shared-id caveat**: the `i` dot, the note and every
        id inside the card exist exactly once in the document again.
    ⚠ PUTTING IT BACK is this block restored plus the second `PartialAsync`
    call in Home.cshtml - but it cannot be three columns there.
    ⚠⚠ AND THE COLUMN COUNT IS NOT DECIDED HERE AT ALL. It is a CONTAINER
    QUERY on the card's own width, in app.css: the card is a fraction of a grid
    column, so the viewport cannot answer how wide it is.
    ══════════════════════════════════════════════════════════════════════════ */

/*  ⚠⚠⚠ `.rpt-app` HAS NO SHELL GRID, AND THAT IS THE POINT - v31.102, batch297.

    This page was two shell columns until v31.101: `.scroll` at `minmax(0,1fr)`
    and an `.ai-side` rail at 390px carrying the parameter card. The owner's
    layout needs the rendered report to run underneath that card, and
    **nothing can span two columns of two different grids** - so the parameter
    and AI cards are members of the CONTENT grid (`.rpt-main`, in app.css) and
    the shell is just head + content.

    ⚠ v31.102 briefly put the rail back and a control measured what it costs:
    with the app's own side rail, a 300px Category column and a 390px right
    rail, the report fell to **342px at 1366 and 416px at 1440** - against 1046
    and 1120 on the delivered page. Three columns plus two rails do not fit
    below 1920. The rail is gone again and the third track lives inside
    `.rpt-main`, where the report can span it.

    ⚠ WHAT WENT WITH IT, AND WHY IT IS NO LOSS: the `align-content: start` fix
    (a grid with all-auto rows stretching a 68px header to 339.7px) and the
    `grid-row: 1` on `.screen-head` (v31.12 pushed a header to y=1777 without
    it) were both PROPERTIES OF THAT GRID. With no grid there is nothing to
    stretch and nothing to place. **Both traps are recorded in [[reports]] and
    both come straight back if a right rail is ever re-added here.**
    ⚠⚠ AND THE ORIGINAL WARNING STILL STANDS FOR ANY OTHER PAGE: `.mail-app`'s
    `260px | 1fr | 390px` pays 260px for a folders panel this module does not
    have. **Reports must not borrow it.**

    ⚠⚠ THE PROBE THAT MISSED ALL OF THIS HAD **NO SIDE RAIL** in its harness, so
    `.app-main` measured the whole viewport instead of the viewport minus the
    rail, capped at 1410. **A SHELL PROBE WITHOUT THE SHELL'S OWN FIRST CHILD IS
    MEASURING A DIFFERENT PAGE.** */