/* Popithere Mobile v2 — coherent responsive layer for v8.19
   Mobile-first rules live here. Older mobile deck rules remain inert because
   dashboard.js no longer mounts the swipe deck. */
:root{
  --pih-m-page:16px;
  --pih-m-gap-1:4px;
  --pih-m-gap-2:8px;
  --pih-m-gap-3:12px;
  --pih-m-gap-4:16px;
  --pih-m-gap-6:24px;
  --pih-m-gap-8:32px;
  --pih-m-touch:48px;
  --pih-m-radius:18px;
  --pih-m-appbar:58px;
  --pih-m-tabbar:72px;
  --pih-m-paper:#fffdf7;
  --pih-m-navy:#17233b;
  --pih-m-muted:#667085;
  --pih-m-line:rgba(23,35,59,.12);
  --pih-m-coral:#ef6658;
  --pih-m-yellow:#f7cb55;
  --pih-m-blue:#246bfd;
  --pih-m-sage:#dfead8;
}

@media(max-width:767px){
  html{scroll-padding-bottom:calc(var(--pih-m-tabbar) + 24px + env(safe-area-inset-bottom))}
  body.pih-mobile-v2{
    overflow-x:hidden!important;
    padding-bottom:calc(var(--pih-m-tabbar) + 18px + env(safe-area-inset-bottom))!important;
    background:var(--pih-m-paper);
  }
  body.pih-mobile-v2.pih-mobile-sheet-open{overflow:hidden!important;}

  body.pih-mobile-v2 button,
  body.pih-mobile-v2 [role="button"],
  body.pih-mobile-v2 input,
  body.pih-mobile-v2 select,
  body.pih-mobile-v2 textarea{
    font-size:16px;
  }
  body.pih-mobile-v2 button,
  body.pih-mobile-v2 a.pih-button,
  body.pih-mobile-v2 .quiet,
  body.pih-mobile-v2 .compact-button{
    min-height:44px;
  }
  body.pih-mobile-v2 button:not(.mobile-deck-dot):not([hidden]),
  body.pih-mobile-v2 .pih-icon-btn,
  body.pih-mobile-v2 .pih-sheet-close{
    min-width:44px;
  }
  body.pih-mobile-v2 :focus-visible{
    outline:3px solid rgba(36,107,253,.45);
    outline-offset:2px;
  }

  /* One persistent bottom navigation. Shopping lives inside Lists. */
  body.pih-mobile-v2 .pih-mobile-tabs{
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    height:var(--pih-m-tabbar)!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    padding:5px!important;
    border:1px solid var(--pih-m-line)!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 12px 34px rgba(23,35,59,.14)!important;
    backdrop-filter:blur(18px);
  }
  body.pih-mobile-v2 .pih-mobile-tabs>a,
  body.pih-mobile-v2 .pih-mobile-tabs>button{
    min-width:0!important;
    min-height:60px!important;
    padding:5px 2px!important;
    border-radius:16px!important;
    gap:3px!important;
    color:#667085!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.pih-mobile-v2 .pih-mobile-tabs>a.active,
  body.pih-mobile-v2 .pih-mobile-tabs>button.active{
    color:var(--pih-m-navy)!important;
    background:#fff3d3!important;
  }
  body.pih-mobile-v2 .pih-mobile-tabs svg{width:22px!important;height:22px!important}
  body.pih-mobile-v2 .pih-mobile-tabs span{font-size:10px!important;font-weight:850!important;line-height:1!important}
  body.pih-mobile-v2 .pih-mobile-tabs [data-pih-more]{position:relative!important}
  body.pih-mobile-v2 .pih-mobile-tabs .pih-more-notice{
    position:absolute;
    top:8px;
    right:10px;
    width:8px;
    height:8px;
    min-height:0!important;
    border-radius:999px;
    background:var(--pih-m-coral);
    box-shadow:0 0 0 2px #fff;
  }

  /* Home is vertical and deterministic. No page-sized swipe deck, dots or coaching. */
  body.pih-mobile-v2.pih-mobile-deck-mounted{overflow-x:hidden!important}
  body.pih-mobile-v2 #mobileSwipeDeck,
  body.pih-mobile-v2 .mobile-swipe-deck,
  body.pih-mobile-v2 .mobile-life-deck{
    display:block!important;
    width:100%!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    padding:0!important;
    margin:0!important;
  }
  body.pih-mobile-v2 #mobileSwipeDeck>*,
  body.pih-mobile-v2 .mobile-life-deck>[data-mobile-home-slide]{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    scroll-snap-align:none!important;
    margin-bottom:16px!important;
  }
  body.pih-mobile-v2 #mobileDeckDots,
  body.pih-mobile-v2 .mobile-deck-dots,
  body.pih-mobile-v2 #mobileSwipeCoach,
  body.pih-mobile-v2 .mobile-swipe-coach,
  body.pih-mobile-v2 .mobile-swipe-hint,
  body.pih-mobile-v2 #mobileWidgetDialog,
  body.pih-mobile-v2 #mobileCustomizeButton,
  body.pih-mobile-v2 .mobile-widget-order-actions,
  body.pih-mobile-v2 .dashboard-layout-tools{
    display:none!important;
  }

  body.pih-mobile-v2 .chooser,
  body.pih-mobile-v2 .dashboard-shell,
  body.pih-mobile-v2 .hub-shell,
  body.pih-mobile-v2 main{
    max-width:100%!important;
  }
  body.pih-mobile-v2 .chooser{
    padding-left:var(--pih-m-page)!important;
    padding-right:var(--pih-m-page)!important;
  }

  body.pih-mobile-v2 #quickPopHero{
    min-height:0!important;
    margin:0 0 18px!important;
    padding:18px 16px!important;
    border-radius:22px!important;
    background:linear-gradient(145deg,#fff 0 78%,#f2f6ff 78% 92%,#fff6d8 92% 100%)!important;
    box-shadow:none!important;
  }
  body.pih-mobile-v2 .quick-pop-top{display:block!important}
  body.pih-mobile-v2 .quick-pop-copy h2{font-size:clamp(24px,7vw,30px)!important;line-height:1.08!important}
  body.pih-mobile-v2 .quick-pop-copy p{font-size:14px!important;line-height:1.45!important}
  body.pih-mobile-v2 .quick-pop-tools{margin-top:10px!important}
  body.pih-mobile-v2 .quick-pop-form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:8px!important;
    margin-top:14px!important;
  }
  body.pih-mobile-v2 .quick-pop-form textarea,
  body.pih-mobile-v2 .quick-pop-form input{
    grid-column:1/-1!important;
    width:100%!important;
    min-height:88px!important;
    padding:14px!important;
    border-radius:16px!important;
    resize:vertical;
  }
  body.pih-mobile-v2 .quick-pop-form .quick-pop-voice{grid-column:1!important;min-height:48px!important;width:48px!important}
  body.pih-mobile-v2 .quick-pop-form button[type="submit"]{
    grid-column:2!important;
    min-height:48px!important;
    min-width:96px!important;
    justify-self:end;
    padding-inline:18px!important;
  }
  body.pih-mobile-v2 .quick-pop-hint{display:none!important}
  body.pih-mobile-v2 .quick-pop-examples{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  body.pih-mobile-v2 .quick-pop-examples::-webkit-scrollbar{display:none}

  body.pih-mobile-v2 #homeNowSection,
  body.pih-mobile-v2 #homeTodaySection,
  body.pih-mobile-v2 #homeComingUpSection,
  body.pih-mobile-v2 #betaJourneyCard,
  body.pih-mobile-v2 #attentionStrip,
  body.pih-mobile-v2 #proactiveBrief,
  body.pih-mobile-v2 #p62HomeContextGrid,
  body.pih-mobile-v2 #homeSecondary{
    width:100%!important;
    margin:0 0 18px!important;
  }
  body.pih-mobile-v2 .home-now-head,
  body.pih-mobile-v2 .home-life-head{align-items:flex-end!important;margin-bottom:10px!important}
  body.pih-mobile-v2 .home-now-head h2,
  body.pih-mobile-v2 .home-life-head h2{font-size:22px!important;line-height:1.15!important}
  body.pih-mobile-v2 .pih-home-load-error{
    display:grid;
    gap:8px;
    padding:16px;
    border:1px solid rgba(239,102,88,.32);
    border-radius:16px;
    background:#fff8f5;
    color:var(--pih-m-navy);
  }
  body.pih-mobile-v2 .pih-home-load-error strong{font-size:17px}
  body.pih-mobile-v2 .pih-home-load-error p{margin:0;color:var(--pih-m-muted);font-size:14px;line-height:1.45}
  body.pih-mobile-v2 .pih-home-load-error button{justify-self:start;min-height:48px!important;padding:0 16px!important}

  body.pih-mobile-v2 .home-now-loading,
  body.pih-mobile-v2 .widget-empty{
    min-height:64px;
    border-radius:14px;
    background:linear-gradient(90deg,rgba(23,35,59,.05) 25%,rgba(23,35,59,.09) 37%,rgba(23,35,59,.05) 63%);
    background-size:400% 100%;
    animation:pihMobileSkeleton 1.4s ease infinite;
  }
  @media(prefers-reduced-motion:reduce){
    body.pih-mobile-v2 .home-now-loading,
    body.pih-mobile-v2 .widget-empty{animation:none!important}
  }
  @keyframes pihMobileSkeleton{0%{background-position:100% 0}100%{background-position:0 0}}

  body.pih-mobile-v2 #homeSecondary{
    border:1px solid var(--pih-m-line)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.62)!important;
    overflow:hidden;
  }
  body.pih-mobile-v2 #homeSecondary>summary{min-height:56px!important;padding:12px 14px!important}
  body.pih-mobile-v2 .home-widget-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;padding:0 10px 10px!important}
  body.pih-mobile-v2 .home-widget{margin:0!important;border-radius:16px!important}
  body.pih-mobile-v2 .widget-move-controls,
  body.pih-mobile-v2 .drag-handle{display:none!important}

  /* Long editors become full-screen tasks instead of desktop modals squeezed into a phone. */
  body.pih-mobile-v2 dialog.pih-mobile-fullscreen-dialog{
    inset:0!important;
    width:100dvw!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    padding:0!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    background:var(--pih-m-paper)!important;
  }
  body.pih-mobile-v2 dialog.pih-mobile-fullscreen-dialog::backdrop{background:rgba(23,35,59,.38)}
  body.pih-mobile-v2 dialog.pih-mobile-fullscreen-dialog>form,
  body.pih-mobile-v2 dialog.pih-mobile-fullscreen-dialog>div{
    min-height:100%!important;
    max-height:none!important;
    width:100%!important;
    max-width:none!important;
    border-radius:0!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
  }
  body.pih-mobile-v2 dialog.pih-mobile-fullscreen-dialog header,
  body.pih-mobile-v2 dialog.pih-mobile-fullscreen-dialog .dialog-head,
  body.pih-mobile-v2 dialog.pih-mobile-fullscreen-dialog .modal-head{
    position:sticky;
    top:0;
    z-index:3;
    background:rgba(255,253,247,.96);
    backdrop-filter:blur(14px);
  }

  /* Compact choice/confirmation dialogs stay dialogs. */
  body.pih-mobile-v2 dialog:not(.pih-mobile-fullscreen-dialog){
    max-width:calc(100vw - 24px);
  }

  /* Complex page forms: one readable column on phones. */
  body.pih-mobile-v2 form,
  body.pih-mobile-v2 .form-grid,
  body.pih-mobile-v2 .people-form-grid,
  body.pih-mobile-v2 .watch-form-grid,
  body.pih-mobile-v2 .plan-form-grid{
    min-width:0;
  }
  body.pih-mobile-v2 .form-grid,
  body.pih-mobile-v2 .people-form-grid,
  body.pih-mobile-v2 .watch-form-grid,
  body.pih-mobile-v2 .plan-form-grid{
    grid-template-columns:1fr!important;
  }
  body.pih-mobile-v2 label{min-width:0}
  body.pih-mobile-v2 input,
  body.pih-mobile-v2 select,
  body.pih-mobile-v2 textarea{max-width:100%}

  /* Lists / Shopping: one mental model, with local filters as content controls. */
  body.pih-mobile-v2 .lists-layout{grid-template-columns:1fr!important}
  body.pih-mobile-v2 .board-tabs,
  body.pih-mobile-v2 .summary-strip,
  body.pih-mobile-v2 .watch-filter-chips{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:8px!important;
    scrollbar-width:none;
  }
  body.pih-mobile-v2 .board-tabs::-webkit-scrollbar,
  body.pih-mobile-v2 .summary-strip::-webkit-scrollbar{display:none}
  body.pih-mobile-v2 .board-tabs button{flex:0 0 auto;min-height:44px!important}

  /* Recipes: media tiles may be two-up on normal phones, one-up on tiny screens. */
  body.pih-mobile-v2 .recipe-grid,
  body.pih-mobile-v2 .recipe-library-grid,
  body.pih-mobile-v2 .recipe-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}

  /* Social notice remains dismissible on mobile. */
  body.pih-mobile-v2 .pih-social-notice{
    left:10px!important;right:10px!important;top:66px!important;width:auto!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
  }
  body.pih-mobile-v2 .pih-social-notice button{display:grid!important;min-width:44px!important;min-height:44px!important}

  /* More is a real destination sheet, not the Account menu wearing a false moustache. */
  body.pih-mobile-v2 .pih-mobile-more-sheet{
    position:fixed;
    z-index:10050;
    left:8px;
    right:8px;
    bottom:max(8px,env(safe-area-inset-bottom));
    max-height:min(72dvh,640px);
    border:1px solid var(--pih-m-line);
    border-radius:24px;
    background:#fff;
    box-shadow:0 24px 70px rgba(23,35,59,.26);
    padding:10px 12px calc(14px + env(safe-area-inset-bottom));
    overflow:auto;
  }
  body.pih-mobile-v2 .pih-mobile-more-sheet[hidden]{display:none!important}
  body.pih-mobile-v2 .pih-mobile-more-handle{width:42px;height:5px;border-radius:999px;background:#d9dde5;margin:0 auto 8px}
  body.pih-mobile-v2 .pih-mobile-more-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 10px}
  body.pih-mobile-v2 .pih-mobile-more-head h2{font-size:22px;margin:0;color:var(--pih-m-navy)}
  body.pih-mobile-v2 .pih-mobile-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  body.pih-mobile-v2 .pih-mobile-more-grid a{
    min-height:64px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid var(--pih-m-line);
    border-radius:16px;
    background:#fffdf8;
    color:var(--pih-m-navy);
    text-decoration:none;
    font-weight:800;
  }
  body.pih-mobile-v2 .pih-mobile-more-grid a[aria-current="page"]{background:#fff3d3;border-color:#ead291}
  body.pih-mobile-v2 .pih-mobile-more-grid small{display:block;color:var(--pih-m-muted);font-size:11px;font-weight:650;margin-top:2px}
  body.pih-mobile-v2 .pih-mobile-more-backdrop{
    position:fixed;z-index:10040;inset:0;background:rgba(23,35,59,.28);backdrop-filter:blur(2px)
  }
  body.pih-mobile-v2 .pih-mobile-more-backdrop[hidden]{display:none!important}
}

