/* ============================================================================================================
   TABLET LAYER — the app on an iPad, an Android tablet, or any touch-first screen from 40rem up (an iPad mini
   is 744 css px wide in portrait, a 13" Pro 1376 in landscape) that is at least 37.5rem tall (which leaves a
   phone on its side, 430px tall, to the phone layer). The same shared UI runs in Safari/Chrome on a
   tablet and in the MAUI BlazorWebView; iPadOS reports a desktop-class user agent, so NOTHING here keys off the
   UA — only width and the input media features:

       (pointer: coarse), (hover: none)       the PRIMARY input is a finger (EITHER feature is enough). A desktop
                                              mouse at 1366px matches neither, so the desktop is left pixel-for-pixel
                                              as it was. An iPad with a trackpad or Magic Keyboard still reports a
                                              coarse primary pointer, which is right: touch stays primary, hover stays
                                              an extra. Either, not both, because Android WebView on a touch screen
                                              that also reports a pen (the emulator's virtual touch panel, a Galaxy
                                              Tab with an S Pen) answers `pointer: fine` yet still `hover: none` -
                                              measured on a Pixel Tablet AVD, 2026-10-10 - and a `coarse AND none`
                                              gate would have left that tablet on the desktop layout.

   What the layer decides (see /design/ui, "Tablet"):

     width              navigation (set by the shell's own 1024px breakpoint, not here)
     >= 64rem (1024)    docked 250px sidebar (foldable with the hamburger) + footer bar. A 13" iPad Air and Pro
                        therefore agree upright, and every landscape iPad gets the sidebar.
     48rem - 64rem      footer bar + off-canvas drawer, opened by "More" OR the top-row hamburger (shown here,
                        hidden on the phone). 11" iPads and Android tablets upright, and the wide Split View.
     < 48rem            the phone layer (mobile.css) — Slide Over and the narrow Split View.

   This file adds only what a finger needs on a big screen: hit areas of at least 44px (Apple's bar; the phone
   layer holds 48), no tap delay, a gutter that keeps the right-edge Documents tab off the content, and a wider
   drawer. Linked AFTER the scoped-CSS bundle and mobile.css so its overrides win on order; where a component's
   scoped rule is more specific the selector below is a notch heavier and says so.

   Components reference only --ty-* tokens (never raw hex) — see /design/ui.
   ============================================================================================================ */

@media (pointer: coarse) and (min-width: 40rem) and (min-height: 37.5rem), (hover: none) and (min-width: 40rem) and (min-height: 37.5rem) {

    :root {
        /* Apple's minimum hit area; the same number the tablet audit (tests/TradeYoke.E2E/Tablet) asserts. */
        --ty-touch-min: 2.75rem;
        /* The Documents tab (DocumentsLauncher) is a fixed 2.7rem strip on the right edge, vertically centred. */
        --ty-edge-tab-clear: 3.5rem;
    }

    /* No 300 ms tap delay or double-tap zoom on controls; no grey flash on a tap. */
    a, button, [role="button"], summary, label, select, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
    body { -webkit-tap-highlight-color: transparent; }

    /* Planning: the seven day buttons share a row with the Day/Week/Month switch and the period arrows, which on an
       iPad mini leaves each day a 29px sliver. They take a row of their own instead (a 90px tile each). */
    :root:root .p2-viewrow .p2-days { flex: 1 1 100%; order: 5; }
    :root:root .p2-days-row { gap: .5rem; }

    /* ── Navigation ───────────────────────────────────────────────────────────────────────────────── */

    /* The hamburger is how an iPad user reaches the menu from the top-left, as in every iPadOS app; "More" in the
       footer bar still opens the same drawer. Below the docked-sidebar breakpoint it is retired by MainLayout's
       scoped CSS, so it is restored here (one notch heavier than that rule's .nav-hamburger[b-…]). */
    .page .top-row .nav-hamburger { display: inline-flex; width: var(--ty-touch-min); height: var(--ty-touch-min); }

    /* Drawer links, footer-bar items and the drawer's close button are all finger targets. */
    .page .sidebar .nav-link,
    .page .sidebar .ty-nav-group-title,
    .page .sidebar .ty-nav-version { min-height: var(--ty-touch-min); display: flex; align-items: center; }
    .page .sidebar .nav-close { width: var(--ty-touch-min); height: var(--ty-touch-min); }

    /* The right-edge Documents tab must not sit on top of a row's last action: reserve its width beside the
       content whenever it is on the page. (:has — iPadOS 15.4+, Chrome/WebView 105+; older engines simply keep
       the previous behaviour.) */
    body:has(.dl-pull) .page main article.content { padding-right: var(--ty-edge-tab-clear) !important; }
}

