/* Pop It Here v5.10 — Desktop + Joy layer
   Keeps the working UI grown-up, but uses the brand palette as an actual system
   rather than limiting it to logos and buttons. Mobile behavior is intentionally
   left mostly unchanged. */
:root{
  --pih-blue-soft:#EDF4FF;
  --pih-red-soft:#FFF0EE;
  --pih-green-soft:#EEF9F0;
  --pih-yellow-soft:#FFF8D9;
  --pih-teal-soft:#E9FBF7;
  --pih-ink:#111111;
  --pih-warm:#FAFAF8;
  --pih-shadow:0 18px 46px rgba(17,17,17,.075);
}

/* A tiny brand ribbon makes every module feel like part of the same product. */
body::before{
  content:"";
  position:fixed;
  z-index:10000;
  top:0;left:0;right:0;
  height:4px;
  pointer-events:none;
  background:linear-gradient(90deg,
    var(--pih-blue) 0 25%,
    var(--pih-red) 25% 45%,
    var(--pih-yellow) 45% 65%,
    var(--pih-green) 65% 84%,
    var(--pih-teal) 84% 100%);
}

/* ---------- HOME / SIGN IN ---------- */
body:has(.portal-shell){
  background:
    radial-gradient(circle at 8% 6%,rgba(21,101,255,.075),transparent 28rem),
    radial-gradient(circle at 92% 10%,rgba(255,193,7,.13),transparent 24rem),
    radial-gradient(circle at 86% 92%,rgba(67,160,71,.07),transparent 28rem),
    var(--pih-warm);
}
body:has(.portal-shell) .ambient-one{background:#FFE99A;opacity:.52;border-radius:44% 56% 62% 38%/58% 42% 58% 42%}
body:has(.portal-shell) .ambient-two{background:#D6F4E1;opacity:.64;border-radius:62% 38% 42% 58%/46% 58% 42% 54%}
body:has(.portal-shell) .portal-card,
body:has(.portal-shell) .chooser{box-shadow:var(--pih-shadow);border-color:#E5E2DB}
body:has(.portal-shell) .portal-card.auth-card{position:relative;overflow:hidden}
body:has(.portal-shell) .portal-card.auth-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:linear-gradient(90deg,var(--pih-blue),var(--pih-red),var(--pih-yellow),var(--pih-green));
}
body:has(.portal-shell) .auth-actions button{background:linear-gradient(135deg,#2D74FF,var(--pih-blue))}
body:has(.portal-shell) .google-signin{background:#fff!important;color:#111!important}
body:has(.portal-shell) .invitation-note{background:linear-gradient(135deg,#fff,var(--pih-blue-soft));border-color:#DDE8FB}
body:has(.portal-shell) .chooser{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(250,250,248,.96))}
body:has(.portal-shell) .app-choice{border-width:1px;box-shadow:0 8px 22px rgba(17,17,17,.035)}
body:has(.portal-shell) .app-choice.board{border-color:rgba(21,101,255,.35);background:linear-gradient(105deg,#fff 0 62%,var(--pih-blue-soft) 62% 100%)}
body:has(.portal-shell) .app-choice.recipes{border-top:4px solid var(--pih-red);background:linear-gradient(155deg,#fff 62%,var(--pih-red-soft))}
body:has(.portal-shell) .app-choice.fitness{border-top:4px solid var(--pih-green);background:linear-gradient(155deg,#fff 62%,var(--pih-green-soft))}
body:has(.portal-shell) .app-choice.cocktails{border-top:4px solid var(--pih-yellow);background:linear-gradient(155deg,#fff 62%,var(--pih-yellow-soft))}
body:has(.portal-shell) .app-choice:hover{transform:translateY(-3px);box-shadow:0 17px 36px rgba(17,17,17,.085)}
body:has(.portal-shell) .board-badges b:nth-child(1){background:var(--pih-blue-soft);border-color:#CFE0FF}
body:has(.portal-shell) .board-badges b:nth-child(2){background:var(--pih-green-soft);border-color:#D5ECD8}
body:has(.portal-shell) .board-badges b:nth-child(3){background:var(--pih-yellow-soft);border-color:#F4E6A9}
body:has(.portal-shell) .board-badges b:nth-child(4){background:var(--pih-red-soft);border-color:#F5D2CE}

@media(min-width:900px){
  body:has(.portal-shell) .portal-shell{width:min(1320px,calc(100% - 3rem));padding-top:clamp(1.5rem,3vh,2.6rem)}
  body:has(.portal-shell) .portal-card.auth-card{width:min(720px,100%);padding:2rem 2.35rem;margin:3vh auto}
  body:has(.portal-shell) .auth-brand{margin-bottom:1.5rem;padding-bottom:1.45rem}
  body:has(.portal-shell) .auth-copy h1{font-size:clamp(3rem,5vw,4.2rem)}
  body:has(.portal-shell) #authControls{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem;align-items:end}
  body:has(.portal-shell) #authControls>label{margin-top:.9rem}
  body:has(.portal-shell) #authControls>.auth-actions,
  body:has(.portal-shell) #authControls>.auth-divider,
  body:has(.portal-shell) #authControls>.google-signin,
  body:has(.portal-shell) #authControls>.invitation-note,
  body:has(.portal-shell) #authControls>.auth-trust{grid-column:1/-1}
  body:has(.portal-shell) .chooser{padding:2rem 2.2rem}
  body:has(.portal-shell) .suite-intro{padding:2rem 0 1.35rem;max-width:930px}
  body:has(.portal-shell) .suite-intro h1{max-width:900px;font-size:clamp(3rem,5vw,4.7rem)}
  body:has(.portal-shell) .app-grid{gap:1rem}
  body:has(.portal-shell) .app-choice{padding:1.25rem;min-height:198px}
  body:has(.portal-shell) .app-choice.board{min-height:190px;grid-template-columns:92px minmax(0,1fr) auto;align-items:center}
  body:has(.portal-shell) .app-choice.board .choice-icon{width:82px;height:82px}
  body:has(.portal-shell) .choice-icon{width:66px;height:66px}
}

/* ---------- BOARD ---------- */
body:has(.lists-app){
  --dark:#111111;--dark2:#1A1A1A;--green:#1565FF;--leaf:#43A047;--cream:#FAFAF8;--gold:#E53935;--ink:#222222;--muted:#6C6B67;--line:#E7E5E0;
  background:
    radial-gradient(circle at 100% 0,rgba(255,193,7,.11),transparent 28rem),
    radial-gradient(circle at 0 85%,rgba(21,101,255,.07),transparent 31rem),
    #FAFAF8!important;
}
body:has(.lists-app) .lists-topbar{background:rgba(250,250,248,.96);box-shadow:0 7px 24px rgba(17,17,17,.045)}
body:has(.lists-app) .lists-sidebar{background:rgba(255,255,255,.96);box-shadow:var(--pih-shadow);border-top:4px solid var(--pih-blue)}
body:has(.lists-app) .sidebar-brand h2,
body:has(.lists-app) .view-head h2{font-family:"Poppins",ui-sans-serif,system-ui,sans-serif!important;color:#111!important}
body:has(.lists-app) .nav-item.active{background:var(--pih-blue-soft);box-shadow:inset 4px 0 0 var(--pih-blue);color:#111}
body:has(.lists-app) .nav-item.active em{background:#DCE8FF;color:#174CBA}
body:has(.lists-app) .capture-card{border-color:#D6E4FF!important;background:linear-gradient(135deg,#fff 0 64%,var(--pih-blue-soft) 64% 100%)!important;box-shadow:0 14px 34px rgba(21,101,255,.07)!important}
body:has(.lists-app) .capture-icon{background:var(--pih-blue)!important;color:#fff!important}
body:has(.lists-app) #smartCaptureButton{background:linear-gradient(135deg,#2D74FF,var(--pih-blue))!important}
body:has(.lists-app) .summary-card:nth-child(4n+1){background:var(--pih-blue-soft)!important;border-color:#D6E4FF!important}
body:has(.lists-app) .summary-card:nth-child(4n+2){background:var(--pih-green-soft)!important;border-color:#D9ECD9!important}
body:has(.lists-app) .summary-card:nth-child(4n+3){background:var(--pih-yellow-soft)!important;border-color:#F2E5A7!important}
body:has(.lists-app) .summary-card:nth-child(4n){background:var(--pih-red-soft)!important;border-color:#F4D1CD!important}
body:has(.lists-app) .section-card{box-shadow:0 9px 25px rgba(17,17,17,.035)!important}
body:has(.lists-app) .section-head{background:linear-gradient(90deg,#fff,var(--pih-blue-soft))!important}
body:has(.lists-app) .list-item:hover{background:#F8FAFF!important}
body:has(.lists-app) .notes-grid .note-card:nth-child(4n+1){background:#FFF9DE!important;border-color:#EFE1A2!important}
body:has(.lists-app) .notes-grid .note-card:nth-child(4n+2){background:#F0F6FF!important;border-color:#D7E5FA!important}
body:has(.lists-app) .notes-grid .note-card:nth-child(4n+3){background:#EFF9F1!important;border-color:#D6EBD9!important}
body:has(.lists-app) .notes-grid .note-card:nth-child(4n){background:#FFF2F0!important;border-color:#F2D6D2!important}
body:has(.lists-app) .smart-shop-icon{background:var(--pih-blue)!important}
body:has(.lists-app) .smart-shop-card{border-top:3px solid var(--pih-green)!important}
body:has(.lists-app) input:focus,
body:has(.lists-app) textarea:focus,
body:has(.lists-app) select:focus{outline-color:rgba(21,101,255,.13)!important;border-color:rgba(21,101,255,.48)!important}

@media(min-width:1100px){
  body:has(.lists-app) .lists-layout{max-width:1560px;grid-template-columns:300px minmax(0,1fr);gap:1.2rem;padding:1.2rem 1.5rem}
  body:has(.lists-app) .lists-content{padding-left:.3rem;padding-right:.3rem}
  body:has(.lists-app) .capture-card{padding:1.2rem 1.25rem}
  body:has(.lists-app) #captureInput{min-height:76px;font-size:1rem}
}

/* ---------- RECIPES ---------- */
body:has(.hub-toolbar){
  background:
    radial-gradient(circle at 95% 0,rgba(229,57,53,.075),transparent 28rem),
    radial-gradient(circle at 5% 96%,rgba(255,193,7,.085),transparent 31rem),
    #FAFAF8!important;
}
body:has(.hub-toolbar) .hub-toolbar{border-top:0!important;box-shadow:0 7px 24px rgba(17,17,17,.05)!important}
body:has(.hub-toolbar) .sidebar{border-top:4px solid var(--pih-red)!important;box-shadow:var(--pih-shadow)!important}
body:has(.hub-toolbar) .recipe-card:hover{background:#FFF8F6!important;border-color:#F0D0CC!important}
body:has(.hub-toolbar) .recipe-card.active{background:var(--pih-red-soft)!important;border-color:#F2CBC6!important;box-shadow:inset 4px 0 0 var(--pih-red)!important}
body:has(.hub-toolbar) .recipe-tabs{background:#fff!important}
body:has(.hub-toolbar) .recipe-tab.active{background:var(--pih-red)!important;color:#fff!important}
body:has(.hub-toolbar) .simple-recipe-hero{border-top:5px solid var(--pih-red)!important;background:linear-gradient(135deg,#fff 62%,#FFF6E3)!important}
body:has(.hub-toolbar) .simple-section,
body:has(.hub-toolbar) .panel{box-shadow:0 10px 28px rgba(17,17,17,.04)!important}
body:has(.hub-toolbar) .simple-section:nth-child(3n+1),
body:has(.hub-toolbar) .grid>.panel:nth-child(3n+1){border-top:3px solid var(--pih-red)!important}
body:has(.hub-toolbar) .simple-section:nth-child(3n+2),
body:has(.hub-toolbar) .grid>.panel:nth-child(3n+2){border-top:3px solid var(--pih-yellow)!important}
body:has(.hub-toolbar) .simple-section:nth-child(3n),
body:has(.hub-toolbar) .grid>.panel:nth-child(3n){border-top:3px solid var(--pih-green)!important}
body:has(.hub-toolbar) button.warning,
body:has(.hub-toolbar) .mobile-cook-button{background:linear-gradient(135deg,#F04B46,var(--pih-red))!important;color:#fff!important}
body:has(.hub-toolbar) input:focus,
body:has(.hub-toolbar) select:focus,
body:has(.hub-toolbar) textarea:focus{outline-color:rgba(229,57,53,.11)!important;border-color:rgba(229,57,53,.42)!important}

@media(min-width:1100px){
  body:has(.hub-toolbar) .app{max-width:1580px!important;grid-template-columns:350px minmax(0,1fr)!important;gap:1.25rem!important;padding:1.25rem 1.5rem!important}
  body:has(.hub-toolbar) .simple-recipe-view{max-width:1240px!important}
}

/* ---------- FITNESS ---------- */
body:has(.fitness-auth-brand),body:has(.bottom-nav){
  background:
    radial-gradient(circle at 95% 0,rgba(21,101,255,.28),transparent 33rem),
    radial-gradient(circle at 0 80%,rgba(0,201,167,.13),transparent 31rem),
    radial-gradient(circle at 90% 82%,rgba(255,193,7,.07),transparent 25rem),
    linear-gradient(180deg,#111,#171717 66%,#0D0D0D)!important;
}
body:has(.bottom-nav) .card{border-color:rgba(255,255,255,.105)!important;box-shadow:0 18px 42px rgba(0,0,0,.24)!important}
body:has(.bottom-nav) .dashboard-grid>.card:nth-child(4n+1){box-shadow:inset 0 3px 0 var(--pih-blue),0 18px 42px rgba(0,0,0,.24)!important}
body:has(.bottom-nav) .dashboard-grid>.card:nth-child(4n+2){box-shadow:inset 0 3px 0 var(--pih-green),0 18px 42px rgba(0,0,0,.24)!important}
body:has(.bottom-nav) .dashboard-grid>.card:nth-child(4n+3){box-shadow:inset 0 3px 0 var(--pih-yellow),0 18px 42px rgba(0,0,0,.24)!important}
body:has(.bottom-nav) .dashboard-grid>.card:nth-child(4n){box-shadow:inset 0 3px 0 var(--pih-red),0 18px 42px rgba(0,0,0,.24)!important}
body:has(.bottom-nav) .bottom-nav{border-top-color:rgba(255,255,255,.13)!important}
body:has(.bottom-nav) .bottom-nav .nav-item:hover{background:rgba(255,255,255,.055);border-radius:13px}
body:has(.bottom-nav) .bottom-nav .nav-item.active{color:#8EB5FF!important}

@media(min-width:1000px){
  body:has(.bottom-nav) .app-shell{width:min(1280px,calc(100% - 3rem))!important}
  body:has(.bottom-nav) .view{padding:10px 28px 112px!important}
  body:has(.bottom-nav) .bottom-nav{width:min(1280px,calc(100% - 3rem))!important;border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08);border-radius:18px 18px 0 0}
  body:has(.bottom-nav) .dashboard-grid{grid-template-columns:1.35fr .85fr!important;gap:16px!important}
  body:has(.bottom-nav) .card{padding:19px!important;margin-bottom:15px!important}
  body:has(.bottom-nav) .hero-card{padding:24px!important}
  body:has(.bottom-nav) .hero-card h2{font-size:34px!important}
}

/* ---------- COCKTAILS ---------- */
body:has(.cocktail-app){
  background:
    radial-gradient(circle at 100% 0,rgba(255,193,7,.14),transparent 27rem),
    radial-gradient(circle at 0 92%,rgba(229,57,53,.075),transparent 29rem),
    #FAFAF8!important;
}
body:has(.cocktail-app) .cocktail-sidebar{border-top:4px solid var(--pih-yellow)!important;box-shadow:var(--pih-shadow)!important}
body:has(.cocktail-app) .makeable-toggle{background:var(--pih-green-soft)!important;border-color:#D6EBD9!important}
body:has(.cocktail-app) .cocktail-card:hover{background:#FFF9E7!important;border-color:#EADCA0!important}
body:has(.cocktail-app) .cocktail-card.active{background:#FFF6F4!important;outline-color:rgba(229,57,53,.12)!important;border-color:#F0C7C2!important;box-shadow:inset 4px 0 0 var(--pih-red)!important}
body:has(.cocktail-app) .empty-state{background:linear-gradient(145deg,#fff 65%,var(--pih-yellow-soft))!important;border-top:4px solid var(--pih-yellow)!important}
body:has(.cocktail-app) .detail-grid>.panel:nth-child(1){border-top:4px solid var(--pih-red)!important}
body:has(.cocktail-app) .detail-grid>.panel:nth-child(2){border-top:4px solid var(--pih-teal)!important}
body:has(.cocktail-app) .substitution-panel{border-top:4px solid var(--pih-yellow)!important}
body:has(.cocktail-app) .ingredient-actions button:not(.secondary),
body:has(.cocktail-app) .dialog-actions button:not(.secondary),
body:has(.cocktail-app) .empty-state button{background:linear-gradient(135deg,#F04B46,var(--pih-red))!important}
body:has(.cocktail-app) .pro-tip{background:var(--pih-blue-soft)!important;border-color:#D5E3FD!important;color:#214D9C!important}
body:has(.cocktail-app) .pro-tip::before{content:"Pop tip · "!important}

@media(min-width:1100px){
  body:has(.cocktail-app) .cocktail-layout{width:min(1580px,calc(100% - 3rem));grid-template-columns:380px minmax(0,1fr);gap:1.25rem}
  body:has(.cocktail-app) .drink-hero{min-height:440px}
  body:has(.cocktail-app) .panel{padding:1.35rem}
}

/* Keep mobile deliberately calmer. Large blocks of colour become noise on a phone. */
@media(max-width:760px){
  body::before{height:3px}
  body:has(.portal-shell) .app-choice.recipes,
  body:has(.portal-shell) .app-choice.fitness,
  body:has(.portal-shell) .app-choice.cocktails{border-top-width:3px}
  body:has(.lists-app) .capture-card{background:#fff!important}
  body:has(.hub-toolbar) .simple-section,
  body:has(.hub-toolbar) .grid>.panel{border-top-width:1px!important}
}