@media(max-width:359px){
  :root{--pih-m-page:12px}
  body.pih-mobile-v2 .recipe-grid,
  body.pih-mobile-v2 .recipe-library-grid,
  body.pih-mobile-v2 .recipe-cards{grid-template-columns:1fr!important}
  body.pih-mobile-v2 .pih-mobile-more-grid{grid-template-columns:1fr}
  body.pih-mobile-v2 .pih-mobile-tabs span{font-size:9px!important}
}

@media(min-width:431px) and (max-width:767px){
  body.pih-mobile-v2 .chooser{max-width:640px!important;margin-inline:auto!important}
}

@media(min-width:768px) and (max-width:1023px){
  body.pih-mobile-v2 .chooser,
  body.pih-mobile-v2 .hub-shell,
  body.pih-mobile-v2 main{max-width:900px;margin-inline:auto;padding-inline:24px}
  body.pih-mobile-v2 .home-widget-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  body.pih-mobile-v2 .home-widget.wide{grid-column:1/-1}
  body.pih-mobile-v2 .recipe-grid,
  body.pih-mobile-v2 .recipe-library-grid,
  body.pih-mobile-v2 .recipe-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:1024px){
  body.pih-mobile-v2 .chooser,
  body.pih-mobile-v2 .hub-shell,
  body.pih-mobile-v2 main{max-width:1200px;margin-inline:auto}
}