/* ── Potluck: gathering-creation card (v3) ── the pink/yellow gradient
   card + two-column form now lives inline within .pane-lower-band's
   normal padded/inset area (unlike the earlier full-bleed black bar),
   so no negative-margin overrides are needed here. Card styling itself
   is in auth-and-landing.css (.potluck-new, .pl-form-*, .pl-field-*). */

/* ── Potluck: video hero (v3) ── prefixed plh- (not hero-/hb-) because
   layout-shell.css already owns .hero-doodle for an unrelated emoji-style
   doodle field. Full-bleed regardless of .p2p-main's own var(--gutter)
   padding, same width:100vw/negative-margin breakout as .gl-hero
   (auth-and-landing.css) -- no border-radius since it now runs edge to edge. */
.plh-hero{position:relative;min-height:70vh;display:flex;align-items:center;overflow:hidden;padding:80px clamp(24px,6vw,80px) 60px;margin:0 calc(-50vw + 50%) 20px;width:100vw;box-sizing:border-box;}
.plh-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.plh-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 42% 48% at 14% 52%, rgba(20,10,25,.68) 0%, rgba(20,10,25,.38) 50%, rgba(20,10,25,0) 78%);}
.plh-hero-inner{position:relative;z-index:2;max-width:600px;color:#fff;}
.plh-hb-eyebrow{font-family:'Jost',sans-serif;font-weight:800;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--yellow);margin-bottom:8px;}
.plh-hb-script{font-family:'Fuggles',cursive;font-weight:400;font-size:clamp(56px,8vw,100px);line-height:.86;margin:0 0 20px;text-shadow:0 4px 24px rgba(0,0,0,.35);}
.plh-hb-desc{font-family:'Julius Sans One',sans-serif;font-weight:400;font-size:clamp(15px,1.6vw,18px);letter-spacing:.2px;line-height:1.75;max-width:440px;margin:0 0 28px;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.plh-stepper{display:flex;align-items:center;gap:10px;font-family:'Jost',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:30px;flex-wrap:wrap;}
.plh-stepper .plh-st.on{color:#fff;border-bottom:2px solid #fff;padding-bottom:3px;}
.plh-stepper .plh-sep{opacity:.5;}
.plh-btn-pill{display:inline-block;font-family:'Jost',sans-serif;font-weight:800;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink-dark,#a3117a);background:var(--pink);padding:16px 38px;border-radius:100px;box-shadow:0 10px 26px rgba(163,17,122,.3);transition:transform .15s ease;}
.plh-btn-pill:hover{transform:translateY(-2px);}

/* ── Potluck: date poll ── */
.pl-date-tbd{color:var(--pink-dark,#a3117a);font-weight:700;}
.pl-poll{background:rgba(255,246,174,.55);border:1.5px solid rgba(28,28,46,.12);border-radius:12px;padding:10px 12px;margin-bottom:12px;display:flex;flex-direction:column;gap:6px;}
.pl-poll-hdr{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#1c1c2e;margin-bottom:2px;}
.pl-poll-reopen{background:none;border:none;padding:0;font-family:'Jost',sans-serif;font-weight:500;font-size:10px;text-transform:none;letter-spacing:0;color:#1c1c2e;text-decoration:underline;cursor:pointer;}
.pl-poll-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border-radius:9px;padding:6px 10px;}
.pl-poll-row.chosen{background:#eafaf1;box-shadow:inset 0 0 0 1.5px #22c55e;}
.pl-poll-check{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:170px;}
.pl-poll-check input{width:16px;height:16px;accent-color:var(--pink,#e0359f);cursor:pointer;}
.pl-poll-date{font-size:13px;font-weight:700;color:#1c1c2e;}
.pl-poll-tally{flex:1;min-width:120px;display:flex;flex-direction:column;}
.pl-poll-count{font-size:11px;font-weight:800;color:#1c1c2e;}
.pl-poll-names{font-size:10.5px;color:var(--muted);line-height:1.35;}
.pl-poll-chosen-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#15803d;}

/* ── Potluck: dish slots ── */
.pl-slot-group{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.pl-slot-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:3px;border-bottom:1.5px dashed rgba(28,28,46,.16);}
.pl-slot-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#1c1c2e;}
.pl-slot-meter{font-size:10.5px;font-weight:800;color:var(--muted);white-space:nowrap;}
.pl-slot-meter.full{color:#15803d;}
.pl-slot-open{font-size:12px;color:var(--muted);font-style:italic;padding:5px 10px;border:1.5px dashed rgba(28,28,46,.18);border-radius:8px;}

/* ── Potluck: settings modal + inline add links ── */
.pl-add-link{background:none;border:none;padding:2px 0;font-family:'Jost',sans-serif;font-size:11.5px;font-weight:500;color:#1c1c2e;text-decoration:underline;cursor:pointer;align-self:flex-start;}
.pl-set-section{margin:18px 0 6px;}
.pl-set-hdr{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#1c1c2e;}
.pl-set-note{font-size:11.5px;color:var(--muted);line-height:1.45;margin:3px 0 8px;}
.pl-set-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.pl-set-row input[type="date"],.pl-set-row input[type="text"]{flex:1;min-width:0;border:1.5px solid rgba(0,0,0,.1);border-radius:8px;padding:6px 10px;font-size:12.5px;font-family:inherit;}
.pl-set-slot-label{flex:1;font-size:13px;font-weight:700;color:#1c1c2e;}
.pl-set-slot-count{width:64px;border:1.5px solid rgba(0,0,0,.1);border-radius:8px;padding:6px 8px;font-size:12.5px;font-family:inherit;text-align:center;}

.potluck-rsvp-row{display:flex;align-items:center;gap:0;margin-bottom:10px;}
.potluck-rsvp-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-right:8px;}
/* Yes/Maybe/Can't make it used to be separate gapped pills -- fused into
   one continuous bar. */
.potluck-rsvp-btn+.potluck-rsvp-btn{border-left:none;}
.potluck-rsvp-btn{border:1.5px solid rgba(0,0,0,.12);background:var(--bg);border-radius:0;padding:4px 12px;height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:15px;font-weight:700;cursor:pointer;color:#1c1c2e;}
.potluck-rsvp-btn.on{background:#1c1c2e;border-color:#1c1c2e;color:#fff;}
.potluck-dish-recipe-link{font-size:11px;color:var(--pink);font-weight:700;cursor:pointer;margin-left:6px;}
#potluck-reminder-banner .potluck-remind-box{background:linear-gradient(120deg,#ffc9f6,#fff6ae);padding:14px 20px;font-size:13px;color:#1c1c2e;position:sticky;top:0;z-index:500;box-shadow:0 4px 14px rgba(28,28,46,.12);}
#potluck-reminder-banner .potluck-remind-box strong{font-weight:800;}
.potluck-remind-picks{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.potluck-gift-pick{background:rgba(255,255,255,.65);border-radius:0;padding:5px 10px;font-size:12px;font-weight:700;color:#1c1c2e;text-decoration:none;}
.potluck-remind-actions{display:flex;gap:8px;margin-top:10px;}
.friend-card{background:#fff;border-radius:0;padding:12px 14px;box-shadow:0 0 20px rgba(255,255,255,.9);display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.friend-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0;object-fit:cover;aspect-ratio:1;}
.tastemaker-card{background:#fff;border-radius:0;padding:14px 16px;box-shadow:0 0 20px rgba(255,255,255,.9);display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.tastemaker-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex-shrink:0;object-fit:cover;aspect-ratio:1;}
.tastemaker-name{font-size:14px;font-weight:800;color:var(--dark);}
.tastemaker-bio{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5;}
/* Enlarged to a real spotlight card -- roughly half the page, photo
   column + a much bigger info column, instead of a small logo-and-blurb
   strip. */
.featured-tastemaker-card{background:#fff;border:1.5px solid rgba(200,80,200,.15);border-radius:0;padding:0;margin-bottom:28px;position:relative;overflow:hidden;box-shadow:0 0 34px rgba(255,255,255,.9);}
.featured-tastemaker-badge{position:absolute;top:20px;left:20px;z-index:2;font:700 12px 'Quicksand',sans-serif;text-transform:uppercase;letter-spacing:.5px;background:var(--pink);color:var(--dark);padding:7px 16px;border-radius:100px;}
.featured-tastemaker-body{display:grid;grid-template-columns:minmax(220px,42%) 1fr;align-items:stretch;min-height:420px;}
@media(max-width:720px){.featured-tastemaker-body{grid-template-columns:1fr;min-height:0;}}
.featured-tastemaker-logo{width:100%;height:100%;min-height:260px;object-fit:cover;object-position:top center;background:#fdf9f3;}
.featured-tastemaker-info{padding:32px 34px;display:flex;flex-direction:column;justify-content:center;gap:14px;}
.featured-tastemaker-name{font-family:'Julius Sans One',sans-serif;font-size:30px;font-weight:400;color:var(--dark);}
.featured-tastemaker-bio{font-size:16px;color:var(--muted);line-height:1.65;}
.featured-tastemaker-tip{font-size:15px;line-height:1.6;background:rgba(255,246,174,.5);border-radius:14px;padding:14px 16px;}
.featured-tastemaker-tip a{color:var(--dark);font-weight:600;text-decoration:underline;text-decoration-color:var(--pink);}
.featured-tastemaker-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.search-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0;object-fit:cover;aspect-ratio:1;}
/* DESIGN MODE */
.design-mode [data-design-id]{outline:2px dashed rgba(200,80,200,.45);border-radius:4px;cursor:grab;user-select:none;position:relative;z-index:10;}
.design-mode [data-design-id]:hover{outline-color:#c466c4;outline-width:2px;}
.design-mode [data-design-id].dm-dragging{cursor:grabbing;outline-color:#c466c4;opacity:.9;}
.design-mode [data-design-id]::before{content:'⠿ drag';position:absolute;top:-22px;left:0;font-size:10px;font-weight:800;letter-spacing:.5px;color:#c466c4;background:#fff;border-radius:4px 4px 0 0;padding:2px 6px;pointer-events:none;text-transform:uppercase;opacity:0;transition:opacity .1s;}
.design-mode [data-design-id]:hover::before{opacity:1;}
#design-mode-btn.dm-active{background:#c466c4;color:#fff;}

/* ============================================================
   LAYOUT-DEV: Concept 4 (editorial/magazine) design pass
   Phase 1 — nav (done above) + shared tab hero bands.
   Pure CSS re-skin: no markup/JS changed, so every dynamic
   heading update (renderPaneHdrBands, showScullery, showFeedSub)
   keeps working exactly as before.
   ============================================================ */


/* Header band base — now transparent; the solid color + pattern that used
   to live only in this band has moved down onto .pane itself (Phase 8)
   so it runs the full height of the tab instead of stopping at the band. */
/* Dark-background panes/bands need light description text — Cookfolio's
   body is white now, so only its masthead band still needs this. */
#pane-feed .concept-txt{color:rgba(255,255,255,.8)!important;}

/* ============================================================
   Phase 2 — buttons, chips/badges, shared helpers.
   The existing .btn/.chip system already uses the concept's exact
   palette and pill shape (border-radius:var(--rp)), so this phase
   is a shadow-language pass, not a shape/color rebuild: swap each
   variant's colored, saturated shadow for the concept's neutral
   dark-tinted one (matching .pill's 0 10px 24px rgba(28,28,46,.28)),
   scaled down for these smaller in-context buttons. No class names,
   padding, or colors changed — purely the shadow property. */
.btn{padding:14px 28px!important;}
.btn-sm{padding:8px 18px!important;}
.btn-xs{padding:6px 14px!important;}
.btn-o{box-shadow:none!important;}

/* Chip/badge family — already pill-shaped, just tuck the "active"
   state under the same dark-fill-white-text language as .chip.on
   in the concept, for anything that has a clear on/off state. */
.chip-edit.on,.filter-opt.on{background:#1c1c2e!important;color:#fff!important;}

/* ============================================================
   Phase 3 — card-like surfaces, matching the concept's .card:
   cream fill, 16px radius, a single consistent shadow instead of
   each component's own bespoke one. (Previously had an alternating
   tilt in the recipe grid — removed per design note, cards sit flat.) */
.rcard,.ck-card,.friend-card,.potluck-card,.hh-option,.rc{background:rgba(255,253,249,.97)!important;box-shadow:0 0 26px rgba(255,255,255,.9)!important;}
.feed-post{background:rgba(255,253,249,.97)!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(28,28,46,.14)!important;}
.rcard{border-radius:0!important;}
.rcard:hover{transform:translateY(-4px)!important;box-shadow:0 0 36px rgba(255,255,255,1)!important;}

/* Phase 11 — Forkast's .rc match-cards get the same cream/shadow
   treatment as Cookfolio's .rcard, so the two read as one card
   system despite showing different content (match %, have/need
   ingredients vs. header image, country, chef). */
.rc{border-radius:0!important;border:none!important;}
.rc:hover{transform:translateY(-4px)!important;box-shadow:0 0 36px rgba(255,255,255,1)!important;}
/* .rc-sel has its own meaningful "already staged" gradient — restore
   it after the blanket cream rule above, same specificity trap as
   .ck-card.selected below. */
.rc-sel{background:linear-gradient(135deg,#b1f2f5 0%,#d6f9fb 100%)!important;}
/* .potluck-card matches .potluck-new's real border+shadow (was the
   blanket cream/white-glow treatment above, which read as no shadow at
   all against the page's own off-white background) -- same
   specificity trap as .rc-sel above. */
.potluck-card{background:#fff!important;border:1.5px solid rgba(0,0,0,.08)!important;box-shadow:0 10px 30px rgba(28,28,46,.12)!important;}
.ck-card,.friend-card,.potluck-card{border-radius:0!important;}
/* Cookfolio's List view (.ck-card) kept its original pink-bordered,
   8px-accent-edge look while Cards view (.rcard) and Forkast (.rc)
   both moved to the borderless cream-card language — bring List
   into line with the same treatment. */
.ck-card{border:none!important;border-left-width:0!important;}
.ck-card:hover{transform:translateY(-4px)!important;box-shadow:0 0 36px rgba(255,255,255,1)!important;}

/* Recipe card ("Quiet Stack" concept): Save/Steps/Edit/Share/Remove
   consolidated behind one kebab menu, Add-to-Meal-Plan moved to sit
   beside it as the card's single primary action. Card shortened to
   match now that the footer is one row instead of two. */
.rcard{height:340px!important;overflow:visible!important;}
.rcard-add{flex:1;padding:9px 14px;height:44px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:0;background:var(--bg);color:#1c1c2e;font-family:'Jost',sans-serif;font-size:14px;font-weight:700;text-align:center;cursor:pointer;transition:opacity .15s;}
.rcard-add:hover{opacity:.85;}
.rcard-add.on{background:rgba(28,28,46,.12);color:#1c1c2e;}
.vr-plan-btn.on{background:rgba(28,28,46,.12)!important;color:#1c1c2e!important;box-shadow:none!important;}
.rcard-menu{display:none;position:absolute;bottom:calc(100% + 6px);right:0;background:#fff;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.16);padding:6px;min-width:140px;z-index:20;}
.rcard-menu.open{display:block;}

/* Weekly Plan calendar cells grew taller whenever a slot held more
   dishes than its neighbors, since CSS grid rows auto-size to the
   tallest cell — stacking a 2nd/3rd dish in one slot stretched the
   whole row, shifting every other day's box. Lock the row height and
   let overflow (extra items) scroll inside the cell instead. */
.week-grid{grid-auto-rows:96px!important;}
.slot-inner{overflow-y:auto!important;}

/* Staged sidebar shrinks fluidly with the window instead of holding a
   fixed 260px, and the Breakfast/Lunch/Dinner/Snack row labels collapse
   to colored dots once the window gets narrow — same breakpoint the
   rest of the app already uses for its responsive pass. */
.p2p-sidebar-col{width:clamp(140px,20vw,260px)!important;}
@media(max-width:760px){
  .rpill{width:10px!important;height:10px!important;min-width:0!important;padding:0!important;border-radius:50%!important;overflow:hidden;text-indent:-9999px;}
  /* The legend sits in the sidebar, not the cramped grid gutter, so it
     always has room to stay a labeled pill instead of collapsing to a dot. */
  .meal-legend .rpill{width:auto!important;height:auto!important;padding:5px 9px!important;border-radius:0!important;text-indent:0!important;}
  #planner-sub{display:none!important;}
}

/* Filled-slot "+ Add" was a dashed-outline pill matching the empty-slot
   affordance — too much weight for a secondary action on a cell that
   already has content. Plain small grey + instead. */
.slot-add-more{border:none!important;background:transparent!important;font-size:14px!important;line-height:1!important;padding:0 2px!important;color:rgba(28,28,46,.3)!important;}
.slot-add-more:hover{color:rgba(28,28,46,.6)!important;}

/* Recipe names in a filled slot now wrap up to 2 lines instead of
   truncating on one — capped so the slot's fixed height (grid-auto-rows
   above) still holds regardless of name length. */
.slot-item{align-items:flex-start!important;}
.slot-item .sname{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.25;}
.slot-item .slot-item-rm{margin-top:2px;}

/* Forkast's match cards: Add-to-Meal-Plan and Edit consolidated onto
   one footer row (previously Add sat above its own row, Edit sat alone
   below), reusing the same black-pill .rcard-add treatment as
   Cookfolio's card for consistency. Toddler badge removed from the
   card face — it's already shown on click-in (openViewRecipe). */