/* ═══════════════════════════════════════════════════════════
   LAYOUTS — app shell (sidebar, top bar, content, tab bar, "More"
   sheet), split pane, page header, auth shell.

   ≥ 900px   200px sidebar · 48px top bar · content scrolls in .cont
   < 900px   sticky header · bottom tab bar · the sidebar is a sheet
   ═══════════════════════════════════════════════════════════ */

/* ── APP SHELL ─────────────────────────────────────────────── */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
}

/* ── SIDEBAR ───────────────────────────────────────────────── */

.sb {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--line);
}

.sbh {
    height: var(--topbar-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
}

/* The dealer's small logo (Dealer:LogoMarkPath, else the logo) in place of the badge. */
.sbm-logo { display: block; flex: none; height: 28px; width: auto; max-width: 56px; object-fit: contain; }

.sbm {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: .02em;
}

.sbh-t { display: flex; flex-direction: column; min-width: 0; }
.sbn { font-size: 13px; line-height: 16px; font-weight: var(--weight-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbs { font-size: var(--text-xs); line-height: 14px; color: var(--text-3); }

/* The sheet's own header (phones). */
.sheet-hd { display: none; }

.sbnav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 12px;
    scrollbar-width: thin;
}

.sbgrp-block { display: flex; flex-direction: column; gap: 1px; }

.sbgrp {
    padding: 8px 8px 4px;
    font-size: var(--text-xs);
    line-height: 14px;
    font-weight: var(--weight-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.sbgrp-block + .sbgrp-block .sbgrp { padding-top: 12px; }

/* A nav row — links and the Sign out button alike. */
.sbi {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration), color var(--duration);
}

.sbi:hover { background: rgba(27, 26, 23, .05); color: var(--text); }
.sbi-ic { color: var(--text-3); }
.sbi-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sbi.act {
    background: var(--accent-tint);
    color: var(--text);
    font-weight: var(--weight-medium);
}

.sbi.act .sbi-ic { color: var(--accent); }

.sbi-sm { height: 28px; font-size: 12.5px; }

/* Counts beside a nav item: plain numbers; the alerts count is a warning pill. */
.sbbadge, .up-cnt {
    flex: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

/* Unread notifications (v11): the same pill in the accent, as the dealer's "something to act on". */
.sbbadge-accent {
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.sbbadge-warn {
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

/* "My bookings": the order-status dot sits where the icon would. */
.up-row .os-dot { margin: 0 4px 0 4px; }

.sbfoot {
    margin-top: auto;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 8px 12px;
    border-top: 1px solid var(--line);
}

.sb-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 2px 8px 8px;
    min-width: 0;
}

.sb-user-t { display: flex; flex-direction: column; min-width: 0; }
.sbun { font-size: 13px; line-height: 16px; font-weight: var(--weight-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbur { font-size: var(--text-xs); line-height: 14px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sb-signout { display: block; margin: 0; }

.sb-scrim { display: none; }

/* Sheet rows for what a phone's header no longer carries (Export CSV); see the < 600px block. */
.sbgrp-phone { display: none; }

/* ── MAIN COLUMN ───────────────────────────────────────────── */

.main {
    display: grid;
    grid-template-rows: var(--topbar-h) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

/* ── TOP BAR ───────────────────────────────────────────────── */

.top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

.top-mark, .top-mark-logo, .top-org, .top-account { display: none; }

.top-titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.top-t {
    font-size: var(--text-title);
    line-height: 20px;
    font-weight: var(--weight-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
    max-width: 60%;
}

.top-s {
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-search { flex: 0 1 300px; width: 300px; min-width: 160px; }

.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* ── CONTENT ───────────────────────────────────────────────── */

.cont {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--page-pad-y) var(--page-pad-x);
    scrollbar-width: thin;
}

.cont:focus { outline: none; }

/* Full-bleed pages (Master Inventory: filter bar · table · pager, edge to edge). A page opts in
   with ViewData["ContentClass"] = "cont-flush"; its .scr then fills the height as a column and
   the page's own regions scroll. */
.cont-flush {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cont-flush > .scr {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* A gentle fade on arrival. Opacity only: a transform here would become the containing block of
   every position:fixed descendant (the phone's full-screen pane) while it runs. */
.scr { animation: scr-in .16s var(--ease); }

@keyframes scr-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── TAB BAR (phones) ──────────────────────────────────────── */

.tabbar { display: none; }

/* ── PAGE HEADER (legacy .ph — the top bar now carries the title) ── */

.ph {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ph-t { font-size: var(--text-title); line-height: 20px; font-weight: var(--weight-semibold); color: var(--text); }
.ph-s { font-size: var(--text-sm); line-height: 16px; color: var(--text-3); margin-top: 2px; }

/* ── SPLIT PANE ────────────────────────────────────────────────
   A list with a detail pane beside it (js/pane.js has the API).
     .split            container; .is-open while a pane shows
     .split-main       the list side (min-width 0; scrolls itself)
     .split-pane       the detail pane (var(--pane-w)), [hidden] when closed
       .pane-hd        44px header row: context, prev/next, close (icon-btn)
       .pane-body      scrolling body; children separated by 16px
       .pane-section   a section inside the body, with a hairline above
       .pane-ft        optional footer pinned to the bottom (actions)
   ≥ 1200px docked · 900–1199px overlays the list · < 900px full screen. */

.split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
}

.split.is-open { grid-template-columns: minmax(0, 1fr) var(--pane-w); }

/* On a full-bleed page the split takes the height left by the page's bars. */
.cont-flush .split { flex: 1; }

.split-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.split-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--surface);
    border-left: 1px solid var(--line-strong);
}

.split-pane[hidden] { display: none; }

.pane-hd {
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 10px 0 20px;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-sm);
    color: var(--text-2);
}

.pane-hd-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pane-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
    scrollbar-width: thin;
}

.pane-title {
    font-size: var(--text-pane-title);
    line-height: 26px;
    font-weight: var(--weight-semibold);
    letter-spacing: -.01em;
}

.pane-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.pane-ft {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

/* Full width (Ec.pane.setFull): the pane takes the whole split and the list is set aside. */
@media (min-width: 900px) {
    .split.is-open.is-full { grid-template-columns: minmax(0, 1fr); }
    .split.is-full > .split-main { display: none; }

    .split.is-full > .split-pane {
        position: static;
        width: auto;
        border-left: 0;
        box-shadow: none;
    }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
    .split.is-open { grid-template-columns: minmax(0, 1fr); }

    .split-pane {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        width: min(var(--pane-w), 100%);
        box-shadow: var(--shadow-overlay);
    }
}

/* ═══════════════════════════════════════════════════════════
   PHONES AND PORTRAIT TABLETS (< 900px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 899.98px) {
    .app-shell {
        display: block;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .main { display: block; }

    /* ── Header: mark · title/dealer · actions · account; the search below 600px ── */
    .top {
        position: sticky;
        top: 0;
        z-index: 40;
        min-height: 56px;
        padding: 6px 4px 6px 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        gap: 8px;
    }

    .top-mark-logo { display: block; flex: none; height: 30px; width: auto; max-width: 60px; object-fit: contain; }

    .top-mark {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex: none;
        border-radius: var(--radius-lg);
        background: var(--accent);
        color: var(--on-accent);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        letter-spacing: .02em;
    }

    .top-titles { flex-direction: column; align-items: stretch; gap: 0; }
    .top-t { max-width: none; font-size: 17px; line-height: 22px; }
    .top-t-lead { display: none; }
    .top-s { display: none; }

    .top-org {
        display: block;
        font-size: 13px;
        line-height: 16px;
        color: var(--text-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .top-search { flex: 0 1 280px; width: auto; min-width: 0; }
    .top-actions { gap: 0; }

    .top-account {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--touch);
        height: var(--touch);
        flex: none;
        border: 0;
        border-radius: var(--radius-lg);
        background: transparent;
    }

    .top-account .avatar { width: 32px; height: 32px; font-size: var(--text-sm); }

    .cont {
        overflow: visible;
        padding: var(--page-pad-y) var(--page-pad-x) calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
    }

    .cont-flush { padding: 0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

    /* ── Tab bar ── */
    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--line);
        background: var(--surface);
    }

    .tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--touch);
        border: 0;
        background: transparent;
        color: var(--text-2);
        font-size: var(--text-sm);
        line-height: 14px;
        font-weight: var(--weight-medium);
        text-decoration: none;
    }

    .tab:hover { color: var(--text); }
    .tab:focus-visible { outline-offset: -4px; }

    .tab.act { color: var(--accent); font-weight: var(--weight-semibold); }

    .tab.act::before {
        content: '';
        position: absolute;
        top: 0;
        left: 28%;
        right: 28%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--accent);
    }

    .tab-ic { position: relative; display: flex; }

    .tab-badge {
        position: absolute;
        top: -5px;
        left: 14px;
        min-width: 20px;
        height: 16px;
        padding: 0 4px;
        border: 1.5px solid var(--surface);
        border-radius: 8px;
        background: var(--warn);
        color: #FFFFFF;
        font-size: 10.5px;
        line-height: 13px;
        font-weight: var(--weight-semibold);
        text-align: center;
    }

    .tab-badge-accent { background: var(--accent); color: var(--on-accent); }

    /* ── The sidebar becomes the "More" sheet ── */
    .sb {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 190;
        max-height: min(88vh, 720px);
        max-height: min(88dvh, 720px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom);
        border-right: 0;
        border-top: 1px solid var(--line);
        border-radius: 10px 10px 0 0;
        background: var(--surface);
        box-shadow: var(--shadow-overlay);
        transform: translateY(100%);
        visibility: hidden;   /* closed = out of the tab order and the accessibility tree */
        transition: transform .25s var(--ease), visibility 0s linear .25s;
    }

    .app-shell.nav-open .sb {
        transform: none;
        visibility: visible;
        transition: transform .25s var(--ease), visibility 0s;
    }

    .sb-scrim {
        position: fixed;
        inset: 0;
        z-index: 180;
        background: var(--scrim);
    }

    .app-shell.nav-open .sb-scrim { display: block; }

    .sbh { display: none; }

    .sheet-hd {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 4px 4px 4px 16px;
        border-bottom: 1px solid var(--line);
        background: var(--surface);
    }

    .sheet-t { flex: 1; font-size: 17px; line-height: 22px; font-weight: var(--weight-semibold); }

    /* Dashboard, Master Inventory and Alerts are in the tab bar. */
    .sbgrp-overview { display: none; }
    .sbgrp-block + .sbgrp-block .sbgrp, .sbgrp { padding: 12px 12px 4px; }

    .sbnav { flex: none; overflow: visible; padding: 4px 8px 8px; }

    .sbi, .sbi-sm { height: var(--touch); padding: 0 12px; font-size: 15px; }
    .sbbadge, .up-cnt { font-size: 14px; }

    .sbfoot { margin-top: 0; padding: 8px 8px 12px; }
    .sb-user { padding: 6px 12px 8px; }
    .sbun { font-size: 15px; line-height: 20px; }
    .sbur { font-size: 13px; line-height: 16px; }

    /* ── Split pane: full screen ── */
    .split.is-open { grid-template-columns: minmax(0, 1fr); }

    .split-pane {
        position: fixed;
        inset: 0;
        z-index: 150;
        border-left: 0;
    }

    .pane-hd { height: 56px; padding: 0 4px 0 16px; font-size: 14px; }
    .pane-body { padding: 16px; }
    .pane-ft { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    html.pane-fullscreen body { overflow: hidden; }
}

/* Phones: the search gets its own full-width row under the title. */
@media (max-width: 599.98px) {
    .top { flex-wrap: wrap; row-gap: 2px; padding-bottom: 10px; }
    .top-titles { flex: 1 1 0; }
    /* 12px + the header's 4px right padding = the 16px gutter the page uses. (.top > .top-search:
       components.css resets .tsearch's margin and loads after this file.) */
    .top > .top-search { order: 10; flex: 1 1 100%; margin-right: 12px; }

    /* A-Phone: mark · title / dealer · account, nothing else. Add Unit is in the "More" sheet
       (stock managers), Import CSV on the Add Unit page, Export CSV in the sheet (.sbgrp-phone). */
    .top-actions { display: none; }
    .sbgrp-phone { display: flex; }
}

/* ═══════════════════════════════════════════════════════════
   ACCOUNT PAGES IN THE CONSOLE — Change password, Page not found
   (Views/Account/ChangePassword.cshtml, Views/Shared/NotFound.cshtml,
   for a signed-in member of staff: CurrentUser.UsesConsole)
   ═══════════════════════════════════════════════════════════ */

.account { max-width: 480px; }
.account-body { display: flex; flex-direction: column; gap: 14px; }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 899.98px) {
    .account { max-width: none; }
    .account-actions .btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════
   AUTH SHELL — sign in, change password, access denied, errors
   (Views/Shared/_LayoutAuth.cshtml)
   ═══════════════════════════════════════════════════════════ */

.auth-shell {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
}

.auth-aside {
    display: flex;
    flex-direction: column;
    padding: 40px 48px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--line);
}

.auth-brand { display: flex; align-items: center; gap: 12px; }

.auth-mark {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: .02em;
}

/* The dealer's logo (Dealer:LogoPath) in place of the badge: over the name on a desktop's panel. */
.auth-brand.has-logo { flex-direction: column; align-items: flex-start; gap: 14px; }
.auth-logo { display: block; height: 128px; width: auto; max-width: 100%; object-fit: contain; }

.auth-brand-t { display: flex; flex-direction: column; min-width: 0; }
.auth-brand-n { font-size: 15px; line-height: 20px; font-weight: var(--weight-semibold); }
.auth-brand-s { font-size: var(--text-sm); line-height: 16px; color: var(--text-3); }

.auth-pitch {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 380px;
}

.auth-pitch-t {
    font-size: 26px;
    line-height: 34px;
    font-weight: var(--weight-medium);
    letter-spacing: -.01em;
}

.auth-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--text-2);
}

.auth-points li { display: flex; gap: 10px; align-items: flex-start; }
.auth-points svg { margin-top: 1px; color: var(--accent); }

.auth-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
    line-height: 16px;
    color: var(--text-3);
}

.auth-pitch + .auth-foot { margin-top: 0; }
.auth-foot-phone { display: none; }

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 40px 24px;
}

.auth-panel {
    width: 360px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-head { display: flex; flex-direction: column; gap: 6px; }

.auth-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: var(--weight-semibold);
    letter-spacing: -.01em;
}

.auth-lead { color: var(--text-2); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field-label { color: var(--text); }
.auth-form .input { height: var(--control-h-lg); }
.auth-form .input-code { font-family: var(--font-mono); letter-spacing: .02em; }
.auth-form .btn-submit { height: var(--control-h-lg); margin-top: 4px; font-weight: var(--weight-semibold); }

/* The fixed branch: shown, not chosen, while this install has one. */
.auth-branch {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 12.5px;
}

.auth-branch svg { color: var(--text-3); }
.auth-branch-v { font-weight: var(--weight-semibold); color: var(--text); }
.auth-branch-note { margin-left: auto; font-size: var(--text-sm); color: var(--text-3); }

.auth-help {
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
    line-height: 17px;
    color: var(--text-2);
}

.auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 899.98px) {
    .auth-shell {
        display: flex;
        flex-direction: column;
        padding: 32px 24px 24px;
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }

    .auth-aside { display: block; padding: 0; background: none; border: 0; }
    .auth-mark { width: 40px; height: 40px; border-radius: 7px; font-size: 14px; }
    .auth-brand.has-logo { flex-direction: row; align-items: center; gap: 12px; }
    .auth-logo { height: 56px; }
    .auth-brand-n { font-size: 16px; line-height: 21px; }
    .auth-brand-s { font-size: 13px; line-height: 18px; }
    .auth-pitch, .auth-aside .auth-foot { display: none; }

    .auth-main { display: block; padding: 0; margin-top: 56px; }
    .auth-panel { width: auto; gap: 24px; }
    .auth-title { font-size: 26px; line-height: 32px; }
    .auth-form { gap: 18px; }
    .auth-form .btn-submit { height: 50px; font-size: 16px; }
    /* A-LoginPhone: the eye is a 44px target inside the 48px field. */
    .auth-form .input-reveal > .input { padding-right: 52px; }
    .auth-form .input-reveal-btn { right: 2px; width: var(--touch); height: var(--touch); border-radius: 5px; }
    .auth-form .input-reveal-btn svg { width: 20px; height: 20px; }
    .auth-branch { min-height: var(--touch); padding: 0 14px; font-size: 14px; border-radius: var(--radius-lg); }
    .auth-branch-note { display: none; }
    .auth-help { padding-top: 0; border-top: 0; font-size: 14px; line-height: 20px; }

    .auth-main { margin-bottom: 24px; }
    .auth-foot-phone { display: flex; margin-top: auto; padding-top: 14px; font-size: 13px; line-height: 18px; }
}

/* Touch screens: no hover fill left behind on a tapped row (components.css, "Touch screens"). */
@media (hover: none) {
    .sbi:not(.act):hover { background: transparent; color: var(--text-2); }
}