/*
 * Phone layout: edge-to-edge, app style (Stuart, 24 Oct 2026).
 * On phones the page sections run the full screen width with a single 16px text gutter; the big rounded cards
 * stretch to both edges (square corners, no side borders or shadows) so pages read like an app, not floating boxes.
 * Loaded after style.css on every public page; !important because style.css has page-scoped phone rules (.page-x .y).
 */
@media (max-width: 640px) {
  :root { --app-gutter: max(16px, env(safe-area-inset-left, 0px)); }

  html, body { overflow-x: clip; }

  /* One text gutter for every section wrapper. */
  html body .section,
  html body .season-bar,
  html body .how-strip,
  html body .library-body,
  html body .petes-body,
  html body .favourites-body,
  html body .submit-body,
  html body .legal-doc,
  html body .kids-party,
  html body .section-fridge {
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
  }
  html body main.fridge-page { padding-left: 0 !important; padding-right: 0 !important; }
  html body .kids-play-grid { padding-left: 0 !important; padding-right: 0 !important; }
  html body .kids-party-inner { padding-left: 0 !important; padding-right: 0 !important; }
  html body .party-free-pitch-summary,
  html body .party-free-pitch-inner {
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
  }
  html body .library-pager { display: block !important; }

  /* Page banners use the same text gutter. */
  html body .hero-content,
  html body .how-hero-content,
  html body .kids-hero-inner,
  html body .library-hero-inner,
  html body .petes-hero-inner,
  html body .submit-hero-inner,
  html body .favourites-hero-inner,
  html body .legal-hero-inner {
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
  }

  /* Cards become full-width panels. */
  html body .library-cta,
  html body .persona,
  html body .library-toolbar,
  html body .library-pager-bar,
  html body .petes-toolbar,
  html body .party-locked,
  html body .party-night-empty,
  html body .bar-locked,
  html body .kids-party-score-main,
  html body .kids-party-quest,
  html body .submit-form,
  html body .submit-aside,
  html body .contact-form,
  html body .how-pass-feature,
  html body .legal-toc,
  html body .legal-body,
  html body .kids-game,
  html body .kids-party-card,
  html body .footer-note {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--app-gutter)) !important;
    margin-right: calc(-1 * var(--app-gutter)) !important;
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
    border-radius: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    box-shadow: none !important;
  }
  html body .kids-game { margin-left: 0 !important; margin-right: 0 !important; }

  /* Stacked panels sit 8px apart, like grouped sections in an app. */
  html body .persona-grid,
  html body .kids-play-grid,
  html body .submit-layout { gap: 8px !important; }
  html body .kids-party-quests { gap: 8px !important; }

  /* Minimal footer: one row of small links and the 18+ line. The brand block, user count and Explore links
     repeat the header menu, so they're hidden on phones. */
  html body .site-footer {
    margin-top: 0 !important;
    padding: 14px var(--app-gutter) calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
  }
  html body .site-footer .footer-inner {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    gap: 0 !important;
  }
  html body .site-footer .footer-brand,
  html body .site-footer .footer-nav:not(.footer-nav-legal),
  html body .site-footer .footer-nav-label,
  html body .site-footer .footer-nav-legal a[href="/"] { display: none !important; }
  html body .site-footer .footer-nav-legal {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 16px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }
  html body .site-footer .footer-nav-legal a,
  html body .site-footer .footer-nav-legal button {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .site-footer .footer-aside {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body .site-footer .footer-note,
  html body .site-footer .footer-company {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 0.7;
  }

  /* Promo filler with no tools in it: dropped on phones to keep the page short. */
  html body section.local { display: none !important; }

  /* Long legal pages: the wall of "On this page" chips is dropped, the headings are enough on a phone. */
  html body .legal-toc { display: none !important; }

  /* Lists of floating rounded cards become flat app list rows split by hairlines. */
  html body .kids-rules-list > li,
  html body .submit-steps > li,
  html body .bar-locked-steps > li,
  html body .legal-body ul > li,
  html body .mini-list > .persona-drink,
  html body .legal-company {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .kids-rules-list,
  html body .submit-steps,
  html body .bar-locked-steps,
  html body .legal-body ul,
  html body .mini-list { gap: 0 !important; }

  /* Every drinks grid (home, library, Pete's, kids, fridge, favourites, party menu): a full-bleed two-column
     photo grid with hairline gaps and flat tiles, like a delivery app menu. 100vw + centred margin so it
     reaches both screen edges whatever padding the parent section has. */
  html body .drink-grid {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 2px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    background: rgba(0, 0, 0, 0.06);
  }
  html body .drink-grid .drink-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdf9 !important;
    animation: none !important;
    transform: none !important;
  }
  html body .drink-grid .drink-card img {
    border-radius: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
  html body .drink-grid .drink-card .body { padding: 10px 12px 12px !important; }
  html body .party-join-grid .drink-card .body { padding-bottom: 6px !important; }
  html body .drink-grid .drink-card .badge { align-self: flex-start; }
  html body #party-join-grid .drink-card .badge { display: none !important; }
  html body .drink-grid .drink-card h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin: 0 0 3px !important;
  }
  html body .drink-grid .drink-card .body p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  html body .party-join-grid .drink-card .body p { min-height: 2.7em !important; }
  html body .drink-grid-fade { display: none !important; }
  html body .party-join-grid .party-order-btn,
  html body .party-join-grid .btn-compact.party-order-btn {
    width: calc(100% - 24px) !important;
    margin: auto 12px 12px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }

  /* Party pages (My orders, join): hero and panels become full-width bands; order rows are flat list rows. */
  html body .my-orders-hero,
  html body .my-orders-panel,
  html body .party-hero,
  html body .party-join-banner,
  html body .party-invite-strip {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--app-gutter)) !important;
    margin-right: calc(-1 * var(--app-gutter)) !important;
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
    border-radius: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    box-shadow: none !important;
  }
  html body .my-orders-panel { margin-top: 8px !important; }
  html body .my-orders-popular-list { gap: 0 !important; }
  html body .my-orders-popular-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .kids-party { border-radius: 0 !important; }

  /* Drink modal: full-screen sheet. The whole photo shows (never cropped) over a blurred copy of itself, and the
     recipe card slides up over its bottom edge. Small icon actions under the title; the recipe is the big text. */
  html body .drink-modal {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--foam);
  }
  html body .drink-modal .modal-body {
    display: block;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
  }
  html body .drink-modal .modal-media {
    height: 52vh;
    height: min(52svh, 460px);
    padding: env(safe-area-inset-top, 0px) 0 18px;
    background: #1c2624;
  }
  html body .drink-modal .modal-media img {
    width: auto;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
  html body .drink-modal .modal-media:not(.has-img) { height: 180px; padding: 0 0 18px; }
  html body .drink-modal .modal-media .modal-ph {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    border-radius: 0;
  }
  html body .drink-modal .modal-close {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    background: rgba(20, 28, 26, 0.6);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    box-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  html body .drink-modal .modal-copy {
    position: relative;
    margin-top: -18px;
    padding: 20px var(--app-gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: var(--foam);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
  }
  html body .drink-modal .modal-copy h2 {
    margin: 0 0 4px;
    font-size: 27px;
    line-height: 1.15;
  }
  html body .drink-modal .modal-tags { margin: 0 0 8px; font-size: 11.5px; }
  html body .drink-modal .modal-copy .notes {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink-soft);
  }
  html body .drink-modal .submitted-by { margin: -6px 0 12px; font-size: 14px; }
  html body .drink-modal .modal-actions { max-width: none; margin: 0 0 18px; }
  html body .drink-modal .modal-act-hint { margin: -10px 0 16px; }
  html body .drink-modal .modal-copy .party-modal-order-btn { min-height: 44px; font-size: 15px; }
  html body .drink-modal .party-modal-order-hint { margin: 6px 0 16px; font-size: 13px; }

  html body .drink-modal .modal-recipe { margin: 0; }
  html body .drink-modal .modal-copy h3 {
    margin: 0 0 2px;
    font-size: 12.5px;
    letter-spacing: 0.09em;
  }
  html body .drink-modal .modal-ingredients {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
  }
  html body .drink-modal .modal-ingredients li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }
  html body .drink-modal .modal-ingredients li:last-child { border-bottom: 0; }
  html body .drink-modal .modal-ingredients .ing-amt {
    flex: 0 0 auto;
    min-width: 4.6em;
    margin: 0;
    color: var(--timber);
    white-space: nowrap;
  }
  html body .drink-modal .modal-ingredients .ing-name { flex: 1 1 auto; min-width: 0; }
  html body .drink-modal .modal-ingredients .ing-name::first-letter { text-transform: uppercase; }
  html body .drink-modal .modal-copy .modal-method { margin: 8px 0 0; }
  html body .drink-modal .modal-copy .modal-steps { padding-left: 1.5em; }
  html body .drink-modal .modal-copy .modal-steps li { margin: 0 0 10px; padding-left: 4px; }
  html body .drink-modal .modal-copy .modal-steps li:last-child { margin-bottom: 0; }

  html body .drink-modal .drink-rating { margin-top: 22px; }
  html body .drink-modal .drink-rating-stars button { width: 40px; height: 40px; font-size: 28px; }
  html body .drink-modal .drink-talk p { font-size: 15px; }

  /* Back Bar: the stats strip and each tab panel run the full screen width; the cards inside a panel (add a
     bottle, shelf, cart, purpose picks) become flat full-width bands split by 8px, like the other pages. */
  html body .section-bar { padding-left: 0 !important; padding-right: 0 !important; }
  html body.page-bar .bar-panel,
  html body .bar-panel {
    border-radius: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    box-shadow: none !important;
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
  }
  html body .bar-status { border-radius: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important; }
  html body .bar-approx-strip,
  html body .bar-add-named,
  html body .bar-shelf-section,
  html body .bar-empty-card,
  html body .bar-purpose-note {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--app-gutter)) !important;
    margin-right: calc(-1 * var(--app-gutter)) !important;
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
    border-radius: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    box-shadow: none !important;
  }
  html body .section-bar .bar-locked { margin-left: 0 !important; margin-right: 0 !important; }
  html body.page-bar .site-footer { display: none !important; }
  html body.page-bar .bar-switch-inline {
    margin-left: calc(-1 * var(--app-gutter)) !important;
    margin-right: calc(-1 * var(--app-gutter)) !important;
    width: auto !important;
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
  }
  /* Ready to pour: a full-bleed three-column photo grid with hairline gaps, same look as the drinks grids. */
  html body.page-bar .bar-ready-grid {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    gap: 2px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    background: rgba(0, 0, 0, 0.06);
  }
  html body.page-bar .bar-ready-card {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 0 8px !important;
    background: #fffdf9 !important;
  }
  html body.page-bar .bar-ready-card img,
  html body.page-bar .bar-ready-card .bar-ready-ph { border-radius: 0 !important; }
  html body.page-bar .bar-ready-card > span,
  html body.page-bar .bar-ready-card > em { padding: 0 8px; }

  /* Header bar runs edge to edge and clears the phone's notch when added to the home screen. */
  html body .site-header {
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}