/* ── Hit areas — from 48rem, where the phone layer's own 48px rules stop applying ──────────────────
   (40rem-48rem is an iPad mini / a folded Galaxy upright: the page is still phone layout there and keeps the phone
   layer's 48px; overriding it with 44 would be a step down.) */
@media (pointer: coarse) and (min-width: 48rem) and (min-height: 37.5rem), (hover: none) and (min-width: 48rem) and (min-height: 37.5rem) {
    /*       The same vocabulary and the same selectors as the phone layer's tap-target block (mobile.css), at Apple's
       44px instead of Material's 48 — touch is primary on a tablet, so the floor is a floor here too, not a
       desktop nicety. `:root:root` makes each rule heavy enough to beat the components' own scoped min-heights
       (a plain `button { min-height }` lost to `.cl-job { min-height: 2.25rem }`). Verified on every key route by
       TradeYoke.E2E/Tablet/TabletAuditTests (touch targets, both orientations). */
    :root { --ty-tap: var(--ty-touch-min); --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);
    }
    /* A button narrower than a fingertip is an icon button: give it the square. */
    :root:root button, :root:root [role="button"] { min-width: var(--ty-tap); }
    :root:root summary { display: flex; align-items: center; }

    :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,
    :root:root .ty-seg-item, :root:root .rp-chip, :root:root .who-x, :root:root .wcr-iconbtn, :root:root .wcr-rainbtn,
    :root:root a.ty-mapctl-btn, :root:root .dl-pull {
        min-width: var(--ty-tap) !important; min-height: var(--ty-tap) !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: var(--ty-tap) !important; }
    :root:root .ty-pin, :root:root .ty-order-btn, :root:root .ty-sortsel__dir, :root:root .ty-account__trigger, :root:root .hb,
    :root:root .ty-lang-flag, :root:root a.ty-dir--icon, :root:root .wcr-rainbtn {
        display: inline-flex; align-items: center; justify-content: center;
    }
    :root:root .fh-btn { min-width: var(--ty-tap) !important; min-height: var(--ty-tap) !important; margin-block: -.65rem; }
    /* The Documents tab keeps its place on a tablet (there is room) but is a full 44px strip. */
    :root:root .dl-pull { width: var(--ty-tap); }
    /* The trade pills in the top row are a strip of buttons: the strip is a row, not a hairline. */
    :root:root .ty-domains { min-height: var(--ty-tap); min-width: var(--ty-tap); align-items: center; justify-content: center; }

    :root:root .ty-tab, :root:root a.ow-link, :root:root a.cpm-card__link, :root:root a.rp-link, :root:root .wcr-date,
    :root:root .wcr-link, :root:root a.sd-act, :root:root a.sd-fact-value, :root:root a.ty-access__segbtn,
    :root:root a.setup-hub__note-link, :root:root a.ty-locked__link, :root:root .gs-hit {
        display: inline-flex; align-items: center; min-height: var(--ty-tap);
    }
    /* 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); }

    /* Checkboxes, radios and switches: 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); }
    :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);
    }
    :root:root label:has(> input[type="checkbox"]) { min-width: var(--ty-tap); }
    /* The customer card's select box: the box stays small, the label around it is the 44px target. */
    :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; }
    :root:root input[type="color"] { min-height: var(--ty-tap); min-width: var(--ty-tap); }

    /* 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, .ty-jobcard, .ty-agenda-item, .lm-stack, .p2-days, .inv-range, .wz-head,
                   .ty-dl-seg.tycd-seg, .wcr-datenav, .wcr-links, .rp-periods, .rp-head, .sd-actions) { gap: var(--ty-tap-gap); }
    :root:root .ty-lang-flag { margin-inline-end: var(--ty-tap-gap); }
    :root:root .wz-head { row-gap: var(--ty-tap-gap); }
    /* The customers table's select column: the 17px box stays, the label around it is the 44px target. */
    :root:root .cl-selhead, :root:root .cl-selcell { width: var(--ty-tap); padding: 0 !important; text-align: center; }
    :root:root .cl-selhead .cl-check-hit, :root:root .cl-selcell .cl-check-hit { margin: 0; }

    /* The top row: the trade pills, the language flag and the account stay 8px apart when it wraps. */
    :root:root .page main > .top-row { column-gap: var(--ty-tap-gap); row-gap: var(--ty-tap-gap); }

    /* A field's "i" hint sits on the label line and grows the line to hold its 44px, rather than lying over the field below. */
    :root:root .fh { display: inline-flex; align-items: center; vertical-align: middle; margin-bottom: .25rem; }
    :root:root .fh-btn { margin-block: 0; }
    :root:root table.ph-hours td { padding-block: .25rem; }
    /* The customers table's row actions are inline buttons in a nowrap cell: 8px between them, not the 3px margin. */
    :root:root .cl-job + .cl-act, :root:root .cl-act + .cl-act { margin-left: var(--ty-tap-gap); }

    /* A segmented control wider than its column (Reports' six periods at a 13" iPad upright) wraps rather than
       running 3-11px past the edge of the page. */
    :root:root .ty-seg--sub { max-width: 100%; flex-wrap: wrap; }
}

