/* ==================================================================
   PWA responsive shell
   ------------------------------------------------------------------
   Loaded last, after every page stylesheet, so it owns exactly one
   thing: how wide the app is at a given viewport.

   Before this file the PWA had four different content widths — pages
   at 512px (max-w-lg), page shells at 520px, the update banner at
   430px, the install banner at 448px — and no breakpoint above 390px
   anywhere except the EPC group grid. On a phone that still reads as
   one app. On a tablet the column, the header and the dock each stop
   at a different place, which is what made some screens look built
   for a phone and others for a tablet.

   One token drives all of them now. The phone value is the 520px the
   app already used, so nothing below 600px moves a pixel; the steps
   above it are the tablet behaviour that was missing.
   ================================================================== */

:root {
    --pwa-shell-max: 520px;
    --pwa-shell-gutter: 16px;
}

/* Small tablets in portrait, and large phones turned landscape. */
@media (min-width: 600px) {
    :root {
        --pwa-shell-max: 560px;
        --pwa-shell-gutter: 20px;
    }
}

/* iPad mini and 10.2" in portrait, 8" Android tablets. */
@media (min-width: 768px) {
    :root {
        --pwa-shell-max: 660px;
        --pwa-shell-gutter: 24px;
    }
}

/* iPad Pro in portrait, and every tablet turned landscape. */
@media (min-width: 1024px) {
    :root {
        --pwa-shell-max: 760px;
        --pwa-shell-gutter: 28px;
    }
}

/* ------------------------------------------------------------------
   1. The content column

   Every screen in the app, whether its width came from a Tailwind
   utility in the template or from a hand-written rule in one of the
   page stylesheets, resolves to the same token here.
   ------------------------------------------------------------------ */
.pwa-shell,
.pwa-home-main,
.pwa-simple-screen,
.pwa-parts-index,
.pwa-search-screen,
.pwa-profile-main,
.pwa-panel-main,
.pwa-operator,
.pwa-product-page,
.pwa-cart-page,
.pwa-checkout-page,
.pwa-vin-lookup,
.pwa-vin-results-page {
    width: 100%;
    max-width: var(--pwa-shell-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--pwa-shell-gutter);
    padding-left: var(--pwa-shell-gutter);
}

/* ------------------------------------------------------------------
   2. Chrome locks to the same column

   The header row, the search row and the dock all used to centre at
   their own width. Aligned to the shell they read as one frame around
   the content instead of three bars of different lengths.
   ------------------------------------------------------------------ */
.pwa-topbar__inner,
.pwa-topbar__search-row {
    width: 100%;
    max-width: var(--pwa-shell-max);
    padding-right: var(--pwa-shell-gutter);
    padding-left: var(--pwa-shell-gutter);
}

/* The search row carries its own bottom padding for the field shadow;
   the shorthand above would drop it. */
.pwa-topbar__search-row {
    padding-bottom: 6px;
}

.pwa-has-bottom-nav .pwa-bottom-dock,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__dock {
    max-width: var(--pwa-shell-max) !important;
}

/* Transient bars: the update prompt, the install prompt and the
   offline toast. All three are overlays on the content column, so they
   follow it rather than the viewport. */
.pwa-update-banner,
[data-install-banner],
[data-network-status] {
    max-width: var(--pwa-shell-max) !important;
}

/* ------------------------------------------------------------------
   3. Card grids gain columns instead of stretching

   Two columns is right on a phone. Left alone in a 760px shell the
   same two cards become 350px wide each, which is where a screen
   starts to look like a phone layout that was pulled sideways.

   Only the two genuine card grids are here. The `grid-cols-2` on the
   car filters and the checkout form are pairs of labelled fields, not
   cards — a third column there would orphan the odd field, so they
   stay at two and simply get more room inside the wider shell.

   The templates keep their `grid-cols-2` for the phone case; these
   rules only add the steps above it.
   ------------------------------------------------------------------ */
@media (min-width: 600px) {
    .pwa-brand-grid,
    .epcm-group-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .pwa-brand-grid,
    .epcm-group-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The four home shortcuts hold their row at every width; on a tablet
   they only need to stop looking short for how wide they are. */
@media (min-width: 768px) {
    .pwa-quick-action {
        min-height: 96px;
    }
}

/* ------------------------------------------------------------------
   4. The EPC catalog

   #epc-app is a flex column whose children set their own 14px side
   margins, so capping the root centres the whole screen and the
   children inherit the alignment. Their gutters move onto the shared
   token so the catalog lines up with the rest of the app.
   ------------------------------------------------------------------ */
#epc-app.epcm {
    width: 100%;
    max-width: var(--pwa-shell-max);
    margin-right: auto;
    margin-left: auto;
}

.epcm-crumbs,
.epcm-saved,
.epcm-hero,
.epcm-searchbar {
    margin-right: var(--pwa-shell-gutter);
    margin-left: var(--pwa-shell-gutter);
}

/* Width came from `calc(100% - 28px)` — the two 14px margins hard-coded
   into a length. With the margins on a token it has to be intrinsic. */
.epcm-searchbar {
    width: auto;
}

.epcm-screen {
    padding-right: var(--pwa-shell-gutter);
    padding-left: var(--pwa-shell-gutter);
}

/* ------------------------------------------------------------------
   5. iOS zoom on focus

   Mobile Safari zooms the viewport when a focused field is under 16px,
   and the rule that prevents it was capped at `max-width: 768px` — so
   it covered every phone and no iPad. Restated here for coarse
   pointers above that cap, scoped to the PWA so the desktop EPC page,
   which also loads these stylesheets, keeps its own type scale.
   ------------------------------------------------------------------ */
@media (pointer: coarse) and (min-width: 769px) {
    body[data-pwa-release] input,
    body[data-pwa-release] select,
    body[data-pwa-release] textarea,
    body.epc-pwa-body input,
    body.epc-pwa-body select,
    body.epc-pwa-body textarea,
    #epc-app[data-pwa-mode="1"] input,
    #epc-app[data-pwa-mode="1"] select,
    #epc-app[data-pwa-mode="1"] textarea {
        font-size: 16px !important;
    }
}