/* === AUTH OVERLAY === */
#auth-overlay{position:fixed;inset:0;background:#fffbf7;background-image:linear-gradient(rgba(28,28,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(28,28,46,.045) 1px,transparent 1px);background-size:26px 26px;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;transition:opacity .3s;}
#auth-overlay.hidden{display:none;}

/* === LANDING PAGE === */
#landing-overlay{position:fixed;inset:0;background:#fffbf7;background-image:linear-gradient(rgba(28,28,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(28,28,46,.045) 1px,transparent 1px);background-size:26px 26px;z-index:8990;overflow-y:auto;}
#landing-overlay.hidden{display:none;}
#landing-overlay .gl-page{scroll-behavior:smooth;}
#landing-overlay .gl-page img{max-width:100%;display:block;}
/* Deliberately no color:inherit reset here -- it out-specifies (an ID
   beats two plain classes) every button/link color rule below it, like
   .gl-btn-pill.gl-dark, silently forcing them all back to the inherited
   body text color. Every <a> below sets its own color explicitly. */
#landing-overlay .gl-page a{text-decoration:none;}


  /* ---------- NAV ---------- */
  .gl-nav{
    position:absolute;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px clamp(20px,5vw,64px);
  }
  /* Frosted-glass backdrop behind the mascot+wordmark lockup -- this
     sits directly on the busy hero photo (unlike subpages' solid/stripe
     header bands), and the yellow wordmark's dark text-shadow alone
     wasn't always enough contrast depending on what part of the photo
     landed behind it. Lightens without fully hiding the photo. */
  .gl-nav-logo{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 16px 6px 8px;border-radius:999px;}
  .gl-nav-logo img{height:36px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));}
  .gl-nav-wordmark{font-family:'Fuggles',cursive;font-weight:400;font-size:30px;color:var(--yellow);text-shadow:0 2px 8px rgba(0,0,0,.4);line-height:1;}
  .gl-nav-links{display:flex;align-items:center;gap:14px;}
  .gl-nav-links a{
    font-family:'Jost',sans-serif;font-weight:700;font-size:13px;
    letter-spacing:1.2px;text-transform:uppercase;color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.35);
    transition:opacity .15s;
  }
  .gl-nav-links a:not(.gl-nav-cta){
    background:var(--yellow);color:var(--dark);
    text-shadow:none;
    padding:10px 20px;border-radius:var(--rp);
    box-shadow:var(--sh);
  }
  .gl-nav-links a:hover{opacity:.7;}
  .gl-nav-cta{
    background:var(--dark);color:#fff;
    font-family:'Jost',sans-serif;font-weight:800;font-size:12.5px;
    letter-spacing:1px;text-transform:uppercase;
    padding:12px 26px;border-radius:var(--rp);
    box-shadow:var(--sh);
  }
  @media(max-width:760px){ .gl-nav-links a:not(.gl-nav-cta){display:none;} }

  /* ---------- HERO ---------- */
  .gl-hero{
    position:relative;
    height:100vh;min-height:600px;
    background-image:url('../images/home-hero-tablecloth.png');
    background-size:cover;background-position:center 52%;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    /* Full-bleed regardless of parent width: 0 on the standalone landing
       page (already full-viewport via #landing-overlay's position:fixed),
       breaks out of the app's centered 1280px .main when this same markup
       is reused on the signed-in Home tab (html-partials/pane-home.html). */
    width:100vw;margin:0 calc(-50vw + 50%);box-sizing:border-box;
  }
  /* .gl-hero is shared with the standalone landing page (see comment
     above) -- the tablecloth-background swap there unintentionally
     carried over to the signed-in Home tab too, since it's the same
     class. Scoped back to Home's original photo without touching
     landing's own background. */
  #pane-home .gl-hero{
    background-image:url('../images/landing-hero-flatlay.jpg');
    background-position:center 52%;
  }
  .gl-hero::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 28% 36% at 50% 49%, rgba(20,10,25,.78) 0%, rgba(20,10,25,.5) 55%, rgba(20,10,25,0) 78%);
  }
  .gl-hero-inner{position:relative;z-index:2;padding:0 20px;transform:translateY(3vh);}
  .gl-hero-eyebrow{
    font-family:'Jost',sans-serif;font-weight:800;font-size:13px;
    letter-spacing:3px;text-transform:uppercase;color:var(--yellow);
    text-shadow:0 2px 10px rgba(0,0,0,.4);
    margin-bottom:6px;
  }
  .gl-hero-wordmark-row{
    display:flex;align-items:center;justify-content:center;gap:16px;
  }
  .gl-hero-logo-icon{
    width:clamp(70px,11vw,140px);height:clamp(70px,11vw,140px);object-fit:contain;
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
  }
  .gl-hero-wordmark{
    font-family:'Fuggles',cursive;font-weight:400;
    font-size:clamp(72px,13vw,150px);line-height:.92;color:#fff;
    margin:0;
    animation:gl-neon-pulse 2.4s ease-in-out infinite;
  }
  @keyframes gl-neon-pulse{
    0%,100%{
      text-shadow:
        0 0 6px #fff,
        0 0 18px #ffc9f6,
        0 0 34px #ff8fe0,
        0 0 70px #a3117a,
        0 0 120px rgba(163,17,122,.5);
    }
    50%{
      text-shadow:
        0 0 10px #fff,
        0 0 28px #ffc9f6,
        0 0 54px #ff8fe0,
        0 0 100px #a3117a,
        0 0 160px rgba(163,17,122,.7);
    }
  }
  .gl-hero-tagline{
    font-family:'Jost',sans-serif;font-weight:700;
    font-size:clamp(19px,2.8vw,27px);letter-spacing:.2px;
    color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.45);
    margin:14px 0 34px;max-width:520px;margin-left:auto;margin-right:auto;
    line-height:1.5;
  }
  .gl-btn-pill{
    display:inline-block;
    font-family:'Jost',sans-serif;font-weight:800;font-size:13.5px;
    letter-spacing:1.4px;text-transform:uppercase;
    color:var(--pink-dark);background:var(--pink);
    padding:17px 42px;border-radius:var(--rp);
    box-shadow:0 10px 30px rgba(163,17,122,.35);
    transition:transform .15s ease;
  }
  .gl-btn-pill:hover{transform:translateY(-2px);}
  .gl-btn-pill.gl-light{background:#fff;color:var(--dark);}
  .gl-btn-pill.gl-dark{background:var(--dark);color:#fff;}

  .gl-btn-pot{
    position:relative;display:inline-block;border:none;cursor:pointer;background:none;
    width:221px;
    margin-top:-16px;
    transition:transform .15s ease;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
  }
  .gl-btn-pot:hover{transform:translateY(-2px);}
  .gl-btn-pot .gl-pot-fill{width:100%;display:block;}
  .gl-btn-pot .gl-pot-label{
    position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);
    font-family:'Jost',sans-serif;font-weight:800;font-size:22px;
    letter-spacing:.9px;text-transform:uppercase;color:var(--dark);white-space:nowrap;
    animation:gl-pot-label-flash 3.6s ease-in-out infinite;
  }
  @keyframes gl-pot-label-flash{
    0%,70%,100%{color:var(--teal-accent);}
    85%{color:#ff4fc8;}
  }
  .gl-btn-pot-corner{
    position:absolute;right:6%;bottom:9%;z-index:3;
    filter:drop-shadow(0 0 26px rgba(255,255,255,.9)) drop-shadow(0 0 46px rgba(255,255,255,.55)) drop-shadow(0 12px 20px rgba(0,0,0,.3));
    animation:gl-pot-float 3.6s ease-in-out infinite;
  }
  @keyframes gl-pot-float{
    0%,100%{transform:translate(0,0) rotate(-2deg);}
    50%{transform:translate(0,-14px) rotate(2deg);}
  }

  .gl-hero-prop{position:absolute;z-index:3;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));}
  .gl-hero-prop.sunglasses{width:150px;top:15%;right:9%;transform:rotate(-9deg);}
  .gl-hero-prop.cork{width:60px;bottom:16%;left:7%;transform:rotate(14deg);}

  @media(max-width:640px){
    .gl-hero-prop.sunglasses{width:96px;}
    .gl-hero-prop.cork{width:42px;}
  }

  /* ---------- TILT WRAP (marquee only) ---------- */
  .gl-tilt-wrap{
    position:relative;z-index:4;
    /* Full-bleed for the same reason as .gl-hero above -- was width:112%
       with a negative % margin, but that's relative to whatever contains
       it (100vw-wide on the landing page, only ~1230px inside Home's
       centered .main), so the "overhang" undershot the viewport edge on
       Home. 100vw + the vh-based calc breaks out correctly in both. */
    width:100vw;
    margin:-18px calc(-50vw + 50%) -30px;
    transform:rotate(-1.2deg);
  }
  @media(max-width:640px){
    .gl-tilt-wrap{margin:-14px calc(-50vw + 50%) -22px;transform:rotate(-1.8deg);}
  }

  /* ---------- HEADLINE BAND ---------- */
  .gl-headline-band{
    background:var(--teal);
    padding:36px clamp(20px,5vw,64px);
    position:relative;
    width:100vw;margin:0 calc(-50vw + 50%);box-sizing:border-box;
  }
  .gl-headline-band-inner{
    width:100%;height:70px;
    display:flex;align-items:center;
  }
  .gl-headline-fork{
    width:320px;height:auto;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));
  }
  .gl-headline-band h2{
    font-family:'Fuggles',cursive;font-weight:400;
    font-size:clamp(29px,5vw,52px);letter-spacing:.2px;
    text-transform:none;color:#fff;margin:0;
    text-align:left;
    animation:gl-neon-pulse-pink 2.4s ease-in-out infinite;
  }
  @keyframes gl-neon-pulse-pink{
    0%,100%{
      text-shadow:
        0 0 4px #fff,
        0 0 10px #ffd6f5,
        0 0 18px #ff8fe0,
        0 0 34px #a3117a;
    }
    50%{
      text-shadow:
        0 0 6px #fff,
        0 0 14px #ffd6f5,
        0 0 26px #ff8fe0,
        0 0 48px #a3117a;
    }
  }

  /* ---------- MARQUEE ---------- */
  .gl-marquee-wrap{
    background:var(--dark);
    overflow:hidden;padding:9px 0;
    box-shadow:0 13px 26px rgba(0,0,0,.31);
  }
  .gl-marquee-track{
    display:flex;align-items:center;width:max-content;
    animation:gl-scroll-left 130s linear infinite;
  }
  .gl-marquee-icon{
    display:inline-flex;align-items:center;justify-content:center;
    padding:0 22px;
  }
  .gl-marquee-icon img{
    width:31px;height:31px;object-fit:contain;
  }
  @keyframes gl-scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ---------- SHARED SCRIPT LABEL ---------- */
  .gl-story-script{
    font-family:'Fuggles',cursive;font-size:58px;color:var(--pink-dark);
    display:block;margin-bottom:2px;
  }

  /* ---------- KITCHEN THAT RUNS ITSELF ---------- */
  .gl-kitchen-runs{
    max-width:1180px;margin:0 auto;
    padding:100px clamp(20px,5vw,64px) 90px;
    text-align:center;
  }
  .gl-kr-eyebrow{
    font-family:'Julius Sans One',sans-serif;font-weight:400;font-size:13px;
    letter-spacing:2px;text-transform:uppercase;color:var(--pink-dark);
    margin-bottom:10px;
  }
  .gl-kitchen-runs h2{
    font-family:'Julius Sans One',sans-serif;font-weight:400;
    font-size:clamp(26px,4vw,40px);color:var(--dark);
    margin:0 0 22px;
  }
  .gl-kitchen-runs > p{
    font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;
    line-height:1.8;color:var(--dark);max-width:640px;margin:0 auto 56px;
  }
  .gl-kr-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  }
  .gl-kr-card{
    background:#fff;border-radius:var(--r);padding:40px 28px;box-shadow:var(--sh);
    transition:transform .2s ease,box-shadow .2s ease;
  }
  .gl-kr-card:hover{
    transform:scale(1.04) translateY(-4px);box-shadow:var(--sh-lg);
  }
  .gl-kr-icon{
    width:72px;height:72px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 22px;
  }
  .gl-kr-icon svg{width:30px;height:30px;color:var(--dark);opacity:.65;}
  .gl-kr-icon.gl-pink{background:var(--pink);}
  .gl-kr-icon.gl-teal{background:var(--teal);}
  .gl-kr-icon.gl-yellow{background:var(--yellow);}
  .gl-kr-card h3{
    font-family:'Julius Sans One',sans-serif;font-weight:400;font-size:19px;color:var(--dark);
    margin:0 0 10px;
  }
  .gl-kr-card p{
    font-family:'Quicksand',sans-serif;font-weight:500;font-size:14.5px;
    line-height:1.65;color:var(--dark);margin:0;
  }
  /* Each card's body text picks up a dark, readable shade of its own
     icon color (pink/teal/yellow) instead of one flat gray -- ties the
     text to the card's accent while staying legible on the white card
     background (plain --teal/--yellow are too light for body text). */
  .gl-kr-card:has(.gl-pink) p{color:var(--pink-dark);}
  .gl-kr-card:has(.gl-teal) p{color:#0b4f6c;}
  .gl-kr-card:has(.gl-yellow) p{color:#8a6d15;}
  @media(max-width:900px){ .gl-kr-grid{grid-template-columns:1fr;} }

  /* ---------- CTA STATS BAND ---------- */
  .gl-cta-band{
    background:linear-gradient(120deg, #ffc9f6 0%, #fff7b2 100%);
    padding:70px clamp(20px,5vw,64px);
    width:100vw;margin:0 calc(-50vw + 50%);box-sizing:border-box;
  }
  .gl-cta-band-inner{
    max-width:1180px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  }
  .gl-cta-wordmark-row{
    display:flex;align-items:center;gap:10px;margin-bottom:10px;
  }
  .gl-cta-wordmark-row img{width:84px;height:84px;object-fit:contain;}
  .gl-cta-wordmark{
    font-family:'Fuggles',cursive;font-size:56px;color:var(--dark);line-height:1;
  }
  .gl-cta-band-left p{
    font-family:'Jost',sans-serif;font-weight:600;font-size:18px;
    color:#4a4022;line-height:1.6;margin:0 0 24px;max-width:360px;
  }
  .gl-cta-stats{display:flex;gap:50px;flex-wrap:wrap;}
  .gl-cta-stat{display:flex;flex-direction:column;gap:8px;}
  .gl-cta-stat-num{
    font-family:'Jost',sans-serif;font-weight:800;font-size:48px;color:var(--teal-accent);
    line-height:1;
  }
  .gl-cta-stat-label{
    font-family:'Jost',sans-serif;font-weight:700;font-size:13px;
    letter-spacing:.6px;text-transform:uppercase;color:var(--dark);
    max-width:150px;line-height:1.4;
  }
  @media(max-width:760px){
    .gl-cta-band-inner{flex-direction:column;align-items:flex-start;}
    .gl-cta-stats{gap:30px;}
  }

  /* ---------- POTLUCK VIDEO SPOTLIGHT ---------- */
  .gl-potluck{
    position:relative;height:640px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;text-align:center;
    width:100vw;margin:0 calc(-50vw + 50%);box-sizing:border-box;
  }
  .gl-potluck video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:saturate(1.05);
  }
  .gl-potluck::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 60% 70% at center, rgba(28,28,46,.6) 0%, rgba(28,28,46,.35) 45%, rgba(28,28,46,0) 75%);
  }
  .gl-potluck-inner{position:relative;z-index:2;color:#fff;padding:0 20px;}
  .gl-potluck-inner .gl-story-script{color:var(--yellow);}
  .gl-potluck-inner h2{
    font-family:'Julius Sans One',sans-serif;font-weight:400;
    font-size:clamp(26px,4vw,42px);margin:0 0 18px;text-shadow:0 2px 14px rgba(0,0,0,.4);
  }
  .gl-potluck-inner p{
    font-family:'Jost',sans-serif;font-weight:600;font-size:16px;
    max-width:480px;margin:0 auto 30px;line-height:1.7;
    text-shadow:0 2px 10px rgba(0,0,0,.4);
  }

  /* ---------- FOOTER ---------- */
  .gl-footer{
    background:#141422;color:#fff;
    padding:70px clamp(20px,5vw,64px) 30px;
    position:relative;overflow:hidden;
  }
  .gl-footer-rolling-pin{position:absolute;width:220px;opacity:.08;right:-30px;top:20px;transform:rotate(20deg);}
  .gl-footer-grid{
    max-width:1180px;margin:0 auto;
    display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px;
    padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1);
    position:relative;z-index:1;
  }
  .gl-footer-wordmark{font-family:'Fuggles',cursive;font-weight:400;font-size:40px;color:#fff;display:block;margin-bottom:16px;line-height:1;}
  .gl-footer-grid p{
    font-family:'Quicksand',sans-serif;font-size:14px;color:#a09cb5;line-height:1.7;
    max-width:300px;margin:0;
  }
  .gl-footer-col h4{
    font-family:'Jost',sans-serif;font-weight:800;font-size:12px;
    letter-spacing:1.4px;text-transform:uppercase;color:#7d7994;margin:0 0 18px;
  }
  .gl-footer-col a{
    display:block;font-family:'Quicksand',sans-serif;font-weight:600;font-size:14.5px;
    color:#fff;margin-bottom:12px;opacity:.9;
  }
  .gl-footer-col a:hover{opacity:1;text-decoration:underline;}
  .gl-footer-bottom{
    max-width:1180px;margin:0 auto;padding-top:26px;
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
    font-family:'Quicksand',sans-serif;font-size:12.5px;color:#6f6b87;
    position:relative;z-index:1;
  }
  .gl-footer-bottom a{color:inherit;text-decoration:underline;}
  .gl-footer-bottom a:hover{color:#fff;}

/* Shared with the signed-in Home tab's "What Guava does" pitch
   (html-partials/pane-home.html), which reuses these exact classes on
   purpose to stay in the same voice as the pre-signup pitch -- do not
   remove these even though the landing page itself no longer uses them. */
.landing-hero{display:flex;align-items:flex-start;gap:56px;flex-wrap:wrap;padding-top:20px;}
.landing-hero-copy{flex:1;min-width:320px;}
.landing-bullets{list-style:none;margin:0 0 32px;padding:0;font-family:'Jost',sans-serif;font-weight:700;font-size:16px;color:var(--dark);display:flex;flex-direction:column;gap:13px;}
.landing-bullets li{display:flex;align-items:center;gap:9px;}
.landing-bullets img{height:16px;width:auto;flex-shrink:0;}
.landing-hero-photo-wrap{position:relative;flex:1;min-width:320px;max-width:520px;margin:0;}
.landing-hero-photo-wrap .pane-doodle{position:absolute;z-index:2;pointer-events:none;}
.landing-hero-photo{border-radius:20px;overflow:hidden;box-shadow:0 22px 48px rgba(28,28,46,.2);border:10px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#b1f2f5 0%,#ffc9f6 50%,#fff6ae 100%) border-box;position:relative;z-index:1;box-sizing:border-box;}
.landing-hero-photo img{display:block;width:100%;height:440px;object-fit:cover;object-position:35% 40%;}
@media (max-width:640px){.landing-hero{flex-direction:column;}.landing-hero-photo img{height:260px;}}

/* Mobile companion mode (?mode=mobile): hides all normal app chrome
   and shows just #mobile-mode-root -- a streamlined shopping list +
   recipe lookup + photo share, for a fast one-handed home-screen app.
   Deliberately an allowlist-style hide (not "hide every body child")
   so modals like Share Photo / View Recipe, which are also direct
   children of body, keep working exactly as they do in the full app. */
body.mobile-mode .topbar,
body.mobile-mode .bookmark,
body.mobile-mode #pennant-logo,
body.mobile-mode #pennant-smiley,
body.mobile-mode #pennant-click,
body.mobile-mode .mini-brand,
body.mobile-mode .main,
body.mobile-mode .pane{display:none!important;}
/* .main wraps every .pane -- its own min-height:100vh still rendered a
   full blank viewport below the companion view even with every .pane
   inside it hidden, showing as a beige-to-white seam at the bottom of
   short panes. Hiding .main itself (not just its children) removes it. */
#mobile-mode-root{display:none;}
body.mobile-mode #mobile-mode-root{position:relative;display:block;max-width:520px;margin:0 auto;min-height:100vh;background:#fffbf7;font-family:'Quicksand',-apple-system,BlinkMacSystemFont,sans-serif;}
/* Same yellow-to-pink gradient grid used behind most panes' content
   (.pane-lower-band::before, css/recipe-cards-and-search.css) -- a
   ::before layer instead of a plain background so the mask-cut grid
   lines can sit at the shared --pattern-opacity without washing out
   the cream ground underneath them. */
body.mobile-mode #mobile-mode-root::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,var(--yellow) 0%,var(--pink) 100%);
  opacity:var(--pattern-opacity);
  -webkit-mask-image:linear-gradient(#000 2px,transparent 2px),linear-gradient(90deg,#000 2px,transparent 2px);
  -webkit-mask-size:40px 40px;
  -webkit-mask-repeat:repeat;
  mask-image:linear-gradient(#000 2px,transparent 2px),linear-gradient(90deg,#000 2px,transparent 2px);
  mask-size:40px 40px;
  mask-repeat:repeat;
}
.mm-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,var(--pink),#fff6ae);padding:14px 18px;}
.mm-logo{display:flex;align-items:center;gap:8px;}
.mm-logo-icon{height:30px;width:30px;object-fit:contain;display:block;}
.mm-logo-word{font-family:'Fuggles',cursive;font-weight:400;font-size:28px;color:var(--dark);line-height:1;}
.mm-signout{background:none;border:none;color:rgba(28,28,46,.55);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;cursor:pointer;font-family:'Jost',sans-serif;}
/* position:relative;z-index:1 -- same requirement as .mm-pane above:
   a plain in-flow box otherwise paints *behind* the root's z-index:0
   grid pseudo-element instead of in front of it. */
.mm-install-hint{position:relative;z-index:1;display:flex;flex-direction:column;background:var(--pink);color:var(--dark);font-size:12.5px;font-weight:600;padding:10px 16px;line-height:1.4;}
.mm-install-hint-row{display:flex;align-items:center;gap:10px;}
.mm-install-hint-row span{flex:1;}
.mm-install-hint button{background:none;border:none;font-size:16px;color:var(--dark);opacity:.5;cursor:pointer;flex-shrink:0;line-height:1;font-weight:500;}
.mm-install-hint-info{margin-top:8px;padding-top:8px;border-top:1px solid rgba(28,28,46,.15);font-weight:500;}
.mm-tabs{display:flex;gap:4px;background:transparent;margin:0;padding:6px 12px;position:sticky;top:54px;z-index:9;box-sizing:border-box;}
.mm-tab{flex:1;padding:13px 6px;border-radius:10px;font-family:'Jost',sans-serif;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:rgba(28,28,46,.35);background:transparent;border:none;cursor:pointer;transition:all .18s;}
.mm-tab:hover:not(.on){color:var(--pink-dark);}
.mm-tab.on{color:var(--dark);position:relative;}
.mm-tab.on::after{content:'';position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--dark);}
/* position+z-index:1 -- a plain in-flow box otherwise paints *behind* the
   root's z-index:0 grid pseudo-element above, not in front of it (same
   requirement as .pane-lower-band>*, css/recipe-cards-and-search.css, for
   the desktop version of this pattern). .mm-header and .mm-tabs don't
   need this: their own explicit z-index (10/9, for their sticky bars)
   already paints them above the grid. */
.mm-pane{display:none;padding:18px 18px 60px;position:relative;z-index:1;}
.mm-pane.on{display:block;}
.mm-section-label{font-family:'Albert Sans',sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:3px;color:var(--pink-dark);margin-bottom:12px;}
.mm-add-row{display:flex;gap:8px;margin-bottom:18px;}
.mm-add-row input{flex:1;padding:14px 16px;border-radius:var(--rp);border:1.5px solid rgba(0,0,0,.1);font-size:16px;font-family:inherit;}
.mm-add-row button{padding:14px 22px;border-radius:var(--rp);border:none;background:var(--dark);color:#fff;font-weight:700;font-size:17px;cursor:pointer;font-family:'Jost',sans-serif;}
.mm-item{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r);padding:14px 16px;margin-bottom:8px;box-shadow:var(--sh-sm);}
.mm-item-check{width:24px;height:24px;flex-shrink:0;border-radius:0;border:2px solid rgba(28,28,46,.25);background:#fff;cursor:pointer;padding:0;}
.mm-item-check:active{background:rgba(255,201,246,.35);border-color:var(--pink);}
.mm-item-body{flex:1;min-width:0;display:flex;align-items:center;gap:8px;cursor:pointer;}
.mm-item-name{flex:1;font-size:15px;color:var(--dark);}
.mm-item-qty{font-size:11px;font-weight:800;color:#a3117a;background:rgba(255,201,246,.35);border-radius:6px;padding:3px 8px;flex-shrink:0;}
.mm-empty{text-align:center;color:var(--muted);font-size:14px;padding:40px 20px;}
.mm-repo-tabs{display:flex;gap:4px;background:transparent;margin-bottom:14px;}
.mm-repo-tab{flex:1;padding:13px 6px;border-radius:10px;font-family:'Jost',sans-serif;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:rgba(28,28,46,.35);background:transparent;border:none;cursor:pointer;transition:all .18s;}
.mm-repo-tab:hover:not(.on){color:var(--pink-dark);}
.mm-repo-tab.on{color:var(--dark);background:transparent;box-shadow:none;position:relative;}
.mm-repo-tab.on::after{content:'';position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--dark);}
/* Reuses the desktop shop-item edit popover as-is (openShopItemPop /
   saveShopItemDetail / clearShopItemDetail) instead of building a
   parallel mobile edit UI -- just re-docked as a bottom sheet since a
   cursor-relative popover doesn't make sense with touch. */
body.mobile-mode #shop-item-pop{position:fixed!important;left:16px!important;right:16px!important;top:auto!important;bottom:16px!important;width:auto!important;min-width:0!important;}
.mm-search{width:100%;padding:14px 16px;border-radius:0;border:1.5px solid rgba(0,0,0,.1);font-size:16px;font-family:inherit;margin-bottom:14px;box-sizing:border-box;}
.mm-recipe-card{background:#fff;border-radius:0;padding:14px 16px;margin-bottom:8px;box-shadow:0 0 20px rgba(255,255,255,.9);cursor:pointer;}
.mm-recipe-name{font-family:'Julius Sans One',sans-serif;font-size:15px;font-weight:400;color:var(--dark);}
.mm-recipe-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.mm-share-hero{text-align:center;padding:6px 10px 22px;}
.mm-share-btn{background:var(--pink);color:var(--dark);border:none;border-radius:var(--rp);padding:14px 28px;font:300 12.5px 'Quicksand',sans-serif;cursor:pointer;box-shadow:0 3px 12px rgba(200,80,200,.35);}
/* .btn-p/.btn-g are cream (var(--bg)) everywhere else in the app, but that
   reads as barely-there on Mobile Companion's own cream-grid ground --
   scoped to mobile mode only so the desktop buttons (many of which sit on
   colored panes where cream is the point) are untouched. */
body.mobile-mode .btn-p,body.mobile-mode .btn-g{background:#fff;}
body.mobile-mode .btn-p:hover,body.mobile-mode .btn-g:hover{background:#fff;}
#mm-feed-posts-list{display:flex;flex-direction:column;gap:14px;}
#mm-feed-posts-list .feed-post{max-width:100%;width:100%;margin:0;box-sizing:border-box;}
.auth-box{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#b1f2f5 0%,#ffc9f6 50%,#fff6ae 100%) border-box;border:10px solid transparent;border-radius:28px;padding:40px 44px;max-width:440px;width:100%;box-shadow:0 20px 60px rgba(28,28,46,.18);}
.auth-logo{text-align:center;margin-bottom:24px;}
.auth-logo-text{font-family:'Fuggles',cursive;font-weight:400;font-size:44px;color:var(--dark);line-height:1;}
.auth-title{font-family:'Julius Sans One',sans-serif;font-size:30px;font-weight:400;color:var(--dark);margin-bottom:4px;}
.auth-sub{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:24px;line-height:1.5;}
/* Body's default Quicksand weight is 300 — too light for a professional
   read. Most muted/description text in app.js is a plain inline
   `style="...color:var(--muted)..."` snippet with no weight of its own, so
   fill that gap here instead of editing dozens of near-identical strings;
   inline styles that already set their own weight are unaffected. */
[style*="color:var(--muted)"]{font-weight:500;}
.auth-field{margin-bottom:14px;}
.auth-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--dark);margin-bottom:5px;}
/* Border/focus colors match the app's other inputs (e.g. .conv-inp,
   css/tab-headers-and-recipes-browse.css) -- was an off-palette lavender
   (#f0e8f8) not used as a token anywhere else in the app. */
.auth-field input,.auth-inp{width:100%;padding:11px 15px;border:1.5px solid rgba(0,0,0,.1);border-radius:12px;font-size:15px;font-family:inherit;font-weight:500;color:var(--dark);outline:none;box-sizing:border-box;transition:border-color .15s;}
.auth-field input:focus,.auth-inp:focus{border-color:var(--pink);}
.auth-tos-label{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:500;color:var(--dark);line-height:1.5;cursor:pointer;}
.auth-tos-label input{margin-top:3px;flex-shrink:0;width:16px;height:16px;cursor:pointer;}
.auth-tos-label a{color:var(--pink-dark);font-weight:700;text-decoration:underline;}
.auth-btn-main{width:100%;padding:14px;background:linear-gradient(135deg,var(--pink),var(--pink2));border:none;border-radius:0;font-family:'Jost',sans-serif;font-size:20px;font-weight:700;color:var(--dark);cursor:pointer;margin-top:6px;transition:opacity .15s;}
/* Shared font declaration for modal titles/ghost-buttons that duplicated
   this inline across several app.js modals — only the font, not the rest
   of each site's own sizing/color/border, which genuinely varies. */
.modal-title-fredoka{font-family:'Julius Sans One',sans-serif;font-weight:400;}
.modal-btn-ghost-fredoka{font-family:'Jost',sans-serif;font-weight:500;}
.auth-oauth-row{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.auth-btn-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;height:44px;box-sizing:border-box;background:var(--bg);border:none;border-radius:0;font-family:'Jost',sans-serif;font-size:17px;font-weight:500;color:var(--dark);cursor:pointer;transition:background .15s;}
.auth-btn-oauth:hover{background:rgba(0,0,0,.03);}
.auth-oauth-divider{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);}
.auth-oauth-divider::before,.auth-oauth-divider::after{content:'';flex:1;height:1px;background:rgba(28,28,46,.12);}
.auth-btn-main:hover{opacity:.88;}
.auth-btn-main:disabled{opacity:.5;cursor:default;}
.auth-toggle{text-align:center;margin-top:16px;font-size:13px;color:var(--muted);}
.auth-toggle a{color:var(--pink-dark);cursor:pointer;font-weight:600;}
.auth-err{background:#fff0f8;border:1.5px solid var(--pink);border-radius:10px;padding:9px 13px;font-size:13px;color:var(--pink-dark);margin-bottom:14px;display:none;}
.auth-screen{display:none;}
.auth-screen.on{display:block;}
.hh-option{border:2.5px solid rgba(0,0,0,.1);padding:18px 22px;cursor:pointer;transition:all .15s;margin-bottom:10px;}
.hh-option:hover{border-color:var(--pink);}
.hh-option.sel{border-color:var(--pink);}
.hh-option-title{font-family:'Julius Sans One',sans-serif;font-size:18px;font-weight:400;color:var(--dark);margin-bottom:2px;}
.hh-option-desc{font-size:12px;color:var(--muted);}
.hh-sub-row{margin-top:10px;}
.hh-code-row{display:flex;gap:8px;margin-top:10px;}
.hh-code-row input{flex:1;padding:11px 15px;border:1.5px solid rgba(0,0,0,.1);border-radius:12px;font-size:16px;font-family:monospace;letter-spacing:3px;text-transform:uppercase;outline:none;}
.hh-code-row input:focus{border-color:var(--teal);}
/* user pill */
.user-pill{display:flex;align-items:center;gap:6px;cursor:pointer;position:relative;margin-top:8px;pointer-events:all;}
.user-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#1c1c2e;flex-shrink:0;object-fit:cover;aspect-ratio:1;}
.user-name{font-size:13px;font-weight:700;color:#1c1c2e;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:0;box-shadow:0 8px 32px rgba(120,50,120,.16);padding:6px;padding-top:12px;min-width:175px;display:none;z-index:300;}
.user-menu::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px;}
.user-pill:hover .user-menu,.user-pill:focus-within .user-menu{display:block;}
.umi{padding:9px 13px;border-radius:0;font-size:13px;font-weight:600;cursor:pointer;color:#1c1c2e;white-space:nowrap;}
.umi:hover{background:#fff0fd;}
.umi.danger{color:#e0305a;}
.umi.danger:hover{background:#fff0f4;}
/* invite modal */
.invite-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:8500;display:flex;align-items:center;justify-content:center;}
.invite-modal{background:#fff;border-radius:24px;padding:36px 40px;max-width:520px;width:94%;text-align:center;box-shadow:0 20px 60px rgba(120,50,120,.2);max-height:90vh;overflow-y:auto;}
.invite-code{font-family:monospace;font-size:30px;letter-spacing:6px;background:#f5f0ff;border-radius:12px;padding:14px 20px;font-weight:800;margin:16px 0;color:#1c1c2e;}
.ai-footnote{font-size:11px;color:rgba(28,28,46,.45);font-weight:600;padding:10px 0 4px;line-height:1.5;display:none;}
.ai-footnote.on{display:block;}
.plan-seg{flex:1;padding:9px 20px;height:44px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:0;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--dark);font-family:'Jost',sans-serif;text-align:center;transition:all .16s;opacity:.6;}
.plan-seg.on{background:var(--bg);color:#1c1c2e;font-size:15px;opacity:1;}
.rec-subpane{display:none;}
.rec-subpane.on{display:block;}
/* MEASUREMENTS */
.meas-section{margin-bottom:20px;border-radius:12px;padding:18px 20px 14px;}
.meas-section.ms-pink{background:#fff;border:2px solid #ffc9f6;border-left-width:8px;}
.meas-section.ms-teal{background:#fff;border:2px solid #b1f2f5;border-left-width:8px;}
.meas-section.ms-yellow{background:#fff;border:2px solid #f5e62a;border-left-width:8px;}
.meas-title{font-family:'Julius Sans One',sans-serif;font-size:17px;font-weight:400;color:var(--dark);margin-bottom:12px;}
.meas-table{width:100%;border-collapse:collapse;margin-bottom:4px;}
.meas-table th{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);text-align:center;padding:6px 0;border-bottom:2px solid rgba(0,0,0,.07);}
.meas-table td{font-size:13px;font-weight:600;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.05);color:var(--dark);text-align:center;}
.meas-table tr:last-child td{border-bottom:none;}
.meas-table td.meas-eq{color:var(--muted);font-weight:400;width:28px;text-align:center;}
.meas-table td.meas-r{color:var(--dark);}
.meas-table td.note{font-size:11px;color:var(--muted);font-weight:500;}
.conv-tab{font:600 12.5px 'Jost',sans-serif;padding:10px 18px;height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:0;border:2px solid rgba(200,80,200,.2);background:transparent;cursor:pointer;color:#1c1c2e;transition:all .15s;}
/* MEASUREMENTS REFERENCE CHARTS */
.mref-card{background:#fff;overflow-x:auto;overflow-y:hidden;margin-bottom:28px;}
.mref-tbl{width:100%;border-collapse:collapse;}
.mref-icon-tr td{padding:14px 8px 8px;background:#fff;border:none;text-align:center;}
.mref-yhdr th{color:#4a3600;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;padding:15px 8px;text-align:center;}
.mref-thdr th{color:#124240;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;padding:15px 8px;text-align:center;}
.mref-tbl tbody tr td{font-size:13px;font-weight:600;color:var(--dark);border-bottom:1px solid rgba(0,0,0,.06);padding:13px 8px;text-align:center;}
.mref-tbl tbody tr:last-child td{border-bottom:none;}
.mref-temp-row-f td,.mref-temp-row-c td{font-size:13px;font-weight:700;padding:15px 8px;text-align:center;border:none;}
.mref-temp-label{font-size:10px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;padding:15px 20px!important;}
.mref-temp-row-f .mref-temp-label{color:#124240;}
.mref-temp-row-c .mref-temp-label{color:#124240;}
.mref-temp-row-f td:not(.mref-temp-label){background:#fafaf8;}
.mref-temp-row-c td:not(.mref-temp-label){background:#f2fffe;}
.conv-inp{font-family:'Quicksand',sans-serif;font-size:22px;font-weight:500;padding:10px 14px;color:var(--dark);outline:none;width:100%;box-sizing:border-box;}
.conv-inp:focus{border-color:var(--pink);}
.conv-sel{font-family:'Quicksand',sans-serif;font-size:13px;font-weight:500;padding:6px 10px;color:var(--dark);outline:none;cursor:pointer;width:100%;margin-bottom:6px;}
/* COOKBOOK */
.ck-card{padding:14px 16px;cursor:pointer;transition:all .15s;position:relative;}
.ck-card.selected{border-color:var(--pink);}
.ck-sel-mark{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--pink);color:#fff;font-size:11px;display:none;align-items:center;justify-content:center;}
.ck-card.selected .ck-sel-mark{display:flex;}
.ck-name{font-size:13px;font-weight:700;margin-bottom:3px;line-height:1.3;}
/* FEED */
/* Same width, aspect-ratio, and square corners across every post, text or
   photo -- these used to be two different sizes (520px vs 1040px), centered,
   with rounded corners. One fixed box now, left-aligned (margin:0, not
   auto), for every post; overflow-y:auto so a long caption/comment thread
   scrolls inside the fixed height instead of forcing the box to grow. */
.feed-post{position:relative;padding:19px;margin:0 auto 14px;display:flex;gap:19px;align-items:flex-start;width:860px;max-width:100%;aspect-ratio:16/10;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;}
/* Text/question/week posts have no photo to fill a tall fixed box, so
   height simply follows their content instead of the photo card's fixed
   16/10 box -- width stays the same as every other card (base rule
   above), only the height differs. */
.feed-post:not(.fp-photo-post){aspect-ratio:auto;height:auto;overflow-y:visible;}
.fp-side{width:100px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:rgba(0,0,0,.035);border-radius:0;padding:16px 12px;}
/* Same avatar/name/time sizes as .fp-photo-avatar/-name/-time below, so
   a text post's header reads identically to a photo post's. */
.fp-avatar{width:65px;height:65px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;flex-shrink:0;object-fit:cover;aspect-ratio:1;}
.fp-name{font-size:22px;font-weight:700;color:var(--dark);line-height:1.3;word-break:break-word;}
.fp-time{font-size:18px;color:var(--muted);}
.fp-content{flex:1;min-width:0;}
.fp-content-hdr{margin-bottom:10px;display:flex;align-items:center;justify-content:flex-end;gap:4px;}
.fp-caption{font-size:15px;color:var(--muted);margin-top:12px;}
.fp-tagged{font-size:12px;font-weight:700;color:#a3117a;}
.fp-delete-btn{background:none;border:none;cursor:pointer;opacity:.85;padding:2px 6px;margin-left:8px;display:inline-flex;align-items:center;color:#1c1c2e;}
.fp-delete-btn:hover{opacity:1;}
.fp-delete-btn svg{width:15px;height:15px;}
.fp-photo{cursor:zoom-in;}
.img-lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(20,20,30,.92);z-index:9000;align-items:center;justify-content:center;padding:30px;box-sizing:border-box;}
.img-lightbox-overlay.on{display:flex;}
.img-lightbox-content{display:flex;max-width:960px;width:100%;max-height:85vh;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.img-lightbox-content img{flex:1;min-width:0;max-height:85vh;object-fit:contain;display:block;background:#fff;}
.img-lightbox-panel{width:320px;flex-shrink:0;max-height:85vh;overflow-y:auto;padding:20px;box-sizing:border-box;}
.img-lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:0;background:rgba(255,255,255,.15);border:none;color:#fff;font-family:'Jost',sans-serif;font-size:26px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;}
.img-lightbox-arrow:hover{background:rgba(255,255,255,.28);}
.img-lightbox-arrow[disabled]{opacity:.25;cursor:default;}
.img-lightbox-arrow-l{left:20px;}
.img-lightbox-arrow-r{right:20px;}
.img-lightbox-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:0;background:rgba(255,255,255,.15);border:none;color:#fff;font-family:'Jost',sans-serif;font-size:26px;font-weight:500;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;}
.img-lightbox-close:hover{background:rgba(255,255,255,.28);}
@media (max-width:640px){
.img-lightbox-overlay{padding:0;}
.img-lightbox-content{flex-direction:column;max-width:100%;width:100%;height:100%;max-height:100vh;max-height:100dvh;border-radius:0;overflow-y:auto;overscroll-behavior:contain;}
.img-lightbox-content img{flex:0 0 auto;width:100%;max-height:55vh;max-height:55dvh;object-fit:contain;}
.img-lightbox-panel{width:100%;flex:1 1 auto;max-height:none;overscroll-behavior:contain;}
.img-lightbox-arrow-l{left:8px;}
.img-lightbox-arrow-r{right:8px;}
.img-lightbox-close{top:12px;right:12px;background:rgba(0,0,0,.35);}
}
.fp-engage-row{display:flex;align-items:center;gap:14px;margin-top:12px;}
.fp-like-btn{background:none;border:none;cursor:pointer;font-size:13px;font-weight:500;color:#1c1c2e;padding:0;display:flex;align-items:center;gap:5px;font-family:'Jost',sans-serif;}
.fp-like-btn.on{color:#1c1c2e;}
.fp-like-img{width:18px;height:18px;object-fit:contain;vertical-align:middle;}
.fp-comments{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.fp-comment{font-size:12px;color:var(--dark);line-height:1.5;}
.fp-comment b{font-weight:700;}
.fp-comment-add{display:flex;gap:8px;margin-top:6px;}
.fp-comment-add input{flex:1;max-width:300px;border:1.5px solid rgba(0,0,0,.08);border-radius:var(--rp);padding:9px 15px;font-size:15px;font-family:inherit;}
.fp-comment-add button{background:none;border:none;cursor:pointer;font-size:12px;font-weight:500;color:#1c1c2e;font-family:'Jost',sans-serif;}
.fp-recipe{background:rgba(200,80,200,.07);border-radius:10px;padding:10px 12px;margin-top:10px;}
.fp-recipe-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#1c1c2e;background:rgba(255,201,246,.35);border:none;border-radius:0;padding:7px 14px;margin-top:10px;cursor:pointer;font-family:'Jost',sans-serif;}
.fp-recipe-link:hover{background:rgba(255,201,246,.55);}
.fp-recipe-link-static{cursor:default;color:var(--muted);background:rgba(0,0,0,.04);}
.fp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px;}
.fp-day{background:rgba(0,0,0,.04);border-radius:8px;padding:5px 3px;text-align:center;}
.fp-dayname{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);}
.fp-meals{font-size:9px;font-weight:600;color:var(--text);margin-top:3px;line-height:1.4;}
.feed-empty{text-align:center;padding:52px 20px;color:var(--muted);}
@media (max-width:520px){.feed-post{flex-direction:column;align-items:stretch;aspect-ratio:auto;height:auto;}.fp-side{width:auto;flex-direction:row;text-align:left;}.feed-post.fp-photo-post{flex-direction:column!important;gap:0!important;}.fp-photo-media{width:100%!important;height:auto!important;aspect-ratio:4/5;transform:none;}}
.potluck-new{background:#fff;border:1.5px solid rgba(0,0,0,.08);border-radius:16px;padding:26px 28px;margin:0 auto 28px;max-width:900px;box-shadow:0 10px 30px rgba(28,28,46,.12);display:flex;flex-direction:column;}
.potluck-new input,.potluck-new textarea{border:1.5px solid rgba(0,0,0,.1);border-radius:8px;padding:8px 12px;font-size:13px;font-family:inherit;resize:vertical;width:100%;background:#fff;color:var(--dark);}
.pl-form-heading{font-family:'Fuggles',cursive;font-size:clamp(44px,6vw,84px);line-height:1;margin-bottom:22px;text-align:center;animation:pl-neon-flash 1.2s ease-in-out infinite;}
@keyframes pl-neon-flash{
  0%,100%{color:#ff2fb0;text-shadow:0 0 6px #fff,0 0 16px #ff6ec7,0 0 30px #ff2fb0,0 0 56px #ff2fb0;}
  50%{color:#ff7fd4;text-shadow:0 0 10px #fff,0 0 26px #ff9fe0,0 0 48px #ff2fb0,0 0 84px #ff2fb0;}
}
.pl-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.pl-col{display:flex;flex-direction:column;gap:20px;}
.pl-col:has(textarea){height:100%;}
.pl-field:has(textarea){flex:1;}
.pl-field{display:flex;flex-direction:column;gap:6px;}
@media(max-width:640px){ .pl-form-grid{grid-template-columns:1fr;} }
.pl-field-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--dark);}
.pl-field-optional{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);}
.pl-date-field-lbl{font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:2px;}
.potluck-card{padding:16px 18px;margin:0 auto 20px;max-width:900px;}
.potluck-card-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;}
.potluck-name{font-weight:700;font-size:18px;color:var(--dark);}
.potluck-date{font-size:11px;color:var(--muted);font-weight:500;margin-top:2px;}
.potluck-notes{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.5;}
.potluck-members{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.potluck-member{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--dark);background:rgba(0,0,0,.03);border-radius:20px;padding:4px 10px;}
.potluck-dishes{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.potluck-dish{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;padding:5px 10px;background:rgba(0,0,0,.03);border-radius:8px;}
.potluck-add-dish{display:flex;gap:6px;flex-wrap:wrap;}
.potluck-add-dish input{flex:1;min-width:120px;border:1.5px solid rgba(0,0,0,.1);border-radius:8px;padding:6px 10px;font-size:12px;font-family:inherit;}
.potluck-add-dish select{border:1.5px solid rgba(0,0,0,.1);border-radius:8px;padding:6px 10px;font-size:12px;font-family:inherit;max-width:220px;}
/* Guest bar on public routes (/gifts, /products). Sticky, not fixed, so it
   never covers the content it sits above. */
#public-signin-bar{
  position:sticky;top:0;z-index:300;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:#1c1c2e;color:#fff;
  font-family:'Quicksand',sans-serif;font-size:13px;font-weight:600;
  padding:10px 18px;text-align:center;
}
#public-signin-bar span{max-width:640px;}