/* ── 40rem - 48rem: the page is still phone layout (mobile.css), so it only needs the air under the top bar that a
   44px control wants (the phone's .25rem left the first button 5px below the account chip on an iPad mini). */
@media (pointer: coarse) and (min-width: 40rem) and (max-width: 47.99rem) and (min-height: 37.5rem), (hover: none) and (min-width: 40rem) and (max-width: 47.99rem) and (min-height: 37.5rem) {
    :root:root .page main article.content.px-4 { padding-top: .5rem; }
}

/* ── Lists that are a table on a desktop and cards on a phone ───────────────────────────────────────
   Customers and Jobs draw both presentations and show the table from 62rem. A table wants 1050-1330px (customers) and
   1180px (jobs) of room; a 13" iPad in landscape has about 1000 once the sidebar and gutters are paid for, so the
   table scrolled sideways INSIDE its own box with the row actions (SMS, email, note, delete) out of sight past the
   edge - and 44px targets made it wider still. A finger wants the cards (the same rows the phone gets, with the sort
   control above them) until the table genuinely fits, so a touch tablet keeps the cards below 100rem (1600px); a
   desktop mouse keeps the table from 62rem exactly as before. */
@media (pointer: coarse) and (min-width: 62rem) and (max-width: 99.99rem) and (min-height: 37.5rem), (hover: none) and (min-width: 62rem) and (max-width: 99.99rem) and (min-height: 37.5rem) {
    :root:root .cl-table, :root:root .jl-table { display: none; }
    :root:root .cl-list, :root:root .jl-list { display: flex; }
    :root:root .cl-sortbar, :root:root .jl-sortbar { display: inline-flex; }
}

/* ── Drawer width (tablet upright / wide Split View) ────────────────────────────────────────────────
   The off-canvas menu is 270px for a phone; on a tablet it reads as a proper sidebar. Only where it IS a drawer
   (below the shell's 1024px breakpoint) — above it the docked rail keeps its own 250px. */
@media (pointer: coarse) and (min-width: 40rem) and (min-height: 37.5rem) and (max-width: 1023.98px), (hover: none) and (min-width: 40rem) and (min-height: 37.5rem) and (max-width: 1023.98px) {
    .page > .sidebar { width: 320px; max-width: 60vw; }
}