/* ============================================================================================================
   PHONE LAYER — the app on a handheld (a Galaxy S25 is 384 css px wide; the field range is 360-430).

   Everything in this file lives inside `@media (max-width: 47.99rem)` (below the tablet step at 48rem that
   the rest of the app already uses), so the tablet and desktop layouts are not touched by a single rule here.
   Linked AFTER the head's scoped-CSS bundle (TradeYoke.Web.styles.css) so these overrides win on order; where
   a component's scoped rule is more specific, the selector below is deliberately a notch heavier and says so.

   Components reference only --ty-* tokens (never raw hex) — see /design/ui. The chrome geometry tokens
   (--ty-bottomnav-h, --ty-trialstrip-h, --ty-fab-*) are re-published here for the phone so every consumer
   of the corner rail (the + button, messages, the page's own FAB, the content's bottom padding) moves together.

   Behavioural classes on <html> come from mobile-shell.js:  ty-kbd (keyboard up) · ty-chrome-away (scrolling down).
   ============================================================================================================ */

@media (max-width: 47.99rem) {

    /* ── Chrome geometry ──────────────────────────────────────────────────────────────────────────────
       The nav bar is measured (item + padding + hairline), not guessed: the old 60px token was 4px short of the
       64px bar, which is why the last card sat under it. A slimmer 56px bar, a one-line 46px trial strip, and
       48px floating buttons on a tighter rail take the fixed stack from ~25% of an 832px screen to ~15%. */
    :root {
        --ty-bottomnav-h: 56px;
        --ty-trialstrip-h: 2.875rem;
        --ty-fab-size: 3rem;
        --ty-fab-gap: .5rem;
        --ty-fab-inset: .875rem;
        --ty-fab-bottom: calc(var(--ty-bottomnav-h, 56px) + var(--ty-trialstrip-clearance, 0px) + .625rem + var(--ty-safe-bottom, env(safe-area-inset-bottom, 0px)));
        --ty-fab-slot-1: var(--ty-fab-inset);
        --ty-fab-slot-2: calc(var(--ty-fab-inset) + (var(--ty-fab-size) + var(--ty-fab-gap)));
        --ty-fab-slot-3: calc(var(--ty-fab-inset) + 2 * (var(--ty-fab-size) + var(--ty-fab-gap)));
        /* How much the content must clear below its last line: the bar, the strip, the home indicator AND the
           floating-button row, so "Showing 1 of 1", a price or a card's last line is never underneath a button. */
        --ty-content-clear: calc(var(--ty-bottomnav-h, 56px) + var(--ty-trialstrip-clearance, 0px) + var(--ty-safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--ty-fab-size) + 1.25rem);
    }

    /* No 300 ms tap delay, no grey flash, no stray text selection on controls, momentum scrolling, and no
       horizontal pan of the whole page. */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
    body { overflow-x: clip; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
    a, button, [role="button"], summary, label, select, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
    button, [role="button"], .btn, .ty-btn, .cl-chip, .nav-link, .ty-bn-item, .ty-seg-item {
        -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    }

    /* Pressed state: native controls answer the finger immediately. */
    button:not(:disabled):active, .btn:not(.disabled):active, .ty-btn:not(:disabled):active,
    :root:root .cl-chip:active, :root:root .ty-bn-item:active, :root:root .nav-link:active, :root:root .qa-item:active {
        transform: scale(.97);
        filter: brightness(.94);
        transition: transform 60ms ease, filter 60ms ease;
    }

    /* ── Page gutters and bottom clearance ────────────────────────────────────────────────────────── */
    :root:root .page main article.content.px-4 { padding-left: .875rem !important; padding-right: .875rem !important; padding-top: .25rem; }
    :root:root .page main article.content { padding-bottom: var(--ty-content-clear); }
    :root:root .page main .top-row.px-4 { padding-left: .5rem !important; padding-right: .5rem !important; }

    /* ── Top bar: smaller, the language reduced to its flag, the account to a short chip ──────────── */
    :root:root .page main > .top-row { min-height: calc(3rem + var(--ty-safe-top, 0px)); flex-wrap: nowrap; }
    :root:root .ty-lang-flag__code { display: none; }
    :root:root .ty-account__name { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── The documents sticky ────────────────────────────────────────────────────────────────────────
       (2026-10-14, owner request.) Back on phones as a slim edge handle — the One UI Edge-panel / iOS pull-tab
       idiom: 22px of visible folder low on the right edge, in thumb reach (clear of the top bar, the floating
       buttons and the bottom bar), with an invisible 48px hit area (::before, measured by the phone audit). The
       label and grip go; the colour and badge still say whose documents (company / job / customer / vehicle).
       It tucks away with the floating buttons while scrolling down and leaves the screen to the keyboard. */
    :root:root .dl-pull {
        top: 60%;                     /* the thumb zone, above the floating-button rail on a 360-430px phone */
        width: 1.375rem; min-width: 0; height: 3.5rem; min-height: 0;
        padding: 0; gap: 0; justify-content: center;
        overflow: visible;
        border-radius: 10px 0 0 10px;
        opacity: .94;
        box-shadow: -3px 4px 12px -6px rgba(var(--ty-shadow-rgb, 12, 18, 28), .5);
    }
    :root:root .dl-pull::before {
        content: ""; position: absolute;
        left: -1.625rem; top: -.25rem; width: 3rem; height: 4rem;   /* 48 x 64 hit area, flush with the screen edge */
    }
    :root:root .dl-pull .dl-pull__grip, :root:root .dl-pull .dl-pull__label { display: none; }
    :root:root .dl-pull .dl-pull__ic { font-size: .95rem; margin-left: -.1rem; }
    :root:root .dl-pull .dl-pull__badge { width: .8rem; height: .8rem; font-size: .45rem; right: auto; left: -.45rem; bottom: -.35rem; }   /* inboard: the right side is the screen edge */
    :root:root .dl-pull:hover, :root:root .dl-pull:focus-visible { transform: translateY(-50%); }
    html.ty-chrome-away .dl-pull { transform: translateY(-50%) translateX(calc(100% + 4px)); opacity: 0; pointer-events: none; }
    html.ty-kbd .dl-pull { display: none !important; }

    /* ── Floating buttons ─────────────────────────────────────────────────────────────────────────── */
    :root:root .qa-fab, :root:root .comms-trigger, :root:root .cl-fab-btn, :root:root .cl-docfab {
        transition: transform .22s cubic-bezier(.2, 0, 0, 1), opacity .18s ease, background-color .12s;
        font-size: 1.2rem;
    }
    :root:root .qa-fab, :root:root .comms-trigger { width: var(--ty-fab-size); height: var(--ty-fab-size); border-radius: 14px; }

    /* Scrolling down through content: tuck the floating buttons and the trial strip away; the first
       upward scroll brings them back. */
    html.ty-chrome-away .qa-fab:not(.on), html.ty-chrome-away .comms-trigger,
    html.ty-chrome-away .cl-fab, html.ty-chrome-away .cl-recfabs {
        transform: translateY(calc(var(--ty-fab-size) + var(--ty-fab-bottom) + 1rem));
        opacity: 0; pointer-events: none;
    }
    :root:root .ty-trialstrip { transition: transform .22s cubic-bezier(.2, 0, 0, 1), opacity .18s ease; }
    html.ty-chrome-away .ty-trialstrip { transform: translateY(calc(100% + var(--ty-bottomnav-h, 56px))); opacity: 0; pointer-events: none; }

    /* The on-screen keyboard is up: nothing fixed may share the screen with it. */
    html.ty-kbd .ty-bottomnav, html.ty-kbd .ty-trialstrip, html.ty-kbd .qa-fab, html.ty-kbd .comms-trigger,
    html.ty-kbd .cl-fab, html.ty-kbd .cl-recfabs, html.ty-kbd .wz-guideme {
        display: none !important;
    }
    :root:root.ty-kbd .page main article.content { padding-bottom: 1rem; }

    /* ── Trial strip: one line, slim, still dismissible ───────────────────────────────────────────── */
    :root:root .ty-trialstrip { padding: 0 .25rem 0 .75rem; gap: .5rem; font-size: .8125rem; border-top-width: 1px; }
    :root:root .ty-trialstrip__dot { display: none; }
    :root:root .ty-trialstrip__text { flex-wrap: nowrap; overflow: hidden; }
    :root:root .ty-trialstrip__text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :root:root .ty-trialstrip__cta { padding: .3rem .65rem; font-size: .8125rem; white-space: nowrap; }

    /* ── Bottom nav ───────────────────────────────────────────────────────────────────────────────── */
    :root:root .page main .ty-bottomnav { padding: 3px 4px calc(3px + var(--ty-safe-bottom, env(safe-area-inset-bottom, 0px))); }
    :root:root .page main .ty-bottomnav .ty-bn-item { padding: 4px 2px 3px; gap: 1px; min-height: 48px; justify-content: center; }
    :root:root .page main .ty-bottomnav .ty-bn-item span { font-size: .6875rem; }
    :root:root .page main .ty-bottomnav .ty-bn-ico { font-size: 1.25rem; }

    /* ── The + "Create" menu becomes a bottom sheet ───────────────────────────────────────────────── */
    :root:root .qa-fab.on { opacity: 0; pointer-events: none; }
    :root:root .qa-backdrop { background: rgba(var(--ty-color-overlay-rgb, 12, 18, 28), .5); animation: ty-m-fade .18s ease; }
    :root:root .qa-menu {
        left: 0; right: 0; bottom: 0; min-width: 0; max-width: none; width: auto;
        border-radius: 20px 20px 0 0; border-width: 1px 0 0;
        padding: .25rem .75rem calc(.75rem + var(--ty-safe-bottom, env(safe-area-inset-bottom, 0px)));
        transform-origin: bottom center;
        animation: ty-m-sheet .24s cubic-bezier(.2, 0, 0, 1);
    }
    :root:root .qa-menu::before { content: ""; display: block; width: 2.25rem; height: .25rem; margin: .4rem auto .25rem; border-radius: 999px; background: var(--ty-color-border-strong, #c9d1da); }
    :root:root .qa-menu-hd { padding: .35rem .5rem .35rem; }
    :root:root .qa-item { min-height: 3rem; padding: .35rem .5rem; font-size: 1rem; }
    :root:root .qa-item-ico { width: 2.25rem; height: 2.25rem; }

    /* ── Nav drawer: a real scrim, no scroll chaining ─────────────────────────────────────────────── */
    html:has(.page.nav-open) { overflow: hidden; }
    :root:root .sidebar { overscroll-behavior: contain; }

    /* ── Dashboard: the greeting first, then the work ─────────────────────────────────────────────── */
    :root:root .ty-dash__identity { display: none; }          /* name + email are already in the top bar's account chip */
    :root:root .ty-dash__title { font-size: 1.5rem; line-height: 1.2; }
    :root:root .ty-dash__subtitle { margin-bottom: .5rem; }
    /* "Finish setting up": a swipeable strip of compact tiles instead of a tall two-column grid. */
    :root:root .setup-strip { margin-bottom: .75rem; }
    :root:root .setup-strip__row {
        display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity;
        margin-inline: -.875rem; padding: .125rem .875rem .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    :root:root .setup-strip__row::-webkit-scrollbar { display: none; }
    :root:root .setup-strip__tile { flex: 0 0 8.5rem; scroll-snap-align: start; padding: .55rem .5rem; gap: .2rem; }
    /* KPI cards: two across, value beside its label, no tall whitespace. */
    :root:root .ty-kpi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    :root:root .ty-kpi__card { padding: .6rem .7rem; }
    :root:root .ty-kpi__icon { width: 30px; height: 30px; margin-bottom: 2px; font-size: .95rem; }
    :root:root .ty-kpi__value { font-size: 1.5rem; }
    :root:root .ty-kpi__label, :root:root .ty-kpi__caption { font-size: .75rem; }

    /* ── Tap targets: 48px, not 40 ─────────────────────────────────────────────────────────────────────
       app.css already floors the shared icon / chip / button vocabulary at 40px below 600px with !important
       (a scoped bundle loads after it, so nothing less forceful could win). A thumb wants 44 (WCAG 2.5.5
       target size; Material asks for 48 including spacing), so this raises that same list by the same
       means, with a selector heavy enough to beat the 40px rule. Icon-only controls keep their glyphs
       centred; the glyph size does not change, only the area around it. */
    :root:root .ty-iconbtn, :root:root .ty-pager__btn, :root:root .ty-chip, :root:root .cl-chip, :root:root .jl-chip,
    :root:root .inv-chip, :root:root .ci-btn, :root:root .cl-act, :root:root .cl-job, :root:root .p2-iconbtn,
    :root:root a.ty-dir, :root:root .ty-lang-flag, :root:root .ty-tour-replay-btn, :root:root .coach-btn,
    :root:root .coach-skip, :root:root .ty-pin, :root:root .ty-order-btn, :root:root .ty-sortsel__dir,
    :root:root .ty-account__trigger, :root:root .pl-map-toggle, :root:root .ty-dl-segbtn, :root:root .hb {
        min-width: 48px !important; min-height: 48px !important;
    }
    :root:root .btn, :root:root .ty-btn, :root:root .ty-btn-primary, :root:root .ty-btn-ghost, :root:root .ty-btn-quiet,
    :root:root .p2-btn, :root:root .p2-cta, :root:root .pl-act, :root:root .nc-back, :root:root .ad-toggle,
    :root:root .ty-sortsel__select { min-height: 48px !important; }
    :root:root .ty-pin, :root:root .ty-order-btn, :root:root .ty-sortsel__dir, :root:root .ty-account__trigger, :root:root .hb {
        display: inline-flex; align-items: center; justify-content: center;
    }
    /* The little "i" beside a label: a 48px hit area that does not push the label's line apart. */
    :root:root .fh-btn { min-width: 48px !important; min-height: 48px !important; margin-block: -.65rem; }
    /* Destructive: pushed to the far end of the actions line, with a gap no thumb lands in by accident
       (the delete is also a two-step arm-then-confirm, so one stray tap never deletes). */
    :root:root .cl-row > .cl-act--danger { margin-left: auto; }
    :root:root .cl-row > .cl-act--danger + .cl-act { margin-left: .25rem; }
}

@media (max-width: 47.99rem) {

    /* ── Page roots: their own side/top/bottom padding stacked on the shell's gutter (34px a side) and the
       shell already clears the bottom chrome, so a 4rem tail was dead space ───────────────────────────── */
    :root:root .cl, :root:root .jl { padding: .5rem 0 .5rem; }

    /* ── Dashboard ───────────────────────────────────────────────────────────────────────────────── */
    :root:root .ty-dash { gap: .875rem; padding-bottom: .5rem; }
    :root:root .ty-dash__titlerow { flex-wrap: nowrap; gap: .5rem; }
    :root:root .ty-dash__title { flex: 1 1 auto; min-width: 0; }
    :root:root .ty-dash__tools { flex: none; }
    :root:root .ty-dash__subtitle { margin-top: .125rem; }

    /* ── Customers: one card = who + where on top, a single action line below ──────────────────────── */
    :root:root .cl-head { gap: .5rem; margin-bottom: .5rem; }
    :root:root .cl-title { font-size: 1.25rem; }
    :root:root .cl-searchrow { margin-bottom: .5rem; }
    :root:root .cl-search { min-width: 0; padding: .35rem .55rem .35rem .85rem; }
    :root:root .cl-tools { gap: .375rem; margin-bottom: .5rem; }
    :root:root .cl-sortbar { flex: 1 1 100%; margin-left: 0; }
    :root:root .cl-list { gap: .5rem; }
    :root:root .cl-row { gap: .375rem .375rem; padding: .625rem .625rem .5rem; align-items: flex-start; }
    :root:root .cl-main { flex: 1 1 calc(100% - 7rem); min-width: 8rem; }
    :root:root .cl-sub { white-space: normal; overflow: visible; }
    :root:root .cl-row > .cl-job { margin-left: 0; }
    :root:root .cl-row > .cl-act, :root:root .cl-row > .cl-job { align-self: center; }
    :root:root .cl-act { border-radius: 10px; }

    /* ── Jobs: three tidy rows of controls instead of a five-row wrap ───────────────────────────────── */
    :root:root .jl-head { gap: .5rem; margin-bottom: .5rem; }
    :root:root .jl-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .375rem; margin-bottom: .5rem; align-items: center; }
    :root:root .jl-when { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; gap: .375rem; overflow-x: auto; scrollbar-width: none; margin-inline: -.875rem; padding-inline: .875rem; }
    :root:root .jl-when::-webkit-scrollbar { display: none; }
    :root:root .jl-when > * { flex: none; }
    :root:root .jl-sep { display: none; }
    :root:root .jl-sortbar { grid-column: 1 / -1; }
    :root:root .jl-chip, :root:root .jl-when .jl-chip { min-height: 48px; }

    /* ── Planning: nothing may be wider than the screen ─────────────────────────────────────────────── */
    :root:root .p2 { padding-inline: 0; }
    :root:root .p2-hero { grid-template-columns: minmax(0, 1fr); padding: .75rem .875rem; }
    :root:root .p2-hero-main, :root:root .p2-hero-side { min-width: 0; max-width: 100%; }
    :root:root .p2-steps { flex-wrap: wrap; row-gap: .25rem; }
    :root:root .p2-step + .p2-step::before { width: 14px; margin: 0 5px; }
    :root:root .p2-viewrow { flex-wrap: wrap; row-gap: .375rem; }
    :root:root .p2-days-row { gap: 3px; }
}

@media (max-width: 47.99rem) {

    /* ── A record's panel (job / customer) ─────────────────────────────────────────────────────────────
       The site map's phone height and card cap live with the map now (FB-189: LiveMapView's compact preview,
       sized by JobDetailPage.razor.css); one finger scrolls the panel and two pan the map (tyMap.js
       "cooperative-touch"). */
    :root:root .jd-head { padding: .75rem 1rem 1rem; }
    :root:root .jd-rows, :root:root .jd-profit { padding-left: 1rem; padding-right: 1rem; }
    :root:root .jd-row-lbl { width: 6.5rem; }
}

@media (max-width: 47.99rem) {

    /* ── Schedule: title + New on one line, the view switch, the date, the filters — four short rows
       rather than a 270px stack of wrapped controls ──────────────────────────────────────────────────── */
    :root:root .ty-sched { padding-top: .25rem !important; padding-inline: 0; }
    :root:root .ty-sched-head { gap: .5rem; margin-bottom: .5rem; }
    :root:root .ty-sched-head > .ty-sched-title { order: 0; flex: 1 1 auto; font-size: 1.375rem; }
    :root:root .ty-sched-head > .ty-btn-primary { order: 1; padding: .55rem 1rem; min-height: 48px; }
    :root:root .ty-sched-head > .ty-seg--views { order: 2; flex: 1 1 100%; }
    :root:root .ty-sched-head > .ty-pin { order: 3; }
    :root:root .ty-sched-head > .ty-datenav { order: 3; flex: 1 1 auto; justify-content: space-between; }
    :root:root .ty-sched-head > .ty-today-btn { order: 3; padding: .6rem .9rem; min-height: 48px; }
    :root:root .ty-sched-head > .ty-sched-spacer { display: none; }
    :root:root .ty-sched-head > .d-inline-flex { order: 4; }
    :root:root .ty-sched-head > .ty-tour-replay-btn { order: 5; margin-left: auto; font-size: 0; min-width: 48px; min-height: 48px; justify-content: center; }
    :root:root .ty-sched-head .ty-iconbtn { width: 48px; height: 48px; }
    :root:root .ty-sched-head .ty-chip { min-height: 48px; min-width: 48px; justify-content: center; }
    :root:root .ty-seg-item { min-height: 48px; }
    :root:root .ty-period { margin-bottom: .5rem; padding-bottom: .375rem; }
    :root:root .ty-period-name { font-size: 1.25rem; }

    /* Week: each day is a slim row — the date on the left, its jobs below — not a 220px box of nothing. */
    :root:root .ty-week { gap: .5rem; }
    :root:root .ty-week-colhead { display: flex; align-items: center; gap: .5rem; text-align: left; padding: .125rem 0 .25rem; }
    :root:root .ty-week-colhead .dow { display: inline; }
    :root:root .ty-week-colhead .dom { margin-top: 0; width: 48px; height: 48px; }
    :root:root .ty-week-colhead .ty-week-weather { margin-left: auto; }
    :root:root .ty-week-cells { min-height: 3.25rem; padding: .375rem; }
    :root:root .ty-month-cell { min-height: 4.5rem; }
}

@media (max-width: 47.99rem) {

    /* ── Documents drawer: the heading, not a paragraph, leads ───────────────────────────────────────── */
    :root:root .dl-drawer-lede { margin-bottom: .5rem; }
    :root:root .dl-drawer-lede h2 { font-size: 1.2rem; }
    :root:root .dl-drawer-lede p { display: none; }

    /* ── Sheets and drawers respect the home-indicator / gesture strip ───────────────────────────────── */
    :root:root .dl-drawer, :root:root .comms-drawer { padding-bottom: var(--ty-safe-bottom, env(safe-area-inset-bottom, 0px)); }
}

@keyframes ty-m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ty-m-sheet { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
    .qa-menu, .qa-backdrop { animation: none; }
    .qa-fab, .comms-trigger, .ty-trialstrip { transition: none; }
}

/* Touch phones only: the schedule's drag grip is dead weight there (a card cannot be dragged on touch; the up /
   down nudges beside it do the job), and it took a fifth of a card's width. A narrow desktop window with a mouse
   keeps its grip. */
@media (max-width: 47.99rem) and (pointer: coarse) {
    :root:root .ty-drag-grip { display: none; }
    :root:root .ty-jobcard-body { padding: .6rem .7rem; }
}

@media (max-width: 47.99rem) {

    /* ── Nothing may be wider than the screen ────────────────────────────────────────────────────────────
       Measured at 360 / 384 / 430 across the menu's pages: these were the ones that ran past the edge. */
    /* A page's title row (h1 + its actions) wraps instead of pushing the actions off the right edge. */
    :root:root article.content .d-flex:has(> h1), :root:root article.content .d-flex:has(> h2.h3) { flex-wrap: wrap; row-gap: .5rem; }
    /* A segmented control wider than the screen scrolls inside itself. */
    :root:root .ty-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    :root:root .ty-seg::-webkit-scrollbar { display: none; }
    :root:root .ty-seg > * { flex: none; }
    /* Wide fixed-column tables scroll inside their own box. */
    :root:root table.ph-hours { display: block; max-width: 100%; overflow-x: auto; }
    /* A from-to date pair wraps. */
    :root:root .inv-range { flex-wrap: wrap; }
    :root:root .inv-range input { min-width: 0; max-width: 100%; }
    :root:root .au-seq li { flex-wrap: wrap; }
    :root:root .au-seq-ch { white-space: normal; }
}

/* Six bottom-nav destinations on a 360px screen: the longest label ("Customers") has to fit its slot. */
@media (max-width: 23.75rem) {
    :root:root .page main .ty-bottomnav .ty-bn-item span { font-size: .625rem; letter-spacing: -.01em; }
}

/* ============================================================================================================
   TAP TARGETS — 48 x 48 css px of hit area, 8px between neighbours (Material's bar; Apple asks 44).
   Verified on every route by TradeYoke.E2E/Phone/PhoneAuditTests (the probe in Phone/phone-audit.js measures the
   hit area including a label that belongs to a checkbox/radio and an absolutely positioned ::before/::after).
   Below, the floor is stated ONCE for the whole vocabulary; component families that need more than a floor
   (a gap, a hit-area extension where the visual must stay small) follow it.
   ============================================================================================================ */
@media (max-width: 47.99rem) {
    :root { --ty-tap: 48px; --ty-tap-gap: .5rem; }

    :root:root button, :root:root [role="button"], :root:root a.btn, :root:root a.ty-btn, :root:root summary,
    :root:root select, :root:root textarea,
    :root:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]) {
        min-height: var(--ty-tap);
    }
    :root:root button, :root:root [role="button"] { min-width: var(--ty-tap); }
    :root:root summary { display: flex; align-items: center; }

    /* A checkbox / radio row: the whole label is the target, the box sits at its start. */
    :root:root .form-check { display: flex; align-items: center; gap: .625rem; min-height: var(--ty-tap); padding-left: 0; margin-bottom: 0; }
    :root:root .form-check .form-check-input { float: none; margin: 0; flex: none; }
    :root:root .form-check .form-check-label { flex: 1 1 auto; display: flex; align-items: center; min-height: var(--ty-tap); }
}

@media (max-width: 47.99rem) {

    /* Label + box rows wherever the markup wraps the control in its own label (switches, "show tips", notify
       toggles): the label is the target, so it gets the 48px row. */
    :root:root label:has(> input[type="checkbox"]), :root:root label:has(> input[type="radio"]) {
        display: flex; align-items: center; gap: .625rem; min-height: var(--ty-tap);
    }
    /* The customer card's select box: 17px of box inside a 48px label. */
    :root:root .cl-check-hit { display: flex; align-items: center; justify-content: center; min-width: var(--ty-tap); min-height: var(--ty-tap); margin: -.375rem 0 -.375rem -.5rem; cursor: pointer; }

    /* Tabs (settings, sub-navigation). */
    :root:root .ty-tab { display: inline-flex; align-items: center; min-height: var(--ty-tap); }
    :root:root a.ow-link, :root:root a.cpm-card__link { display: inline-flex; align-items: center; min-height: var(--ty-tap); }

    /* The little "i" by a label: the label line grows to hold its 48px, so it never lies over the field below. */
    :root:root .fh { display: inline-flex; align-items: center; vertical-align: middle; }
    :root:root .fh-btn { margin-block: 0; }

    /* Eight pixels between neighbours — the rows of chips and icon buttons that sat at 4-7px. */
    :root:root :is(.cl-row, .tycd-chipset, .cb-colour, .jl-when, .jl-trades, .jl-tools, .pl-card-acts, .lm-legend, .ty-order-ctl,
                   .ty-weather__strip, .cl-tools, .ty-sortsel, .p2-days-row, .p2-row-acts, .ty-round-add, .pl-map-modes, .who-search,
                   .cl-searchrow, .cl-chips, .ty-activity) { gap: var(--ty-tap-gap); }
    /* The top bar: every item 8px from the next (search, weather chip, trade pills, flag, account). The weather chip's
       margin-right:auto hands the spare width to the account, but it resolves to 0 when the bar is full, so the gap
       is the row's own (the same rule tablet.css applies), not a margin on one item. */
    :root:root .page main > .top-row { column-gap: var(--ty-tap-gap); }
}

@media (max-width: 47.99rem) {
    :root:root :is(.ty-jobcard, .ty-agenda-item, .lm-stack, .p2-days, .inv-range, .wz-head, .ty-dl-seg.tycd-seg) { gap: var(--ty-tap-gap); }
    :root:root .wz-head, :root:root .ty-dl-seg.tycd-seg { margin-bottom: var(--ty-tap-gap); }
    :root:root .fh { margin-bottom: .25rem; }
    :root:root input[type="color"] { min-height: var(--ty-tap); min-width: var(--ty-tap); }
    :root:root table.ph-hours td { padding-block: .25rem; }
    /* A link that stands alone in a list item ("Choose how you message customers") is a row, not a word in a sentence. */
    :root:root article.content li > a:only-child:not([class]) { display: flex; align-items: center; gap: .5rem; min-height: var(--ty-tap); }
}

@media (max-width: 47.99rem) {
    :root:root label:has(> input[type="checkbox"]) { min-width: var(--ty-tap); }
}

/* ============================================================================================================
   SPACE — what the 0.3.26 pass left on the table (audit: Phone/PhoneAuditTests + the space survey in the report).
   ============================================================================================================ */
@media (max-width: 47.99rem) {

    /* Bootstrap's container gutter (12px a side) was stacked on the shell's 14px gutter: 26px of margin before a
       card began, and a card-in-a-card made it 45. The shell's gutter is the one margin; rows give back the
       negative margin they used to cancel the container's. */
    :root:root article.content :is(.container-fluid, .container-xxl, .container) { padding-inline: 0; }
    :root:root article.content :is(.container-fluid, .container-xxl, .container) .row { margin-inline: 0; }
    :root:root article.content :is(.container-fluid, .container-xxl, .container).py-3 { padding-block: .25rem !important; }

    /* The explanatory line under a page title: two lines, not a paragraph, so the work starts above the fold. */
    :root:root article.content .container-fluid > p.text-muted, :root:root .inv-intro, :root:root .rh-intro, :root:root .plan__lede {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    }

    /* A trade filter that would show nothing (a trade the business does not run) is not offered. */
    :root:root .cl-chip--none { display: none; }

    /* Chip rows that wrapped over three or four lines are one swipeable line. */
    :root:root :is(.lb-chips, .lb-colnav, .ql-colnav, .tycd-chipset, .jl-trades) {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        margin-inline: -.875rem; padding-inline: .875rem;
    }
    :root:root :is(.lb-chips, .lb-colnav, .ql-colnav, .tycd-chipset, .jl-trades)::-webkit-scrollbar { display: none; }
    :root:root :is(.lb-chips, .lb-colnav, .ql-colnav, .tycd-chipset, .jl-trades) > * { flex: none; }

    /* Settings: the module card's left rail, its heading, its sections and the section's own padding were each
       16px; a phone gets 12. */
    :root:root .settings-page { gap: .75rem; }
    :root:root .settings-group__title { padding: .5rem .75rem; }
    :root:root .settings-group__sections { padding: .75rem; gap: .75rem; }
    :root:root .settings-section + .settings-section { padding-top: .75rem; }
}

@media (max-width: 47.99rem) {
    /* The customer card's icon buttons carried a 5.6px margin on top of the row gap: Delete wrapped to a line of its own. */
    :root:root .cl-row > .cl-act:not(.cl-act--danger) { margin-left: 0; }

    /* Day view: the hour sits above its jobs instead of in a 58px column beside them, so a card is the full width. */
    :root:root .ty-agenda-row { flex-direction: column; gap: .125rem; }
    :root:root .ty-agenda-time { width: auto; padding-top: 0; }
    :root:root .ty-agenda { gap: .625rem; }
}

@media (max-width: 47.99rem) {
    /* A day-view card: its up / down / skip nudges sit in a row under it, so three stacked 48px buttons no longer
       set the card's height (160px for a two-line job). */
    :root:root .ty-agenda-item { flex-direction: column; align-items: stretch; }
    :root:root .ty-agenda-item > .ty-order-ctl { flex-direction: row; justify-content: flex-end; width: auto; height: auto; }
}

/* ============================================================================================================
   TAP TARGETS, second pass - what the phone audit still found on the long tail of pages.
   ============================================================================================================ */
@media (max-width: 47.99rem) {
    /* Reports: the period chips and the links in the header. */
    :root:root .rp-chip { min-height: var(--ty-tap); }
    :root:root .rp-periods, :root:root .rp-head { gap: var(--ty-tap-gap); }
    :root:root .rp-custom input { min-height: var(--ty-tap); }
    :root:root a.rp-link { min-height: var(--ty-tap); }

    /* Access: Users / Roles switch. */
    :root:root a.ty-access__segbtn { min-height: var(--ty-tap); display: inline-flex; align-items: center; }

    /* Setup hub footnote link. */
    :root:root a.setup-hub__note-link { display: inline-flex; align-items: center; min-height: var(--ty-tap); }

    /* Window cleaning round: its date stepper, its action links. */
    :root:root .wcr-datenav, :root:root .wcr-links { gap: var(--ty-tap-gap); }
    :root:root .wcr-iconbtn, :root:root .wcr-date, :root:root .wcr-link { min-height: var(--ty-tap); }
    :root:root .wcr-link { display: inline-flex; align-items: center; }

    /* Squeegee Rush's pickers (a game, but the same thumbs): 8px between the pills. */
    :root:root :is(.sqThemePicker, .sqLevelPicker, .sqTierPicker) { gap: var(--ty-tap-gap); }

    /* Branding mark-style pills, supplier actions, the dashboard KPI cards, the map's "Navigate here". */
    :root:root .branding-pill { min-height: var(--ty-tap); }
    :root:root .branding-pill + .branding-pill { margin-top: var(--ty-tap-gap); }
    :root:root .sd-actions { gap: var(--ty-tap-gap); }
    :root:root a.sd-act { min-height: var(--ty-tap); display: inline-flex; align-items: center; }
    :root:root a.sd-fact-value { display: flex; align-items: center; min-height: var(--ty-tap); }
    :root:root .ty-kpi__grid { gap: var(--ty-tap-gap); }
    /* Knowledge result rows: the open button and its pin / tag / remove actions sat 2-4px apart. */
    :root:root .kr-row { gap: var(--ty-tap-gap); }
    :root:root .kr-acts { gap: var(--ty-tap-gap); }
    :root:root a.ty-mapctl-btn { min-width: var(--ty-tap); min-height: var(--ty-tap); }

    /* The version line at the foot of the nav drawer is a link (to the release notes): a full row. */
    :root:root a.ty-nav-version { min-height: var(--ty-tap); }

    /* The global search's results: every row a full target (the panel is a list, so rows are not spaced apart). */
    :root:root .gs-hit { min-height: var(--ty-tap); }

    /* A wizard header that wraps keeps 8px between its lines. */
    :root:root .wz-head { row-gap: var(--ty-tap-gap); }
}

/* ── Top bar: an open search takes the whole bar ────────────────────────────────────────────────────────────────
   Tapping the search disc expands it across the full width and every other top-bar item (weather chip, trade pills,
   account) yields until it is closed, so there is room to type and to read what was found. The Close button, Esc and
   a tap on the backdrop all put it away (GlobalSearch). Driven by :focus-within as well as .gs--open because the tap
   focuses the input in the same touch, a server round-trip before .gs--open is set. */
@media (max-width: 47.99rem) {
    :root:root .top-row:has(.gs--open) > :not(.gs),
    :root:root .top-row:has(.gs:focus-within) > :not(.gs) { display: none !important; }
    :root:root .top-row .gs--open,
    :root:root .top-row .gs:focus-within { flex: 1 1 100%; }

    /* The finance tile leads the dashboard here: its "Anything to chase today?" line is the one that goes, so the
       owed figures and who to chase sit higher on the first screen. */
    :root:root .fin-tile__q { display: none; }
}

/* The sign-in / sign-up "Back" to the welcome screen (FB-187) is a text link, so the floor above (buttons, .btn)
   missed it: 49 x 21 on a phone. A full tap height and a padded hit area, pulled back by the same amount so the
   chevron still lines up with the column's left edge. */
@media (max-width: 47.99rem) {
    :root:root .ty-auth .ty-auth__back--top {
        min-height: var(--ty-tap);
        padding: 0 .75rem 0 .5rem;
        margin: 0 0 var(--ty-space-xs, 4px) -.5rem;
    }
}