/* Popithere Mobile Design System v8.20
   One shared mobile grammar across the app. Page personality lives in content,
   not in reinventing headers, tabs, spacing and controls on every route. */

:root{
  --pih-u-page:16px;
  --pih-u-paper:#fffdf7;
  --pih-u-ink:#17233b;
  --pih-u-muted:#6b7280;
  --pih-u-line:rgba(23,35,59,.14);
  --pih-u-blue:#246bfd;
  --pih-u-yellow:#fff3d3;
  --pih-u-radius:18px;
  --pih-u-control:44px;
  --pih-u-section:22px;
}

@media(max-width:767px){
  body.pih-mobile-v2{
    background:var(--pih-u-paper)!important;
    color:var(--pih-u-ink)!important;
  }

  /* Shared mobile page rhythm */
  body.pih-mobile-v2 :is(.plans-shell,.alive-shell,.pih-page,.recipe-library-page,.lists-app){
    color:var(--pih-u-ink)!important;
  }

  body.pih-mobile-v2 :is(.plans-shell,.alive-shell,.pih-page){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:var(--pih-u-page)!important;
    padding-right:var(--pih-u-page)!important;
  }

  body.pih-mobile-v2 .plans-shell,
  body.pih-mobile-v2 main.alive-shell{
    padding-top:18px!important;
    padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
  }

  body.pih-mobile-v2 .pih-page{
    padding-top:18px!important;
    padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
  }

  /* Redundant desktop mastheads disappear on phone. Bottom navigation is the shell. */
  body.pih-mobile-v2 .pih-page-head{
    display:none!important;
  }

  /* One title system for Plans, Activity, People, Watch and similar areas. */
  body.pih-mobile-v2 :is(.alive-hero,.pih-hero){
    display:block!important;
    margin:0!important;
    padding:0 0 16px!important;
  }

  body.pih-mobile-v2 :is(.alive-eyebrow,.pih-eyebrow,.recipe-library-kicker,.lists-topbar .eyebrow){
    display:block!important;
    margin:0 0 7px!important;
    color:#7c5ce2!important;
    font:900 11px/1.15 Inter,system-ui,sans-serif!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
  }

  body.pih-mobile-v2 :is(.alive-hero h1,.pih-hero h1,.recipe-library-header h1,.lists-topbar h1){
    margin:0!important;
    color:var(--pih-u-ink)!important;
    font:800 40px/.98 Fredoka,Inter,system-ui,sans-serif!important;
    letter-spacing:-.045em!important;
  }

  body.pih-mobile-v2 :is(.alive-hero p,.pih-hero p,.recipe-library-header p){
    max-width:42ch!important;
    margin:9px 0 0!important;
    color:var(--pih-u-muted)!important;
    font:500 15px/1.45 Inter,system-ui,sans-serif!important;
  }

  body.pih-mobile-v2 :is(.alive-hero-aside){
    display:none!important;
  }

  /* Shared local navigation / filter language */
  body.pih-mobile-v2 :is(.alive-toolbar,.board-tabs,.recipe-library-filters,.pih-filterbar,.watch-scope-filters){
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  body.pih-mobile-v2 :is(.alive-toolbar,.board-tabs,.recipe-library-filters,.pih-filterbar,.watch-scope-filters)::-webkit-scrollbar{
    display:none!important;
  }

  body.pih-mobile-v2 :is(.alive-filter,.board-tabs button,.recipe-library-filters button,.pih-filterbar button,.watch-scope-filters button){
    flex:0 0 auto!important;
    min-width:0!important;
    min-height:var(--pih-u-control)!important;
    padding:0 15px!important;
    border:1px solid var(--pih-u-line)!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#596275!important;
    box-shadow:none!important;
    font:800 14px/1 Inter,system-ui,sans-serif!important;
    white-space:nowrap!important;
  }

  body.pih-mobile-v2 :is(.alive-filter.active,.board-tabs button.active,.recipe-library-filters button.active,.pih-filterbar button.active,.watch-scope-filters button.active){
    border-color:var(--pih-u-ink)!important;
    background:var(--pih-u-ink)!important;
    color:#fff!important;
  }

  body.pih-mobile-v2 :is(.alive-count,.recipe-library-count){
    color:var(--pih-u-muted)!important;
    font-size:13px!important;
    font-weight:800!important;
  }

  /* Inputs and primary controls should stop changing species between pages. */
  body.pih-mobile-v2 :is(
    .plans-add-button,
    .recipe-library-header button,
    .lists-topbar .icon-button,
    .pih-btn:not(.secondary):not(.danger)
  ){
    min-height:var(--pih-u-control)!important;
    border:0!important;
    border-radius:14px!important;
    background:var(--pih-u-ink)!important;
    color:#fff!important;
    box-shadow:none!important;
    font-weight:850!important;
  }

  body.pih-mobile-v2 :is(input,select,textarea){
    border:1px solid var(--pih-u-line)!important;
    border-radius:14px!important;
    background:#fff!important;
    color:var(--pih-u-ink)!important;
    box-shadow:none!important;
  }

  /* Plans: returning-user utility page, not a landing page. */
  body.pih-mobile-v2 .plans-shell .alive-hero{
    padding-bottom:14px!important;
  }
  body.pih-mobile-v2 .plans-shell .alive-hero p{
    max-width:34ch!important;
  }
  body.pih-mobile-v2 .plans-shell .alive-toolbar{
    margin:0!important;
    padding:0 0 14px!important;
    border-bottom:1px solid var(--pih-u-line)!important;
  }
  body.pih-mobile-v2 .plans-shell .alive-count{
    order:10!important;
    width:100%!important;
    margin:2px 0 0!important;
    padding-left:2px!important;
  }
  body.pih-mobile-v2 .plans-list{
    gap:12px!important;
    padding-top:14px!important;
  }
  body.pih-mobile-v2 .plans-day>h2{
    margin:12px 0 4px!important;
    color:#766d64!important;
    font-size:12px!important;
    letter-spacing:.09em!important;
  }
  body.pih-mobile-v2 .plan-row{
    grid-template-columns:70px minmax(0,1fr)!important;
    gap:10px!important;
    padding:14px!important;
    border:1px solid var(--pih-u-line)!important;
    border-radius:var(--pih-u-radius)!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  /* Activity uses the same shell and title treatment as Plans. */
  body.pih-mobile-v2 main.alive-shell:not(.plans-shell) .alive-hero{
    padding-bottom:14px!important;
  }
  body.pih-mobile-v2 main.alive-shell:not(.plans-shell) .alive-toolbar{
    margin:0 0 14px!important;
  }

  /* Lists: restore the actual page title, then let Today/Shop/etc behave as local tabs. */
  body.pih-mobile-v2 .lists-app{
    width:100%!important;
    min-height:0!important;
    padding:18px var(--pih-u-page) calc(96px + env(safe-area-inset-bottom))!important;
    background:var(--pih-u-paper)!important;
  }
  body.pih-mobile-v2 .lists-topbar{
    position:static!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0 0 14px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.pih-mobile-v2 .lists-topbar .daylivo-back{
    display:none!important;
  }
  body.pih-mobile-v2 .lists-topbar .topbar-copy{
    display:block!important;
    min-width:0!important;
  }
  body.pih-mobile-v2 .lists-topbar .topbar-actions{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  body.pih-mobile-v2 .lists-topbar .sync-status{
    display:none!important;
  }
  body.pih-mobile-v2 .lists-topbar .board-drawer-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:44px!important;
    padding:0 12px!important;
    background:#fff!important;
    color:var(--pih-u-ink)!important;
    border:1px solid var(--pih-u-line)!important;
  }
  body.pih-mobile-v2 .board-tabs{
    margin:0!important;
    padding:0 0 14px!important;
    border-bottom:1px solid var(--pih-u-line)!important;
  }
  body.pih-mobile-v2 .lists-layout{
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  body.pih-mobile-v2 .lists-content{
    width:100%!important;
    padding:16px 0 0!important;
  }
  body.pih-mobile-v2 .view-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0 0 14px!important;
    padding:0!important;
  }
  body.pih-mobile-v2 .view-head .eyebrow{
    margin-bottom:6px!important;
    font-size:10px!important;
  }
  body.pih-mobile-v2 .view-head h2{
    margin:0!important;
    color:var(--pih-u-ink)!important;
    font:800 28px/1.04 Fredoka,Inter,system-ui,sans-serif!important;
    letter-spacing:-.035em!important;
  }
  body.pih-mobile-v2 .view-head p{
    max-width:34ch!important;
    margin:6px 0 0!important;
    color:var(--pih-u-muted)!important;
    font-size:14px!important;
    line-height:1.4!important;
  }
  body.pih-mobile-v2 .capture-card{
    margin:0 0 14px!important;
    padding:12px!important;
    border:1px solid var(--pih-u-line)!important;
    border-radius:var(--pih-u-radius)!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  body.pih-mobile-v2 .capture-card .capture-main{
    display:none!important;
  }
  body.pih-mobile-v2 .capture-card textarea{
    min-height:86px!important;
    padding:13px!important;
    background:#faf9f5!important;
  }
  body.pih-mobile-v2 .capture-card .capture-actions{
    margin-top:8px!important;
  }

  /* Recipes is the visual baseline. Keep the photo grid, normalize its shell. */
  body.pih-mobile-v2.pih-recipes-page.recipe-library-only{
    background:var(--pih-u-paper)!important;
  }
  body.pih-mobile-v2.pih-recipes-page.recipe-library-only .recipe-library-page{
    width:100%!important;
    margin:0!important;
    padding:18px var(--pih-u-page) calc(96px + env(safe-area-inset-bottom))!important;
  }
  body.pih-mobile-v2 .recipe-library-header{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
    gap:12px!important;
    padding:0 0 14px!important;
  }
  body.pih-mobile-v2 .recipe-library-header p{
    max-width:32ch!important;
  }
  body.pih-mobile-v2 .recipe-library-header button{
    align-self:start!important;
    padding:0 14px!important;
  }
  body.pih-mobile-v2 .recipe-library-tools{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:12px 0!important;
    border-top:1px solid var(--pih-u-line)!important;
    border-bottom:1px solid var(--pih-u-line)!important;
  }
  body.pih-mobile-v2 .recipe-library-search input,
  body.pih-mobile-v2.pih-recipes-page.recipe-library-only #searchInput{
    min-height:48px!important;
    padding:0 14px!important;
  }
  body.pih-mobile-v2 .recipe-library-count{
    padding:13px 0 10px!important;
  }
  body.pih-mobile-v2.pih-recipes-page.recipe-library-only .recipe-library-grid{
    gap:20px 12px!important;
  }
  body.pih-mobile-v2.pih-recipes-page.recipe-library-only .recipe-library-grid .recipe-card .thumb{
    border-radius:16px!important;
    box-shadow:none!important;
  }

  /* People / Watch and the remaining utility pages inherit the same hierarchy. */
  body.pih-mobile-v2 .pih-hero{
    border-bottom:1px solid var(--pih-u-line)!important;
    margin-bottom:16px!important;
  }
  body.pih-mobile-v2 .pih-card{
    border:1px solid var(--pih-u-line)!important;
    border-radius:var(--pih-u-radius)!important;
    box-shadow:none!important;
  }
  body.pih-mobile-v2 .pih-card + .pih-card{
    margin-top:12px!important;
  }

  /* Watch's discovery header is secondary content, not another page masthead. */
  body.pih-mobile-v2 .watch-discovery-intro h2{
    margin:0!important;
    font:800 26px/1.04 Fredoka,Inter,system-ui,sans-serif!important;
    letter-spacing:-.03em!important;
  }
  body.pih-mobile-v2 .watch-discovery-intro p{
    margin-top:5px!important;
    color:var(--pih-u-muted)!important;
    font-size:14px!important;
  }

  /* Cocktails keeps its own content language but uses the same page title geometry. */
  body.pih-mobile-v2 .cocktail-app{
    background:var(--pih-u-paper)!important;
  }
  body.pih-mobile-v2 .cocktail-topbar{
    position:static!important;
    min-height:0!important;
    margin:0!important;
    padding:18px var(--pih-u-page) 14px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.pih-mobile-v2 .cocktail-topbar .brizi-back{
    display:none!important;
  }
  body.pih-mobile-v2 .cocktail-topbar .topbar-title{
    display:block!important;
  }
  body.pih-mobile-v2 .cocktail-topbar .topbar-title .eyebrow{
    display:block!important;
    margin:0 0 7px!important;
    color:#7c5ce2!important;
    font:900 11px/1.15 Inter,system-ui,sans-serif!important;
    letter-spacing:.13em!important;
  }
  body.pih-mobile-v2 .cocktail-topbar h1{
    margin:0!important;
    color:var(--pih-u-ink)!important;
    font:800 40px/.98 Fredoka,Inter,system-ui,sans-serif!important;
    letter-spacing:-.045em!important;
  }

  /* A shared section-heading cadence. */
  body.pih-mobile-v2 :is(.pih-section-heading h3,.sidebar-section-head strong,.watch-top-controls-label strong){
    color:var(--pih-u-ink)!important;
  }

  /* Keep Poppet out of the bottom-nav hit area everywhere. */
  body.pih-mobile-v2 :is(.poppet-fab,#poppetFab,.poppet-button){
    bottom:calc(92px + env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:380px){
  :root{--pih-u-page:13px}
  body.pih-mobile-v2 :is(.alive-hero h1,.pih-hero h1,.recipe-library-header h1,.lists-topbar h1,.cocktail-topbar h1){
    font-size:36px!important;
  }
}


/* Mobile POP composer: Safari must never render typed text the same colour as
   the dark composer surface. Keep text, selection and caret explicitly visible. */
@media(max-width:760px){
  #quickPopInput,
  body.pih-mobile-v2 #quickPopInput,
  body:has(#quickPopHero) #quickPopInput{
    background:#17263f!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    caret-color:#7fb0ff!important;
    text-shadow:none!important;
    opacity:1!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }
  #quickPopInput::placeholder,
  body.pih-mobile-v2 #quickPopInput::placeholder,
  body:has(#quickPopHero) #quickPopInput::placeholder{
    color:rgba(255,255,255,.62)!important;
    -webkit-text-fill-color:rgba(255,255,255,.62)!important;
    opacity:1!important;
  }
}


/* v8.21.1 hotfix — Mobile Shopping legibility regression guard.
   Shopping rows are light paper. Open-item copy must never inherit white or
   near-white text from dark surfaces or WebKit text-fill rules. */
@media(max-width:767px){
  body.pih-mobile-v2 .lists-app .list-item:not(.completed) .item-title{
    color:#17233b!important;
    -webkit-text-fill-color:#17233b!important;
    opacity:1!important;
  }
  body.pih-mobile-v2 .lists-app .list-item:not(.completed) .item-provenance,
  body.pih-mobile-v2 .lists-app .list-item:not(.completed) .source-text{
    color:#667085!important;
    -webkit-text-fill-color:#667085!important;
  }
  body.pih-mobile-v2 .lists-app .list-item.completed .item-title{
    color:#747b86!important;
    -webkit-text-fill-color:#747b86!important;
  }
}


/* Mobile focused cooking overflow regression guard */
@media(max-width:980px){
  body.pih-recipes-page{
    overflow-x:hidden!important;
  }
  body.pih-recipes-page .focused-cooking-shell{
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  body.pih-recipes-page .focused-cooking,
  body.pih-recipes-page .focused-cooking>main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.pih-recipes-page .focused-cooking>main{
    overflow-x:hidden!important;
  }
  body.pih-recipes-page .focused-cooking h1,
  body.pih-recipes-page .focused-instruction,
  body.pih-recipes-page .focused-needs{
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  body.pih-recipes-page .focused-needs .focused-origin-group>div{
    min-width:0!important;
    max-width:100%!important;
  }
  body.pih-recipes-page .focused-needs :is(.focused-origin-new,.focused-origin-earlier){
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}